Atomic Design: Atoms

Master the creation of atomic components - the fundamental, indivisible building blocks of your design system. Atoms are the smallest functional units that cannot be broken down further without losing meaning.

What Are Atoms?

Atoms are the basic UI elements that serve as the foundation for everything else in your design system. They are:

• Indivisible: Cannot be broken down into smaller functional units
• Reusable: Used throughout the application in various contexts
• Stateless: Typically controlled by parent components
• Styled: Implement design tokens for consistent appearance
• Accessible: Built with a11y in mind from the start

Common Atom Types

Interactive Atoms