Variant Matrix Gallery
Top 10 atoms from react/src/atoms/ — each rendered across full variant × state matrix. Pure HTML/CSS mockups (no React runtime needed); the inline CSS mirrors what the components emit via Tailwind.
Atoms
Button
5 variants × 5 states + 3 sizes + loading.
1.30 KB min0.68 KB gz66 LOC
Input
Slots for label / error / prefix / suffix.
1.22 KB min0.62 KB gz58 LOC
Select
Native select styled, inline chevron, error state.
1.41 KB min0.77 KB gz76 LOC
Avatar
5 sizes × 4 status dots + initials fallback.
1.08 KB min0.65 KB gz82 LOC
Badge
6 variants × 3 tones (solid / soft / outline).
1.18 KB min0.56 KB gz75 LOC
Switch
Controlled / uncontrolled toggle + label/desc.
1.10 KB min0.64 KB gz64 LOC
Checkbox
3 states (unchecked / checked / indeterminate).
0.89 KB min0.56 KB gz48 LOC
Radio
Selected / unselected × interaction states.
0.76 KB min0.48 KB gz41 LOC
Progress
3 sizes × 5 tones + determinate / indeterminate.
1.02 KB min0.59 KB gz66 LOC
Spinner
4 sizes × 2 colors (primary / current).
0.55 KB min0.37 KB gz35 LOC
Bundle summary
Full lib (src/index.ts): 77.4 KB min / 20.8 KB gz with clsx + tailwind-merge inlined; 57.7 KB min / 14.5 KB gz bare.Top-10 atoms combined (bare): 10.51 KB min / 5.92 KB gz.
Tree-shake: working —
import { Button } only pulls Button code + the shared cn() baseline.Heaviest 3: Select (1.41 KB), Button (1.30 KB), Input (1.22 KB).