Skip to main content
Prerequisites: Node.js 19 or later and a package manager (npm, pnpm, or yarn).
The Starter Kit is an open-source Next.js template available on GitHub. Follow these steps to get it running locally.

​
Clone the Repository

1

Clone from GitHub

git clone https://github.com/VibeCodingStarter/starter-kit.git
cd starter-kit
This downloads the complete Starter Kit template to your local machine.
2

Install dependencies

make install   # or npm install
This installs all required packages including Next.js, React, Tailwind CSS, and UI components.
3

Verify installation

npm run dev
The development server starts on port 3004. Visit http://localhost:3004 to see the default homepage.
You’ll see a configuration banner at the top because environment variables aren’t set yet. This is normal - we’ll configure them in the next steps.

​
What Gets Installed

The Starter Kit includes:
  • Next.js 15 with App Router and Turbopack for fast development
  • React 19 with Server Components for optimal performance
  • Tailwind CSS for styling with dark mode support
  • Radix UI components for accessible, production-ready UI
  • TypeScript for type safety and better developer experience
  • Pre-built pages including authentication, dashboard, and examples

​
Project Structure Overview

After installation, you’ll see this structure: 
starter-kit/
├── app/                  # Next.js App Router pages
│   ├── (auth)/          # Authentication pages
│   ├── dashboard/       # User dashboard
│   └── page.tsx         # Homepage
├── components/          # React components
│   ├── ui/             # Base UI primitives
│   ├── generic/        # Reusable components
│   └── project/        # Project-specific components
├── config/             # App configuration
├── lib/                # Utilities and helpers
├── public/             # Static assets
└── .env.local          # Environment variables (create this)

​
Next Steps

Environment Config

Set up required environment variables

Connect to Cloud API

Link your app to the hosted backend

Project Structure

Understand the codebase organization

Customize Branding

Update colors, logo, and styling