Latest release: v2.6.0 →

Build scalable frontends from day one

Create React + Vite, Next.js, Vue + Vite, Nuxt, or SvelteKit 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: Fetch + Svelte Query + Svelte store

✓ Detected SvelteKit and created src/features/auth

✓ Generated public index.ts API

✓ Added framework-native 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 every starter 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 five production-ready templates. React + Vite, Next.js, Vue + Vite, Nuxt, and SvelteKit each include the full FSD structure.

$ npm create fsd-architecture@latest
? Project name: my-app
? Select template: React, Next.js, Vue, Nuxt, or SvelteKit
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/ or app/
├── 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.

Vue + Vite Support

Vue 3, Pinia, TanStack Vue Query, VeeValidate + Zod, and framework-native FSD generators.

New in 2.4

Nuxt 4 Support

SSR-aware Vue Query, Pinia and VeeValidate modules, native Fetch, and generated file-based routes.

New in 2.5

SvelteKit Support

Svelte 5, SSR-ready Svelte Query, native stores, Superforms + Zod, and generated file-based routes.

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 React, Vue, Nuxt, and SvelteKit starters, while Biome powers Next 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 using each framework's configured source directory.

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 all five starters: React + Vite, Next.js App Router, Vue + Vite, Nuxt, and SvelteKit, plus 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 each framework's source root for clean imports across every starter edition.

Frameworks

Five editions for different project shapes

Choose React or Vue on Vite for client-side apps, Next.js for App Router, Nuxt for Vue SSR, or SvelteKit for Svelte SSR 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.

Vue + Vite edition

Vue 3, Vite 8, Pinia, TanStack Vue Query, VeeValidate + Zod, Tailwind CSS 4, and ESLint.

Nuxt 4 edition

Nuxt 4, Vue 3, SSR, native Fetch, Pinia, Vue Query hydration, VeeValidate + Zod, and generated routes.

SvelteKit edition

Svelte 5, SvelteKit 2, SSR, native Fetch, Svelte Query, stores, Superforms + Zod, and generated routes.

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

React, Vue, Nuxt, and SvelteKit starters ship ESLint rules; Next ships Biome for linting, formatting, 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

Output adapts to Axios or Fetch, React, Vue or Svelte Query, framework-native stores, 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

React, Next, Vue, Nuxt, and SvelteKit 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, Next.js, Vue + Vite, Nuxt, or SvelteKit FSD project through the 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 using its framework source root.

Read docs

Auth generator

Create five auth flows with framework-native Query, state, and form integrations.

Read docs

Vue + Vite guide

Learn the Vue template defaults, FSD structure, native generators, and quality workflow.

Read docs

Nuxt guide

Learn the Nuxt app-root structure, SSR providers, native API client, routes, and generators.

Read docs

SvelteKit guide

Learn the Svelte 5 structure, Svelte Query, stores, Superforms, route wrappers, and native generators.

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

Vue + ViteAvailable

Vue 3, Vite 8, Pinia, TanStack Vue Query, VeeValidate + Zod, Tailwind CSS 4, ESLint, Steiger

NuxtAvailable

Nuxt 4, Vue 3, SSR, native Fetch, Pinia, Vue Query hydration, VeeValidate + Zod, Nuxt ESLint, Steiger

SvelteKitAvailable

Svelte 5, SvelteKit 2, SSR, native Fetch, Svelte Query, Svelte stores, Superforms + Zod, ESLint, 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
✓Framework adapter core
✓Branded starter home experience
✓Vue + Vite template and generators
✓Nuxt template and generators
✓Cross-package E2E test matrix
✓SvelteKit template and generators

FAQ

The CLI scaffolds full projects and generates FSD slices inside existing projects. Version 2.5 adds stable SvelteKit scaffolding, Svelte 5 generators, Svelte Query, stores, Superforms, and generated file-based routes.

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.

The framework adapter owns the source root. React, Next.js, Vue + Vite, and SvelteKit use src/* layers, while Nuxt uses app/* layers.

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

Support FSD CLI

If FSD CLI helps you build, consider supporting its development and documentation. Donations are optional.

Buy Me a Coffee (opens in a new tab)

InstaPay · Egypt

ashrafmo-1

للدعم من مصر عبر إنستا باي. تأكد من بيانات المستلم قبل تأكيد التحويل.