UI Builder solves the fundamental problem of UI creation tools: they ignore your existing React component library and force you to rebuild from scratch.

UI Builder is a shadcn/ui package that adds a Figma‑style editor to your own product, letting non‑developers compose pages, emails, dashboards, and white‑label views with the exact React components you already ship.

Layouts are saved as plain JSON for easy versioning and can be rendered instantly with dynamic data, allowing:

• your marketing team to update a landing page without waiting on engineering
• a customer to tweak a branded portal with their own content and branding
• a product manager to modify email templates but parts of the content is dynamic for each user
• add a visual "head" to your headless CMS, connecting your content API with your component library

How UI Builder Works

UI Builder empowers you to visually construct and modify user interfaces by leveraging your own React components. Here's how it works:

🧩 Component-Driven Foundation
Operates on your existing React components. You provide a componentRegistry detailing which components are available in the editor.

🎨 Layer-Based Canvas
The UI is constructed as a tree of "layers." Each layer represents a component instance that users can visually add, remove, reorder, and nest on an interactive canvas.

📦 Pre-built Blocks
Jump-start your designs with 124 shadcn block templates—login forms, dashboards, sidebars, and more. Insert complete UI structures with one click, then customize as needed.

⚙️ Dynamic Props Editing
Each component uses a Zod schema to automatically generate a properties panel, allowing users to configure component instances in real-time.

🔗 Variable-Driven Dynamic Content
Variables transform static designs into dynamic, data-driven interfaces. Bind component properties to typed variables for personalization, theming, and reusable templates.

⚡ Function Registry for Event Binding
Bind event handlers like onClick, onSubmit, and onChange to pre-defined functions. Enable interactive components, form submissions with server actions, toast notifications, and analytics tracking—all configurable from the visual editor.

📦 Flexible State Management
By default, the editor's state persists in local storage. For production apps, provide initialLayers and use the onChange callback to persist state to your backend.

⚡ React Code Generation
Export visually designed pages as clean, readable React code that correctly references your components.

🖥️ Server-Side Rendering
Use ServerLayerRenderer to render pages on the server with React Server Components—no client JavaScript required for initial render. Perfect for SEO and static generation.

🚀 Runtime Variable Resolution
When rendering pages with LayerRenderer, provide variableValues to override defaults with real data from APIs, databases, or user input.

Understanding Variables

Variables are the key to creating dynamic, data-driven interfaces. Instead of hardcoding static values, variables allow you to bind component properties to dynamic data that changes at runtime.

Variable Types:

• String: For text content, names, descriptions, etc.
• Number: For counts, ages, prices, quantities, etc.
• Boolean: For feature flags, visibility toggles, active states, etc.
• Function: For event handlers like onClick, onSubmit, etc. (requires a function registry)

Powerful Use Cases:

• Personalized content that adapts to user data
• Reusable templates that work across different contexts
• Multi‑tenant applications with customized branding per client
• A/B testing and feature flags through boolean variables
• Interactive components with bound event handlers for forms, buttons, and more
• Content management where non‑technical users can update dynamic content

Key Benefits

🎯 One‑step Installation
Get up and running with a single npx shadcn@latest add … command.

🎨 Figma‑style Editing
Intuitive drag‑and‑drop canvas, properties panel, and live preview.

📦 124 Pre-built Blocks
Start fast with shadcn block templates—login forms, dashboards, sidebars, charts, and more.

⚡ Full React Code Export
Generate clean, type‑safe React code that matches your project structure.

🔗 Runtime Variable Binding
Create dynamic templates with string, number, and boolean variables—perfect for personalization, A/B testing, or multi‑tenant branding.

⚡ Function Binding for Events
Bind event handlers to pre-defined functions for interactive components, form submissions, toast notifications, and analytics tracking.

🖥️ Server-Side Rendering
Render pages on the server with ServerLayerRenderer for optimal performance, SEO, and React Server Components support.

🧩 Bring Your Own Components
Use your existing React component library—no need to rebuild from scratch.

💾 Flexible Persistence
Control how and when editor state is saved, with built‑in local storage support or custom database integration.

Next Steps

Ready to get started?

1. Quick Start - Install and set up your first UI Builder
2. Components Intro - Learn about the component registry system
3. Shadcn Registry - Use 54 pre-configured components and 124 block templates
4. Variables - Create dynamic, data-driven interfaces
5. Function Registry - Bind event handlers for interactive components
6. Custom Components - Add your own React components to the editor