Getting Started

Set up with your stack

Pick your framework. Every step has a copy button. Total time from zero to a styled <Button> is about 90 seconds.

App Router, React 19, Tailwind v4. The recommended stack.

1. Create a Next.js project
Skip if you have one already.
$npx create-next-app@latest my-app --typescript --tailwind --app --use-npm --yes
2. Initialize disenio.studio
Drops disenio.json, the cn util, and a starter theme.css.
$cd my-app && npx disenio init
3. Add the components you need
$npx disenio add button input form-field stack

4. Wire the theme into globals

app/globals.css

@import "tailwindcss";
@import "../app/styles/theme.css";

5. Wrap your app with ThemeProvider

app/layout.tsx

import { ThemeProvider } from "@/components/ui/theme-provider";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body><ThemeProvider>{children}</ThemeProvider></body>
    </html>
  );
}

6. Use a component

app/page.tsx

import { Button } from "@/components/ui/button";

export default function Home() {
  return <Button variant="accent">Hola</Button>;
}

Don't see your stack?

disenio works in any React project that can run Tailwind v4. The CLI just copies plain TSX. Open a GitHub issue with your setup and we'll add a tab — usually within a day.

For more depth, see the full Installation and CLI reference pages.