Componentize Boilerplate

A boilerplate for UI components development based on Storybook and Rollup

by Gabriel Garnica

This boilerplate is a starting point for component-based web development. It uses Storybook to develop components in isolation with documentation, and Rollup to bundle components and publish as NPM package for multiple projects usage.

Supports multiple UI components frameworks, including:

• Mantine
• Ant Design
• Material UI (MUI)
• React Bootstrap
• Chakra UI (WIP, not ready yet)

Getting Started

1. Clone the repository

git clone (repo url)

2. Install dependencies

npm install

3. Use the CLI setup script to prepare the boilerplate with the desired UI framework

npm run setup

### 4. Remove the unused boilerplate files through the CLI option (optional)

5. Start Storybook

npm run storybook

6. Upload the changes to your own repository changing the remote URL

git remote set-url origin (your repo url)

7. Develop your components in isolation, document them and publish them as NPM package

Notes

• The boilerplate is based on the Component Driven User Interfaces methodology.
• To learn more about Storybook and how to write stories, check the official documentation.
• To learn more about Rollup, check the official documentation.
• To learn more about publishing NPM packages, check the official documentation.
• For more information contact write me an email or reach me via Slack.