UI Builder provides an optional shadcn component registry that includes all 54 official shadcn/ui components pre-configured for the visual editor. This registry is separate from the core UI Builder package, allowing you to choose which components you need.

Installation

The shadcn component registry is optional and can be installed separately:

bash
Copy code
1# Install the shadcn components registry (optional)
2npx shadcn@latest add https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/shadcn-components-registry.json

This installs:

• 54 shadcn/ui components with curated default children and proper configurations
• 124 shadcn blocks as reusable templates
• All necessary dependencies

Using the Registry

After installation, import and use the components in your registry:

tsx
Copy code
1import { shadcnComponentDefinitions } from '@/lib/ui-builder/registry/shadcn-component-definitions';
2import { blockDefinitions } from '@/lib/ui-builder/registry/block-definitions';
3import { primitiveComponentDefinitions } from '@/lib/ui-builder/registry/primitive-component-definitions';
4
5const myComponentRegistry: ComponentRegistry = {
6  ...primitiveComponentDefinitions,
7  ...shadcnComponentDefinitions,  // All 54 shadcn components
8  // Your custom components...
9};
10
11<UIBuilder 
12  componentRegistry={myComponentRegistry}
13  blocks={blockDefinitions}  // Optional: Enable blocks tab
14/>

Included Components

The shadcn registry includes these component categories:

Layout & Structure

• Card (with CardHeader, CardTitle, CardDescription, CardContent, CardFooter)
• Accordion (with AccordionItem, AccordionTrigger, AccordionContent)
• Tabs (with TabsList, TabsTrigger, TabsContent)
• Resizable (with ResizablePanel, ResizableHandle)
• Sidebar (with SidebarHeader, SidebarContent, SidebarFooter, etc.)

Form Elements

• Input, Textarea, Label
• Checkbox, Switch, RadioGroup (with RadioGroupItem)
• Select (with SelectTrigger, SelectContent, SelectItem, etc.)
• Calendar, DatePicker

Feedback & Overlays

• Dialog (with DialogTrigger, DialogContent, DialogHeader, etc.)
• Sheet (with SheetTrigger, SheetContent, SheetHeader, etc.)
• Popover, Tooltip
• Alert, AlertDialog

Navigation

• Breadcrumb (with BreadcrumbList, BreadcrumbItem, BreadcrumbLink, etc.)
• DropdownMenu (with DropdownMenuTrigger, DropdownMenuContent, etc.)
• Command (with CommandInput, CommandList, CommandItem, etc.)

Display

• Button, Badge
• Avatar (with AvatarImage, AvatarFallback)
• Table (with TableHeader, TableBody, TableRow, TableCell, etc.)
• Toggle, ToggleGroup
• Skeleton, Separator

Compound Components

Many shadcn components are "compound components" with multiple parts. The registry includes all parts with sensible default children:

tsx
Copy code
1// When you add an Accordion, it comes pre-configured with:
2Accordion: {
3  component: Accordion,
4  schema: z.object({...}),
5  defaultChildren: [
6    {
7      type: 'AccordionItem',
8      children: [
9        { type: 'AccordionTrigger', children: 'Item Title' },
10        { type: 'AccordionContent', children: 'Item content...' }
11      ]
12    }
13  ]
14}

This means when you add an Accordion in the editor, it comes ready to use with proper structure.

Blocks

Blocks are pre-built UI templates that can be inserted as complete component trees. They appear in a "Blocks" tab in the add component popover.

Block Categories

• Login - Authentication forms (login-01, login-02, etc.)
• Sidebar - Navigation sidebars (sidebar-01, sidebar-02, etc.)
• Dashboard - Dashboard layouts (dashboard-01, dashboard-02, etc.)
• Calendar - Calendar views (calendar-01, calendar-02, etc.)
• Charts - Various chart layouts (chart-area-default, chart-bar-default, etc.)

Using Blocks

Pass the block definitions to UIBuilder:

tsx
Copy code
1import { blockDefinitions } from '@/lib/ui-builder/registry/block-definitions';
2
3<UIBuilder 
4  componentRegistry={myComponentRegistry}
5  blocks={blockDefinitions}
6/>

When users click "Add Component", they'll see a "Blocks" tab with categorized block templates.

Block Structure

Each block is a ComponentLayer template:

tsx
Copy code
1import { BlockDefinition } from '@/lib/ui-builder/registry/block-definitions';
2
3const myBlock: BlockDefinition = {
4  name: 'my-custom-block',
5  category: 'custom',
6  description: 'A custom block template',
7  template: {
8    id: 'root',
9    type: 'div',
10    name: 'My Block',
11    props: { className: 'p-4' },
12    children: [
13      // ... nested components
14    ]
15  },
16  requiredComponents: ['div', 'Button', 'Card']
17};

Block Utilities

tsx
Copy code
1import { 
2  getBlocksByCategory, 
3  getBlockCategories, 
4  getAllBlocks 
5} from '@/lib/ui-builder/registry/block-definitions';
6
7// Get all block categories
8const categories = getBlockCategories(); // ['login', 'sidebar', 'dashboard', ...]
9
10// Get blocks in a category
11const loginBlocks = getBlocksByCategory('login');
12
13// Get all blocks as an array
14const allBlocks = getAllBlocks();

Keeping Up to Date

The sync script helps check for new shadcn components:

bash
Copy code
1npm run sync-shadcn

This compares your local definitions with the latest shadcn registry and reports any missing components or blocks.

Separate vs Combined Registries

UI Builder provides two registries:

Minimal Setup (just core UI Builder):

bash
Copy code
1npx shadcn@latest add https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/block-registry.json

Full Setup (core + all shadcn components):

bash
Copy code
1# Install core first
2npx shadcn@latest add https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/block-registry.json
3
4# Then add shadcn components
5npx shadcn@latest add https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/shadcn-components-registry.json

Next Steps

Now that you understand the shadcn registry:

• Custom Components - Learn how to add your own components alongside shadcn
• Blocks - Create your own block templates
• Variables - Bind dynamic data to shadcn components