Installation

1. A React project with Tailwind

Any Next.js, Vite or Remix app with Tailwind CSS v4 works. If you don’t have one yet:

npx create-next-app@latest my-site

The shadcn CLI needs a components.json. If your project doesn’t have one, it asks a couple of questions and creates it the first time you add something.

2. Add a component

Pick anything from the cabinet and run its command. For example, the record player:

npx shadcn@latest add https://curio-components.vercel.app/r/record-player.json

This copies the component into components/curio/ and, the first time, also adds app/curio.css and a small types file.

3. Import the tokens once

Add this line to your global stylesheet, right after Tailwind:

@import "tailwindcss";
@import "./curio.css";

Use it

import { RecordPlayer } from '@/components/curio/music/record'

export default function Page() {
  return (
    <RecordPlayer
      track={{ title: 'Slow Tides', artist: 'The Quiet Hours', art: '/cover.jpg', isPlaying: true }}
    />
  )
}

Prefer copy and paste?

Every component page shows its full source. Copy the files into the paths shown above each block, and add curio.css from the base item.