UI Builder is an open-source React component that drops a Figma-style visual editor into your own product, so non-developers can compose pages, emails, dashboards, and white-label views using the exact shadcn/ui components you already ship.

What it is

UI Builder is a shadcn/ui package written in TypeScript that embeds a no-code visual editor directly inside a React application. Rather than handing content teams a separate hosted tool, it lets product teams expose an editing surface in their own app, where users arrange real React components on a canvas and save the result as plain JSON. Layouts serialise to JSON so they can be versioned in source control and rendered instantly with dynamic data at runtime.

The concrete problem it solves is the gap between a design system and the people who need to use it. Teams shipping with shadcn/ui and Tailwind CSS often field requests for landing pages, dashboards, email templates, and white-label views, but wiring each one by hand slows delivery. UI Builder replaces that hand-coded assembly with a drag-and-drop editor backed by a component registry, so the same components that ship in production also power the editing experience.

Key capabilities

• Renders a visual editing canvas that saves layouts as plain JSON for versioning and dynamic-data rendering.
• Registers your own components through a ComponentRegistry, where each entry pairs a React component with a zod schema; primitiveComponentDefinitions covers base elements.
• Installs with the shadcn CLI via npx shadcn@latest add https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/block-registry.json.
• Ships an optional shadcn registry with 54 pre-configured components and 124 block templates.
• Adds React Email support through react-email-components-registry.json, including emailPageRenderer, emailCodeGenerator, and DEFAULT_EMAIL_TAILWIND_CONFIG; Safari and iOS need import "web-streams-polyfill/polyfill"; in the email route entry file.
• Lets you override or hide the default TailwindThemePanel in the Appearance tab, or supply a custom node.
• Maintains component parity with shadcn through npm run sync-shadcn, alongside npm run build-all-registries and npm run test.

Who uses it and how

• Product teams with a shadcn/ui codebase who want non-developers to build pages without leaving the app.
• Teams producing transactional and marketing email templates inside UI Builder, using the react-email registry and the email renderer utilities.
• Organisations building white-label views, where the same layout JSON is rendered per tenant with different dynamic data.
• Developers wiring dashboards and internal tools who prefer to bind existing components rather than rebuild UI primitives in a separate tool.
• Projects on Next.js, TanStack Start, or React Router, which UI Builder's parent project BTST targets with generated database schemas, API routes, and pages.

Getting started

Install into an existing shadcn/ui project with npx shadcn@latest add https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/block-registry.json, or bootstrap a new one using npx shadcn@latest init with the same registry URL and --base-color zinc.

How it compares

No competing products are listed in the facts for this entry, and none of the named integrations are direct equivalents. It stands alone in this registry as a shadcn/ui-specific visual editor.

When to use it — and when not to

Adopt it if your stack is already shadcn/ui and Tailwind CSS, since the value comes from reusing registered components rather than starting fresh. Be aware that React 19 setups commonly hit peer dependency warnings, requiring a .npmrc containing legacy-peer-deps=true, and the v2.0.0 release demands deleting the old /ui-builder and /lib/ui-builder directories before upgrading. If your project does not use shadcn/ui or Tailwind, the registry model offers little, and the project now sits under the BTST umbrella, so its direction follows that wider roadmap.

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

npx shadcn@latest init https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/block-registry.json --base-color zinc

npx shadcn@latest add https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/shadcn-components-registry.json

npx shadcn@latest add https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/react-email-components-registry.json

import "web-streams-polyfill/polyfill";

echo "legacy-peer-deps=true" > .npmrc

import z from "zod";
import UIBuilder from "@/components/ui/ui-builder";
import { Button } from "@/components/ui/button";
import { ComponentRegistry } from "@/components/ui/ui-builder/types";
import { primitiveComponentDefinitions } from "@/lib/ui-builder/registry/primitive-component-definitions";

const myComponentRegistry: ComponentRegistry = {
  ...primitiveComponentDefinitions,
  Button: {
    component: Button,
    schema: z.object({
      className: z.string().optional(),
      children: z.any().optional(),
      variant: z.enum(["default", "destructive", "outline", "secondary", "ghost", "link"]).default("default"),
    }),
    from: "@/components/ui/button",
  },
};

export function App() {
  return <UIBuilder componentRegistry={myComponentRegistry} />;
}

<UIBuilder
  componentRegistry={myComponentRegistry}
  tailwindThemePanel={false} // hide panel
/>

<UIBuilder
  componentRegistry={myComponentRegistry}
  tailwindThemePanel={<MyCustomThemePanel />}
/>

# Build component registries
npm run build-all-registries

# Run tests
npm run test

# Sync with latest shadcn components
npm run sync-shadcn