Installation

Desyne installs through the shadcn CLI. The CLI reads the registry, copies component source into your project, installs npm dependencies and adds any CSS variables a component needs.

Pick your setup#

npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app

npx shadcn@latest init

{
  "registries": {
    "@desyne": "https://desyne.dev/r/{name}.json"
  }
}

npx shadcn@latest add @desyne/button

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

export default function Page() {
  return <Button onPress={() => alert("Hello")}>Click me</Button>;
}

Monorepos#

In a Turborepo or pnpm/Bun workspace, keep components in a shared package and point each app at it.

1. Run npx shadcn@latest init in the shared UI package and in each app, so every workspace has its own components.json with the @desyne registry entry.

2. Install into the shared package with --cwd (-c):

   Copy Text

   npx shadcn@latest add @desyne/dialog -c packages/ui

3. In each app, map the aliases the components import to the shared package:

   Copy Text

   {
     "compilerOptions": {
       "paths": {
         "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
         "@/lib/utils": ["../../packages/ui/src/lib/utils"],
         "@/lib/primitive": ["../../packages/ui/src/lib/primitive"],
         "@/*": ["./*"]
       }
     }
   }

4. Tell Tailwind to scan the package and, in Next.js, transpile it:

   Copy Text

   @import "tailwindcss";
   @source "../../../packages/ui/src";

   Copy Text

   export default { transpilePackages: ["@acme/ui"] };

This is exactly how this documentation site consumes the library.

Manual installation#

You can skip the CLI and copy files yourself. Every component page has a Manual tab with its source, its npm dependencies and the other components it imports.

npm install react-aria-components tailwind-variants clsx tailwind-merge lucide-react tw-animate-css

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --radius: 0.625rem;
  --background: oklch(0.984 0.002 286);
  --foreground: oklch(0.205 0.006 286);
  /* …the rest of the tokens */
}

Check it works#

"use client";

import { Form } from "react-aria-components";
import { Button } from "@/components/ui/button";
import { TextField } from "@/components/ui/text-field";

export function Smoke() {
  return (
    <Form className="flex max-w-xs flex-col gap-4">
      <TextField label="Email" name="email" type="email" isRequired />
      <Button type="submit">Subscribe</Button>
    </Form>
  );
}

Tab to the field: you should see the soft colored focus ring. Submit it empty: focus moves to the field and the required-field message appears under it.

Next steps#