Get started

Five minutes from zero to your first JSN UI component. Copy the kit into your Next.js app — no runtime package to install.

Browse components Install from registry
1

Create a Next.js project

Start with a fresh Next.js 15 app. JSN UI requires App Router, React 19, and TypeScript.

Bash
pnpm create next-app@latest my-app --typescript --tailwind --app --src-dir --eslint
cd my-app
2

Install JSN UI

Add the core dependencies. The CLI is optional but recommended for a smooth experience.

Bash
pnpm add class-variance-authority clsx tailwind-merge lucide-react
pnpm add @radix-ui/react-slot @radix-ui/react-dialog @radix-ui/react-dropdown-menu \
  @radix-ui/react-tabs @radix-ui/react-tooltip @radix-ui/react-select \
  @radix-ui/react-switch @radix-ui/react-slider @radix-ui/react-popover \
  @radix-ui/react-label @radix-ui/react-avatar @radix-ui/react-separator
3

Copy components

Drop the contents of src/components/ui, src/components/ai, and src/components/icons into your project, then add the cn() helper to src/lib/utils.ts.

Bash
cp -r src/components/ui src/components/ai src/components/icons your-app/src/components/
cp src/lib/utils.ts your-app/src/lib/
4

Add design tokens

Copy the design tokens from src/app/globals.css. The tokens use OKLCH and cover both light and dark mode.

Bash
/* @layer base — paste your :root and .dark CSS variables here */
5

Build something

That's it. Render a Button from the kit and you're off to the races.

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

export default function Page() {
  return (
    <Button>
      <Brain size={16} /> Hello JSN UI
    </Button>
  );
}

Want the CLI?

The JSN UI CLI is on the roadmap. It will let you add individual components, blocks, or registry elements without copy-pasting:

Bash
# Coming soon:
pnpm dlx jsn-ui init
pnpm dlx jsn-ui add button dialog message
pnpm dlx jsn-ui add @ai-elements/agent-card
Read the registry spec Star on GitHub