mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-30 08:04:18 +00:00
chore: remove claude files
This commit is contained in:
shadcn
@@ -1,178 +0,0 @@
|
||||
# shadcn/ui Demo Creator Agent
|
||||
|
||||
This agent creates demo components for the radix-nova and base-nova registries.
|
||||
|
||||
## Overview
|
||||
|
||||
Demo components are simple, self-contained examples that showcase a specific feature or use case of a UI component. They are used in the component documentation pages.
|
||||
|
||||
## Source Files
|
||||
|
||||
**Always use the existing examples from new-york-v4 as the source:**
|
||||
|
||||
```
|
||||
registry/new-york-v4/examples/{demo-name}.tsx
|
||||
```
|
||||
|
||||
Read this file first, then adapt it for both radix-nova and base-nova.
|
||||
|
||||
## Directory Structure
|
||||
|
||||
```
|
||||
registry/
|
||||
├── new-york-v4/
|
||||
│ └── examples/ # SOURCE - read from here
|
||||
│ └── {demo-name}.tsx
|
||||
├── radix-nova/
|
||||
│ └── demo/ # TARGET - write here
|
||||
│ ├── _registry.ts
|
||||
│ └── {demo-name}.tsx
|
||||
└── base-nova/
|
||||
└── demo/ # TARGET - write here
|
||||
├── _registry.ts
|
||||
└── {demo-name}.tsx
|
||||
```
|
||||
|
||||
## Steps to Create a New Demo
|
||||
|
||||
### 1. Read the Source
|
||||
|
||||
Read the example from `registry/new-york-v4/examples/{demo-name}.tsx`
|
||||
|
||||
### 2. Create the Demo Component Files
|
||||
|
||||
Adapt and create the demo component in both registries:
|
||||
|
||||
**For Radix (`registry/radix-nova/demo/{name}.tsx`):**
|
||||
```tsx
|
||||
import {
|
||||
ComponentName,
|
||||
// ... other imports
|
||||
} from "@/registry/radix-nova/ui/component-name"
|
||||
|
||||
export default function ComponentDemo() {
|
||||
return (
|
||||
// Component usage example
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
**For Base (`registry/base-nova/demo/{name}.tsx`):**
|
||||
```tsx
|
||||
import {
|
||||
ComponentName,
|
||||
// ... other imports
|
||||
} from "@/registry/base-nova/ui/component-name"
|
||||
|
||||
export default function ComponentDemo() {
|
||||
return (
|
||||
// Component usage example - may differ slightly due to API differences
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Update the Registry Files
|
||||
|
||||
Add the new demo to both `_registry.ts` files:
|
||||
|
||||
**File: `registry/radix-nova/demo/_registry.ts`**
|
||||
**File: `registry/base-nova/demo/_registry.ts`**
|
||||
|
||||
```ts
|
||||
{
|
||||
name: "component-demo-name",
|
||||
title: "Component Demo Title",
|
||||
type: "registry:example",
|
||||
registryDependencies: ["component-name"],
|
||||
files: [
|
||||
{
|
||||
path: "demo/component-demo-name.tsx",
|
||||
type: "registry:example",
|
||||
},
|
||||
],
|
||||
},
|
||||
```
|
||||
|
||||
### 4. Add to Documentation (Optional)
|
||||
|
||||
If the demo is new and not already in docs, update the component's MDX documentation files:
|
||||
|
||||
**File: `content/docs/components/radix/{component}.mdx`**
|
||||
**File: `content/docs/components/base/{component}.mdx`**
|
||||
|
||||
Add a ComponentPreview with the appropriate styleName:
|
||||
|
||||
```mdx
|
||||
### Example Title
|
||||
|
||||
Description of what this example demonstrates.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-nova" <!-- or "base-nova" for base docs -->
|
||||
name="component-demo-name"
|
||||
description="Brief description of the demo"
|
||||
/>
|
||||
```
|
||||
|
||||
## Key Differences Between Radix and Base
|
||||
|
||||
### Import Paths
|
||||
|
||||
| Registry | Import Path |
|
||||
|----------|-------------|
|
||||
| radix-nova | `@/registry/radix-nova/ui/{component}` |
|
||||
| base-nova | `@/registry/base-nova/ui/{component}` |
|
||||
|
||||
### Common API Differences
|
||||
|
||||
| Feature | Radix | Base |
|
||||
|---------|-------|------|
|
||||
| Accordion type | `type="single"` or `type="multiple"` | `multiple` prop (boolean) |
|
||||
| Accordion collapsible | `collapsible` prop | Default behavior |
|
||||
| Default value | `defaultValue="item-1"` (string for single) | `defaultValue={["item-1"]}` (always array) |
|
||||
|
||||
When in doubt, check the existing UI component in:
|
||||
- `registry/radix-nova/ui/{component}.tsx`
|
||||
- `registry/base-nova/ui/{component}.tsx`
|
||||
|
||||
## Naming Conventions
|
||||
|
||||
- Demo files: `{component}-{variant}.tsx` (e.g., `accordion-multiple.tsx`)
|
||||
- Registry name: `{component}-{variant}` (e.g., `accordion-multiple`)
|
||||
- Use kebab-case for file names and registry names
|
||||
- Use PascalCase for component function names (e.g., `AccordionMultiple`)
|
||||
|
||||
## Exclusions
|
||||
|
||||
Do NOT create demos for:
|
||||
- `form-next-*` (form library specific)
|
||||
- `form-rhf-*` (form library specific)
|
||||
- `form-tanstack-*` (form library specific)
|
||||
- `mode-toggle` (theme specific)
|
||||
- Any demo ending in `-form` that uses form library integration
|
||||
|
||||
## Checklist
|
||||
|
||||
When creating a new demo, ensure you:
|
||||
|
||||
- [ ] Read source from `registry/new-york-v4/examples/{demo-name}.tsx`
|
||||
- [ ] Create demo file in `registry/radix-nova/demo/`
|
||||
- [ ] Create demo file in `registry/base-nova/demo/`
|
||||
- [ ] Add entry to `registry/radix-nova/demo/_registry.ts`
|
||||
- [ ] Add entry to `registry/base-nova/demo/_registry.ts`
|
||||
- [ ] Use correct import paths (`radix-nova` vs `base-nova`)
|
||||
- [ ] Account for API differences between Radix and Base UI
|
||||
|
||||
## Batch Creation
|
||||
|
||||
When asked to create multiple demos for a component, process them in order:
|
||||
|
||||
```
|
||||
Create demos for button: button-demo, button-default, button-destructive, button-ghost
|
||||
```
|
||||
|
||||
This will create all 4 demos in both registries.
|
||||
|
||||
## PRD Reference
|
||||
|
||||
See `.claude/prd/demo-components.md` for the full list of demos to create and progress tracking.
|
||||
@@ -1,439 +0,0 @@
|
||||
# PRD: Demo Components for Radix and Base Registries
|
||||
|
||||
## Overview
|
||||
|
||||
Create demo components for both `radix-nova` and `base-nova` registries by reimplementing the examples from `new-york-v4/examples/`. These demos will be used in the component documentation.
|
||||
|
||||
## Current State
|
||||
|
||||
- **Source**: `registry/new-york-v4/examples/` contains **230 example components**
|
||||
- **Target**: `registry/radix-nova/demo/` and `registry/base-nova/demo/`
|
||||
- **Completed**: 3 demos (accordion-demo, accordion-disabled, accordion-multiple)
|
||||
- **Remaining**: ~227 demos
|
||||
|
||||
## Goals
|
||||
|
||||
1. Create identical demo components for both radix-nova and base-nova registries
|
||||
2. Ensure demos work with respective primitive libraries (Radix UI vs Base UI)
|
||||
3. Update registry files to include all demos
|
||||
4. Maintain consistency with existing patterns
|
||||
|
||||
## Technical Requirements
|
||||
|
||||
### Import Paths
|
||||
|
||||
| Registry | Import Path |
|
||||
|----------|-------------|
|
||||
| radix-nova | `@/registry/radix-nova/ui/{component}` |
|
||||
| base-nova | `@/registry/base-nova/ui/{component}` |
|
||||
|
||||
### API Differences
|
||||
|
||||
Some components have API differences between Radix UI and Base UI:
|
||||
|
||||
| Feature | Radix UI | Base UI |
|
||||
|---------|----------|---------|
|
||||
| Accordion multiple | `type="multiple"` | `multiple` prop |
|
||||
| Accordion default value | `defaultValue="item-1"` | `defaultValue={["item-1"]}` |
|
||||
|
||||
### File Structure
|
||||
|
||||
```
|
||||
registry/
|
||||
├── radix-nova/
|
||||
│ └── demo/
|
||||
│ ├── _registry.ts
|
||||
│ ├── {component}-demo.tsx
|
||||
│ └── {component}-{variant}.tsx
|
||||
├── base-nova/
|
||||
│ └── demo/
|
||||
│ ├── _registry.ts
|
||||
│ ├── {component}-demo.tsx
|
||||
│ └── {component}-{variant}.tsx
|
||||
└── new-york-v4/
|
||||
└── examples/
|
||||
└── {component}-{variant}.tsx (source)
|
||||
```
|
||||
|
||||
### Registry Entry Format
|
||||
|
||||
```typescript
|
||||
{
|
||||
name: "{component}-{variant}",
|
||||
title: "{Component} {Variant}",
|
||||
type: "registry:example",
|
||||
registryDependencies: ["{component}"],
|
||||
files: [
|
||||
{
|
||||
path: "demo/{component}-{variant}.tsx",
|
||||
type: "registry:example",
|
||||
},
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
## Components to Migrate
|
||||
|
||||
### By Category
|
||||
|
||||
#### Accordion (3) - DONE
|
||||
- [x] accordion-demo
|
||||
- [x] accordion-disabled
|
||||
- [x] accordion-multiple
|
||||
|
||||
#### Alert (2)
|
||||
- [ ] alert-demo
|
||||
- [ ] alert-destructive
|
||||
|
||||
#### Alert Dialog (1)
|
||||
- [ ] alert-dialog-demo
|
||||
|
||||
#### Aspect Ratio (1)
|
||||
- [ ] aspect-ratio-demo
|
||||
|
||||
#### Avatar (1)
|
||||
- [ ] avatar-demo
|
||||
|
||||
#### Badge (4)
|
||||
- [ ] badge-demo
|
||||
- [ ] badge-destructive
|
||||
- [ ] badge-outline
|
||||
- [ ] badge-secondary
|
||||
|
||||
#### Breadcrumb (6)
|
||||
- [ ] breadcrumb-demo
|
||||
- [ ] breadcrumb-dropdown
|
||||
- [ ] breadcrumb-ellipsis
|
||||
- [ ] breadcrumb-link
|
||||
- [ ] breadcrumb-responsive
|
||||
- [ ] breadcrumb-separator
|
||||
|
||||
#### Button (14)
|
||||
- [ ] button-as-child
|
||||
- [ ] button-default
|
||||
- [ ] button-demo
|
||||
- [ ] button-destructive
|
||||
- [ ] button-ghost
|
||||
- [ ] button-icon
|
||||
- [ ] button-link
|
||||
- [ ] button-loading
|
||||
- [ ] button-outline
|
||||
- [ ] button-rounded
|
||||
- [ ] button-secondary
|
||||
- [ ] button-size
|
||||
- [ ] button-with-icon
|
||||
|
||||
#### Button Group (12)
|
||||
- [ ] button-group-demo
|
||||
- [ ] button-group-dropdown
|
||||
- [ ] button-group-input
|
||||
- [ ] button-group-input-group
|
||||
- [ ] button-group-nested
|
||||
- [ ] button-group-orientation
|
||||
- [ ] button-group-popover
|
||||
- [ ] button-group-select
|
||||
- [ ] button-group-separator
|
||||
- [ ] button-group-size
|
||||
- [ ] button-group-split
|
||||
|
||||
#### Calendar (9)
|
||||
- [ ] calendar-demo
|
||||
- [ ] calendar-05
|
||||
- [ ] calendar-13
|
||||
- [ ] calendar-18
|
||||
- [ ] calendar-22
|
||||
- [ ] calendar-24
|
||||
- [ ] calendar-28
|
||||
- [ ] calendar-29
|
||||
- [ ] calendar-hijri
|
||||
|
||||
#### Card (2)
|
||||
- [ ] card-demo
|
||||
- [ ] card-with-form
|
||||
|
||||
#### Carousel (6)
|
||||
- [ ] carousel-api
|
||||
- [ ] carousel-demo
|
||||
- [ ] carousel-orientation
|
||||
- [ ] carousel-plugin
|
||||
- [ ] carousel-size
|
||||
- [ ] carousel-spacing
|
||||
|
||||
#### Chart (6)
|
||||
- [ ] chart-bar-demo
|
||||
- [ ] chart-bar-demo-axis
|
||||
- [ ] chart-bar-demo-grid
|
||||
- [ ] chart-bar-demo-legend
|
||||
- [ ] chart-bar-demo-tooltip
|
||||
- [ ] chart-tooltip-demo
|
||||
|
||||
#### Checkbox (3)
|
||||
- [ ] checkbox-demo
|
||||
- [ ] checkbox-disabled
|
||||
- [ ] checkbox-with-text
|
||||
|
||||
#### Collapsible (1)
|
||||
- [ ] collapsible-demo
|
||||
|
||||
#### Combobox (4)
|
||||
- [ ] combobox-demo
|
||||
- [ ] combobox-dropdown-menu
|
||||
- [ ] combobox-popover
|
||||
- [ ] combobox-responsive
|
||||
|
||||
#### Command (2)
|
||||
- [ ] command-demo
|
||||
- [ ] command-dialog
|
||||
|
||||
#### Context Menu (1)
|
||||
- [ ] context-menu-demo
|
||||
|
||||
#### Data Table (1)
|
||||
- [ ] data-table-demo
|
||||
|
||||
#### Date Picker (3)
|
||||
- [ ] date-picker-demo
|
||||
- [ ] date-picker-with-presets
|
||||
- [ ] date-picker-with-range
|
||||
|
||||
#### Dialog (2)
|
||||
- [ ] dialog-close-button
|
||||
- [ ] dialog-demo
|
||||
|
||||
#### Drawer (2)
|
||||
- [ ] drawer-demo
|
||||
- [ ] drawer-dialog
|
||||
|
||||
#### Dropdown Menu (4)
|
||||
- [ ] dropdown-menu-checkboxes
|
||||
- [ ] dropdown-menu-demo
|
||||
- [ ] dropdown-menu-dialog
|
||||
- [ ] dropdown-menu-radio-group
|
||||
|
||||
#### Empty (6)
|
||||
- [ ] empty-avatar
|
||||
- [ ] empty-avatar-group
|
||||
- [ ] empty-background
|
||||
- [ ] empty-demo
|
||||
- [ ] empty-icon
|
||||
- [ ] empty-input-group
|
||||
- [ ] empty-outline
|
||||
|
||||
#### Field (12)
|
||||
- [ ] field-checkbox
|
||||
- [ ] field-choice-card
|
||||
- [ ] field-demo
|
||||
- [ ] field-fieldset
|
||||
- [ ] field-group
|
||||
- [ ] field-input
|
||||
- [ ] field-radio
|
||||
- [ ] field-responsive
|
||||
- [ ] field-select
|
||||
- [ ] field-slider
|
||||
- [ ] field-switch
|
||||
- [ ] field-textarea
|
||||
|
||||
#### Hover Card (1)
|
||||
- [ ] hover-card-demo
|
||||
|
||||
#### Input (6)
|
||||
- [ ] input-demo
|
||||
- [ ] input-disabled
|
||||
- [ ] input-file
|
||||
- [ ] input-with-button
|
||||
- [ ] input-with-label
|
||||
- [ ] input-with-text
|
||||
|
||||
#### Input Group (11)
|
||||
- [ ] input-group-button
|
||||
- [ ] input-group-button-group
|
||||
- [ ] input-group-custom
|
||||
- [ ] input-group-demo
|
||||
- [ ] input-group-dropdown
|
||||
- [ ] input-group-icon
|
||||
- [ ] input-group-label
|
||||
- [ ] input-group-spinner
|
||||
- [ ] input-group-text
|
||||
- [ ] input-group-textarea
|
||||
- [ ] input-group-tooltip
|
||||
|
||||
#### Input OTP (4)
|
||||
- [ ] input-otp-controlled
|
||||
- [ ] input-otp-demo
|
||||
- [ ] input-otp-pattern
|
||||
- [ ] input-otp-separator
|
||||
|
||||
#### Item (10)
|
||||
- [ ] item-avatar
|
||||
- [ ] item-demo
|
||||
- [ ] item-dropdown
|
||||
- [ ] item-group
|
||||
- [ ] item-header
|
||||
- [ ] item-icon
|
||||
- [ ] item-image
|
||||
- [ ] item-link
|
||||
- [ ] item-size
|
||||
- [ ] item-variant
|
||||
|
||||
#### Kbd (5)
|
||||
- [ ] kbd-button
|
||||
- [ ] kbd-demo
|
||||
- [ ] kbd-group
|
||||
- [ ] kbd-input-group
|
||||
- [ ] kbd-tooltip
|
||||
|
||||
#### Label (1)
|
||||
- [ ] label-demo
|
||||
|
||||
#### Menubar (1)
|
||||
- [ ] menubar-demo
|
||||
|
||||
#### Native Select (4)
|
||||
- [ ] native-select-demo
|
||||
- [ ] native-select-disabled
|
||||
- [ ] native-select-groups
|
||||
- [ ] native-select-invalid
|
||||
|
||||
#### Navigation Menu (1)
|
||||
- [ ] navigation-menu-demo
|
||||
|
||||
#### Pagination (1)
|
||||
- [ ] pagination-demo
|
||||
|
||||
#### Popover (1)
|
||||
- [ ] popover-demo
|
||||
|
||||
#### Progress (1)
|
||||
- [ ] progress-demo
|
||||
|
||||
#### Radio Group (1)
|
||||
- [ ] radio-group-demo
|
||||
|
||||
#### Resizable (4)
|
||||
- [ ] resizable-demo
|
||||
- [ ] resizable-demo-with-handle
|
||||
- [ ] resizable-handle
|
||||
- [ ] resizable-vertical
|
||||
|
||||
#### Scroll Area (2)
|
||||
- [ ] scroll-area-demo
|
||||
- [ ] scroll-area-horizontal-demo
|
||||
|
||||
#### Select (2)
|
||||
- [ ] select-demo
|
||||
- [ ] select-scrollable
|
||||
|
||||
#### Separator (1)
|
||||
- [ ] separator-demo
|
||||
|
||||
#### Sheet (2)
|
||||
- [ ] sheet-demo
|
||||
- [ ] sheet-side
|
||||
|
||||
#### Skeleton (2)
|
||||
- [ ] skeleton-card
|
||||
- [ ] skeleton-demo
|
||||
|
||||
#### Slider (1)
|
||||
- [ ] slider-demo
|
||||
|
||||
#### Sonner (2)
|
||||
- [ ] sonner-demo
|
||||
- [ ] sonner-types
|
||||
|
||||
#### Spinner (10)
|
||||
- [ ] spinner-badge
|
||||
- [ ] spinner-basic
|
||||
- [ ] spinner-button
|
||||
- [ ] spinner-color
|
||||
- [ ] spinner-custom
|
||||
- [ ] spinner-demo
|
||||
- [ ] spinner-empty
|
||||
- [ ] spinner-input-group
|
||||
- [ ] spinner-item
|
||||
- [ ] spinner-size
|
||||
|
||||
#### Switch (1)
|
||||
- [ ] switch-demo
|
||||
|
||||
#### Table (1)
|
||||
- [ ] table-demo
|
||||
|
||||
#### Tabs (1)
|
||||
- [ ] tabs-demo
|
||||
|
||||
#### Textarea (5)
|
||||
- [ ] textarea-demo
|
||||
- [ ] textarea-disabled
|
||||
- [ ] textarea-with-button
|
||||
- [ ] textarea-with-label
|
||||
- [ ] textarea-with-text
|
||||
|
||||
#### Toggle (6)
|
||||
- [ ] toggle-demo
|
||||
- [ ] toggle-disabled
|
||||
- [ ] toggle-lg
|
||||
- [ ] toggle-outline
|
||||
- [ ] toggle-sm
|
||||
- [ ] toggle-with-text
|
||||
|
||||
#### Toggle Group (7)
|
||||
- [ ] toggle-group-demo
|
||||
- [ ] toggle-group-disabled
|
||||
- [ ] toggle-group-lg
|
||||
- [ ] toggle-group-outline
|
||||
- [ ] toggle-group-single
|
||||
- [ ] toggle-group-sm
|
||||
- [ ] toggle-group-spacing
|
||||
|
||||
#### Tooltip (1)
|
||||
- [ ] tooltip-demo
|
||||
|
||||
#### Typography (14)
|
||||
- [ ] typography-blockquote
|
||||
- [ ] typography-demo
|
||||
- [ ] typography-h1
|
||||
- [ ] typography-h2
|
||||
- [ ] typography-h3
|
||||
- [ ] typography-h4
|
||||
- [ ] typography-inline-code
|
||||
- [ ] typography-large
|
||||
- [ ] typography-lead
|
||||
- [ ] typography-list
|
||||
- [ ] typography-muted
|
||||
- [ ] typography-p
|
||||
- [ ] typography-small
|
||||
- [ ] typography-table
|
||||
|
||||
## Exclusions
|
||||
|
||||
The following examples from new-york-v4 should NOT be migrated (form-specific):
|
||||
|
||||
- form-next-*
|
||||
- form-rhf-*
|
||||
- form-tanstack-*
|
||||
- mode-toggle
|
||||
- native-select-form (uses form)
|
||||
- input-otp-form (uses form)
|
||||
|
||||
## Workflow
|
||||
|
||||
Use the `shadcn-ui-demo-creator` agent with the following command pattern:
|
||||
|
||||
```
|
||||
Create demos for {component}: {demo-name-1}, {demo-name-2}, ...
|
||||
```
|
||||
|
||||
The agent will:
|
||||
1. Read the source from `registry/new-york-v4/examples/{demo-name}.tsx`
|
||||
2. Create `registry/radix-nova/demo/{demo-name}.tsx` with radix-nova imports
|
||||
3. Create `registry/base-nova/demo/{demo-name}.tsx` with base-nova imports
|
||||
4. Update `_registry.ts` in both demo folders
|
||||
5. Verify the component compiles
|
||||
|
||||
## Success Criteria
|
||||
|
||||
- [ ] All 227 remaining demos created in both registries
|
||||
- [ ] All demos compile without errors
|
||||
- [ ] All demos render correctly in documentation
|
||||
- [ ] Registry files updated with all entries
|
||||
@@ -1,39 +0,0 @@
|
||||
# shadcn/ui v4 App
|
||||
|
||||
This is the documentation site and registry for shadcn/ui components.
|
||||
|
||||
## Custom Agents
|
||||
|
||||
### shadcn/ui Demo Creator
|
||||
|
||||
When asked to create a demo component for the bases registry, read the instructions at:
|
||||
`.claude/agents/shadcn-ui-demo-creator.md`
|
||||
|
||||
**Trigger phrases:**
|
||||
- "create a demo for [component]"
|
||||
- "add a [component]-[variant] demo"
|
||||
- "new demo component"
|
||||
|
||||
**Quick reference:**
|
||||
1. Read source from `registry/new-york-v4/examples/{demo-name}.tsx`
|
||||
2. Create demo in `registry/radix-nova/demo/` and `registry/base-nova/demo/`
|
||||
3. Update `_registry.ts` in both demo folders
|
||||
4. Add `<ComponentPreview>` to docs in `content/docs/components/radix/` and `content/docs/components/base/`
|
||||
|
||||
**Import paths:**
|
||||
- Radix: `@/registry/radix-nova/ui/{component}`
|
||||
- Base: `@/registry/base-nova/ui/{component}`
|
||||
|
||||
**PRD:** `.claude/prd/demo-components.md`
|
||||
|
||||
## Registry Structure
|
||||
|
||||
- `registry/radix-nova/` - Radix UI based components (radix-nova style)
|
||||
- `registry/base-nova/` - Base UI based components (base-nova style)
|
||||
- `registry/new-york-v4/` - Legacy style (source for demos)
|
||||
|
||||
## Documentation
|
||||
|
||||
- Component docs: `content/docs/components/{base}/{component}.mdx`
|
||||
- Radix uses `styleName="radix-nova"`
|
||||
- Base uses `styleName="base-nova"`
|
||||
Reference in New Issue
Block a user