react-atomic-design
🔬 How the Atomic Design methodology can create a great design system from scratch and make better developers.
reactboilerplatecss-modulesdesign-patternsstorybookflowtypeatomic-designatomic-csscss-architectureeslintprettier
Preview
Overview
This is a React boilerplate that implements Atomic Design methodology for building reusable, consistent component systems. It uses Storybook for component documentation, Flow for type checking, CSS Modules for styling and includes tools like Webpack, Babel and ESLint to support a structured approach where components are organized into atoms, molecules, organisms, templates and pages to maximize reusability and maintainability.
Features
atomic-design-methodologycomponent-librarystorybook-integrationcss-modulesflow-typeseslintprettiersvg-sprite-loaderwebpackbabel
Feature Flags
authenticationbloglandingpageecommercerealtimeteamsOrgspwastorybook
Recommended Use Cases
design-system-creationcomponent-library-developmentscalable-ui-architectureteam-collaboration-on-components
Frontend
reactstorybook
Backend
None
Auth Providers
None
Deployment Targets
render
Payment Providers
None
Quick Facts
Stack
Framework
react
Language
javascript
CSS
css-modules
Data Layer
UI Stack
Styling
css-modules
Components
react
Developer Experience
Docker
No
Tests
No
Quickstart
Yes
env.example
No
Pricing
Classification
free
Selected
—
Notes
Open source boilerplate with MIT license