Component Thinking

Atomic design and component reuse

Atomic Design breaks interfaces into five levels: atoms, molecules, organisms, templates, and pages. Start building from the smallest elements and gradually combine them into complex interfaces.

Key Points

Atoms — Buttons, inputs, labels—the smallest units
Molecules — Search box (input + button combination)
Organisms — Navigation bars, cards, forms—complex components
Templates — Page layout structures
Pages — Complete pages with actual content

Component API Design Principles

// Good Component API Design
<Button
  variant="primary"    // Variant
  size="md"            // Size
  disabled={false}     // State
  leftIcon={<Icon />}  // Slot
  onClick={handleClick}
>
  Click Me
</Button>

// Avoid too many props
// Use composition over configuration

When designing components, consider the simplest use case first, then gradually add variants. Keep APIs simple with sensible defaults.

Previous Complete & Continue