Components, Variants & States

A component is a contract: a stable anatomy (named parts), an API (props/slots), and a complete state matrix. Ship all three or you ship a liability. The #1 source of "feels broken" UI is missing states — not missing features.

1. Component anatomy — the parts model

Every component decomposes into named parts. Name them; style each part independently; expose them as slots. Headless libraries (Radix, ARK, React Aria) formalize this as Root, Trigger, Content, Item, etc.

┌─ Container (Root) ──────────────────────────────┐
│  [leading slot]  Label / Value  [trailing slot] │
│                  Helper / Description text       │
└─────────────────────────────────────────────────┘