🎨 Customization Guide

How to rebrand, customize colors, add features, and make the boilerplate your own.

By Test Staff34 views

Customization Guide

Branding

1. Logo

Replace these files:

  • public/logo.png - Main logo
  • public/logo-dark.png - Dark mode variant
  • public/favicon.ico - Browser icon

2. Colors

Edit tailwind.config.ts:

colors: {
  brand: {
    DEFAULT: '#3b82f6', // Your primary color
    dark: '#2563eb',
  }
}

3. Site Metadata

Edit src/app/layout.tsx:

export const metadata: Metadata = {
  title: "Your SaaS Name",
  description: "Your SaaS description",
  // ... update all fields
}

Adding Features

Database Changes

  1. Edit prisma/schema.prisma
  2. Run npx prisma db push
  3. Run npx prisma generate

New Pages

  • Admin: src/app/(admin)/admin/your-page/page.tsx
  • Dashboard: src/app/(dashboard)/dashboard/your-page/page.tsx
  • Public: src/app/(public)/your-page/page.tsx

API Routes

Create in src/app/api/your-endpoint/route.ts

Deployment

See Installation Guide for production deployment steps.

Need Help?

  • 📧 Email: [email protected]
  • 📖 Full docs included in repo
  • 🎫 Include license key with questions

Was this article helpful?

Let us know so we can improve our docs