AI Summary

This guide covers the fastest path to install KiteUI, configure design tokens, and start shipping reusable React + Tailwind UI for SaaS dashboards, portals, and internal tools.

Quick start (CLI)

The recommended flow is the interactive setup command. It installs dependencies, adds components, and applies a theme. Full reference: CLI docs.

pnpm add kiteuikit@latest -D
npx kiteuikit setup

One-off: npx kiteuikit@latest setup. Scaffold only: npx kiteuikit init. Add components later: npx kiteuikit add bubble-card.

Prerequisites

Install Motion for animations and Lucide for icons:

pnpm add motion lucide-react

Add the KiteUI color tokens to your globals.css:

@theme inline {
  --color-bubble-pink: oklch(0.95 0.03 350);
  --color-bubble-sky: oklch(0.95 0.03 220);
  --color-bubble-mint: oklch(0.95 0.03 160);
  --color-bubble-peach: oklch(0.95 0.03 60);
  --color-bubble-lavender: oklch(0.95 0.03 280);
}

Use the CLI to copy components into components/profile/, or copy source files manually from this repo.

npx kiteuikit add bubble-card profile-avatar
npx kiteuikit add --all

Import components from the barrel file:

import {
  BubbleCard,
  ProfileAvatar,
  SocialLinkButton,
  ThumbnailScroller,
  DynamicIsland
} from "@/components/profile"

File Structure

components/
├── profile/
│   ├── index.ts              # Barrel exports
│   ├── bubble-card.tsx       # Base card
│   ├── profile-avatar.tsx    # Avatar component
│   ├── profile-header.tsx    # Full header
│   ├── social-link-button.tsx
│   ├── thumbnail-scroller.tsx
│   ├── dynamic-island.tsx
│   ├── bubble-slider.tsx
│   ├── sports-card.tsx
│   ├── store-product-card.tsx
│   ├── link-tree.tsx
│   ├── stats-widget.tsx
│   ├── section-header.tsx
│   └── influencer-badge.tsx
└── ui/                       # shadcn base

AI Editor Rules

The library includes rules files for popular AI-powered editors:

Related pages