@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.
- package/README.md +119 -0
- package/bin/install.js +116 -0
- package/commands/sf-add-view.md +21 -0
- package/commands/sf-init.md +16 -0
- package/commands/sf-theme.md +15 -0
- package/commands/sf-view.md +20 -0
- package/package.json +40 -0
- package/recipes/archetype.schema.json +39 -0
- package/recipes/archetypes.json +148 -0
- package/recipes/recipe.schema.json +59 -0
- package/recipes/recipes.json +90 -0
- package/recipes/sections.json +46 -0
- package/recipes/validate.mjs +190 -0
- package/skills/building-storefronts/SKILL.md +178 -0
- package/skills/building-storefronts/references/frontend-integration.md +229 -0
- package/skills/json-render-core/SKILL.md +291 -0
- package/skills/json-render-next/SKILL.md +194 -0
- package/skills/json-render-react/SKILL.md +298 -0
- package/skills/json-render-remotion/SKILL.md +111 -0
- package/skills/json-render-shadcn/SKILL.md +159 -0
- package/skills/json-render-solid/SKILL.md +204 -0
- package/skills/nextjs-shadcn/SKILL.md +303 -0
- package/skills/nextjs-shadcn/references/architecture.md +499 -0
- package/skills/nextjs-shadcn/references/project-setup.md +127 -0
- package/skills/nextjs-shadcn/references/shadcn-platform.md +258 -0
- package/skills/nextjs-shadcn/references/sidebar.md +274 -0
- package/skills/nextjs-shadcn/references/styling.md +555 -0
- package/skills/sf-scaffold/SKILL.md +118 -0
- package/skills/sf-theme-gen/SKILL.md +44 -0
- package/skills/sf-view-gen/SKILL.md +94 -0
- package/skills/shadcn-component-discovery/SKILL.md +273 -0
- package/skills/shadcn-component-discovery/references/registries.md +226 -0
- package/skills/shadcn-theming/SKILL.md +104 -0
- package/skills/shadcn-theming/references/templates/theme-setup.md +109 -0
- package/skills/shadcn-theming/references/theming-guide.md +90 -0
- package/skills/storefront-best-practices/SKILL.md +421 -0
- package/skills/storefront-best-practices/reference/components/breadcrumbs.md +123 -0
- package/skills/storefront-best-practices/reference/components/cart-popup.md +189 -0
- package/skills/storefront-best-practices/reference/components/country-selector.md +298 -0
- package/skills/storefront-best-practices/reference/components/footer.md +112 -0
- package/skills/storefront-best-practices/reference/components/hero.md +241 -0
- package/skills/storefront-best-practices/reference/components/megamenu.md +239 -0
- package/skills/storefront-best-practices/reference/components/navbar.md +397 -0
- package/skills/storefront-best-practices/reference/components/popups.md +221 -0
- package/skills/storefront-best-practices/reference/components/product-card.md +125 -0
- package/skills/storefront-best-practices/reference/components/product-reviews.md +217 -0
- package/skills/storefront-best-practices/reference/components/product-slider.md +174 -0
- package/skills/storefront-best-practices/reference/components/search.md +101 -0
- package/skills/storefront-best-practices/reference/connecting-to-backend.md +391 -0
- package/skills/storefront-best-practices/reference/design.md +388 -0
- package/skills/storefront-best-practices/reference/features/promotions.md +307 -0
- package/skills/storefront-best-practices/reference/features/wishlist.md +230 -0
- package/skills/storefront-best-practices/reference/layouts/account.md +380 -0
- package/skills/storefront-best-practices/reference/layouts/cart.md +316 -0
- package/skills/storefront-best-practices/reference/layouts/checkout.md +486 -0
- package/skills/storefront-best-practices/reference/layouts/home-page.md +264 -0
- package/skills/storefront-best-practices/reference/layouts/order-confirmation.md +231 -0
- package/skills/storefront-best-practices/reference/layouts/product-details.md +527 -0
- package/skills/storefront-best-practices/reference/layouts/product-listing.md +520 -0
- package/skills/storefront-best-practices/reference/layouts/static-pages.md +356 -0
- package/skills/storefront-best-practices/reference/medusa.md +307 -0
- package/skills/storefront-best-practices/reference/mobile-responsiveness.md +183 -0
- package/skills/storefront-best-practices/reference/seo.md +195 -0
- package/templates/app/app/[[...slug]]/page.tsx +17 -0
- package/templates/app/app/[[...slug]]/renderer.tsx +10 -0
- package/templates/app/app/globals.css +101 -0
- package/templates/app/app/layout.tsx +35 -0
- package/templates/app/lib/__STOREFRONT__/catalog.ts +132 -0
- package/templates/app/lib/__STOREFRONT__/handlers.ts +33 -0
- package/templates/app/lib/__STOREFRONT__/registry.tsx +134 -0
- package/templates/app/lib/__STOREFRONT__/runtime.ts +25 -0
- package/templates/app/lib/__STOREFRONT__/spec/home.ts +62 -0
- package/templates/app/lib/__STOREFRONT__/spec/index.ts +59 -0
- package/templates/app/lib/__STOREFRONT__/spec/types.ts +14 -0
- 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.
|