@thorprovider/create-storefront 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/README.md +119 -0
  2. package/bin/install.js +116 -0
  3. package/commands/sf-add-view.md +21 -0
  4. package/commands/sf-init.md +16 -0
  5. package/commands/sf-theme.md +15 -0
  6. package/commands/sf-view.md +20 -0
  7. package/package.json +40 -0
  8. package/recipes/archetype.schema.json +39 -0
  9. package/recipes/archetypes.json +148 -0
  10. package/recipes/recipe.schema.json +59 -0
  11. package/recipes/recipes.json +90 -0
  12. package/recipes/sections.json +46 -0
  13. package/recipes/validate.mjs +190 -0
  14. package/skills/building-storefronts/SKILL.md +178 -0
  15. package/skills/building-storefronts/references/frontend-integration.md +229 -0
  16. package/skills/json-render-core/SKILL.md +291 -0
  17. package/skills/json-render-next/SKILL.md +194 -0
  18. package/skills/json-render-react/SKILL.md +298 -0
  19. package/skills/json-render-remotion/SKILL.md +111 -0
  20. package/skills/json-render-shadcn/SKILL.md +159 -0
  21. package/skills/json-render-solid/SKILL.md +204 -0
  22. package/skills/nextjs-shadcn/SKILL.md +303 -0
  23. package/skills/nextjs-shadcn/references/architecture.md +499 -0
  24. package/skills/nextjs-shadcn/references/project-setup.md +127 -0
  25. package/skills/nextjs-shadcn/references/shadcn-platform.md +258 -0
  26. package/skills/nextjs-shadcn/references/sidebar.md +274 -0
  27. package/skills/nextjs-shadcn/references/styling.md +555 -0
  28. package/skills/sf-scaffold/SKILL.md +118 -0
  29. package/skills/sf-theme-gen/SKILL.md +44 -0
  30. package/skills/sf-view-gen/SKILL.md +94 -0
  31. package/skills/shadcn-component-discovery/SKILL.md +273 -0
  32. package/skills/shadcn-component-discovery/references/registries.md +226 -0
  33. package/skills/shadcn-theming/SKILL.md +104 -0
  34. package/skills/shadcn-theming/references/templates/theme-setup.md +109 -0
  35. package/skills/shadcn-theming/references/theming-guide.md +90 -0
  36. package/skills/storefront-best-practices/SKILL.md +421 -0
  37. package/skills/storefront-best-practices/reference/components/breadcrumbs.md +123 -0
  38. package/skills/storefront-best-practices/reference/components/cart-popup.md +189 -0
  39. package/skills/storefront-best-practices/reference/components/country-selector.md +298 -0
  40. package/skills/storefront-best-practices/reference/components/footer.md +112 -0
  41. package/skills/storefront-best-practices/reference/components/hero.md +241 -0
  42. package/skills/storefront-best-practices/reference/components/megamenu.md +239 -0
  43. package/skills/storefront-best-practices/reference/components/navbar.md +397 -0
  44. package/skills/storefront-best-practices/reference/components/popups.md +221 -0
  45. package/skills/storefront-best-practices/reference/components/product-card.md +125 -0
  46. package/skills/storefront-best-practices/reference/components/product-reviews.md +217 -0
  47. package/skills/storefront-best-practices/reference/components/product-slider.md +174 -0
  48. package/skills/storefront-best-practices/reference/components/search.md +101 -0
  49. package/skills/storefront-best-practices/reference/connecting-to-backend.md +391 -0
  50. package/skills/storefront-best-practices/reference/design.md +388 -0
  51. package/skills/storefront-best-practices/reference/features/promotions.md +307 -0
  52. package/skills/storefront-best-practices/reference/features/wishlist.md +230 -0
  53. package/skills/storefront-best-practices/reference/layouts/account.md +380 -0
  54. package/skills/storefront-best-practices/reference/layouts/cart.md +316 -0
  55. package/skills/storefront-best-practices/reference/layouts/checkout.md +486 -0
  56. package/skills/storefront-best-practices/reference/layouts/home-page.md +264 -0
  57. package/skills/storefront-best-practices/reference/layouts/order-confirmation.md +231 -0
  58. package/skills/storefront-best-practices/reference/layouts/product-details.md +527 -0
  59. package/skills/storefront-best-practices/reference/layouts/product-listing.md +520 -0
  60. package/skills/storefront-best-practices/reference/layouts/static-pages.md +356 -0
  61. package/skills/storefront-best-practices/reference/medusa.md +307 -0
  62. package/skills/storefront-best-practices/reference/mobile-responsiveness.md +183 -0
  63. package/skills/storefront-best-practices/reference/seo.md +195 -0
  64. package/templates/app/app/[[...slug]]/page.tsx +17 -0
  65. package/templates/app/app/[[...slug]]/renderer.tsx +10 -0
  66. package/templates/app/app/globals.css +101 -0
  67. package/templates/app/app/layout.tsx +35 -0
  68. package/templates/app/lib/__STOREFRONT__/catalog.ts +132 -0
  69. package/templates/app/lib/__STOREFRONT__/handlers.ts +33 -0
  70. package/templates/app/lib/__STOREFRONT__/registry.tsx +134 -0
  71. package/templates/app/lib/__STOREFRONT__/runtime.ts +25 -0
  72. package/templates/app/lib/__STOREFRONT__/spec/home.ts +62 -0
  73. package/templates/app/lib/__STOREFRONT__/spec/index.ts +59 -0
  74. package/templates/app/lib/__STOREFRONT__/spec/types.ts +14 -0
  75. package/templates/app/lib/__STOREFRONT__/state.ts +35 -0
