{"id":15062702,"url":"https://github.com/ansango/rtb-starter","last_synced_at":"2026-01-03T11:20:07.671Z","repository":{"id":101969530,"uuid":"453259889","full_name":"ansango/rtb-starter","owner":"ansango","description":"A starter UI library generator based in React, Tailwind and Storybook","archived":false,"fork":false,"pushed_at":"2022-01-31T20:14:19.000Z","size":1694,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-22T17:12:26.145Z","etag":null,"topics":["eslint","jest","plop","prettier","react","react-unit-testing","reactjs","rollup","storybook","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"rtb-starter.vercel.app","language":"JavaScript","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/ansango.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","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":"ansango"}},"created_at":"2022-01-29T00:46:45.000Z","updated_at":"2022-09-22T21:28:37.000Z","dependencies_parsed_at":"2023-06-09T23:01:50.533Z","dependency_job_id":null,"html_url":"https://github.com/ansango/rtb-starter","commit_stats":{"total_commits":54,"total_committers":1,"mean_commits":54.0,"dds":0.0,"last_synced_commit":"180305c718313d268e7dd4f04098a55383142a1c"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ansango%2Frtb-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ansango%2Frtb-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ansango%2Frtb-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ansango%2Frtb-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ansango","download_url":"https://codeload.github.com/ansango/rtb-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243826829,"owners_count":20354220,"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","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":["eslint","jest","plop","prettier","react","react-unit-testing","reactjs","rollup","storybook","tailwindcss","typescript"],"created_at":"2024-09-24T23:44:52.710Z","updated_at":"2026-01-03T11:20:07.639Z","avatar_url":"https://github.com/ansango.png","language":"JavaScript","funding_links":["https://github.com/sponsors/ansango"],"categories":[],"sub_categories":[],"readme":"Generate UI Component libraries with **React** and **Tailwindcss**\n\n[![MIT License][license-shield]][license-url]\n[![LinkedIn][linkedin-shield]][linkedin-url]\n\n\u003cdiv align=\"center\"\u003e\n \u003ca href=\"https://github.com/ansango/rtb-starter\"\u003e\n    \u003cimg src=\"assets/logo.svg\" alt=\"Logo\" width=\"180\" height=\"180\"\u003e\n  \u003c/a\u003e\n  \u003ch1 align=\"center\"\u003eReact Tailwind Blocks - Starter\u003c/h1\u003e\n\n  \u003cp align=\"center\"\u003e\n    Generate UI Component libraries with\n    \u003ca href=\"https://reactjs.org/\"\u003eReact\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/ansango/rtb-starter/issues\"\u003eReport a bug\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\u003ca href=\"#about\"\u003eIntroduction\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#create-a-component\"\u003eCreate a Component\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#test-and-lint\"\u003eTest and Lint\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#build-deploy-and-install-your-package\"\u003eBuild, deploy and install your package\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n## Introduction\n\n### About\n\nThis project has been created to generate component libraries in [React](https://reactjs.org/).\n\nIt is based on [React](https://reactjs.org/), [Tailwindcss](https://tailwindcss.com/), and [Storybook](https://storybook.js.org/). With this starter you can start writing isolated and tested components, ready to publish and consume as packages in [npm](https://www.npmjs.com/).\n\n\u003e The Storybook is **[here](https://rtb-starter.vercel.app/)**\n\n\u003e The demo package is published in **[npm](https://www.npmjs.com/package/rtb-starter)**\n\n### Built with\n\n\u003cdiv style=\"display:flex; align-items:center; flex:wrap;\"\u003e\n  \u003ca href=\"https://reactjs.org/\" target=\"_blank\" style=\"padding:0 5px 0 5px; text-align:center\"\u003e\n    \u003cimg src=\"assets/react.svg\" width=\"60\" height=\"60\" /\u003e\n  \u003c/a\u003e\n  \n  \u003ca href=\"https://www.typescriptlang.org/\" target=\"_blank\" style=\"padding:0 5px 0 5px; text-align:center;\"\u003e\n    \u003cimg src=\"assets/typescript.svg\" width=\"60\" height=\"60\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://tailwindcss.com/\" target=\"_blank\" style=\"padding:0 5px 0 5px; text-align:center;\"\u003e\n    \u003cimg src=\"assets/tailwindcss.svg\" width=\"60\" height=\"60\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://storybook.js.org/\" target=\"_blank\" style=\"padding:0 5px 0 5px; text-align:center\"\u003e\n    \u003cimg src=\"assets/storybook.svg\" width=\"60\" height=\"60\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://jestjs.io/\" target=\"_blank\" style=\"padding:0 5px 0 5px; text-align:center\"\u003e\n    \u003cimg src=\"assets/jest.svg\" width=\"60\" height=\"60\" /\u003e\n  \u003c/a\u003e\n  \u003ca\n    href=\"https://testing-library.com/docs/react-testing-library/intro/\"\n    target=\"_blank\"\n    style=\"padding:0 5px 0 5px; text-align:center\"\u003e\n    \u003cimg src=\"assets/testinglibrary.svg\" width=\"60\" height=\"60\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://eslint.org/\" target=\"_blank\" style=\"padding:0 5px 0 5px; text-align:center\"\u003e\n    \u003cimg src=\"assets/eslint.svg\" width=\"60\" height=\"60\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://prettier.io/\" target=\"_blank\" style=\"padding:0 5px 0 5px; text-align:center\"\u003e\n    \u003cimg src=\"assets/prettier.svg\" width=\"60\" height=\"60\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://rollupjs.org/guide/en/\" target=\"_blank\" style=\"padding:0 5px 0 5px; text-align:center\"\u003e\n    \u003cimg src=\"assets/rollup.svg\" width=\"60\" height=\"60\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://plopjs.com/\" target=\"_blank\" style=\"padding:0 5px 0 5px; text-align:center\"\u003e\n  \u003cimg src=\"assets/plop.png\" width=\"60\" height=\"60\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://typicode.github.io/husky/\" target=\"_blank\" style=\"padding:0 5px 0 5px; text-align:center\"\u003e\n    \u003cimg src=\"assets/husky.png\" width=\"60\" height=\"60\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## Getting Started\n\nUse Github templete or:\n\n```bash\ngit clone https://github.com/ansango/rtb-starter.git\n```\n\nand install the dependencies:\n\n```bash\nyarn install # or npm install\n```\n\nThen run in your terminal:\n\n```bash\nyarn start # npm start\n```\n\n\u003e This runs a script manager, then you can choose what you want to do. 😄\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"assets/readme/manager.png\" width=\"650\"\u003e\n\u003c/div\u003e\n\n\u003e ⚠️ The CLI works fine in **`bash`**, but in **`powershell`** the arrows do not allow you to select anything, so you will have to create the files manually. **[This is a bug in the Node core on Windows](https://github.com/SBoudrias/Inquirer.js/issues/793).**\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n## Create a Component\n\nOpen your terminal and run:\n\n```bash\n yarn cli # or select \"cli\" option in the Script Manager\n```\n\nWith the CLI you can choose what you want to create, choose a component and type a name:\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"assets/readme/component.png\" width=\"650\"\u003e\n\u003c/div\u003e\n\n\u003e This generates template files to coding a component. You will find all the files in `src/components` folder. Your component folder contains:\n\n- `Component.tsx` file:\n\n```jsx\nimport { FC } from \"react\";\nimport * as cn from \"./SampleComponentStyles\";\n\nexport type SampleComponentProps = {\n  /**\n   * Description of options in Storybook\n   */\n  option?: \"option__one\" | \"option__two\" | \"option__three\",\n  /**\n   * Optional click handler\n   */\n  onClick?: () =\u003e void,\n  /**\n   * Class Name override\n   */\n  className?: string,\n};\n\n/**\n * Description of SampleComponent component displayed in Storybook\n */\n\nconst SampleComponent: FC\u003cSampleComponentProps\u003e = ({\n  option = \"option__one\",\n  className,\n  ...props\n}) =\u003e {\n  const cnOption = cn.options[option];\n  const styles = className ?? cnOption;\n  return (\n    \u003cdiv className={styles} {...props}\u003e\n      \u003cspan\u003eSampleComponent\u003c/span\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default SampleComponent;\n```\n\n- `ComponentStyle.ts` file, to write Tailwind classes as blocks:\n\n```js\n/**\n ** Write your tailwind classes as objects and strings and import them in your component\n */\n\nexport const options = {\n  option__one: \"bg-red-500 text-white font-bold py-2 px-4 rounded max-w-xs cursor-pointer\",\n  option__two: \"bg-green-500 text-white font-bold py-2 px-4 rounded max-w-sm cursor-pointer\",\n  option__three: \"bg-blue-500 text-white font-bold py-2 px-4 rounded max-w-md cursor-pointer\",\n};\n```\n\n- `Component.test.tsx` file, to testing your component:\n\n```jsx\n/**\n *? SampleComponent Test\n */\n\nimport { render, screen } from \"@testing-library/react\";\n\nimport SampleComponent from \"./SampleComponent\";\n\ndescribe(\"\u003cSampleComponent /\u003e\", () =\u003e {\n  it(\"should render\", () =\u003e {\n    render(\u003cSampleComponent /\u003e);\n    expect(screen.getByText(\"SampleComponent\")).toBeInTheDocument();\n  });\n});\n```\n\n- `Componente.stories.tsx` file to write your Storybook component:\n\n```jsx\n/**\n * ? SampleComponent Story\n */\n\nimport { ComponentStory, ComponentMeta } from \"@storybook/react\";\nimport SampleComponent from \"./SampleComponent\";\n\nexport default {\n  title: 'Samples/SampleComponent',\n  component: SampleComponent,\n} as ComponentMeta\u003ctypeof SampleComponent\u003e;\n\nconst Template: ComponentStory\u003ctypeof SampleComponent\u003e = (args) =\u003e \u003cSampleComponent {...args} /\u003e;\n\nexport const OptionOne = Template.bind({});\n\nOptionOne.args = {\n  option: \"option__one\",\n};\n\nexport const CustomClass = Template.bind({});\n\nCustomClass.args = {\n  className: \"bg-yellow-500 text-white font-bold py-2 px-4 rounded max-w-lg cursor-pointer\",\n};\n```\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n### Create plain Docs pages\n\nStorybook supports .mdx files, so we will create our flat documentation this way. To do this we go back to our CLI and select the docs option. Type a section and a name and that's all 😄\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"assets/readme/docs.png\" width=\"650\"\u003e\n\u003c/div\u003e\n\n\u003e This generates template file write \"plain\" docs as Markdown files. You will find all the files in `src/docs` folder. Your doc file contains:\n\n```md\nimport { Meta } from \"@storybook/addon-docs\";\n\n\u003cMeta title=\"Sample/Sample\" /\u003eimport { Meta } from \"@storybook/addon-docs\";\n\n# Sample\n\n...\n```\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n## Test and Lint\n\nYou can run tests:\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"assets/readme/test.png\" width=\"650\"\u003e\n\u003c/div\u003e\n\nOr you can also run unit tests in **watch mode**:\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"assets/readme/watch.png\" width=\"650\"\u003e\n\u003c/div\u003e\n\nYou can run lint, [ESLint](https://eslint.org/):\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"assets/readme/lint.png\" width=\"650\"\u003e\n\u003c/div\u003e\n\n\u003e Before you can commit to your repository [ESLint](https://eslint.org/) and all tests will be run, if they fail [Husky](https://typicode.github.io/husky/#/) will not let you commit.\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n## Build, deploy and install your package\n\n### Build and deploy your Storybook\n\nIt's easy, to compile your Storybook in **`/storybook-static` folder** run:\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"assets/readme/sb.png\" width=\"650\"\u003e\n\u003c/div\u003e\n\n\u003e Easy to do at [Vercel](https://vercel.com/).\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n### Build and publish your library\n\nBuild runs by [Rollup](https://rollupjs.org/) and its entry point is `src/index.ts` file.\n\nPlease make sure that **all your components** are being imported and exported in this file.\n\n```js\n// src/index.ts\n\nimport Button from \"./components/Button/Button\";\nexport { Button };\n```\n\nThen **run**:\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"assets/readme/publish.png\" width=\"650\"\u003e\n\u003c/div\u003e\n\n\u003e You can find the bundle in **`/dist` folder** to be published at [npm](https://docs.npmjs.com/cli/v8/commands/npm-publish)\n\n\u003e To publish run `npm publish` (after login `npm login`)\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n### Install your own library\n\nSimple, install it!\n\n```bash\nyarn add {awesome-library} # or npm i {awesome-library}\n```\n\nBecause we use Tailwindcss, we have to install and configure it. [Read the docs](https://tailwindcss.com/docs/installation).\n\nYou have to add the following in your `tailwind.config.js`:\n\n```js\nmodule.exports = {\n  content: [\n    \"./components/**/*.{html,js}\",\n    \"./pages/**/*.{html,js}\",\n    \"./node_modules/awesome-library/dist/**/*.{js,ts,jsx,tsx}\",\n  ],\n  // ...\n};\n```\n\n\u003e [See more](https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries)\n\nThese are current `peerDependencies` you must be in your new project (`package.json`):\n\n```json\n{\n  \"dependencies\": {\n    \"postcss\": \"^8.4.5\",\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\"\n  },\n  \"devDependencies\": {\n    \"tailwindcss\": \"^3.0.16\"\n  }\n}\n```\n\nIf you have problems, please open an [issue](https://github.com/ansango/rtb-starter/issues)\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n## Contributing\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nIf you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag \"enhancement\".\nDon't forget to give the project a star! Thanks again!\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n\u003e [Stars are welcome!](https://github.com/ansango/rtb-starter) ⭐⭐⭐\n\n## License\n\nDistributed under the MIT License. See [`LICENSE.txt`](https://github.com/ansango/rtb-starter/blob/main/LICENSE.txt) for more information.\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n\n[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=for-the-badge\n[license-url]: https://github.com/ansango/rtb-starter/blob/main/LICENSE.txt\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge\u0026logo=linkedin\u0026colorB=555\n[linkedin-url]: https://linkedin.com/in/ansango\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fansango%2Frtb-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fansango%2Frtb-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fansango%2Frtb-starter/lists"}