Introduction

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
Live Demo

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.

⚙️ 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.

📦 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.

🚀 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.

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
  • 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.

⚡ 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.

🧩 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.

Live Examples

Explore different UI Builder features with these interactive examples:

🎨 Basic Editor - Simple drag‑and‑drop interface with basic components

🔧 Full Featured Editor - Complete editor with all panels and advanced features

📄 Static Renderer - See how pages render without the editor interface

🔗 Variables in Action - Dynamic content with runtime variable binding

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. Variables - Create dynamic, data-driven interfaces
  4. Custom Components - Add your own React components to the editor