Introduction

Desyne is a copy-paste component library for React. Every component is built on React Aria Components and styled with Tailwind CSS v4 using the same CSS variables as shadcn/ui (--background, --primary, --border, …). You install components with the shadcn CLI, and they land in your repo as plain .tsx files.

import { Form } from "react-aria-components";
import { Button } from "@/components/ui/button";
import {
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { TextField } from "@/components/ui/text-field";

export default function DialogDemo() {
  return (
    <DialogTrigger>
      <Button variant="outline">Edit profile</Button>
      <DialogContent>
        {({ close }) => (
          <Form
            className="grid gap-5"
            onSubmit={(e) => {
              e.preventDefault();
              close();
            }}
          >
            <DialogHeader>
              <DialogTitle>Edit profile</DialogTitle>
              <DialogDescription>
                Update how your name appears to your team.
              </DialogDescription>
            </DialogHeader>
            <div className="grid gap-4">
              <TextField
                label="Name"
                defaultValue="Nischal Timalsina"
                autoFocus
              />
              <TextField label="Username" prefix="@" defaultValue="nischal" />
            </div>
            <DialogFooter>
              <DialogClose>Cancel</DialogClose>
              <Button type="submit">Save changes</Button>
            </DialogFooter>
          </Form>
        )}
      </DialogContent>
    </DialogTrigger>
  );
}

What you get#

• Accessible behaviour out of the box. Keyboard navigation, focus management, screen reader announcements and ARIA patterns come from React Aria, not from hand-written onKeyDown handlers.
• Your code, not a dependency. The CLI copies source into components/ui. There is no @desyne/* package to upgrade and nothing you can't change.
• shadcn-compatible tokens. Components read the standard shadcn variables, so they inherit an existing shadcn theme and sit next to shadcn components without clashing.
• One design language. Controls share a 28 / 32 / 40px height scale, one focus ring, one field system and one tone system, so screens stay consistent as they grow.
• Real examples. Every component page has live previews you can copy, including recipes that combine several components into a working pattern.

How it fits together#

Components style React Aria states with Tailwind's native data variants (data-hovered:, data-pressed:, data-focus-visible:, data-selected:, data-invalid:), so you don't need a Tailwind plugin.

Requirements#

• React 19
• Tailwind CSS v4
• TypeScript (recommended; the source is typed)
• Any React framework: Next.js, Vite, React Router or TanStack Start

Acknowledgements#

Desyne stands on the work of others, and we're grateful for it:

• React Aria Components by Adobe. Every interactive component is built on its primitives, and the accessibility, keyboard and internationalisation behaviour you get comes from that work.
• shadcn/ui by shadcn. The copy-the-source model, the CLI and registry format we install through, and the token names we theme with all come from shadcn/ui.
• Intent UI by Irsyad A. Panjaitan. It showed what a polished, React Aria–based take on the shadcn approach can look like, and inspired parts of our component APIs, block catalogue and docs.

We also rely on Tailwind CSS, Lucide, Recharts, Motion and Fumadocs. If you like Desyne, go star their repos too.

Where to next#