atomic-design-molecules
Atomic Design: Molecules
Master the creation of molecule components - functional groups of atoms that work together as a unit. Molecules combine multiple atoms to create more complex, purposeful UI elements.
What Are Molecules?
Molecules are the first level of composition in Atomic Design. They are:
- Composed of atoms only: Never include other molecules
- Single purpose: Do one thing well
- Functional units: Atoms working together for a specific task
- Reusable: Used across different organisms and contexts
- Minimally stateful: May have limited internal state for UI concerns
Common Molecule Types
Form Molecules
- Form fields (label + input + error)
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.
364solid-principles
Use during implementation when designing modules, functions, and components requiring SOLID principles for maintainable, flexible architecture.
248angular-rxjs-patterns
Use when handling async operations in Angular applications with observables, operators, and subjects.
216