atomic-design

Atomic Design organizes React components into five hierarchical tiers: atoms (basic UI elements like buttons), molecules (simple component groups), organisms (complex sections), templates (page layouts), and pages (full screens). This structure creates a scalable, maintainable component library with clear separation of concerns and reusable building blocks.

Organize your src/components directory into five folders: atoms, molecules, organisms, templates, and pages. Each tier contains TypeScript/TSX components with explicit export barrels, consistent naming conventions, and typed props. This layout reflects UI grain and supports component library scalability.

Yes. Atomic Design works with TypeScript/TSX components through proper props typing and structured folder organization. Explicit export barrels and consistent naming conventions ensure type safety and maintainability across your component hierarchy.

Implement Atomic Design when building component libraries, design systems, or projects requiring a scalable UI hierarchy. It's ideal for teams needing consistent naming, explicit export patterns, and clear component roles across multiple pages and features.

Atoms are indivisible UI elements (buttons, inputs). Molecules combine atoms into functional units (search bars, form fields). Organisms group molecules into complex, self-contained sections (headers, cards). Each tier increases complexity and represents distinct responsibility levels.

No. Atomic Design is a methodology for structuring components that can be applied to any React project. While it naturally supports design system development, you can use it to organize any component library, regardless of scale or existing design documentation.