Installation

This guide walks you through setting up the AI UX Kit from scratch, including dependency installation, Tailwind configuration, and verifying everything works.

System Requirements

• Node.js 18.17 or later
• npm 9+, pnpm, or yarn
• Git for cloning the repository

Step 1 — Clone the Repository

Use the private repository URL from your purchase confirmation email:

git clone <your-repo-url> ai-ux-kit
cd ai-ux-kit

Step 2 — Install Dependencies

npm install

This installs all required packages including Next.js 15, React 19, Tailwind CSS 4, Radix UI components, and utility libraries.

Key Dependencies Installed

Package	Version	Purpose
next	15.3.x	React framework
react	19.x	UI library
tailwindcss	4.x	CSS framework
@radix-ui/*	latest	Accessible UI primitives
lucide-react	latest	Icons
react-hook-form	7.x	Form state management
zod	4.x	Schema validation
class-variance-authority	0.7.x	Variant management
clsx + tailwind-merge	latest	Class name utilities
recharts	2.x	Chart components
embla-carousel-react	8.x	Carousel functionality
next-themes	0.4.x	Theme switching

Step 3 — Start the Dev Server

npm run dev

The kit uses Turbopack for fast development builds. Your app will be available at http://localhost:3000.

Step 4 — Verify the Setup

Visit http://localhost:3000 in your browser. You should see the component explorer with navigation to:

• /primitives — foundational components
• /composites — multi-part components
• /recipes — pre-built patterns
• /templates — full page sections

Available Scripts

Command	Description
npm run dev	Start dev server with Turbopack
npm run build	Create production build
npm run start	Run production server
npm run lint	Run ESLint checks

Integrating into an Existing Project

If you want to add AI UX Kit components to an existing Next.js project:

1. Copy the components/ui/ directory into your project
2. Copy lib/utils.ts for the cn() utility function
3. Copy hooks/use-mobile.ts if you need mobile detection
4. Ensure your tailwind.config includes the design token CSS variables from globals.css
5. Install the required Radix UI packages and utility libraries

Tip: The kit's components.json file is configured for shadcn/ui's new-york style with Lucide icons. If your project uses a different shadcn/ui style, update components.json accordingly.

Troubleshooting

Port 3000 is already in use

npm run dev -- -p 3001

Node.js version mismatch

Ensure you're running Node.js 18.17+:

node --version

Use nvm to manage Node.js versions if needed.