React + Vite and Next.js templates available

Ship Scalable Frontend Architecture in Seconds

Scaffold production-ready React projects with Feature-Sliced Design — the architecture pattern trusted by teams who outgrow component folders.

Get StartedView on GitHub
terminal
$npm create fsd-architecture@latest

? Project name: my-app

? Select template: React + Vite

✓ Scaffolding project in ./my-app

✓ Installing dependencies...

✓ Setting up linting, typing, and Husky

Done! cd my-app && npm run dev

Architecture

Built on Feature-Sliced Design

A layered architecture where each layer has a clear responsibility. Upper layers can only import from layers below — keeping your codebase predictable as it scales.

⚡

app

Initialization, providers, global styles, routing setup

📄

pages

Route-level screens. Next uses screens/ to avoid the reserved pages router folder

🧩

widgets

Large self-contained UI blocks like headers, sidebars

🎯

features

User interactions — forms, toggles, actions

📦

entities

Business entities — User, Product, Order

🔧

shared

Reusable utilities, UI kit, configs, constants

▲Upper layers import from lower layers — never the reverse
project structure
src/
├── app/
├── providers/
├── styles/
├── pages/
├── screens/
├── home/
├── about/
├── widgets/
├── header/
├── sidebar/
├── features/
├── auth/
├── create-post/
├── entities/
├── user/
├── product/
├── shared/
├── ui/
├── lib/
├── config/

How It Works

From zero to scalable in 30 seconds

Six steps. One command. A production-ready architecture that grows with your team.

1

Step 1

Choose your project name

Run the CLI and name your project. The scaffolder creates a clean directory with your chosen name, ready for development.

$ npm create fsd-architecture@latest
? ? Project name: my-app
2

Step 2

Select your template

Pick from production-ready templates. React + Vite and Next.js are available now. Each template includes the full FSD structure.

$ npm create fsd-architecture@latest
? ? Project name: my-app
? ? Select template: React + Vite or Next.js
3

Step 3

Download the template

The CLI downloads the selected template with the complete Feature-Sliced Design folder structure — app, pages, widgets, features, entities, and shared layers.

$ npm create fsd-architecture@latest
✓ Scaffolding project in ./my-app
Creating app/ layer...
Creating pages/ layer...
Creating widgets/ layer...
Creating features/ layer...
Creating entities/ layer...
Creating shared/ layer...
✓ Template ready
4

Step 4

Install dependencies

Dependencies are installed automatically. ESLint or Biome, strict TypeScript, Husky, commitlint, shadcn, and Tailwind are configured so you can focus on building features.

✓ Template ready
Installing dependencies...
✓ Dependencies installed
✓ ESLint or Biome configured
✓ TypeScript checks ready
✓ Husky hooks set up
✓ Commitlint ready
5

Step 5

Start building

Run the dev server and start writing features. Your project already has a scalable architecture — just add slices to the right layers.

$ cd my-app && npm run dev
VITE v6.x ready in 340ms
➜ Local: http://localhost:5173/
➜ Network: http://192.168.1.10:5173/
6

Step 6

Ship scalable architecture

Your project follows Feature-Sliced Design from day one. As your team grows, the architecture scales with you — no refactoring needed.

src/
├── app/ # providers, routing
├── pages/ # Vite route compositions
├── screens/ # Next route-level screens
├── widgets/ # complex UI blocks
├── features/ # user interactions
├── entities/ # business models
└── shared/ # reusable code
✓ Architecture scales with your team

Features

Everything you need to start right

Every template comes with the tooling and structure your team needs — configured, not just installed.

Feature-Sliced Design

A battle-tested architecture with clear layer boundaries. Every file has a home, every import follows the rules.

React + Vite Template

Start with a fast, modern stack. Vite's instant HMR paired with a scalable architecture from day one.

Next.js Support

App Router, React Compiler, Tailwind CSS, Biome, and FSD adapted for production Next.js dashboards.

Husky Git Hooks

Pre-commit hooks configured out of the box. Catch issues before they hit your repository.

Commit Linting

Enforce conventional commits automatically. Keep your git history clean and meaningful.

ESLint Configured

ESLint powers the Vite starter, while Biome powers the Next starter with linting, formatting, and import organization.

Clean Scaffolding

No leftover boilerplate. Every file has a purpose, every folder follows the FSD convention.

Developer-Friendly CLI

Interactive prompts guide you through setup. No memorizing flags — just answer questions.

Fast Setup

From npm create to running dev server in under 30 seconds. Skip the boilerplate, start building.

Scales With Your Team

FSD's layer system means your architecture stays clean whether you're solo or a team of fifty.

Included Capabilities

Every feature from the starters, visible in one place

The landing page now reflects both projects: the lightweight Vite template, the Next.js dashboard starter, and the quality workflow that ties them together.

Architecture

FSD structure that stays readable

The generated projects start with clear layers, import direction, shared primitives, and typed configuration so teams know where every slice belongs.

Feature-Sliced Design layers

app, pages or screens, widgets, features, entities, and shared layers are ready from day one.

Layer dependency rules

Upper layers compose lower layers, keeping shared code independent and feature code focused.

Path aliases

