What Is a Boilerplate in Web Development? Templates, Starter Kits, and Scaffolds Explained

What Is a Boilerplate?

A boilerplate is a set of reusable starter code, files, and configuration that provides the foundation for a new project. The term comes from the printing industry, where metal plates of frequently used text were called boilerplates because they resembled the steel plates used to make boilers.

In web development, a boilerplate eliminates the repetitive setup that every project requires: folder structure, build configuration, linting rules, formatting settings, routing setup, and base component patterns. Instead of configuring these from scratch every time, you copy the boilerplate and start building on top of it.

The simplest example is create-next-app or create-react-app. These are boilerplates that give you a working project with sensible defaults. But the term extends much further, from minimal config-only starters to comprehensive kits with dozens of pre-built screens.

Boilerplate vs. Template vs. Starter Kit vs. Scaffold

These terms get used interchangeably, but they describe different levels of completeness:

Boilerplate

The most minimal option. A boilerplate gives you project structure, configuration, and conventions but very little UI. You get the "how it's organized" without the "what it looks like."

Typically includes:

Folder structure
Build tool configuration (Vite, Webpack, Turbopack)
TypeScript setup
Linting and formatting rules (ESLint, Prettier)
Basic routing configuration
Environment variable handling
Maybe a single placeholder page

What you still build yourself: Every component, every screen, every layout.

Template

A step above boilerplate. A template includes pre-built pages, layouts, and components in addition to configuration. When you open a template, you see working screens, not placeholder text.

Typically includes: Everything in a boilerplate, plus:

Pre-designed pages (landing page, about, contact)
Layout components (header, footer, sidebar)
UI components (buttons, cards, forms)
Styling setup with a theme or token system
Responsive breakpoints

What you still build yourself: Business logic, data fetching, API integration, custom features.

For a detailed breakdown, see What Is a Next.js Template?.

Starter Kit

The most comprehensive option. A starter kit is a template with opinions about architecture, patterns, and sometimes backend integration. It's designed to be the foundation of a specific type of application (usually SaaS, e-commerce, or a content site).

Typically includes: Everything in a template, plus:

Authentication screens and flows
Dashboard or admin panel layouts
Data table components with sorting and pagination
Form patterns with validation
Settings and account management pages
Sometimes: backend integration, payment processing, email setup

What you still build yourself: Your core product features. The starter kit handles the infrastructure patterns that every app of that type needs.

For a complete guide, see What Is a SaaS Starter Kit?.

Scaffold

A scaffold is code generated by a CLI tool based on your inputs. Unlike boilerplates and templates (which you copy as-is), scaffolds are generated dynamically. Rails' rails generate scaffold is the classic example. You tell it what you want (a User model with name and email fields), and it generates the model, controller, views, and migration files.

Typically includes: Generated code specific to your inputs. The output varies each time.

What you still build yourself: Anything the generator doesn't cover, plus customization of what it produced.

Quick Comparison

	Boilerplate	Template	Starter Kit	Scaffold
Config and setup	Yes	Yes	Yes	Yes
Pre-built UI	No	Yes	Yes	Generated
Pre-built screens	No	Some	Many	Generated
Design system	No	Sometimes	Usually	No
Architecture opinions	Minimal	Moderate	Strong	Framework-level
Customization effort	High	Medium	Low-Medium	Medium
Time saved	Hours	Days	Weeks	Hours

Why Boilerplates Exist

Every web project starts with the same tasks:

Initialize the project. Choose a framework, install dependencies, set up the package manager.
Configure the build. Set up Vite, Webpack, or Turbopack. Configure path aliases, environment variables, and output settings.
Set up TypeScript. Create tsconfig.json with the right compiler options, path mappings, and strict mode settings.
Configure linting and formatting. Install ESLint, Prettier, and relevant plugins. Write rules that match your team's conventions.
Set up routing. Configure the App Router or Pages Router, create layout files, set up middleware.
Add styling infrastructure. Install Tailwind CSS (or your preferred approach), configure the theme, set up PostCSS plugins.
Create base components. Build the button, input, card, and other primitives you'll use everywhere.

This takes a day or two for an experienced developer who's done it before. For someone setting it up for the first time, it can take a week of research, trial, and error.

Boilerplates compress that entire process into a single git clone or npx create command.

Types of Web Development Boilerplates

Framework Boilerplates

Official starters from framework teams:

create-next-app for Next.js
npm create vite for Vite-based React, Vue, or Svelte projects
npx nuxi init for Nuxt (Vue)
npx create-remix for Remix

These are minimal by design. They give you a working project with the framework configured correctly, but no UI components or application patterns.

Full-Stack Boilerplates

Bundles a frontend framework with a specific backend, database, and sometimes deployment configuration:

