DemoBuy

Getting Started with AI UX Kit

Last updated on 2026-02-25

The AI UX Kit is a production-ready component library built for AI-powered interfaces. It ships with 114+ React components organized into four tiers — primitives, composites, recipes, and templates — so you can assemble conversational UIs, prompt builders, voice interfaces, and more without starting from scratch.

What's Included

  • 22 Primitives — foundational elements like Button, Input, Select, Checkbox, Tooltip, and Skeleton
  • 24 Composites — multi-part components such as Sidebar, Drawer, Dialog, Chat Bubble, and Code Block
  • 39 Recipes — purpose-built patterns for prompt submission, citation display, voice input, file upload, error handling, comparison views, and session management
  • 29 Templates — ready-to-use page sections like dropdown menus, modal dialogs, and profile menus

Prerequisites

Before you begin, make sure you have the following installed:

  • Node.js 18.17 or later
  • npm 9+ (ships with Node.js) or pnpm / yarn
  • A code editor — VS Code recommended

Quick Start

# 1. Clone the repository (use the URL from your purchase email)
git clone <your-repo-url> ai-ux-kit
cd ai-ux-kit

# 2. Install dependencies
npm install

# 3. Start the dev server with Turbopack
npm run dev

Open http://localhost:3000 in your browser. You'll see the component explorer where you can browse every primitive, composite, recipe, and template included in the kit.

Tech Stack

Technology Purpose
Next.js 15 React framework with App Router
React 19 UI library
Tailwind CSS 4 Utility-first styling
Radix UI Accessible headless primitives
shadcn/ui Component scaffolding
Lucide React Icon library
React Hook Form + Zod Form handling and validation
Turbopack Fast dev server bundler

Next Steps

Next

Installation