@@ -0,0 +1,94 @@
1
+ ---
2
+ name: sf-view-gen
3
+ description: Add a new view or modify an existing view in a Thor Commerce storefront, selecting block variants and optional sections from this package's recipes
4
+ ---
5
+
6
+ # sf-view-gen
7
+
8
+ Generate or modify a single view, driven by this package's **recipe registry** so storefronts are not identical.
9
+
10
+ Self-contained: never read `projects/electrostore` or machine-global skills.
11
+
12
+ ## Resolving package assets
13
+
14
+ Recipes live **inside the installed package**, not in the target project. Resolve the package root before running the validator:
15
+
16
+ 1. If `.opencode/.create-storefront-root` exists in the target project, read it — the installer writes the absolute package root there.
17
+ 2. Otherwise, if this skill was loaded from a path under `.opencode/skills/sf-view-gen/`, walk upward from there to the package root.
18
+ 3. Run the validator as `node <package-root>/recipes/validate.mjs ...` (do not assume a project-local `recipes/`).
19
+
20
+ If the package root cannot be resolved, STOP and tell the user to re-run the installer.
21
+
22
+ ## Allowed views
23
+ `home`, `product`, `category`, `checkout`, `user-panel`
24
+
25
+ Reject any other name with the full allowed list.
26
+
27
+ ## Recipe registry (the source of variety)
28
+
29
+ - `recipes/recipes.json` — per view: `route`, `loader`, `requiredDataKeys`, `defaultVariants`, `allowedVariants`, `optionalSections`
30
+ - `recipes/sections.json` — optional sections → `elementType`, `variants`, `defaultVariant`, `propsHint`
31
+ - `recipes/archetypes.json` — the **archetype (intent) layer**: per slot (`<view>.<slot>`) a set of named **intents**, each with a `variant` and a `when` usage hint, plus the slot `default` intent
32
+ - `recipes/validate.mjs` — validator. Use it:
33
+ ```bash
34
+ node recipes/validate.mjs list
35
+ node recipes/validate.mjs show <view>
36
+ node recipes/validate.mjs archetypes
37
+ node recipes/validate.mjs resolve <view> <slot> <intent>
38
+ node recipes/validate.mjs validate '<composition-json>'
39
+ ```
40
+
41
+ ## json-render references (consult when authoring element types)
42
+
43
+ When adding a view you register new element `type`s in `catalog.ts` (zod props) and `registry.tsx` (component mapping + action wiring). Consult the vendored references instead of working from memory:
44
+
45
+ - `skills/json-render-core/` — catalog/schema/spec authoring (the shape of a catalog entry and a spec element)
46
+ - `skills/json-render-react/` — registry mapping and action wiring (`defineRegistry`, `Renderer`, `useStateStore`)
47
+
48
+ **Selection rule:** choose an **intent by meaning** from the user's description (never a raw variant ordinal), then resolve the intent to its variant via `recipes/archetypes.json`. The resolved variant must be allowed by the recipe for that slot. Choose optional sections the same way. Never invent an intent, variant, or component. If the description is silent, use the archetype slot `default`.
49
+
50
+ ```bash
51
+ node recipes/validate.mjs resolve home hero showcase # -> StorefrontHero2
52
+ ```
53
+
54
+ ## Stack constraints
55
+ - UI: only `@thorprovider/blocks`
56
+ - Data: only `@thorprovider/adapters` + `@thorprovider/storefronts/commerce`
57
+ - Never `@thorprovider/medusa-extended`
58
+ - No custom blocks without explicit user authorization
59
+ - Every element `type` used in a spec MUST be registered in `catalog.ts` AND `registry.tsx`
60
+
61
+ ## Add-view workflow
62
+
63
+ 1. Parse `$ARGUMENTS` → view name (+ optional description). Validate name. Confirm `lib/<name>/` exists (else suggest `/sf-init`).
64
+ 2. `node recipes/validate.mjs show <view>` — read slots, allowed variants + sections. `node recipes/validate.mjs archetypes` — read slots with their named intents.
65
+ 3. Choose an intent per slot by meaning from the description (defaults if silent), resolve each with `node recipes/validate.mjs resolve <view> <slot> <intent>`, then validate the full composition with `node recipes/validate.mjs validate '<json>'` before writing.
66
+ 4. Write `lib/<name>/spec/<view>.ts` using chosen blocks:
67
+ - product → `ProductOverview`/`ProductCard`/`ReviewRating` variants
68
+ - category → `ProductCategory`/`CategoryFilter`/`ProductCard` variants
69
+ - checkout → `Checkout`/`CheckoutConfirmation` plus cart-backed state
70
+ - user-panel → `AppShell`/`OrderHistory`/`LoginPage`/`SignUpPage` variants
71
+ - Any chosen optional section → add its `elementType` element (from `sections.json`).
72
+ 5. Register new element `type`s in `catalog.ts` (zod props) and `registry.tsx` (map to the blocks component).
73
+ 6. Register the route+loader in `lib/<name>/spec/index.ts` and the loader in `runtime.ts` (data via `@thorprovider/storefronts/commerce`).
74
+ 7. Verify: `pnpm typecheck`; every new `type` present in catalog+registry; no non-blocks UI import; no direct HTTP.
75
+
76
+ ## Modify workflow (`/sf-view`)
77
+
78
+ 1. Parse view name + change. Validate name.
79
+ 2. Read `lib/<name>/spec/<view>.ts` fully.
80
+ 3. Apply ONLY the change. Preserve ids, `type`, untouched `props`, `$state`, `on` wiring, route/loader/catalog/registry.
81
+ 4. If new blocks are needed, choose intents from `archetypes.json`, resolve to allowed variants, and validate before writing.
82
+ 5. Re-run `pnpm typecheck`.
83
+
84
+ ## Generation headers
85
+ Every generated/edited file gets:
86
+ ```
87
+ // Generated by @thorprovider/create-storefront (sf-view-gen) from recipes/<view>
88
+ ```
89
+
90
+ ## Error handling
91
+ - Unknown view → error + allowed list, stop.
92
+ - Missing `lib/<name>/` → suggest `/sf-init`, stop.
93
+ - Undeclared variant/section → reject via `recipes/validate.mjs`, show allowed options.
94
+ - Type errors → fix before finishing; never leave broken specs.
@@ -0,0 +1,273 @@
1
+ ---
2
+ name: shadcn-component-discovery
3
+ description: Discover shadcn-compatible components and registries across the entire ecosystem before writing any custom UI. Use PROACTIVELY before building tables, forms, modals, animations, dashboards, auth pages, or any UI component. Use when the user says "find a component for...", "is there something for...", "search registries", "what exists for...", or asks about shadcn blocks, Magic UI, Aceternity, ReUI, Animate UI, DiceUI, Tailark, AI Elements, or any other shadcn-compatible registry. Complements the official shadcn skill by surfacing registries beyond the user's configured `components.json` — use when exploring what's available to add, not just what's already installed.
4
+ ---
5
+
6
+ # shadcn Component Discovery
7
+
8
+ Surface existing components from across the shadcn ecosystem — including registries the user hasn't configured yet — before spending effort on custom implementations.
9
+
10
+ ## How This Complements the Official shadcn Skill
11
+
12
+ The official `shadcn` skill (shipped with CLI v4) searches the registries declared in the user's `components.json`. That's the right tool once the user has decided which registries to use.
13
+
14
+ This skill fills the *upstream* gap: ecosystem-wide awareness. It helps the user find and choose registries they may not yet have configured — Magic UI for animations, Aceternity for hero sections, AI Elements for chat interfaces, ElevenLabs UI for voice components, and so on. Use this skill for "what exists out there"; let the official skill handle "install this thing I know about."
15
+
16
+ When both skills apply, this one runs first (discovery), then the official skill takes over for installation and project-aware work.
17
+
18
+ ## Core Principle
19
+
20
+ Search before building. Most UI needs have been solved in the shadcn ecosystem. The cost of a 10-second registry check is almost always less than custom-building something that already exists.
21
+
22
+ ## When to Trigger
23
+
24
+ **Proactive triggers** (activate before writing any component code):
25
+
26
+ - User asks to build a table, form, modal, sidebar, dashboard, auth page, landing section, animation, carousel, chart, or any standard UI pattern
27
+ - User describes a feature that implies UI (e.g. "add user accounts management" → table; "let users pick a date range" → date picker)
28
+ - User mentions building something "like X" where X is a common pattern
29
+
30
+ **Explicit triggers** (user directly requests search):
31
+
32
+ - "Find a component for..."
33
+ - "Is there a shadcn component for..."
34
+ - "Search registries for..."
35
+ - "What exists for..."
36
+ - "Any good [category] components?"
37
+ - Direct mentions of specific registries (@animate-ui, Magic UI, Aceternity, Tailark, etc.)
38
+
39
+ ## Workflow
40
+
41
+ ### Step 1: Clarify the Need
42
+
43
+ Before searching, confirm:
44
+
45
+ - **Functionality**: What must it do? (e.g. sortable + filterable + paginated table)
46
+ - **Style**: Animated, minimal, accessible-first, dense, brutalist?
47
+ - **Constraints**: Must support keyboard nav? Drag-drop? Mobile-first? SSR?
48
+
49
+ A two-sentence clarification beats five searches with the wrong query.
50
+
51
+ ### Step 2: Search
52
+
53
+ Three paths depending on tool availability. The **official shadcn MCP** is strongly preferred when the user has a shadcn project — it returns real results with code examples.
54
+
55
+ #### Path A: Official shadcn MCP (preferred)
56
+
57
+ If the shadcn MCP server is running (configured via `npx shadcn@latest mcp init` or equivalent), use its tools directly:
58
+
59
+ ```text
60
+ 1. mcp__shadcn__search_items_in_registries
61
+ - registries: ["@shadcn", "@blocks", "@animate-ui", "@reui", "@diceui"]
62
+ - query: "<search term>"
63
+ - limit: 10
64
+
65
+ 2. For promising results, get full details:
66
+ mcp__shadcn__view_items_in_registries
67
+ - items: ["@registry/component-name", "@registry/other"]
68
+
69
+ 3. For implementation examples:
70
+ mcp__shadcn__get_item_examples_from_registries
71
+ - query: "<component>-demo"
72
+
73
+ 4. For the install command:
74
+ mcp__shadcn__get_add_command_for_items
75
+ - items: ["@registry/chosen-component"]
76
+ ```
77
+
78
+ The MCP only searches registries configured in the user's `components.json`. If the user is looking for something specialized, suggest adding a relevant registry to `components.json` first — see `references/registries.md` for recommendations and configuration snippets.
79
+
80
+ #### Path B: shadcn CLI (no MCP, but shadcn project)
81
+
82
+ If there's a `components.json` but no MCP is configured, use the CLI commands that shipped with CLI v3:
83
+
84
+ ```bash
85
+ # Search across configured registries
86
+ npx shadcn@latest search "<term>"
87
+
88
+ # Preview a component before installing
89
+ npx shadcn@latest view @registry/component-name
90
+
91
+ # List everything available in a registry
92
+ npx shadcn@latest list @registry
93
+ ```
94
+
95
+ Suggest adding the MCP for better agent integration: `npx shadcn@latest mcp init`.
96
+
97
+ #### Path C: No project context
98
+
99
+ If there's no shadcn project yet, or the user is just exploring:
100
+
101
+ - Recommend registries from `references/registries.md` based on their described need
102
+ - Link directly to the registry's website so they can browse
103
+ - Offer to help set up a shadcn project (`npx shadcn@latest init`) once they've picked direction
104
+
105
+ ### Step 3: Present Findings
106
+
107
+ Match the response format to the context. Keep it scannable — the user is about to make a decision, not read an essay.
108
+
109
+ #### Proactive check (during build flow)
110
+
111
+ When the user didn't explicitly ask to search but you searched anyway:
112
+
113
+ ```markdown
114
+ Before building custom, I found existing options:
115
+
116
+ 1. **@registry/component-name** — [one-line description]
117
+ 2. **@registry/alternative** — [one-line description]
118
+
119
+ Want me to install one, or build custom?
120
+ ```
121
+
122
+ Keep it under five lines. The user is in flow; don't derail them.
123
+
124
+ #### Explicit search (user asked)
125
+
126
+ ```markdown
127
+ ## Results for "<query>"
128
+
129
+ **Top matches:**
130
+
131
+ ### @registry/component-name ⭐
132
+ [What it does in one sentence]
133
+ - Fits because: [specific to their need]
134
+ - Install: `npx shadcn@latest add @registry/component-name`
135
+
136
+ ### @registry/alternative
137
+ [What it does in one sentence]
138
+ - Fits because: [specific to their need]
139
+ - Install: `npx shadcn@latest add @registry/alternative`
140
+
141
+ ---
142
+ Install [1] or [2], see more results, view code example, or build custom?
143
+ ```
144
+
145
+ #### Comparison (multiple good options, choice matters)
146
+
147
+ Use a short table when 3+ options are genuinely viable and trade off differently. Follow with a recommendation and the install command for the recommended one. Don't table-ify everything — it's heavier than plain prose and should earn its place.
148
+
149
+ ### Step 4: Execute the Choice
150
+
151
+ - **Install chosen**: Run the `add` command, then customize via props / composition as needed
152
+ - **See more**: Return additional matches, continue pagination
153
+ - **View code**: Fetch example via `get_item_examples_from_registries` or the registry's demo URL
154
+ - **Build custom**: Proceed — but reference the closest existing component for composition patterns (CVA, `cn()`, `data-slot`, semantic tokens)
155
+
156
+ ## Search Strategy
157
+
158
+ ### Effective Query Terms
159
+
160
+ Short, concrete nouns work best. Keep queries to 1–3 words.
161
+
162
+ | Looking for… | Try searching… |
163
+ |---|---|
164
+ | Data display | `table`, `data-grid`, `list` |
165
+ | User input | `form`, `input`, `field`, `select`, `combobox` |
166
+ | Navigation | `sidebar`, `nav`, `menu`, `tabs`, `breadcrumb` |
167
+ | Feedback | `toast`, `sonner`, `alert`, `notification` |
168
+ | Overlays | `dialog`, `modal`, `sheet`, `popover`, `drawer` |
169
+ | Media | `carousel`, `gallery`, `image` |
170
+ | Animation | `animate`, `motion`, `transition` |
171
+ | Layout | `card`, `section`, `hero`, `grid`, `stack` |
172
+ | Date/time | `calendar`, `date-picker`, `date-range` |
173
+
174
+ ### Registry Specialties (Quick Pick)
175
+
176
+ | Need | Check first |
177
+ |---|---|
178
+ | Core UI primitives | `@shadcn` |
179
+ | Page sections, pre-built blocks | `@blocks`, Tailark, HextaUI |
180
+ | Data grids, advanced tables | `@reui` |
181
+ | Animated components | `@animate-ui`, Magic UI, Aceternity UI |
182
+ | AI / chat interfaces | AI Elements, assistant-ui |
183
+ | Accessibility-first (React Aria) | `@diceui`, JollyUI, Intent UI |
184
+ | Voice / audio | ElevenLabs UI |
185
+ | Marketing / landing pages | Tailark, Eldora UI |
186
+ | Style variants (brutalist, retro, glass) | See `references/registries.md` |
187
+
188
+ For the full catalog including URLs, configuration snippets, and registry specialties, see [references/registries.md](references/registries.md).
189
+
190
+ ## Response Requirements
191
+
192
+ Every discovery response should surface:
193
+
194
+ 1. **What was searched** — the query used
195
+ 2. **Top 2–3 recommendations** — registry-qualified name, one-line description, why it fits
196
+ 3. **Install command** — ready to copy
197
+ 4. **A recommendation** — which to pick, when there's a clear fit
198
+ 5. **Next-step options** — install, view code, see more, build custom
199
+
200
+ Skip anything beyond this unless the user asks. Brevity respects flow.
201
+
202
+ ## Examples
203
+
204
+ ### Proactive check
205
+
206
+ **User:** "Add a table showing user accounts with sorting"
207
+
208
+ **Response:**
209
+
210
+ > Before building custom, I found existing options:
211
+ >
212
+ > 1. **@reui/data-grid-table** — Full-featured grid with sorting, filtering, pagination
213
+ > 2. **@shadcn/table** — Unstyled primitives (pair with TanStack Table for sorting)
214
+ >
215
+ > `@reui/data-grid-table` looks like the fit — install it?
216
+
217
+ ### Explicit search
218
+
219
+ **User:** "Find me an animated accordion"
220
+
221
+ **Response:**
222
+
223
+ > ## Results for "animated accordion"
224
+ >
225
+ > ### @animate-ui/components-base-accordion ⭐
226
+ > Accordion with smooth enter/exit transitions built on Motion.
227
+ > - Fits because: Animation is built-in, accessible, keyboard nav included
228
+ > - Install: `npx shadcn@latest add @animate-ui/components-base-accordion`
229
+ >
230
+ > ### @shadcn/accordion
231
+ > Standard Radix-based accordion, unanimated by default.
232
+ > - Fits because: Lighter dependency footprint; you add your own motion
233
+ > - Install: `npx shadcn@latest add @shadcn/accordion`
234
+ >
235
+ > ---
236
+ > Install animated [1], install plain [2], or see more?
237
+
238
+ ### No good match
239
+
240
+ **User:** "Find a component for visualizing git commit lineage"
241
+
242
+ **Response:**
243
+
244
+ > ## Results for "git commit lineage"
245
+ >
246
+ > No directly matching components in the shadcn ecosystem. Closest adjacencies:
247
+ > - `@reui/tree` — tree visualizations (could adapt)
248
+ > - `@shadcn/chart` — generic charting (Recharts-based)
249
+ >
250
+ > This is a custom build. Want me to sketch an approach using one of these as a foundation, or look at non-shadcn libraries like `@gitgraph/react`?
251
+
252
+ ## Best Practices
253
+
254
+ **Do:**
255
+ - Search before writing component code — always
256
+ - Surface 2–3 options, not 10
257
+ - Explain *why* each fits the specific need
258
+ - Include the install command, not just the name
259
+ - Recommend when the choice is clear
260
+
261
+ **Don't:**
262
+ - Skip searching because "it's faster to build" (it usually isn't)
263
+ - Dump the full search-result list — curate
264
+ - Present registries the user hasn't configured without mentioning the `components.json` step
265
+ - Recommend unmaintained or abandoned registries (check `references/registries.md` for current status)
266
+
267
+ ## Resources
268
+
269
+ - **Registry catalog**: [references/registries.md](references/registries.md)
270
+ - **Official shadcn docs**: https://ui.shadcn.com
271
+ - **Official shadcn MCP docs**: https://ui.shadcn.com/docs/mcp
272
+ - **Registry browser**: https://registry.directory
273
+ - **Component index**: https://shadcnregistry.com
@@ -0,0 +1,226 @@
1
+ # shadcn-Compatible Registry Catalog
2
+
3
+ Curated catalog of registries that work with the shadcn CLI and MCP, organized by specialty. Recommendations here are for narrowing the field quickly — for an exhaustive live list, see the canonical aggregator at [shadcn.io/awesome/registries](https://www.shadcn.io/awesome/registries).
4
+
5
+ ## Core Registries
6
+
7
+ Well-maintained registries that cover most project needs. Start here.
8
+
9
+ ### @shadcn — Official primitives
10
+ **URL:** [ui.shadcn.com](https://ui.shadcn.com)
11
+ **Focus:** Core UI primitives built on Radix or Base UI
12
+ **Best for:** Buttons, inputs, cards, dialogs, tables, the foundational layer of any project
13
+
14
+ ### @blocks — Official blocks
15
+ **URL:** [ui.shadcn.com/blocks](https://ui.shadcn.com/blocks)
16
+ **Focus:** Pre-built page sections using official primitives
17
+ **Best for:** Dashboards, auth pages, sidebars, settings layouts — production-ready starting points
18
+
19
+ ### @reui
20
+ **URL:** [reui.io](https://reui.io)
21
+ **Focus:** Advanced components and full app templates
22
+ **Best for:** Data grids, complex forms, admin panels, full page templates beyond basic primitives
23
+
24
+ ### @animate-ui
25
+ **URL:** [animate-ui.com](https://animate-ui.com)
26
+ **Focus:** Animated components built with Motion (formerly Framer Motion)
27
+ **Best for:** Transitions, micro-interactions, animated backgrounds, polished UI
28
+
29
+ ### @aceternity
30
+ **URL:** [ui.aceternity.com](https://ui.aceternity.com)
31
+ **Focus:** Effect-heavy animated components and landing page elements
32
+ **Best for:** Hero sections, 3D cards, spotlight effects, visually striking marketing pages
33
+
34
+ ### @diceui
35
+ **URL:** [diceui.com](https://diceui.com)
36
+ **Focus:** Accessibility-first components (React Aria based)
37
+ **Best for:** Enterprise apps, WCAG-compliant projects, keyboard-heavy UIs
38
+
39
+ ---
40
+
41
+ ## Specialty Registries
42
+
43
+ ### AI & Chat Interfaces
44
+
45
+ | Registry | Focus | URL |
46
+ |---|---|---|
47
+ | AI Elements | Radix-style primitives for AI chat, message threads, streaming | [aielements.dev](https://aielements.dev) |
48
+ | assistant-ui | AI assistant interfaces with backend adapters (AI SDK, LangGraph, Mastra) | [assistant-ui.com](https://assistant-ui.com) |
49
+ | Manifest UI | ChatGPT-style application patterns | [manifest-ui.com](https://manifest-ui.com) |
50
+
51
+ **Search terms:** `chat`, `message`, `conversation`, `ai`, `assistant`, `streaming`, `thread`
52
+
53
+ ### Animation & Motion
54
+
55
+ | Registry | Focus | URL |
56
+ |---|---|---|
57
+ | Magic UI | Animated components, especially landing-page focused | [magicui.design](https://magicui.design) |
58
+ | Cult UI | Design-engineer animations and interactions | [cult-ui.com](https://cult-ui.com) |
59
+ | Motion Primitives | Low-level motion building blocks | [motion-primitives.com](https://motion-primitives.com) |
60
+ | Kokonut UI | Stylized animated UI components | [kokonutui.com](https://kokonutui.com) |
61
+
62
+ **Search terms:** `animate`, `motion`, `transition`, `hover`, `entrance`, `particles`
63
+
64
+ ### Marketing & Landing Pages
65
+
66
+ | Registry | Focus | URL |
67
+ |---|---|---|
68
+ | Tailark | Marketing-focused blocks | [tailark.com](https://tailark.com) |
69
+ | Shadcnblocks | Premium block library with 1000+ blocks and templates (paid) | [shadcnblocks.com](https://shadcnblocks.com) |
70
+ | Eldora UI | Landing page components | [eldoraui.com](https://eldoraui.com) |
71
+ | HextaUI | Extended blocks and components | [hextaui.com](https://hextaui.com) |
72
+
73
+ **Search terms:** `hero`, `cta`, `pricing`, `features`, `testimonial`, `landing`
74
+
75
+ ### Data & Tables
76
+
77
+ | Registry | Focus | URL |
78
+ |---|---|---|
79
+ | @reui | Advanced data grids with sorting/filtering/DnD | [reui.io](https://reui.io) |
80
+
81
+ **Search terms:** `table`, `data-grid`, `column`, `sort`, `filter`, `pagination`, `virtualized`
82
+
83
+ **Note:** For very large or complex tables, `@shadcn/table` + TanStack Table is often the better path than a pre-built grid. The shadcn Data Table docs cover this pattern.
84
+
85
+ ### Forms & Validation
86
+
87
+ | Registry | Focus | URL |
88
+ |---|---|---|
89
+ | @shadcn | Core form primitives (`form`, `input`, `field`, `field-group`, `input-group`) | [ui.shadcn.com](https://ui.shadcn.com) |
90
+ | Shadcn Form Builder | Form-generation utilities | [shadcn-form-builder.vercel.app](https://shadcn-form-builder.vercel.app) |
91
+
92
+ **Search terms:** `form`, `input`, `field`, `validation`, `submit`
93
+
94
+ ### Voice & Audio
95
+
96
+ | Registry | Focus | URL |
97
+ |---|---|---|
98
+ | ElevenLabs UI | Voice agents, audio players, waveform visualizations | [elevenlabs.io](https://elevenlabs.io) |
99
+
100
+ **Search terms:** `audio`, `voice`, `waveform`, `player`, `orb`
101
+
102
+ ### Style Variants
103
+
104
+ | Registry | Style | URL |
105
+ |---|---|---|
106
+ | 8bitcn | Retro 8-bit pixel style | [8bitcn.com](https://8bitcn.com) |
107
+ | RetroUI | Neobrutalism | [retroui.dev](https://retroui.dev) |
108
+ | Neobrutalism UI | Bold brutalist aesthetic | [neobrutalism.dev](https://neobrutalism.dev) |
109
+
110
+ **Search terms:** `retro`, `brutalist`, `glass`, `pixel`, `8bit`
111
+
112
+ ### Accessibility-First
113
+
114
+ | Registry | Focus | URL |
115
+ |---|---|---|
116
+ | JollyUI | React Aria based | [jollyui.dev](https://jollyui.dev) |
117
+ | Intent UI | Accessible, customizable | [intent-ui.com](https://intent-ui.com) |
118
+ | Kibo UI | Composable, accessible patterns | [kibo-ui.com](https://kibo-ui.com) |
119
+
120
+ **Search terms:** `accessible`, `aria`, `a11y`, `keyboard`
121
+
122
+ ### Icons
123
+
124
+ | Registry | Focus | URL |
125
+ |---|---|---|
126
+ | pqoqubbw/icons | Animated Lucide icons | [icons.pqoqubbw.dev](https://icons.pqoqubbw.dev) |
127
+
128
+ **Search terms:** `icon`, `animated-icon`, `lucide`
129
+
130
+ ---
131
+
132
+ ## Quick-Pick by Project Type
133
+
134
+ | Building… | Start with |
135
+ |---|---|
136
+ | SaaS dashboard | `@shadcn`, `@blocks`, `@reui` |
137
+ | Marketing site | Tailark, Aceternity, Magic UI |
138
+ | AI application | AI Elements, assistant-ui, `@animate-ui` |
139
+ | Admin panel | `@reui`, `@blocks`, `@diceui` |
140
+ | E-commerce | `@shadcn`, `@blocks`, `@reui` |
141
+ | Portfolio | Aceternity, Magic UI, Cult UI |
142
+ | Enterprise app | `@diceui`, JollyUI, `@shadcn` |
143
+ | Voice / audio app | ElevenLabs UI, `@shadcn` |
144
+
145
+ ---
146
+
147
+ ## Configuring Registries
148
+
149
+ Since shadcn CLI 3.0, registries are declared with namespaces in `components.json` using a `{name}` URL template:
150
+
151
+ ```json
152
+ {
153
+ "registries": {
154
+ "@animate-ui": "https://animate-ui.com/r/{name}.json",
155
+ "@aceternity": "https://ui.aceternity.com/registry/{name}.json",
156
+ "@reui": "https://reui.io/r/{name}.json",
157
+ "@magicui": "https://magicui.design/r/{name}.json"
158
+ }
159
+ }
160
+ ```
161
+
162
+ For each registry, check the registry's own docs for the exact URL — templates occasionally differ. Once registered, install with `npx shadcn@latest add @namespace/component-name`.
163
+
164
+ ### Authenticated Registries
165
+
166
+ Paid or private registries take a config object with headers:
167
+
168
+ ```json
169
+ {
170
+ "registries": {
171
+ "@shadcnblocks": {
172
+ "url": "https://shadcnblocks.com/r/{name}.json",
173
+ "headers": {
174
+ "Authorization": "Bearer ${SHADCNBLOCKS_API_KEY}"
175
+ }
176
+ }
177
+ }
178
+ }
179
+ ```
180
+
181
+ The `${ENV_VAR}` syntax reads from the environment at CLI/MCP invocation time. Never commit raw tokens.
182
+
183
+ ---
184
+
185
+ ## Discovery Commands (CLI)
186
+
187
+ shadcn CLI ships search and discovery commands that complement MCP-based discovery:
188
+
189
+ ```bash
190
+ # Search configured registries
191
+ npx shadcn@latest search "data table"
192
+
193
+ # Preview a component before installing
194
+ npx shadcn@latest view @reui/data-grid-table
195
+
196
+ # List everything in a registry
197
+ npx shadcn@latest list @animate-ui
198
+
199
+ # Get documentation and examples for an installed component
200
+ npx shadcn@latest docs combobox
201
+ ```
202
+
203
+ ---
204
+
205
+ ## Browsing Registries Manually
206
+
207
+ When the MCP or CLI isn't available (or the user wants to browse visually):
208
+
209
+ - **[shadcn.io/awesome/registries](https://www.shadcn.io/awesome/registries)** — Canonical aggregator, maintained alongside the docs
210
+ - **[registry.directory](https://registry.directory)** — Third-party registry browser
211
+ - **[shadcnregistry.com](https://shadcnregistry.com)** — Searchable component index across registries
212
+ - **[ui.shadcn.com/blocks](https://ui.shadcn.com/blocks)** — Official blocks gallery
213
+
214
+ Each registry's own site typically has demos and copy-pasteable snippets.
215
+
216
+ ---
217
+
218
+ ## Notes on Registry Health
219
+
220
+ Registry quality and maintenance varies. When recommending a registry, favor:
221
+
222
+ - Registries referenced on the official shadcn.io/awesome list (signals active maintenance)
223
+ - Registries with clear `{name}.json` URL schemas (signals MCP/CLI compatibility)
224
+ - Registries with demos and example code (signals commitment to usability)
225
+
226
+ Avoid recommending registries without recent updates, without clear documentation, or with broken install flows. When in doubt, fall back to `@shadcn` + `@blocks` + build custom.