4 variants: primary, secondary, ghost, danger. Full keyboard nav.
BADGE
infosuccesserror
Semantic color variants for status, labels, and categorization.
CARD
Title
Content area
Header + body layout with optional footer slot.
SWITCH
Toggle switch with smooth state transitions. Click to try.
TOOLTIP
hover me
This is a tooltip
Hover-triggered tooltip with auto-positioning.
PROGRESS BAR
Configurable fill, color, and height. Animated transitions.
CHECKBOX
Custom styled with label, indeterminate state support.
TABS
Overview
Details
Settings
Tab navigation with active indicator and keyboard nav.
DIALOG / MODAL
Accessible modal with focus trap and keyboard close.
why i built this
Stop rebuilding the same button for the fifth time
01
Consistency across projects
Every app I build uses the same Button, the same Badge, the same Card. Without a shared library, each one drifts — slightly different padding, slightly different hover states. A shared library enforces consistency without thinking about it.
02
A learning exercise that actually shipped
Building accessible, composable components from scratch taught me more about React patterns than any tutorial. Ref forwarding, controlled vs uncontrolled, compound components — this library is where I figured all of that out.
03
Documentation as a discipline
Writing docs forces you to think about the API from the consumer's perspective. If something is hard to explain, it's usually hard to use. The docs site keeps me honest.
04
Open to anyone
No npm package, no install step — just copy-paste the component you need. Deliberately low friction. If the component doesn't fit your needs, fork it on GitHub and change it.
Modal title
This is the modal body. It closes on Escape or overlay click.