Chocolate UI

Animated, accessible React blocks and components that drop into any shadcn/ui project. Tailwind v4, motion/react, Radix primitives, OKLCH tokens. Copy the source, own the code.

What's inside

  • Blocks — complete page sections (hero, pricing, testimonials, FAQ, footer, navbar, bento, timeline…). Every heading, paragraph and CTA is a prop with a real default.
  • Components — animated building blocks: reveal, marquee, spotlight card, border beam, text effects, backgrounds, dock, beams, globe.
  • Primitives — the shadcn set, tuned with springs and layout animations.
  • MCP server — so Claude Code, Cursor and friends search, read and compose with real blocks.

Three ways in

  1. npx shadcn@latest add @chocolate/hero-01 after a one-time registry config — see Installation.
  2. npx chocolate-ui add hero-01 — our CLI, which also handles the theme and your license.
  3. Ask your AI: connect the MCP server and say "build me a pricing page with Chocolate UI".

Principles

  • Motion with intent. Entrances reveal structure, hover states give feedback, nothing loops for the sake of it. All of it respects prefers-reduced-motion.
  • Tokens, not colors. Switch the whole library to your brand from the theme customizer.
  • Readable source. Files are 80–260 lines, no clever abstractions, so you can edit them after pasting.