Getting Started with SaaS Starter Kit

Last updated on 2026-02-25

The SaaS Starter Kit is a production-ready component library designed for building SaaS applications. It extends the AI UX Kit with 135+ React components — adding authentication flows, settings pages, team management, notifications, billing UI, and data tables on top of the full AI UX component set.

What's Included

  • 23 Primitives — foundational elements including Button, Input, Select, Data Table, and more
  • 27 Composites — multi-part components including Sidebar, Dialog, Pagination, Settings panels
  • 56 Recipes — purpose-built patterns for authentication, team management, notifications, AI chat, and more
  • 29 Templates — ready-to-use page sections for dropdowns and modals

Prerequisites

  • Node.js 18.17 or later
  • npm 9+ (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> saas-starter-kit
cd saas-starter-kit

# 2. Install dependencies
npm install

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

Open http://localhost:3000 to browse the component explorer.

What Makes It Different from the AI UX Kit

The SaaS Starter Kit includes everything in the AI UX Kit plus:

Feature AI UX Kit SaaS Starter Kit
Primitives 22 23
Composites 24 27 (+ Pagination, Data Table, Settings)
Recipes 39 56 (+ Auth, Teams, Notifications, Settings)
Authentication flows Login, Signup, OTP, Forgot/Reset Password
Settings pages Account, Billing, Teams, Privacy, AI Integrations
Team management Invite, roles, permissions
Notification system In-app notification center

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
TanStack Table Sortable, filterable data tables
Lucide React Icon library
React Hook Form + Zod Form handling and validation
Turbopack Fast dev server bundler

Next Steps