atomic-design-atoms
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
- Buttons
More from thebushidocollective/han
android-jetpack-compose
Use when building Android UIs with Jetpack Compose, managing state with remember/mutableStateOf, or implementing declarative UI patterns.
1.1Kfastapi-async-patterns
Use when FastAPI async patterns for building high-performance APIs. Use when handling concurrent requests and async operations.
785storybook-story-writing
Use when creating or modifying Storybook stories for components. Ensures stories follow CSF3 format, properly showcase component variations, and build successfully.
487atomic-design-fundamentals
Use when applying Atomic Design methodology to organize UI components into quarks, atoms, molecules, organisms, templates, and pages. Core principles and hierarchy.
367solid-principles
Use during implementation when designing modules, functions, and components requiring SOLID principles for maintainable, flexible architecture.
250angular-rxjs-patterns
Use when handling async operations in Angular applications with observables, operators, and subjects.
216