Component Roadmap
This page is the build order for the component library.
I’m using Atomic Design to keep things organized, starting with the smallest building blocks and moving up into reusable patterns and full UI sections.
The first component I’m building is Button.
What “done” means
Section titled “What “done” means”For this project, a component is considered done when it has:
- a clear purpose and a small API
- sensible defaults (no “required config” just to use it)
- documented variants + states
- keyboard + focus-visible behavior that feels intentional
- semantic token usage (no hard-coded palette values)
- Storybook coverage for real usage
- stable visuals for Chromatic snapshots
Roadmap (Atomic Design)
Section titled “Roadmap (Atomic Design)”This list will change as the system grows, but the order is intentional.
Atoms are the smallest pieces. These are the foundation.
- Button (first)
- Link
- Badge / Pill
- Icon (wrapper + sizing rules)
- Spinner / Loading
- Separator
Why start here: Buttons and links show up everywhere, and they force good defaults early (states, focus, spacing, tokens).
Molecules
Section titled “Molecules”Molecules combine atoms into repeatable UI patterns.
- Icon Button
- Button Group
- Form Field (label + hint + error + described-by wiring)
- Input
- Textarea
- Select (later)
Why this order: If I don’t lock down form patterns early, inconsistencies spread fast.
Organisms
Section titled “Organisms”Organisms are bigger UI sections made of smaller parts.
- Card
- Header / Navigation
- Footer
- Alert / Callout
- Empty state pattern
- Modal / Dialog (later)
Why this order: These are high-usage surfaces that make the system feel real without needing the “hard stuff” too early.
Templates
Section titled “Templates”Templates define layout structure without being tied to specific content.
- Page layout conventions (container, spacing, max-widths)
- Section patterns (stacked headers, grids, content blocks)
- Form layout pattern (contact)
Pages are where components get used together in real layouts.
- Home
- Projects
- Blog
- Docs
- Contact
This roadmap is a working list. I’ll adjust the order as the system evolves, but the goal stays the same: build a solid foundation first, then layer on more complex patterns.