About ui-builder

A React component that provides a no-code, visual way to create UIs, compatible with shadcn/ui and custom components.

o

Published by

README.md

UI Builder — Visual Editor for Your React App

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.

UI Builder Demo

View Full Documentation

UI Builder is now part of BTST — ship full-stack features faster with production-ready plugins that generate database schemas, API routes, and pages for Next.js, TanStack Start, and React Router.

Installation

Quick Start with shadcn/ui

If you already have a shadcn/ui project:

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

Or start a new Next.js project with UI Builder:

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

Optional: Add All Shadcn Components

Install the full shadcn component library with 54 pre-configured components and 124 block templates:

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

Handling Peer Dependencies

If you encounter peer dependency warnings (common with React 19), create a .npmrc file:

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

Note: Use style variables for proper page theming.

Basic Usage

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} />;
}

Documentation

For comprehensive documentation, visit uibuilder.app:

Quick Start — Get up and running
Component Registry — Configure components
Shadcn Registry — Use pre-built shadcn components and blocks
Custom Components — Add your own components
Variables — Dynamic data binding
Rendering Pages — Render saved layouts

Development

# Build component registries
npm run build-all-registries

# Run tests
npm run test

# Sync with latest shadcn components
npm run sync-shadcn

Breaking Changes

v2.0.0

Internal structure changes. Delete old /ui-builder and /lib/ui-builder directories before updating.

v1.0.0

Removed _page_ layer type. Use any component type as root.
componentRegistry is now a prop, not a standalone file.

See the full changelog for details.

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

License

MIT

ui-builder