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.

Prerequisites

Install Framer Motion for animations and Lucide for icons:

pnpm add framer-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);
}

Copy the components from components/profile/ to your project. Each component is self-contained and can be copied individually.

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