THE TOOLKIT / CAPABILITIES

Your stack.
A stronger foundation.

Take a closer look at the templates, generators, and tools behind FSD CLI. All the details, in one place.

Explore features Templates & FAQ

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

An 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.

YOUR NEXT CHAPTER

Build something big.
Start with structure.

Your framework. Your stack. A foundation you can build on.

Get started View on GitHub

$ npm create fsd-architecture@latest

A complete foundation, not an empty folder tree

Feature-Sliced Design

React + Vite Template

Next.js Support

Vue + Vite Support

Nuxt 4 Support

SvelteKit Support

Husky Git Hooks

Commit Linting

ESLint Configured

Clean Scaffolding

Slice Generators

Project Configuration

Developer-Friendly CLI

Fast Setup

Scales With Your Team

Every feature from the starters, visible in one place

FSD structure that stays readable

Feature-Sliced Design layers

Layer dependency rules

Path aliases

Five editions for different project shapes

React + Vite edition

Next.js App Router edition

Vue + Vite edition

Nuxt 4 edition

SvelteKit edition

Tooling wired before the first feature

Strict TypeScript

ESLint and Biome

Husky, Commitlint, Commitizen

New slices follow the same decisions

Project configuration

Stack-aware generation

Complete auth flow

Commands and CI habits included

Quality commands

CI-ready scripts

Guard rails for teams

One source of truth for the CLI

Project scaffolding

Project configuration

Slice generator

Auth generator

Vue + Vite guide

Nuxt guide

SvelteKit guide

Project scaffolding

In-project slice generation

Available templates

Roadmap

FAQ

Build something big.Start with structure.

Build something big.
Start with structure.