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.
The shadcn component registry is optional and can be installed separately:
bash1# 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:
After installation, import and use the components in your registry:
tsx1import { 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/>
The shadcn registry includes these component categories:
Many shadcn components are "compound components" with multiple parts. The registry includes all parts with sensible default children:
tsx1// 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 are pre-built UI templates that can be inserted as complete component trees. They appear in a "Blocks" tab in the add component popover.
Pass the block definitions to UIBuilder:
tsx1import { 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.
Each block is a ComponentLayer template:
tsx1import { 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};
tsx1import { 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();
The sync script helps check for new shadcn components:
bash1npm run sync-shadcn
This compares your local definitions with the latest shadcn registry and reports any missing components or blocks.
UI Builder provides two registries:
| Registry | Contents | Use Case |
|---|---|---|
block-registry.json | Core UI Builder + primitives + essential components | Minimal setup, bring your own components |
shadcn-components-registry.json | All 54 shadcn components + 124 blocks | Full shadcn/ui experience |
Minimal Setup (just core UI Builder):
bash1npx shadcn@latest add https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/block-registry.json
Full Setup (core + all shadcn components):
bash1# 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
Now that you understand the shadcn registry: