Loading repository data…
KaiHotz / repository
A modern, production-ready boilerplate for building React component libraries. This project provides a complete development environment with Rollup bundling, TypeScript support, Storybook for component documentation, and comprehensive testing setup.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
A modern, production-ready boilerplate for building React component libraries. This project provides a complete development environment with Rollup bundling, TypeScript support, Storybook for component documentation, and comprehensive testing setup.
react-rollup-boilerplate/
├── src/
│ ├── components/ # React components
│ │ ├── Button/ # Example Button component
│ │ │ ├── Button.tsx
│ │ │ ├── Button.scss
│ │ │ ├── Button.test.tsx
│ │ │ ├── Button.stories.tsx
│ │ │ └── index.ts
│ │ ├── Tabs/ # Example Tabs component
│ │ │ ├── Tabs.tsx
│ │ │ ├── Tab.tsx
│ │ │ ├── TabPanel.tsx
│ │ │ ├── TabsList.tsx
│ │ │ ├── context.ts
│ │ │ ├── *.scss
│ │ │ ├── Tabs.stories.tsx
│ │ │ └── index.ts
│ │ └── index.ts # Component exports
│ └── index.ts # Main library entry point
├── dist/ # Built library output
├── storybook-static/ # Built Storybook for deployment
├── rollup.config.mjs # Rollup bundler configuration
├── tsconfig.json # TypeScript configuration
├── vitest.config.ts # Vitest test configuration
├── eslint.config.js # ESLint configuration
└── .stylelintrc.cjs # Stylelint configuration
Selected from shared topics, language and repository description—not editorial ratings.
MhamedEl-shahawy /
A modern, production-ready React application boilerplate built with Vite, TypeScript, and enterprise-grade features. This boilerplate provides a solid foundation for building scalable web applications
46/100 healthgit clone git@github.com:KaiHotz/react-rollup-boilerplate.git
cd react-rollup-boilerplate
yarn install
Download the .zip file, extract it, then:
cd react-rollup-boilerplate
yarn install
Start the development environment with Storybook:
yarn start
This launches Storybook at http://localhost:6006, where you can:
src/components/ with your component nameYourComponent.tsx - Component implementationYourComponent.scss - Component stylesYourComponent.test.tsx - Unit testsYourComponent.stories.tsx - Storybook storiesindex.ts - Component exportsrc/components/index.tsRefer to the Button and Tabs components as examples.
Import styles directly into your components:
import './YourComponent.scss';
For CSS Modules support, refer to rollup-plugin-postcss.
SCSS and CSS are linted using Stylelint with BEM methodology:
yarn stylelint # Check styles
yarn stylelint:fix # Auto-fix style issues
yarn lint # Run all linters (ESLint, Stylelint, TypeScript)
yarn lint:fix # Auto-fix all linting issues
yarn eslint # Run ESLint only
yarn eslint:fix # Auto-fix ESLint issues
yarn check-types # Run TypeScript type checker
Customize rules in eslint.config.js.
Testing is powered by Vitest and React Testing Library:
yarn test # Run tests in watch mode
yarn test:coverage # Run tests with coverage report
See Button.test.tsx for example test patterns.
Build your library for production:
yarn build
Output is generated in the dist/ folder with:
.npmrc filepublishConfig.registry in package.jsonyarn release
This runs linting, tests, builds, and publishes your library.
yarn storybook
yarn storybook:build
Output is generated in storybook-static/.
Update the homepage URL in package.json, then:
yarn storybook:deploy
For more information, see the Storybook documentation.
| Script | Description |
|---|---|
yarn start | Start Storybook development server |
yarn build | Build library to dist/ folder |
yarn test | Run tests in watch mode |
yarn test:coverage | Run tests with coverage report |
yarn lint | Run all linters (ESLint, Stylelint, TypeScript) |
yarn lint:fix | Auto-fix all linting issues |
yarn eslint | Run ESLint only |
yarn eslint:fix | Auto-fix ESLint issues |
yarn stylelint | Run Stylelint only |
yarn stylelint:fix | Auto-fix Stylelint issues |
yarn check-types | Run TypeScript type checker |
yarn ci | Run linting and tests (for CI/CD) |
yarn release | Lint, test, build, and publish to NPM |
yarn storybook | Start Storybook |
yarn storybook:build | Build static Storybook |
yarn storybook:deploy | Deploy Storybook to GitHub Pages |
This project is licensed under the MIT License - see the LICENSE file for details.
Kai Hotz
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.