Introduction to Scarlet Labs

Scarlet Labs provides a modern SaaS boilerplate built with Next.js 16, React 19, TypeScript, and Tailwind CSS. Our scarlet‑themed components help you launch production‑ready applications faster.

What's included?

Fully responsive layout (mobile‑first)
Dark mode ready
Pre‑built pages: Home, About, Features, Pricing, Contact, Docs
Authentication (NextAuth.js) and database (Prisma) ready
Scarlet design system (gradients, shadows, components)

Installation

# Clone the repository
git clone https://github.com/scarletlabs/boilerplate.git

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build
npm start

Make sure you have Node.js 20+ and npm installed.

Quick Start

After installation, you can start customising:

Update .env.local with your API keys.
Modify tailwind.config.js to change the primary color.
Replace demo content in /app and /components.

Bootstrap Template Guide

Our components are built with Tailwind CSS, but we provide a migration guide for Bootstrap users. Each component has a Tailwind equivalent – no Bootstrap classes are used.

Style Guide

Colors

Typography

Headings: Inter, bold. Body: Inter, regular.

Using Tailwind Components

All components are built with Tailwind utility classes. You can copy any component code and customise it freely.

Buttons

<button className="px-5 py-2.5 rounded-xl bg-primary text-white">Primary</button>

Forms

Cards

Basic Card

Example card content.

Scarlet Theme

The scarlet theme is defined in tailwind.config.js. Update the primary color to change the accent.

Color System

We use a consistent palette: red‑600 for primary, orange‑500 for gradients, and neutral grays for backgrounds.

Typography

Default font is Inter. Headings use font‑bold, body uses font‑normal. All text is responsive.

Scarlet Labs Documentation – Last updated April 2026