{"id":22179973,"url":"https://github.com/fristaildg/create-react-ds","last_synced_at":"2025-07-23T22:39:51.753Z","repository":{"id":65347313,"uuid":"577450662","full_name":"fristaildg/create-react-ds","owner":"fristaildg","description":"React Design System Boilerplate","archived":false,"fork":false,"pushed_at":"2023-07-28T10:08:12.000Z","size":494,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-23T10:53:16.531Z","etag":null,"topics":["design-system","esbuild","react","rollup","styled-components","styled-system","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/fristaildg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["fristaildg"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2022-12-12T19:10:30.000Z","updated_at":"2024-05-16T09:42:05.000Z","dependencies_parsed_at":"2024-11-16T01:16:10.998Z","dependency_job_id":"8ad7ba65-9e03-4865-a4d2-9c6a1b8d4bd5","html_url":"https://github.com/fristaildg/create-react-ds","commit_stats":{"total_commits":88,"total_committers":2,"mean_commits":44.0,"dds":0.06818181818181823,"last_synced_commit":"a2576140ca8670dd7e9ea8e89672767095f58aaf"},"previous_names":["fristaildg/create-design-system"],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/fristaildg/create-react-ds","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fristaildg%2Fcreate-react-ds","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fristaildg%2Fcreate-react-ds/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fristaildg%2Fcreate-react-ds/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fristaildg%2Fcreate-react-ds/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fristaildg","download_url":"https://codeload.github.com/fristaildg/create-react-ds/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fristaildg%2Fcreate-react-ds/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266691580,"owners_count":23969182,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["design-system","esbuild","react","rollup","styled-components","styled-system","typescript"],"created_at":"2024-12-02T09:16:16.735Z","updated_at":"2025-07-23T22:39:51.728Z","avatar_url":"https://github.com/fristaildg.png","language":"TypeScript","readme":"# Create React DS\n\n\u003e CLI for bootstrapping your own awesome React design system / components library!\n\n[![NPM](https://img.shields.io/npm/v/create-react-ds)](https://www.npmjs.com/package/create-react-ds)\n\nCreate React DS provides a simple command line interface for generating a new project with a set of predefined components and styles. This tool helps to automate the process of creating a design system, which can save a lot of time and effort for developers. The tool also provides a set of options that can be configured to customize the design system to suit the specific needs of the project or organization.\n\n## Features\n\n- Supports Typescript by default\n- Bundles `commonjs` and `es` formats\n- [Rollup](https://rollupjs.org/) and [Esbuild](https://esbuild.github.io/) for bundling\n- [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for testing\n- [Styled Components](https://styled-components.com/) for styling\n- Easy Theming functionality\n- [Storybook](https://storybook.js.org/) for local development / component stories\n- [Eslint](https://eslint.org/) and [Prettier](https://prettier.io/) for code linting and formatting\n\n## Table of contents\n\n- [Usage](#usage)\n- [Standalone mode](#standalone-mode)\n- [Development](#development)\n- [Bundle your library for publishing](#bundle-your-library-for-publishing)\n- [Test you bundle locally before publishing](#test-you-bundle-locally-before-publishing)\n- [Publish your library to npm](#publish-your-library-to-npm)\n- [Update your published library](#update-your-published-library)\n- [Using your newly created components library](#using-your-newly-created-components-library)\n  - [Install the component library and its peer dependencies](#install-the-component-library-and-its-peer-dependencies)\n  - [Import ThemeProvider in the root of your app](#import-themeprovider-in-the-root-of-your-app)\n- [Local mode](#local-mode)\n\n\n## Usage\n\nThis package requires node `\u003e=18.12.1`\n\n- [Standalone mode](#standalone-mode) - Bootstrap a new library to be developed and maintained as a project of it's own\n- Local mode - Inject the components library files and dependencies into an already existing react project\n\n## Standalone mode\nThis is de default (and recommended) way of using this library. It will bootstrap a new library to be developed and maintained as a project of it's own\n\n```bash\nnpx create-react-ds my-design-system-name\n```\n\n### Development\n\n```bash\nnpm run storybook\n```\n\nThis will start storybook in localhost\n\n### Bundle your library for publishing\n\n```bash\nnpm run build\n```\n\n### Test you bundle locally before publishing\n\n```bash\nnpm pack\n```\n\nThis will create a .tar file (with the exact same content that would be published to npm) which you can `npm install` in any react / next / remix application of yours.\nYou will be able to consume the library from that application as if it was coming from a published package.\n\n### Publish your library to npm\n\n```bash\nnpm publish\n```\n\nJust make sure the name of your library is available in npm\n\n### Update your published library\n\n```bash\nnpm version major / minor / patch\nnpm publish\n```\n\nThis will bump your library's version according to the semver standards\n\n### Using your newly created components library\n\nOnce your library is published or packed, you can install it into your react application and start using it!\n\n### Install the component library and its peer dependencies\n```bash\nnpm install path-to-your-library styled-components themed-props\n```\n\n### Import `ThemeProvider` in the root of your app\n\nIt will typically be in the `App` component, or in the `_app.tsx` file if it's a next app.\nWrap your main component in `ThemeProvider` so that you can leverage the theming functionality across your library's components in your app.\n\n```jsx\nimport { ThemeProvider } from 'your-library';\n...\n\nreturn (\n  \u003cThemeProvider\u003e\n    \u003cApp /\u003e\n  \u003c/ThemeProvider\u003e\n);\n```\n\n## Local mode\nIf you prefer to just develop your component library within your app instead of maintaining a separate project for it, then you can use this mode. It will inject the components files and dependencies into an already existing react project.\n\nThis mode assumes a typical frontend react / next.js app folder structure, so run the following command in the root of your app:\n\n```bash\nnpx create-react-ds my-design-system-name --mode=local\n```\n\nThe resulting folder structure should look something like this:\n\n```\n  myApp\n  - scripts\n  - - generate-component \u003c----\n  - - ...\n  - src\n  - - my-component-library \u003c----\n  - - ... \n  ...  \n```\n\nAlso, some changes will have happened in your `package.json` file:\n\n- All necessary dependencies installed: `styled-components`, `themed-props`\n\n\u003e *For more info on how to leverage the usage of the Theme and Styled Props, please refer to [Styled Components](https://styled-components.com/) and [Styled System](https://styled-system.com/) docs respectively.*\n\nMade with Love!! ❤️\n","funding_links":["https://github.com/sponsors/fristaildg"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffristaildg%2Fcreate-react-ds","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffristaildg%2Fcreate-react-ds","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffristaildg%2Fcreate-react-ds/lists"}