Installation

Last updated on 2026-02-25

This guide walks you through setting up the SaaS Starter Kit from scratch.

System Requirements

  • Node.js 18.17 or later
  • npm 9+, pnpm, or yarn
  • Git for cloning the repository

Step 1 — Clone the Repository

Use the private repository URL from your purchase confirmation email:

git clone <your-repo-url> saas-starter-kit
cd saas-starter-kit

Step 2 — Install Dependencies

npm install

This installs Next.js 15, React 19, Tailwind CSS 4, Radix UI, TanStack Table, and all utility libraries.

Key Dependencies

Package Purpose
next 15.x React framework
react 19.x UI library
tailwindcss 4.x CSS framework
@radix-ui/* Accessible UI primitives
@tanstack/react-table Data table engine
react-hook-form + zod Form handling and validation
lucide-react + @heroicons/react Icons
next-themes Dark mode
sonner Toast notifications
recharts Charts
date-fns Date utilities
cmdk Command palette
input-otp OTP input fields

Step 3 — Start the Dev Server

npm run dev

Visit http://localhost:3000 to see the component explorer.

Step 4 — Verify the Setup

Navigate through the component explorer:

  • /primitives — foundational components
  • /composites — multi-part components (including data tables, pagination)
  • /recipes/authentication — login, signup, OTP, forgot/reset password
  • /recipes/settings — account, billing, teams, notifications, privacy, AI integrations
  • /templates — dropdown and modal templates

Available Scripts

Command Description
npm run dev Start dev server with Turbopack
npm run build Create production build
npm run start Run production server
npm run lint Run ESLint checks

Integrating into an Existing Project

  1. Copy components/ui/ into your project
  2. Copy lib/utils.ts and hooks/use-mobile.ts
  3. Install the required Radix UI and TanStack Table packages
  4. Import design tokens from globals.css into your Tailwind config
  5. Wire up authentication recipes to your backend API

Note: The auth recipe pages include // TODO comments marking where to add your API calls for login, signup, OTP verification, and password reset.

Troubleshooting

Port 3000 already in use:

npm run dev -- -p 3001

TypeScript errors after installation:

npx tsc --noEmit

Check that tsconfig.json path aliases match your project structure.