Getting started
Introduction
Curio is a cabinet of small, delightful React components for personal sites.
Most component libraries give you buttons and dialogs. Curio gives you the other things: a record that spins while you’re listening, a map of your city, a slider that moves the sun across the sky, a timeline of what you’ve built. The details that make a page feel like someone’s.
How it works
Curio isn’t a package you import from. Each component is copied into your project with one command, so the code is yours to read and change. It uses the same registry format as shadcn/ui, so the shadcn CLI does the copying.
- React 18 or 19, with Tailwind CSS v4
- No runtime dependencies beyond React
- A neutral default look, restyled with eight
--curio-*CSS variables - Works in light and dark, and respects reduced motion
What’s in the cabinet
- Music (6): Record player, Inline track, Cassette, Terminal track, Waveform, Polaroid
- Maps (6): Classic map, Mono map, Satellite map, Blueprint map, Zoom map, Radar map
- Theme sliders (6): Pill slider, Sun arc slider, Knob slider, Swatch slider, Ruler slider, Gradient slider
- Projects (6): Project timeline, Project sentence, Hover preview, Project accordion, Project tiles, Status rows
- Extras (5): Hover cards, Contribution grid, Pronounce button, Theme toggle, Live clock
29 pieces so far. Start with installation, or browse them all.