Quick Start

From zero to your first Nexus UI component in six steps. Create a Next.js app with Tailwind and an import alias, initialize shadcn/ui, connect the registry, and install a component.

1. Create a Next.js project

Nexus UI targets the App Router with TypeScript. Scaffold a new project:

npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd my-app

This command sets up the App Router, TypeScript, Tailwind CSS, ESLint, a src/ directory, and the @/* alias used by Nexus UI imports.

2. Confirm Tailwind CSS v4

The create command above already installs Tailwind. Confirm that src/app/globals.css starts with the Tailwind import, then add or customize tokens as your design needs:

@import "tailwindcss";

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

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --radius-lg: var(--radius);
}

html {
  --background: oklch(0.99 0.002 260);
  --foreground: oklch(0.16 0.015 260);
  --primary: oklch(0.28 0.02 260);
  --primary-foreground: oklch(0.99 0 0);
  --muted: oklch(0.96 0.006 260);
  --muted-foreground: oklch(0.48 0.015 260);
  --border: oklch(0.90 0.008 260);
  --radius: 0.625rem;
}

html.dark {
  --background: oklch(0.09 0.008 260);
  --foreground: oklch(0.97 0.006 260);
  --primary: oklch(0.82 0.02 260);
  --primary-foreground: oklch(0.12 0.015 260);
  --muted: oklch(0.20 0.006 260);
  --muted-foreground: oklch(0.62 0.006 260);
  --border: oklch(0.25 0.006 260);
}

See the full Tailwind guide for the complete token set including sidebar, chart, and popover colors.

3. Add the cn() utility

Every Nexus UI component imports cn from @/lib/utils. Install the dependencies and create the file:

npm install clsx tailwind-merge motion

// src/lib/utils.ts
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

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

4. Initialize shadcn/ui

Nexus UI components compose on top of shadcn primitives. Run the initializer — it wires CSS variables, writes components.json, and installs shared dependencies:

npx shadcn@latest init

Pick a style and base color that match your brand. Add only the primitives you need:

npx shadcn@latest add button dialog tabs

5. Add your first component

Two ways to get a Nexus UI component into your project:

A.Copy from the detail page — open any component on /components, switch to the Code tab, and paste the React source into your project.
B.Install via the CLI — add the @nexus-labs registry to your components.json and pull a component directly:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

npx shadcn@latest add @nexus-labs/wheel-selector

The CLI installs declared dependencies (e.g. framer-motion), pulls the utils helper if missing, and writes files under your components alias. See the CLI guide for full details.

Premium components and blocks use the same API endpoint with your Nexus UI API key supplied as an Authorization header. The installation panel on each premium item provides that configuration.

6. Start the dev server

npm run dev

Open http://localhost:3000 and your first Nexus UI component should be live. Browse /components for live previews and copy-ready snippets on every detail page.

← Components library

Filters

1. Create a Next.js project

2. Confirm Tailwind CSS v4

3. Add the cn() utility

4. Initialize shadcn/ui

5. Add your first component

6. Start the dev server

Filters

1. Create a Next.js project

2. Confirm Tailwind CSS v4

3. Add the cn() utility

4. Initialize shadcn/ui

5. Add your first component

6. Start the dev server