Project Structure

The SaaS Starter Kit extends the AI UX Kit's four-tier architecture with additional SaaS-specific components and recipe categories.

Directory Overview

saas-starter-kit/
├── app/
│   ├── composites/             # Demo pages (28 pages)
│   │   ├── data-table/
│   │   ├── pagination/
│   │   ├── settings/
│   │   └── ... (same as AI UX Kit)
│   ├── primitives/             # Demo pages (21 pages)
│   ├── recipes/
│   │   ├── authentication/     # Auth flow demos
│   │   │   ├── login/
│   │   │   ├── signup/
│   │   │   ├── forgot-password/
│   │   │   ├── reset-password/
│   │   │   └── otp/
│   │   ├── settings/           # Settings page demos
│   │   │   ├── account/
│   │   │   ├── billing/
│   │   │   ├── team-permissions/
│   │   │   ├── notifications/
│   │   │   ├── privacy-security/
│   │   │   └── ai-integrations/
│   │   ├── teams/
│   │   ├── notifications/
│   │   ├── citation/
│   │   ├── compare/
│   │   ├── error-handling/
│   │   ├── prompt-submission/
│   │   ├── refinement/
│   │   ├── session/
│   │   ├── upload/
│   │   └── voice/
│   ├── templates/
│   ├── globals.css
│   └── layout.tsx
├── components/
│   └── ui/
│       ├── primitives/         # 23 components
│       ├── composites/         # 27 components
│       ├── recipes/            # 56 components
│       │   ├── authentication/
│       │   ├── settings/
│       │   ├── teams/
│       │   ├── notifications/
│       │   ├── prompt-submission/
│       │   ├── refinement/
│       │   ├── citation/
│       │   ├── upload/
│       │   ├── voice/
│       │   ├── compare/
│       │   ├── error-handling/
│       │   └── session/
│       └── templates/          # 29 components
├── hooks/
├── lib/
├── public/
├── components.json
├── next.config.ts
├── package.json
└── tsconfig.json

Components Unique to SaaS Starter Kit

Additional Composites

• Data Table — sortable, filterable tables powered by TanStack Table
• Pagination — page navigation for lists and tables
• Settings — settings panel layout with sidebar navigation

SaaS Recipe Categories

Category	Components	Purpose
Authentication	2 (login-form, signup-form)	Complete auth UI flows
Teams	3	Team invite, member list, role management
Notifications	3	Notification center, notification items, preferences
Settings	6 pages	Account, billing, teams, notifications, privacy, AI integrations

Auth Recipe Pages

The app/recipes/authentication/ directory contains fully-designed auth pages:

recipes/authentication/
├── login/          # Email/password + social login (Google, Microsoft, Apple)
├── signup/         # Registration form
├── forgot-password/ # Password recovery request
├── reset-password/ # New password form
├── otp/            # One-time password verification
└── page.tsx        # Auth overview page

Key Files

File	Purpose
components.json	shadcn/ui config (new-york style)
lib/utils.ts	cn() class name utility
hooks/use-mobile.ts	Mobile viewport detection
app/globals.css	Design tokens and Tailwind CSS config