Components

The SaaS Starter Kit includes 135+ components organized into four tiers. It includes everything from the AI UX Kit plus additional SaaS-specific components.

Primitives (23 components)

All AI UX Kit primitives plus additional ones optimized for SaaS interfaces.

Component	Description
Button	Primary, secondary, outline, ghost, destructive variants
Input	Text input with validation states
Input Group	Input with prefix/suffix elements
Select	Dropdown with search and multi-select
Checkbox	With label, description, and indeterminate state
Radio Group	Horizontal and vertical layouts
Switch	Boolean toggle
Textarea	Multi-line with auto-resize
Tooltip	Hover/focus contextual tooltip
Tag	Badge/chip for labels
Label	Form field label
Icon / Icon Button	SVG icons and icon-only buttons
Link	Styled anchor element
Divider	Horizontal/vertical separator
Field	Form field wrapper
Spinner / Skeleton	Loading states
Progress Bar	Linear progress indicator
Collapsible	Expand/collapse section
Form	React Hook Form + Zod integration
Data Table	TanStack Table with sorting, filtering, pagination

Composites (27 components)

All AI UX Kit composites plus SaaS-specific additions:

Component	Description
Sidebar	App navigation sidebar
Dialog / Drawer / Sheet / Modal	Overlay patterns
Tabs	Tab navigation
Navigation Menu	Horizontal nav with dropdowns
Dropdown Menu	Context menu with keyboard nav
Chat Bubble / Chat Sidebar / Chat Image	Chat UI
Code Block	Syntax-highlighted code
Prompt Input	AI prompt text area
AI Suggestion	Recommendation cards
Alert / Toast	Notifications
Avatar	User avatars
Citations	Source references
Topbar	Top navigation
Audio	Audio player
Theme Toggle	Dark/light mode
Pagination	Page navigation for lists and tables
Settings	Settings panel with sidebar layout

Recipes (56 components)

Authentication (2 components)

Component	Description
Login Form	Email/password + social login
Signup Form	Registration with validation

Team Management (3 components)

Team invite forms, member list with roles, and permission management.

Notifications (3 components)

In-app notification center, individual notification items, and notification preferences.

Settings Pages (6 pages)

Account, billing, team permissions, notifications, privacy & security, and AI integrations.

AI Chat Recipes (inherited from AI UX Kit)

Category	Count	Purpose
Prompt Submission	9	Input patterns for AI prompts
Refinement	6	Edit and regenerate responses
Citation	4	Source attribution
Upload	6	File upload flows
Voice	5	Voice input interfaces
Compare	3	Side-by-side comparison
Error Handling	2	Error states and retry
Session	3	Chat session management

Templates (29 components)

Profile Menu, Flyout Menu, Avatar Checkbox, Simple List, Searchbar

Confirmation dialogs, form modals, image previews, multi-step wizards, settings panels, and full-screen modals.

Using Components

import { Button } from "@/components/ui/primitives/button";
import { DataTable } from "@/components/ui/primitives/data-table";
import { LoginForm } from "@/components/ui/recipes/authentication/login-form";
import { Pagination } from "@/components/ui/composites/pagination";

export default function Dashboard() {
    return (
        <div>
            <DataTable columns={columns} data={data} />
            <Pagination totalPages={10} currentPage={1} />
        </div>
    );
}

Demo Pages

Run npm run dev and navigate to component demos:

/composites/data-table — Sortable, filterable data tables
/composites/pagination — Pagination variants
/recipes/authentication/login — Login page
/recipes/settings/account — Account settings
/recipes/teams — Team management