Use @/* imports from src/* for clean imports across both starter editions.

Frameworks

Two editions for different project shapes

Pick the lightweight Vite starter for speed or the Next.js starter for App Router dashboards and production-oriented apps.

React + Vite edition

React 19, Vite, TypeScript, Tailwind CSS, shadcn aliases, ESLint, and fast local builds.

Next.js App Router edition

Next 16, React 19, React Compiler, App Router, Tailwind CSS, Biome, and Next Image.

Shared design primitives

Reusable Button, Card, Input, Label, Badge, utilities, config, and shared types.

Quality

Tooling wired before the first feature

Linting, formatting, type checks, commit discipline, and git hooks are part of the starter instead of an afterthought.

Strict TypeScript

Strict type checking, noEmit builds, typed configs, and confident refactors.

ESLint and Biome

Vite ships ESLint rules; Next ships Biome for linting, formatting, React, Next, and import organization.

Husky, Commitlint, Commitizen

Local hooks and conventional commits keep quality checks close to the workflow.

Dashboard

Domain features already modeled

The Next edition includes product domain examples plus dashboard surfaces that show how FSD slices compose real screens.

Product entity

Typed product model, API reads, query keys, and optimized ProductCard with Next Image.

Product create and update

React Query mutations, React Hook Form, Zod validation, loading states, and reset behavior.

Dashboard-ready slices

Dashboard header, sidebar, auth guard placeholders, dashboard guards, and brand/category extension points.

Workflow

Commands and CI habits included

The templates document the same commands teams already expect in a production starter.

Quality commands

Run lint, typecheck, build, ci, git diff checks, and audit checks from a predictable workflow.

CI-ready scripts

Vite and Next editions expose scripts that can be dropped into automated checks.

Guard rails for teams

Commit rules, import organization, validation, and shared UI reduce drift as the codebase grows.

Documentation

Get started in minutes

Installation

No global install needed. Run the CLI directly with your preferred package manager:

bash
npm create fsd-architecture@latest
bash
yarn create fsd-architecture
bash
pnpm create fsd-architecture

Usage

The CLI walks you through setup with interactive prompts:

bash
$ npm create fsd-architecture@latest

? Project name: my-app
? Select a template: React + Vite

Scaffolding project in ./my-app...

Done. Now run:

  cd my-app
  npm install
  npm run dev

Project Structure

The generated project follows the Feature-Sliced Design methodology:

text
my-app/
├── src/
│   ├── app/            # App initialization, providers, routing
│   ├── pages/          # Vite page compositions
│   ├── screens/        # Next route-level screens
│   ├── widgets/        # Complex UI blocks (header, sidebar)
│   ├── features/       # User interactions (auth, forms)
│   ├── entities/       # Business entities (user, product)
│   └── shared/         # Reusable code (UI kit, utils, config)
├── .husky/             # Git hooks
├── .eslintrc.cjs       # ESLint configuration
├── commitlint.config.cjs
├── vite.config.ts
├── tsconfig.json
└── package.json

CLI Flow

Here's what happens when you run the CLI:

  1. 1Project name — enter a name for your new project directory.
  2. 2Template selection — choose from available templates (React + Vite or Next.js).
  3. 3Scaffolding — the FSD folder structure is generated with all layers.
  4. 4Tooling setup — ESLint or Biome, TypeScript checks, Husky, and commitlint are configured automatically.
  5. 5Ready — install dependencies and start the dev server.

Available Templates

React + ViteAvailable

React 19, Vite, TypeScript, Tailwind CSS, shadcn, ESLint, Husky, commitlint

Next.jsAvailable

Next 16, React 19, App Router, React Compiler, Tailwind CSS, Biome, shadcn

Roadmap

✓React + Vite template
✓Interactive CLI prompts
✓ESLint + Husky + commitlint
✓FSD folder structure generation
✓Next.js App Router template
✓React Query + forms example
✓Product entity CRUD screens
Brand and category CRUD
Vue + Vite template
Custom layer configuration
Slice generators (add feature/entity)

FAQ

Feature-Sliced Design (FSD) is an architectural methodology for frontend applications. It divides your codebase into layers (app, pages, widgets, features, entities, shared) with strict import rules — upper layers can import from lower layers, but never the reverse. This keeps your codebase predictable and maintainable as it grows.

No. The CLI generates the full structure for you with clear folder naming. The architecture is self-documenting — you'll learn FSD naturally by working within the generated structure. Each layer has a clear purpose that guides where new code should go.

The generated project gives you a clean starting point. You can add, remove, or rename slices within any layer. The key principle to follow is the layer dependency rule: only import from layers below your current layer.

The template includes React 19, Vite with fast HMR, TypeScript, Tailwind CSS, shadcn-ready aliases, ESLint with React and TypeScript rules, Husky hooks, commitlint, Commitizen, and the complete FSD folder structure with example slices.

The Next.js template is available now. It includes Next 16, React 19, App Router, React Compiler, Tailwind CSS, Biome, shadcn aliases, strict TypeScript, React Query, React Hook Form, Zod, Axios, product entity examples, dashboard widgets, and Next-safe screens.

Yes. create-fsd-architecture is completely free and open source under the MIT license. Contributions are welcome on GitHub.

Start building with
scalable architecture today

One command. Production-ready FSD structure. All the tooling configured. Stop debating folder structures and start shipping features.

Get StartedView on GitHub
$ npm create fsd-architecture@latest