| name | design-stack |
| description | Use when the user wants a polished UI component, animation, chart, or design pattern for a web app and it could come from an existing design gallery instead of being written from scratch — or when they ask how to browse, connect, or install from component libraries (shadcn registries, Kokonut UI, Magic UI, Aceternity, Bklit, Origin UI, Uiverse, Motion.dev, ReactBits…). Triggers: "add an animated X", "make this look better", "find a component for", "design gallery", "shadcn registry", "install component", "AI slop". |
Design Stack — sourcing components from the best galleries
Core principle
Never write a premium component from scratch before checking the galleries. The best design libraries are machine-readable: their registries serve full component source as JSON. Fetch real source, adapt it — don't reinvent or hallucinate it.
Never invent a registry URL. Every endpoint below was verified 2026-07. If one fails, check references/ or the fallback column — don't guess.
Which gallery for which need
| Need | Check first | Then |
|---|
| Charts, dashboards, KPIs | Bklit UI | Kibo UI |
| AI interfaces (prompts, chat, voice) | Kokonut UI | prompt-kit |
| Landing-page wow (hero, sparkles, beams) | Aceternity | Magic UI |
| Text effects, marquees, backgrounds | Magic UI | Fancy Components |
| Micro-interactions, small delights | SmoothUI | BadtzUI |
| Forms, inputs, app blocks (volume) | Origin UI | Kibo UI |
| Playful physics/creative motion | Fancy Components | ReactBits |
| CSS-only elements (buttons, loaders) | Uiverse (galaxy repo) | — |
| Animation APIs (springs, gestures, scroll) | Motion.dev llms.txt | Anime.js via Context7 |
Workflow
- Shortlist 2–3 galleries from the table — not just one; compare before installing.
- Browse the index: local digests in
references/<gallery>-components.md (cached catalogs), or fetch the live index URL from the endpoint table.
- Inspect candidates: fetch the per-item JSON —
files[].content holds full source; check dependencies and registryDependencies.
- Install:
- shadcn-compatible project:
npx shadcn@latest add "<item-url>"
- otherwise: copy
files[].content into the project and adapt (inline cn, swap shadcn primitives for plain elements).
- Adapt to the project's design system (colors, radius, fonts) but keep animation timing/physics identical — that's where the quality lives.
- Verify the build before declaring done.
Verified endpoints (2026-07)
| Gallery | Index | Item pattern | Caveat |
|---|
| Kokonut UI | kokonutui.com/r/registry.json (40) | /r/{name}.json | needs motion, lucide-react |
| Bklit UI | ui.bklit.com/r/registry.json (56) | /r/{name}.json | charts depend on @visx/*, chart-utils items |
| Magic UI | magicui.design/r/registry.json (247) | /r/{name}.json | — |
| Aceternity | ui.aceternity.com/registry.json (270) | /registry/{name}.json | ⚠️ different path, no /r/ |
| Origin UI | none (HTML) | originui.com/r/{name}.json | discover via site search; names comp-NN + semantic |
| Fancy Components | fancycomponents.dev/r/registry.json (158) | /r/{name}.json | — |
| SmoothUI | smoothui.dev/r/registry.json (158) | /r/{name}.json | — |
| Kibo UI | kibo-ui.com/r/registry.json (41) | /r/{name}.json | — |
| BadtzUI | none usable | badtz-ui.com/r/{name}.json | names list in references/badtz-components.md |
| prompt-kit | — | prompt-kit.com/c/{name}.json | ⚠️ /c/ path; use www. (308 otherwise) |
| Cult UI / Motion Primitives | bot-protected (429 to curl) | — | works through npx shadcn add CLI, not raw fetch |
| Uiverse | GitHub uiverse-io/galaxy | clone + grep locally | CSS/Tailwind snippets, no registry |
|
One-time project setup (offer it, don't assume it)
Registry aliases in components.json let the user type npx shadcn add @kokonutui/ai-prompt:
"registries": {
"@kokonutui": "https://kokonutui.com/r/{name}.json",
"@bklit": "https://ui.bklit.com/r/{name}.json",
"@magicui": "https://magicui.design/r/{name}.json",
"@aceternity": "https://ui.aceternity.com/registry/{name}.json",
"@originui": "https://originui.com/r/{name}.json",
"@fancy": "https://www.fancycomponents.dev/r/{name}.json",
"@smoothui": "https://www.smoothui.dev/r/{name}.json",
"@kibo": "https://www.kibo-ui.com/r/{name}.json",
"@promptkit": "https://www.prompt-kit.com/c/{name}.json"
}
MCPs, if the user wants persistent connections: claude mcp add shadcn -- npx shadcn@latest mcp (search/install across configured registries) and claude mcp add context7 -- npx -y @upstash/context7-mcp (live docs for Anime.js, GSAP, any lib).
Common mistakes
- Inventing endpoint URLs — patterns differ per gallery (
/r/, /registry/, /c/). Use the table.
- Checking one gallery only — the baseline failure mode. Compare 2–3; specialists beat generalists (gauge → Bklit before Magic UI).
- Giving up on a 429 — Cult UI and Motion Primitives block curl but work via the shadcn CLI.
import { motion } from "framer-motion" in new code — modern registries use motion/react.- Installing without reading
registryDependencies — some components pull shadcn primitives (textarea, dropdown) you may need to replace outside shadcn projects.
- Restyle-everything syndrome — adapt tokens, never the animation constants.
