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 |
| Motion.dev |
motion.dev/llms.txt |
— |
docs, not components |
| ReactBits |
reactbits.dev/llms.txt |
— |
— |
| HeroUI / daisyUI |
heroui.com/llms.txt / daisyui.com/llms.txt |
— |
full libraries, npm install |
| shadcn/ui |
ui.shadcn.com/llms.txt |
via shadcn CLI |
the base layer |
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.
1---2name: design-stack3description: Design Stack — sourcing components from the best galleries4---56# Design Stack — sourcing components from the best galleries78## Core principle910Never 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.1112**Never invent a registry URL.** Every endpoint below was verified 2026-07. If one fails, check `references/` or the fallback column — don't guess.1314## Which gallery for which need1516| Need | Check first | Then |17|---|---|---|18| Charts, dashboards, KPIs | **Bklit UI** | Kibo UI |19| AI interfaces (prompts, chat, voice) | **Kokonut UI** | prompt-kit |20| Landing-page wow (hero, sparkles, beams) | **Aceternity** | Magic UI |21| Text effects, marquees, backgrounds | **Magic UI** | Fancy Components |22| Micro-interactions, small delights | **SmoothUI** | BadtzUI |23| Forms, inputs, app blocks (volume) | **Origin UI** | Kibo UI |24| Playful physics/creative motion | **Fancy Components** | ReactBits |25| CSS-only elements (buttons, loaders) | **Uiverse** (galaxy repo) | — |26| Animation APIs (springs, gestures, scroll) | **Motion.dev** llms.txt | Anime.js via Context7 |2728## Workflow29301. **Shortlist 2–3 galleries** from the table — not just one; compare before installing.312. **Browse the index**: local digests in `references/<gallery>-components.md` (cached catalogs), or fetch the live index URL from the endpoint table.323. **Inspect candidates**: fetch the per-item JSON — `files[].content` holds full source; check `dependencies` and `registryDependencies`.334. **Install**:34 - shadcn-compatible project: `npx shadcn@latest add "<item-url>"`35 - otherwise: copy `files[].content` into the project and adapt (inline `cn`, swap shadcn primitives for plain elements).365. **Adapt to the project's design system** (colors, radius, fonts) but keep animation timing/physics identical — that's where the quality lives.376. **Verify the build** before declaring done.3839## Verified endpoints (2026-07)4041| Gallery | Index | Item pattern | Caveat |42|---|---|---|---|43| Kokonut UI | `kokonutui.com/r/registry.json` (40) | `/r/{name}.json` | needs `motion`, `lucide-react` |44| Bklit UI | `ui.bklit.com/r/registry.json` (56) | `/r/{name}.json` | charts depend on `@visx/*`, chart-utils items |45| Magic UI | `magicui.design/r/registry.json` (247) | `/r/{name}.json` | — |46| Aceternity | `ui.aceternity.com/registry.json` (270) | `/registry/{name}.json` | ⚠️ different path, no `/r/` |47| Origin UI | none (HTML) | `originui.com/r/{name}.json` | discover via site search; names `comp-NN` + semantic |48| Fancy Components | `fancycomponents.dev/r/registry.json` (158) | `/r/{name}.json` | — |49| SmoothUI | `smoothui.dev/r/registry.json` (158) | `/r/{name}.json` | — |50| Kibo UI | `kibo-ui.com/r/registry.json` (41) | `/r/{name}.json` | — |51| BadtzUI | none usable | `badtz-ui.com/r/{name}.json` | names list in `references/badtz-components.md` |52| prompt-kit | — | `prompt-kit.com/c/{name}.json` | ⚠️ `/c/` path; use `www.` (308 otherwise) |53| Cult UI / Motion Primitives | bot-protected (429 to curl) | — | works through `npx shadcn add` CLI, not raw fetch |54| Uiverse | GitHub `uiverse-io/galaxy` | clone + grep locally | CSS/Tailwind snippets, no registry |55| Motion.dev | `motion.dev/llms.txt` | — | docs, not components |56| ReactBits | `reactbits.dev/llms.txt` | — | — |57| HeroUI / daisyUI | `heroui.com/llms.txt` / `daisyui.com/llms.txt` | — | full libraries, npm install |58| shadcn/ui | `ui.shadcn.com/llms.txt` | via shadcn CLI | the base layer |5960## One-time project setup (offer it, don't assume it)6162Registry aliases in `components.json` let the user type `npx shadcn add @kokonutui/ai-prompt`:6364```json65"registries": {66 "@kokonutui": "https://kokonutui.com/r/{name}.json",67 "@bklit": "https://ui.bklit.com/r/{name}.json",68 "@magicui": "https://magicui.design/r/{name}.json",69 "@aceternity": "https://ui.aceternity.com/registry/{name}.json",70 "@originui": "https://originui.com/r/{name}.json",71 "@fancy": "https://www.fancycomponents.dev/r/{name}.json",72 "@smoothui": "https://www.smoothui.dev/r/{name}.json",73 "@kibo": "https://www.kibo-ui.com/r/{name}.json",74 "@promptkit": "https://www.prompt-kit.com/c/{name}.json"75}76```7778MCPs, 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).7980## Common mistakes8182- **Inventing endpoint URLs** — patterns differ per gallery (`/r/`, `/registry/`, `/c/`). Use the table.83- **Checking one gallery only** — the baseline failure mode. Compare 2–3; specialists beat generalists (gauge → Bklit before Magic UI).84- **Giving up on a 429** — Cult UI and Motion Primitives block curl but work via the shadcn CLI.85- **`import { motion } from "framer-motion"`** in new code — modern registries use `motion/react`.86- **Installing without reading `registryDependencies`** — some components pull shadcn primitives (textarea, dropdown) you may need to replace outside shadcn projects.87- **Restyle-everything syndrome** — adapt tokens, never the animation constants.
cold-iq