Components

The AI UX Kit includes 114+ components organized into four tiers. Each component is built with React, TypeScript, Tailwind CSS, and Radix UI for accessibility.

Primitives

Foundational UI elements — the smallest reusable building blocks.

Component	Description
Button	Primary, secondary, outline, ghost, and destructive variants with size options
Input	Text input with label, placeholder, error, and disabled states
Input Group	Input with prefix/suffix icons or text
Select	Dropdown select with search, multi-select, and grouped options
Checkbox	Checkboxes with label, description, and indeterminate state
Radio Group	Radio buttons with horizontal and vertical layouts
Switch	Toggle switch for boolean settings
Textarea	Multi-line text input with auto-resize
Tooltip	Contextual hover/focus tooltip
Tag	Badge/chip for labels and categories
Label	Form field label with required indicator
Icon	SVG icon wrapper with size variants
Icon Button	Icon-only button with tooltip
Link	Styled anchor with external link detection
Divider	Horizontal or vertical separator
Field	Form field wrapper with label, description, and error
Spinner	Loading spinner animation
Skeleton	Content placeholder for loading states
Progress Bar	Linear progress indicator
Collapsible	Expand/collapse content section
Form	Form wrapper with React Hook Form + Zod integration
Data Table	Sortable, filterable data table powered by TanStack Table

Composites

Multi-part components that combine primitives into cohesive UI patterns.

Component	Description
Sidebar	Collapsible navigation sidebar with sections and links
Dialog	Modal dialog with header, body, and footer slots
Drawer	Slide-in panel from any edge
Sheet	Bottom sheet with drag-to-dismiss
Modal	Centered overlay with backdrop
Tabs	Tab navigation with panels
Navigation Menu	Horizontal nav with dropdown submenus
Dropdown Menu	Context menu with items, groups, and keyboard navigation
Chat Bubble	Message bubble for user and AI messages
Chat Sidebar	Conversation list sidebar
Chat Image	Image display within chat messages
Code Block	Syntax-highlighted code with copy button
Prompt Input	AI prompt text area with submit button and attachments
AI Suggestion	Suggestion chip/card for AI-generated recommendations
Alert	Dismissible alert banner with severity levels
Toast	Notification toast using Sonner
Avatar	User avatar with image, initials, and status indicator
Citations	Source citation display with links
Topbar	Top navigation bar
Audio	Audio player with playback controls
Interactive Dropdown	Rich dropdown with custom content
FAB AI Assistance	Floating action button for AI help
Theme Toggle	Light/dark mode switch

Recipes

Purpose-built interaction patterns for common AI UX needs.

Prompt Submission (9 components)

Complete prompt input patterns including single-line prompts, multi-line editors, command palettes, and prompt templates with attachments.

Patterns for editing, regenerating, and refining AI responses. Includes inline editing, suggestion acceptance, and response rating.

Citation (4 components)

Source attribution patterns showing references, footnotes, and expandable source cards.

Upload (6 components)

File upload flows for documents, images, and multi-file uploads with drag-and-drop, progress indicators, and preview.

Voice (5 components)

Voice input interfaces including microphone activation, real-time transcription display, and audio waveform visualization.

Compare (3 components)

Side-by-side comparison views for AI responses with diff highlighting and preference selection.

Error Handling (2 components)

Graceful error states with retry actions, fallback content, and error boundary patterns.

Session (3 components)

Chat session management including session list, session creation, and conversation history.

Templates

Ready-to-use page sections combining multiple components.

Template	Description
Profile Menu	User avatar dropdown with account links
Flyout Menu	Multi-column mega menu
Avatar Checkbox	User selection with checkboxes
Simple List	Basic dropdown list
Searchbar	Dropdown with search input

Various modal dialog patterns including:

Confirmation dialogs
Form modals
Image preview modals
Multi-step wizard modals
Settings panels
Full-screen modals

Using Components

Import any component from its directory:

import { Button } from "@/components/ui/primitives/button";
import { Dialog } from "@/components/ui/composites/dialog";
import { PromptInput } from "@/components/ui/recipes/prompt-submission";

export default function MyPage() {
    return (
        <div>
            <Button variant="primary" size="lg">
                Submit
            </Button>
        </div>
    );
}

Demo Pages

Every component has a dedicated demo page in the app/ directory. Run npm run dev and navigate to:

/primitives/button — Button demos
/composites/chat-bubble — Chat bubble demos
/recipes/prompt-submission — Prompt input variations
/templates/dropdown/profile-menu — Profile dropdown demo