Installation
Drop disenio.studio into a fresh or existing project in under a minute. The CLI installs tokens, utilities, and a starter theme — you stay in control of everything else.
Prerequisites
- Node 20+ (or Bun 1.1+)
- A React project (Next.js, Vite, Remix, Astro all supported)
- Tailwind CSS v4 (the toolkit uses Tailwind for utility classes)
1. Initialize
Run the init command from your project root. It writes a disenio.json config, drops a starter theme intoapp/styles/theme.css, and adds the cn utility.
$pnpm dlx disenio init2. Add a component
Components copy into your repo as plain TSX — no runtime dependency on disenio.
$pnpm dlx disenio add button3. Import and use
app/page.tsx
import { Button } from "@/components/ui/button";
export default function Home() {
return <Button variant="accent">Hola</Button>;
}4. Wire the theme
Import the generated theme stylesheet at the top of your global CSS.
app/globals.css
@import "tailwindcss";
@import "./styles/theme.css";