Back to Download

Documentation

Everything you need to configure, build, and deploy your SaaS.

Introduction

Welcome to the KoreUi Boilerplate. You have just saved weeks of development time. This codebase is a production-ready SaaS starter kit built with Next.js 16, Tailwind CSS,Firebase, and Stripe.

Quick Start

Follow these steps to get the application running on your local machine.

Terminal
npm installnpm run dev

Open http://localhost:3000 to view your app.

Customization

KoreUi is designed to be extremely malleable. We follow a "Config-First" philosophy, meaning you can customize 80% of the application without touching complex React logic. The goal is to let you focus on your unique value proposition, not on boilerplate code.

The Control Center

Your src/config folder is your command center. Changes here propagate instantly across the app.

  • site.ts: Updates your Brand Name, SEO metadata, and Social Links globally.
  • landing.ts: Completely rewrites your Landing Page (Hero, Features, Pricing) without coding.

Easy Theming

Want to change your brand color? You don't need to find-and-replace hex codes.

Simply open src/app/globals.css and change the --primary CSS variable. The entire UI (Buttons, Links, Accents) will update automatically to match your brand.

Built to be extended

Unlike other starters that lock you into a structure, KoreUi is just standard Next.js code. You can delete any component, rename any file, or install any library.It is a clean slate, not a golden cage.

Firebase Setup

This boilerplates uses Firebase for Authentication, Database (Firestore), and Storage.

  1. Go to Firebase Console and create a new project.
  2. Navigate to Project Settings and scroll to "Your apps".
  3. Create a Web App and copy the firebaseConfig object.
  4. Create a .env.local file in your project root and fill in the values (see .env.local.example).
  5. Enable Authentication (Google & Email/Password providers).
  6. Create a Firestore Database (Start in Test mode).

Stripe Integration

Payments are handled via Stripe Checkout and Webhooks.

Crucial Step

You must create your products in the Stripe Dashboard, get their price_ID, and update them in src/config/landing.ts (Pricing Section).

Production Deployment

We recommend deploying to Firebase Hosting (already configured) or Vercel.

Option A: Firebase Hosting

npm run buildfirebase deploy

Option B: Vercel

Simply import your Git repository into Vercel. Next.js is automatically detected. Remember to add your Environment Variables in the Vercel Dashboard.