v2.1: configure once, scaffold and generate

Build scalable frontends from day one

Create React + Vite or Next.js projects and generate Feature-Sliced Design slices inside existing codebases. Your framework and stack choices stay consistent through one project configuration.

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

✓ Loaded fsd.config.json

◆ Stack: Axios + React Query + Zustand

✓ Detected src/ and created src/features/auth

✓ Generated public index.ts API

✓ Added typed React Query auth boilerplate

Done! Auth flow 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 compositions, supported in both starters through framework routing adapters

🧩

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/
├── home/
├── about/
├── widgets/
├── header/
├── sidebar/
├── features/
├── auth/
├── create-post/
├── entities/
├── user/
├── product/
├── shared/
├── ui/
├── lib/
├── config/

How It Works

From one command to a scalable foundation

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
✓ Template downloaded
✓ Complete FSD layers ready
✓ fsd.config.json written
✓ Git and Husky configured
4

Step 4

Install dependencies

Choose whether to install dependencies now. The selected stack, linting, strict TypeScript, Steiger, Husky, Commitlint, and Tailwind configuration are already prepared.

✓ Template configured
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
Development server ready
➜ 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. Clear boundaries make future refactors smaller and easier to reason about as the team grows.

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

Features

A complete foundation, not an empty folder tree

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 framework-aware FSD route composition.

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.

Project Configuration

Save framework, API, state, forms, UI, and package-manager choices once in fsd.config.json.

Developer-Friendly CLI

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

Fast Setup

Move from one command to a runnable project without rebuilding the same architecture and tooling setup by hand.

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 reflects both projects: the lightweight Vite starter, the Next.js App Router starter, and the shared 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, 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 client-side apps or the Next.js starter for App Router applications.

React + Vite edition

React 19, Vite 8, TypeScript, Tailwind CSS 4, ESLint, Steiger, and fast local builds.

Next.js App Router edition

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

Shared design primitives

Reusable UI primitives, utilities, configuration, API boundaries, assets, 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.

Generators

New slices follow the same decisions

The project configuration keeps generated features aligned with the framework, API client, state tools, and forms stack selected at creation time.

Project configuration

fsd.config.json stores the selected framework and stack as a versioned source of truth.

Stack-aware generation

Feature output adapts to Axios or Fetch, React Query, Zustand or Redux, and form choices.

Complete auth flow

Generate login, registration, password recovery, reset, and verification files together.

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, FSD checks, and CI 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

One source of truth for the CLI

Create projects, understand their saved configuration, and generate typed slices from the same package.

Project scaffolding

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

Read docs

Project configuration

See how fsd.config.json stores stack choices and keeps every generator consistent.

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 8, TypeScript, Tailwind CSS 4, ESLint, Steiger, Husky, Commitlint

Next.jsAvailable

Next 16, React 19, App Router, React Compiler, Tailwind CSS 4, Biome, Steiger

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
Cross-package E2E test matrix
Framework adapter core
Branded starter home experience
Vue + Vite template
Nuxt and SvelteKit adapters

FAQ

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

Project creation can install dependencies when you approve the wizard prompt. In-project generation does not run a package manager; it uses the dependencies and stack recorded in fsd.config.json.

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