Installation

There are three ways to add aidimension to your project. Pick the one that fits your workflow.

Option 1 — Use the CLI (recommended)#

The fastest way. Adds the package, copies the theme, and wires up Tailwind v4 in one command.

npx @aidimension/cli@latest add ui

This will:

1. Add @aidimension/ui to your package.json
2. Install peer dependencies (@radix-ui/*, lucide-react, clsx, tailwind-merge, class-variance-authority)
3. Copy the aidimension Tailwind theme to your globals.css
4. Verify the install with a smoke test

Want a specific subset?

# Only Button + Card
npx @aidimension/cli@latest add button card

# A template
npx @aidimension/cli@latest add template landing-page

# Everything
npx @aidimension/cli@latest add --all

Option 2 — Install as a package#

If you prefer the standard npm/pnpm workflow:

pnpm add @aidimension/ui

Then add the Tailwind theme manually. In your globals.css:

@import "tailwindcss";

@source "../node_modules/@aidimension/ui/dist/**/*.{js,ts,jsx,tsx}";

@theme {
  --color-background: oklch(1 0 0);
  --color-foreground: oklch(0.15 0 0);
  --color-primary: oklch(0.55 0.25 280);
  --color-primary-foreground: oklch(1 0 0);
  --color-muted: oklch(0.95 0 0);
  --color-muted-foreground: oklch(0.45 0 0);
  --color-border: oklch(0.9 0 0);
  --color-accent: oklch(0.95 0 0);
  --color-ring: oklch(0.55 0.25 280);
  --radius: 0.5rem;
}

.dark {
  --color-background: oklch(0.12 0 0);
  --color-foreground: oklch(0.95 0 0);
  --color-muted: oklch(0.2 0 0);
  --color-muted-foreground: oklch(0.65 0 0);
  --color-border: oklch(0.25 0 0);
  --color-accent: oklch(0.2 0 0);
}

Then import components:

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

Option 3 — Copy components into your project#

If you want full ownership of the source, the CLI can paste components into your repo:

npx @aidimension/cli@latest add --copy button card dialog

This creates src/components/ui/button.tsx, etc. You now own the code, can modify freely, and have no package dependency.

Pros:

• ✅ Zero external dependencies for these components
• ✅ Customize freely without node_modules PR pain
• ✅ Bundle size drops (no unused exports)

Cons:

• ❌ Manual updates — you'll need to re-run with --diff to see changes
• ❌ No automatic bug fixes

Framework support#

Peer dependencies#

@aidimension/ui requires these peers (the CLI installs them automatically):

• react@^19.0.0
• react-dom@^19.0.0
• tailwindcss@^4.0.0
• @radix-ui/* (the specific primitives used by each component)
• lucide-react@^0.460.0
• class-variance-authority@^0.7.0
• clsx@^2.0.0
• tailwind-merge@^2.0.0

TypeScript#

All components are written in TypeScript with full type definitions. No @types/... packages needed.

Next steps#

• Project structure — recommended monorepo layout
• UI Kit overview — what's in the kit
• Quick Start — back to the 5-minute guide