If you are using the latest shadcn/ui in your project, you can install the component directly from the registry.

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

Or you can start a new project with the UI Builder:

bash
Copy code
1npx shadcn@latest init https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/block-registry.json

Note: You need to use style variables to have page theming working correctly.

If you are not using shadcn/ui, you can install the component simply by copying the files in this repo into your project.

Fixing Dependencies after shadcn init or add

Add dev dependencies, since there currently seems to be an issue with shadcn/ui not installing them from the registry:

bash
Copy code
1npm install -D @types/lodash.template @tailwindcss/typography @types/react-syntax-highlighter react-docgen-typescript tailwindcss-animate ts-morph ts-to-zod

Fix zustand dependency to use latest stable version as opposed to default RC release that gets installed:

bash
Copy code
1npm install zustand@4.5.5

And that's it! You have a UI Builder that you can use to build your UI.

Usage

tsx
Copy code
1import UIBuilder from "@/components/ui/ui-builder";
2
3export function MyApp() {
4  return <UIBuilder initialLayers={initialPages} onChange={handleChange} />;
5}

• initialLayers: Optional prop to set up initial pages and layers. Useful for setting the initial state of the builder, from a database for example.
• onChange: Optional callback triggered when the editor state changes, providing the updated pages. Can be used to persist the state to a database.

You can also render the page without editor functionality by using the LayerRenderer component:

tsx
Copy code
1import LayerRenderer from "@/components/ui/ui-builder/layer-renderer";
2
3export function MyPage() {
4  return <LayerRenderer page={page} />;
5}

This is useful when you want to render the finished page in a non-editable fashion.