Reusable components and interaction patterns, explored one at a time.
This is not a product, an app, or a design system. It is a component lab. Each component is designed, documented, and implemented as a real production component rather than a mockup — and each is meant to stand on its own as a case study.
A design system may eventually emerge from these. It will not be designed upfront.
One component at a time. The current component is the only priority. Depth over breadth.
Grow the system, don't design it. foundations/ stays empty until genuine
repetition appears across components. Premature abstraction is the failure mode
this repo is built to avoid.
Document the reasoning, not just the result. The interesting part of a component is the trade-offs — what was rejected, what it costs, what is still unresolved. Documentation evolves with the component and does not need to be complete on day one.
Be honest about status. A component that is half-built says so. Nothing here claims production-readiness it hasn't earned.
| Component | Status | Notes |
|---|---|---|
| Bottom Navigation | 🟡 In progress | Goo indicator built and tested; navigation core, semantics, and motion-a11y outstanding |
components/ one folder per component: src, demo, docs
foundations/ shared tokens and primitives — empty until earned
templates/ composed examples — empty until there is something to compose
docs/ lab-wide notes
Empty folders are intentional.
npm install
npm run dev # the current component's demo
npm test