Atomic Design Component Hierarchy Sample
A small React sample that visualizes Atomic Design-style component granularity at a glance.
ReactAtomic DesignUIDesign System
Role
Personal project
Tech Stack
React, Atomic Design, Component Design
Background
Atomic Design is easy to understand conceptually, but deciding how to split components can feel subjective in real projects. I created a small React sample to make the granularity differences easy to scan at a glance.
Goal
- Make the relationship between Atoms, Molecules, Organisms, and Pages visually obvious
- Offer a rough sense of responsibility boundaries at each layer
Repository
The implementation lives here. Hope it helps.
https://github.com/s-soya2421/frontend-design/tree/main/react/atomic-design-sample