v2: project scaffolding and slice generation

Scaffold and Extend FSD Projects in Seconds

Scaffold production-ready React projects and generate Feature-Sliced Design slices inside existing codebases with typed boilerplate for features, entities, widgets, pages, and auth flows.

Read the DocsView on GitHub
terminal
$npx create-fsd-architecture --generate feature auth

? What will this feature use? Axios + React Query

? Auth modules: Login, Register

✓ Detected src/ and created src/features/auth

✓ Generated public index.ts API

✓ Added typed React Query auth boilerplate

Done! 12 files created

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.

Slice Generators

Add features, entities, widgets, pages, and auth flows inside existing projects with smart src/ detection.

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

Version 2 docs for both CLI workflows

Start new FSD projects or generate typed slices inside existing codebases from the same package.

Project scaffolding

Create a new React + Vite or Next.js FSD project through the existing interactive wizard.

Read docs

Slice generator

Generate features, entities, widgets, and pages inside an existing project with smart src/ detection.

Read docs

Auth generator

Create auth modules for login, register, and forgot password flows with React Query, Zustand, Redux Toolkit, or UI-only presets.

Read docs

Project scaffolding

No generator flag keeps the existing interactive project creation wizard.

bash
npm create fsd-architecture@latest
bash
npx create-fsd-architecture@latest

In-project slice generation

Generate FSD features, entities, widgets, and pages from inside an existing project.

bash
npx create-fsd-architecture --generate feature auth
npx create-fsd-architecture -g entity product
npx create-fsd-architecture --generate widget navbar
npx create-fsd-architecture --generate page checkout

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
✓Next.js App Router template
✓Interactive project wizard
✓In-project slice generators
✓Auth feature generator
✓React Query, Zustand, Redux Toolkit presets
Brand and category CRUD
Vue + Vite template
Custom layer configuration

FAQ

The CLI still scaffolds full projects, but it can now generate FSD slices inside an existing project using --generate or -g.

No. It generates code for the selected preset and assumes dependencies such as React Query, Zustand, Redux Toolkit, Axios, or the shared API client already exist in the project.

If src/ exists, slices are created under src/features, src/entities, src/widgets, or src/pages. Otherwise the CLI writes to root-level FSD layer folders.

Existing slices are protected by default. Use --force when you intentionally want to overwrite one.

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