5-Minute Quick Start

Welcome to aidimension — a premium React component kit for Next.js, built for the AI era. This guide gets you from zero to a styled, accessible component in 5 minutes or less.

What you'll build#

By the end of this guide, you'll have:

1. ✅ A new Next.js 15 app with Tailwind v4
2. ✅ The aidimension UI components installed
3. ✅ A working Button, Card, and Dialog on your homepage
4. ✅ Dark mode enabled

Step 1 — Create a Next.js app (60 seconds)#

If you don't have a Next.js project yet, scaffold one:

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

Already have one? Skip to step 2.

Step 2 — Install aidimension (30 seconds)#

Use the official aidimension CLI to add the UI kit to your project:

npx @aidimension/cli@latest add ui

This command:

• Adds @aidimension/ui and its dependencies to your package.json
• Installs the required Tailwind v4 theme
• Copies the base globals.css to src/app/globals.css
• Creates a <CrossDomainNav> example in your root layout

Prefer manual install? Run pnpm add @aidimension/ui and follow the Installation guide.

Step 3 — Use a component (60 seconds)#

Open src/app/page.tsx and replace its contents with:

import { Button } from "@aidimension/ui/components/button";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@aidimension/ui/components/card";

export default function Home() {
  return (
    <main className="min-h-screen grid place-items-center p-8">
      <Card className="max-w-md w-full">
        <CardHeader>
          <CardTitle>Welcome to aidimension</CardTitle>
          <CardDescription>
            You just installed a 32-component UI kit in under a minute.
          </CardDescription>
        </CardHeader>
        <CardContent className="flex gap-2">
          <Button>Get started</Button>
          <Button variant="outline">Read the docs</Button>
        </CardContent>
      </Card>
    </main>
  );
}

Step 4 — Run the dev server (15 seconds)#

pnpm dev

Open http://localhost:3000. You should see a card with two buttons, fully styled and dark-mode aware.

Step 5 — Deploy (60 seconds)#

Push to GitHub and deploy to Vercel:

git add -A
git commit -m "Add aidimension UI"
git push

Then import the repo into Vercel — no config needed, it auto-detects Next.js.

What next?#

Now that you're set up, explore the rest of the docs:

• UI Kit components — 32 components, copy-paste examples
• Templates — 6 production-ready page templates
• Skills — 12 AI agent skills
• MCP Server — wire aidimension into Claude Desktop or Cursor

Troubleshooting#

Tailwind v4 not picking up the theme?

Make sure your postcss.config.mjs uses @tailwindcss/postcss:

export default {
  plugins: { "@tailwindcss/postcss": {} },
};

Components not resolving?

Check that your tsconfig.json paths include @aidimension/ui/* or that the CLI copied components into src/components/ui/.

Hydration mismatch warnings?

The aidimension theme system writes to localStorage on mount. Add suppressHydrationWarning to your <html> element if you see this warning.