{"id":16543592,"url":"https://github.com/olliethedev/ui-builder","last_synced_at":"2026-01-22T03:01:10.556Z","repository":{"id":257679949,"uuid":"858930584","full_name":"olliethedev/ui-builder","owner":"olliethedev","description":"A React component that provides a no-code, visual way to create UIs, compatible with shadcn/ui and custom components.","archived":false,"fork":false,"pushed_at":"2026-01-17T01:29:20.000Z","size":18229,"stargazers_count":570,"open_issues_count":2,"forks_count":85,"subscribers_count":7,"default_branch":"main","last_synced_at":"2026-01-17T05:31:15.851Z","etag":null,"topics":["no-code","reactjs","shadcn-ui","tailwindcss","ui-builder","visual-editor"],"latest_commit_sha":null,"homepage":"https://www.uibuilder.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/olliethedev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null},"funding":{"github":["olliethedev"]}},"created_at":"2024-09-17T19:24:04.000Z","updated_at":"2026-01-16T20:51:44.000Z","dependencies_parsed_at":"2026-01-12T12:03:23.594Z","dependency_job_id":null,"html_url":"https://github.com/olliethedev/ui-builder","commit_stats":null,"previous_names":["olliethedev/ui-builder"],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/olliethedev/ui-builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olliethedev%2Fui-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olliethedev%2Fui-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olliethedev%2Fui-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olliethedev%2Fui-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/olliethedev","download_url":"https://codeload.github.com/olliethedev/ui-builder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olliethedev%2Fui-builder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28651817,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T01:17:37.254Z","status":"online","status_checked_at":"2026-01-22T02:00:07.137Z","response_time":144,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["no-code","reactjs","shadcn-ui","tailwindcss","ui-builder","visual-editor"],"created_at":"2024-10-11T19:00:33.231Z","updated_at":"2026-01-22T03:01:10.546Z","avatar_url":"https://github.com/olliethedev.png","language":"TypeScript","readme":"# UI Builder — Visual Editor for Your React App\n\n**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.**\n\nLayouts are saved as plain JSON for easy versioning and can be rendered instantly with dynamic data.\n\n![UI Builder Demo](./public/demo.gif)\n\n**[View Full Documentation](https://uibuilder.app/)**\n\n---\n\n\u003e **UI Builder is now part of [Better Stack](https://better-stack.ai/)** — 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.\n\n---\n\n## Installation\n\n### Quick Start with shadcn/ui\n\nIf you already have a shadcn/ui project:\n\n```bash\nnpx shadcn@latest add https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/block-registry.json\n```\n\nOr start a new Next.js project with UI Builder:\n\n```bash\nnpx shadcn@latest init https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/block-registry.json --base-color zinc\n```\n\n### Optional: Add All Shadcn Components\n\nInstall the full shadcn component library with 54 pre-configured components and 124 block templates:\n\n```bash\nnpx shadcn@latest add https://raw.githubusercontent.com/olliethedev/ui-builder/main/registry/shadcn-components-registry.json\n```\n\n### Handling Peer Dependencies\n\nIf you encounter peer dependency warnings (common with React 19), create a `.npmrc` file:\n\n```bash\necho \"legacy-peer-deps=true\" \u003e .npmrc\n```\n\n**Note:** Use [style variables](https://ui.shadcn.com/docs/theming) for proper page theming.\n\n## Basic Usage\n\n```tsx\nimport z from \"zod\";\nimport UIBuilder from \"@/components/ui/ui-builder\";\nimport { Button } from \"@/components/ui/button\";\nimport { ComponentRegistry } from \"@/components/ui/ui-builder/types\";\nimport { primitiveComponentDefinitions } from \"@/lib/ui-builder/registry/primitive-component-definitions\";\n\nconst myComponentRegistry: ComponentRegistry = {\n  ...primitiveComponentDefinitions,\n  Button: {\n    component: Button,\n    schema: z.object({\n      className: z.string().optional(),\n      children: z.any().optional(),\n      variant: z.enum([\"default\", \"destructive\", \"outline\", \"secondary\", \"ghost\", \"link\"]).default(\"default\"),\n    }),\n    from: \"@/components/ui/button\",\n  },\n};\n\nexport function App() {\n  return \u003cUIBuilder componentRegistry={myComponentRegistry} /\u003e;\n}\n```\n\n## Documentation\n\nFor comprehensive documentation, visit **[uibuilder.app](https://uibuilder.app/)**:\n\n- **[Quick Start](https://uibuilder.app/docs/quick-start)** — Get up and running\n- **[Component Registry](https://uibuilder.app/docs/component-registry)** — Configure components\n- **[Shadcn Registry](https://uibuilder.app/docs/shadcn-registry)** — Use pre-built shadcn components and blocks\n- **[Custom Components](https://uibuilder.app/docs/custom-components)** — Add your own components\n- **[Variables](https://uibuilder.app/docs/variables)** — Dynamic data binding\n- **[Rendering Pages](https://uibuilder.app/docs/rendering-pages)** — Render saved layouts\n\n## Development\n\n```bash\n# Build component registries\nnpm run build-all-registries\n\n# Run tests\nnpm run test\n\n# Sync with latest shadcn components\nnpm run sync-shadcn\n```\n\n## Breaking Changes\n\n### v2.0.0\n- Internal structure changes. Delete old `/ui-builder` and `/lib/ui-builder` directories before updating.\n\n### v1.0.0\n- Removed `_page_` layer type. Use any component type as root.\n- `componentRegistry` is now a prop, not a standalone file.\n\nSee the [full changelog](https://uibuilder.app/) for details.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit issues and pull requests.\n\n## License\n\nMIT\n\n## Star History\n\n\u003ca href=\"https://www.star-history.com/#olliethedev/ui-builder\u0026type=date\u0026legend=top-left\"\u003e\n \u003cpicture\u003e\n   \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://api.star-history.com/svg?repos=olliethedev/ui-builder\u0026type=date\u0026theme=dark\u0026legend=top-left\" /\u003e\n   \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://api.star-history.com/svg?repos=olliethedev/ui-builder\u0026type=date\u0026legend=top-left\" /\u003e\n   \u003cimg alt=\"Star History Chart\" src=\"https://api.star-history.com/svg?repos=olliethedev/ui-builder\u0026type=date\u0026legend=top-left\" /\u003e\n \u003c/picture\u003e\n\u003c/a\u003e\n","funding_links":["https://github.com/sponsors/olliethedev"],"categories":["Apps","Tools","TypeScript","Components \u0026 Libraries"],"sub_categories":["Tools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folliethedev%2Fui-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Folliethedev%2Fui-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folliethedev%2Fui-builder/lists"}