# danilowoz/react-atomic-design

🔬 How the Atomic Design methodology can create a great design system from scratch and make better developers.

Repository: https://github.com/danilowoz/react-atomic-design
Canonical: https://ross.abutalabs.com/products/react-atomic-design
Homepage: https://danilowoz.com/blog/atomic-design-with-react
Language: JavaScript
License Family: other
Topics: css-architecture, design-patterns, react, atomic-design, atomic-css, boilerplate, storybook, css-modules, flowtype
Last push: 2023-01-24T22:46:28+00:00

## Health v2 (maintenance only)
Score: 32/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 0, release rhythm 35, longevity 100
- inputs: {"age_days": 3223, "days_push": 1317, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases, no_license
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1849, forks 215 (observed 2026-08-28T04:05:44.197091+00:00)

## What it is
A boilerplate demonstrating the Atomic Design methodology in React, organizing components into atoms, molecules, organisms, templates, and pages. It ships with Storybook, CSS Modules, and Flow, and doubles as a tutorial for building design systems.

## Use cases
- learn atomic design with react
- boilerplate for react design system
- structure react components with css modules
- set up storybook with atomic design
- example of component hierarchy atoms molecules organisms

## When to choose
- learning or teaching atomic design in React
- starting a component-driven project that wants a proven folder structure
- you want a Storybook-based component showcase scaffold

## When to avoid
- you need a production-maintained library with a license and active releases
- you prefer CSS-in-JS or Tailwind over CSS Modules
- you need modern tooling like TypeScript instead of Flow

## Facets
- artifact type: learning-resource
- maturity: maintenance
- function: ui-components, css-framework, developer-tools
- domain: frontend, web-development, web-design, tutorials
- platform: cross-platform
- tags: atomic-design, react, storybook, css-modules, design-system, flowtype, boilerplate, boilerplate, nodejs, web-server

## Member repositories
- danilowoz/react-atomic-design (main) score 32

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:05:44.197091+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T08:32:17.007457+00:00, confidence not recorded.
  - readme: https://github.com/danilowoz/react-atomic-design (fetched 2026-08-28T04:05:44.197091+00:00, sha 67c4058f301a)
  - homepage: https://danilowoz.com/blog/atomic-design-with-react (fetched 2026-08-29T10:56:22.847285+00:00, sha f0ec5e9fe4df)
- Data as of 2026-08-30T08:39:29.467469+00:00.