{"id":28434416,"url":"https://github.com/builderio/react-design-system-demo","last_synced_at":"2026-03-02T09:02:51.691Z","repository":{"id":66175191,"uuid":"297389381","full_name":"BuilderIO/react-design-system-demo","owner":"BuilderIO","description":null,"archived":false,"fork":false,"pushed_at":"2020-09-21T16:27:58.000Z","size":167,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-30T11:50:01.395Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BuilderIO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2020-09-21T15:56:35.000Z","updated_at":"2024-03-12T21:05:41.000Z","dependencies_parsed_at":"2023-02-20T23:16:01.134Z","dependency_job_id":null,"html_url":"https://github.com/BuilderIO/react-design-system-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BuilderIO/react-design-system-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Freact-design-system-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Freact-design-system-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Freact-design-system-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Freact-design-system-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BuilderIO","download_url":"https://codeload.github.com/BuilderIO/react-design-system-demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Freact-design-system-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29996278,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T01:47:34.672Z","status":"online","status_checked_at":"2026-03-02T02:00:07.342Z","response_time":60,"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":[],"created_at":"2025-06-05T19:08:54.019Z","updated_at":"2026-03-02T09:02:51.682Z","avatar_url":"https://github.com/BuilderIO.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Builder.io custom design system example with React\n\n\u003e ✨ **Try it live [here](https://builder.io/fiddle/4b2e0a2e4b1a44a88a5e6f8c46cdfe7c)**!\n\nIn this example we show how to integrate react components with [Builder.io](https://builder.io). This is useful when you want to add the ability for your team to utilize custom components on the pages you build using the Builder editor, or even want to make it so people on your team can only build and edit your site's pages using your custom components.\n\n\u003e ⚛️ For serve side rendered examples see our [Next.js](https://github.com/BuilderIO/builder/tree/master/examples/next-js) and [Gatsby](https://github.com/BuilderIO/gatsby-starter-builder) examples\n\nThe source code for the custom components used in this demo are [here](src/components), and you can see how they are registered with Builder by looking at the files that end in `*.builder.js` ([this is an example](https://github.com/BuilderIO/builder/blob/master/examples/react-design-system/src/components/ProductsList/ProductsList.builder.js)). The logic for adding components to the Builder editor menu can be found [here](https://github.com/BuilderIO/builder/blob/master/examples/react-design-system/src/builder-settings.js)\n\n\u003e 👉**Tip:** want to limit page building to only your components? Try [components only mode](https://builder.io/c/docs/guides/components-only-mode)\n\n\u003cimg src=\"https://imgur.com/PJW3b4S.gif\" alt=\"example\" /\u003e\n\n### To run the example Locally\n\n- [Sign in or create an account](https://builder.io)\n- Create a new page\n- Clone and start the project:\n\n```bash\ngit clone git@github.com:BuilderIO/react-design-system-demo.git\nnpm install\nnpm run start\n```\n\n- Now that you have the development server running on localhost, update the preview URL of the Builder.io entry you created to : `http://localhost:3000/home`\n\n\u003cimg width=\"796\" alt=\"Screen Shot 2020-02-18 at 9 48 51 AM\" src=\"https://user-images.githubusercontent.com/5093430/74763082-f5457100-5233-11ea-870b-a1b17c7f99fe.png\"\u003e\n\nThis will allow Builder to read in all your custom component logic and allow your team to edit and build using your components.\n\nWhen you deploy this to a live or staging environment, you can change the preview URL for your model globally from [builder.io/models](https://builder.io/models) (see more about models [here](https://builder.io/c/docs/guides/getting-started-with-models) and preview urls [here](https://builder.io/c/docs/guides/preview-url))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuilderio%2Freact-design-system-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuilderio%2Freact-design-system-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuilderio%2Freact-design-system-demo/lists"}