Installation

Chocolate UI items are installed through the shadcn CLI. You need a project on Tailwind v4 with a components.json.

1. Register the @chocolate namespace

Add this to components.json:

{
  "registries": {
    "@chocolate": {
      "url": "https://api.chocolateui.com/r/{name}.json",
      "headers": { "Authorization": "Bearer ${CHOCOLATE_LICENSE_KEY}" }
    }
  }
}

Free items ignore the header. Pro items need the key from your dashboard.

2. Add the theme

Download the token file and import it right after Tailwind in your global CSS:

curl https://api.chocolateui.com/theme.css -o app/chocolate.css

@import "tailwindcss";
@import "./chocolate.css";

The file only defines CSS variables (--primary, --chart-1…), keyframes and a few utilities (bg-grid, glass, mask-fade-x). It does not override your existing shadcn components.

3. Install items

npx shadcn@latest add @chocolate/hero-01 @chocolate/spotlight-card

Files land in components/blocks, components/chocolate, components/ui, hooks and lib. Dependencies (motion, radix-ui, lucide-react, tw-animate-css) are installed for you.

Or use the Chocolate CLI

npx chocolate-ui init      # registry + theme
npx chocolate-ui add hero-01

Frameworks

Blocks are plain React: Next.js (App Router or Pages), Remix / React Router, Astro islands, Vite SPAs all work. Links are <a href>; swap them for your router's Link if you want client-side transitions.