Next.js + Prisma + PostgreSQL
Next.js + Supabase
Next.js + Convex
Remix + Drizzle + SQLite

These save significant setup time but lock you into their backend choices. Switching from Prisma to Drizzle (or from PostgreSQL to MySQL) means rewriting data access patterns throughout the project.

UI-Focused Boilerplates

Start with a component library already integrated and themed:

Next.js + Tailwind CSS + shadcn/ui
Next.js + Tailwind CSS + Radix UI
Next.js + Material UI
Next.js + Chakra UI

These handle the styling infrastructure and give you a set of base components, but don't include application-level screens like dashboards or auth flows.

Domain-Specific Starter Kits

Purpose-built for a specific type of application:

SaaS starter kits: Auth, dashboards, settings, billing UI. The thefrontkit SaaS Starter Kit is an example.
E-commerce starters: Product pages, cart, checkout, order management.
Blog/CMS starters: Content pages, category archives, CMS integration.
AI application starters: Chat interfaces, streaming renderers, feedback collection. The AI UX Kit covers this.

When to Use a Boilerplate vs. Building from Scratch

Use a Boilerplate When:

You've built this type of project before and know exactly which setup decisions you'll make. The boilerplate saves you from repeating those decisions.
You're on a deadline. Spending two days on build configuration when you could spend them on features is hard to justify.
You're working with a team. A shared boilerplate means everyone starts from the same conventions, reducing code review friction and onboarding time.
You need accessibility from day one. Building accessible components from scratch takes significant expertise and time. A good starter kit (like thefrontkit) ships with WCAG AA compliance built in. See Why Accessibility Should Be Your First Priority.

Build from Scratch When:

You're learning. There's no better way to understand a framework than to configure it yourself and make every decision consciously.
Your requirements are highly unique. If no existing boilerplate matches your architecture, forcing one to fit wastes more time than starting fresh.
You have an existing codebase. Adding a boilerplate's patterns to an existing project is usually harder than adopting individual libraries and configurations.

For a detailed cost comparison in the context of Next.js specifically, see Next.js Boilerplate vs Building from Scratch.

How to Evaluate a Boilerplate Before Using It

1. Check the Last Commit Date

An active boilerplate gets regular updates. If the last commit was 12+ months ago, the dependencies are likely outdated, and the patterns may not follow current framework best practices.

2. Read the Dependencies

Open package.json and check:

Are the core dependencies (Next.js, React, TypeScript) on recent versions?
Are there unnecessary dependencies that add bloat?
Are dev dependencies properly separated from production dependencies?

3. Run the Linter

Clone the project and run npm run lint. A well-maintained boilerplate should have zero linting errors out of the box. If it ships with warnings or errors, the maintainer isn't using their own linting rules.

4. Check Accessibility

If the boilerplate includes UI components, test them with a keyboard. Press Tab through the entire page. Try to submit a form. Open and close a modal. If these basic interactions don't work without a mouse, the components aren't production-ready. See Customize UI Kits Without Breaking Accessibility.

5. Look at the Token System

Search the codebase for hardcoded color values (hex codes like #3b82f6 or RGB values). A good boilerplate uses CSS custom properties or Tailwind theme values instead. Hardcoded values mean you'll spend hours hunting through files when you need to rebrand. See How to Build a Design Token System with Tailwind CSS.

6. Check for Documentation

A boilerplate without a README, installation guide, or customization instructions is a codebase you'll have to reverse-engineer. Documentation separates maintained tools from abandoned side projects.

The Boilerplate Spectrum for Next.js Projects

Here's how the options lay out from minimal to comprehensive:

Most Minimal                                      Most Comprehensive
     |                                                    |
create-next-app → Config boilerplate → UI template → SaaS Starter Kit
     |                  |                   |              |
  Empty project    + ESLint/TS/        + Components    + Auth screens
  + basic config     Tailwind setup    + Layouts       + Dashboard
                                       + Theme         + Tables/Forms
                                                       + Settings
                                                       + Design tokens
                                                       + Figma file
                                                       + Accessibility

Where you start on this spectrum depends on your timeline, your team's experience, and how much of the "boring but essential" work you want to skip.

If you're building a SaaS product and want to start near the right end of that spectrum, the thefrontkit SaaS Starter Kit gives you the full set: auth, dashboard, tables, forms, settings, a Figma-to-Tailwind token system, and WCAG AA accessibility. Pricing starts at $99.

For AI products, combine it with the AI UX Kit for streaming chat interfaces, citation blocks, and feedback components built on the same design system.

Skip the setup: View SaaS Starter Kit | View AI UX Kit | Compare starter kits

What Is a Boilerplate in Web Development? Templates, Starter Kits, and Scaffolds Explained