# curio

> Small, delightful React components for personal sites: music players, maps, theme sliders, project layouts and more. Built with React + Tailwind CSS v4, with a neutral default look themed through --curio-* CSS variables.

Install any component with the shadcn CLI:
npx shadcn@latest add https://curio-components.vercel.app/r/<name>.json

After the first install, import the tokens once in your global CSS: @import "./curio.css";

## Base

- [Base](https://curio-components.vercel.app/docs/curio-base): Design tokens, animations and shared types used by every curio component. Install: https://curio-components.vercel.app/r/curio-base.json

## Music

- [Record player](https://curio-components.vercel.app/docs/record-player): Album art as a spinning record; a tonearm swings onto it while music is playing. Install: https://curio-components.vercel.app/r/record-player.json
- [Inline track](https://curio-components.vercel.app/docs/inline-track): The current song written into a sentence, with a cover preview on hover. Install: https://curio-components.vercel.app/r/inline-track.json
- [Cassette](https://curio-components.vercel.app/docs/cassette): A little tape whose reels turn while something is playing. Install: https://curio-components.vercel.app/r/cassette.json
- [Terminal track](https://curio-components.vercel.app/docs/terminal-track): A command-line readout of the current song with a blinking cursor. Install: https://curio-components.vercel.app/r/terminal-track.json
- [Waveform](https://curio-components.vercel.app/docs/waveform): A strip of bars shaped by the song that dance while it plays. Install: https://curio-components.vercel.app/r/waveform.json
- [Polaroid](https://curio-components.vercel.app/docs/polaroid): The album cover pinned like a photo; it straightens up on hover. Install: https://curio-components.vercel.app/r/polaroid.json

## Maps

- [Classic map](https://curio-components.vercel.app/docs/map-classic): Soft grey street map with a pulsing pin and a small label. follows light/dark. Install: https://curio-components.vercel.app/r/map-classic.json
- [Mono map](https://curio-components.vercel.app/docs/map-mono): Black-and-white street map with coordinates and a live local clock. Install: https://curio-components.vercel.app/r/map-mono.json
- [Satellite map](https://curio-components.vercel.app/docs/map-satellite): Real satellite imagery with crosshairs through the location. Install: https://curio-components.vercel.app/r/map-satellite.json
- [Blueprint map](https://curio-components.vercel.app/docs/map-blueprint): Streets redrawn as a blue technical plan on a grid. Install: https://curio-components.vercel.app/r/map-blueprint.json
- [Zoom map](https://curio-components.vercel.app/docs/map-zoom): Shows the whole region, then dives into the city on hover. Install: https://curio-components.vercel.app/r/map-zoom.json
- [Radar map](https://curio-components.vercel.app/docs/map-radar): Dark map with a sweeping scanner and range rings. Install: https://curio-components.vercel.app/r/map-radar.json

## Sliders

- [Pill slider](https://curio-components.vercel.app/docs/pill-slider): A tiny bar that swells on hover, fills as you drag and stretches past the ends. Install: https://curio-components.vercel.app/r/pill-slider.json
- [Sun arc slider](https://curio-components.vercel.app/docs/sun-arc-slider): Drag the sun across the sky; it becomes a moon after dark. Install: https://curio-components.vercel.app/r/sun-arc-slider.json
- [Knob slider](https://curio-components.vercel.app/docs/knob-slider): A small dial you drag, scroll or click to turn. Install: https://curio-components.vercel.app/r/knob-slider.json
- [Swatch slider](https://curio-components.vercel.app/docs/swatch-slider): Tiny squares in each option’s colours that spread apart on hover. Install: https://curio-components.vercel.app/r/swatch-slider.json
- [Ruler slider](https://curio-components.vercel.app/docs/ruler-slider): Scrub a strip of tick marks under a fixed marker. Install: https://curio-components.vercel.app/r/ruler-slider.json
- [Gradient slider](https://curio-components.vercel.app/docs/gradient-slider): A thin bar painted with every option’s colour; the thumb shows a label. Install: https://curio-components.vercel.app/r/gradient-slider.json

## Projects

- [Project timeline](https://curio-components.vercel.app/docs/project-timeline): Projects grouped by year with a line and a dot per project. Install: https://curio-components.vercel.app/r/project-timeline.json
- [Project sentence](https://curio-components.vercel.app/docs/project-sentence): Projects written into a sentence; hover a name for a card. Install: https://curio-components.vercel.app/r/project-sentence.json
- [Hover preview](https://curio-components.vercel.app/docs/project-hover-preview): Plain rows with a screenshot that follows the cursor. Install: https://curio-components.vercel.app/r/project-hover-preview.json
- [Project accordion](https://curio-components.vercel.app/docs/project-accordion): Names only; open one for details, tags and a preview. Install: https://curio-components.vercel.app/r/project-accordion.json
- [Project tiles](https://curio-components.vercel.app/docs/project-tiles): Square cards with screenshots. Install: https://curio-components.vercel.app/r/project-tiles.json
- [Status rows](https://curio-components.vercel.app/docs/project-status-rows): Rows with a live/archived dot and tech tags. Install: https://curio-components.vercel.app/r/project-status-rows.json

## Extras

- [Hover cards](https://curio-components.vercel.app/docs/hover-cards): A row of icons sharing one card that slides and resizes between them. Install: https://curio-components.vercel.app/r/hover-cards.json
- [Contribution grid](https://curio-components.vercel.app/docs/contribution-grid): A github-style activity grid tinted with your accent colour. Install: https://curio-components.vercel.app/r/contribution-grid.json
- [Pronounce button](https://curio-components.vercel.app/docs/pronounce-button): A speaker that plays how your name is said, from a recording or the browser’s voice. Install: https://curio-components.vercel.app/r/pronounce-button.json
- [Theme toggle](https://curio-components.vercel.app/docs/theme-toggle): A sun that morphs into a moon; the new theme grows out of the button. Install: https://curio-components.vercel.app/r/theme-toggle.json
- [Live clock](https://curio-components.vercel.app/docs/live-clock): A ticking clock for any time zone. Install: https://curio-components.vercel.app/r/live-clock.json