In-project generation

Generate FSD slices

Use the v2 generator to create typed FSD slices directly inside an existing project. The CLI detects whether your app uses a `src/` directory and writes files to the matching FSD layer.

Syntax

bash

npx create-fsd-architecture --generate <type> <name>

bash

npx create-fsd-architecture -g <type> <name>

Command examples

bash

npx create-fsd-architecture --generate feature auth
npx create-fsd-architecture -g feature checkout-flow
npx create-fsd-architecture --generate feature product-filters
npx create-fsd-architecture --generate entity product
npx create-fsd-architecture -g entity order
npx create-fsd-architecture --generate widget navbar
npx create-fsd-architecture -g widget dashboard-sidebar
npx create-fsd-architecture --generate page checkout

Examples by slice type

Feature example

feature

Use this for user actions and business interactions such as auth, checkout, filters, search, or forms.

bash

npx create-fsd-architecture --generate feature auth

text

src/features/auth/
├── ui/
├── model/
└── index.ts

Entity example

entity

Use this for business objects such as product, user, order, brand, category, or cart item.

bash

npx create-fsd-architecture --generate entity product

text

src/entities/product/
├── ui/
├── model/
└── index.ts

Widget example

widget

Use this for composed UI blocks such as navbar, sidebar, header, product grid, or checkout summary.

bash

npx create-fsd-architecture --generate widget navbar

text

src/widgets/navbar/
├── ui/
└── index.ts

Page example

page

Use this for route-level page compositions such as checkout, profile, catalog, or dashboard.

bash

npx create-fsd-architecture --generate page checkout

text

src/pages/checkout/
├── ui/
└── index.ts

Overwrite examples

The generator protects existing slices unless you explicitly pass `--force`.

bash

npx create-fsd-architecture --generate feature auth --force
npx create-fsd-architecture -g widget navbar --force

Supported types

featureentitywidgetpage

Overwrite behavior

Existing slices are protected by default. Pass `--force` when you intentionally want to overwrite a generated slice.

Generator behavior

Writes to src/features, src/entities, src/widgets, or src/pages when src/ exists.

Writes to root-level features, entities, widgets, or pages when src/ does not exist.

Uses kebab-case for folders and files.

Uses PascalCase for React components.

Uses camelCase for variables and hooks.

Generates TypeScript boilerplate and a public index.ts API.

Prints a success message with the created files list.

Shows clear validation errors for invalid usage.

Generated paths

Project with src/

text

src/features/auth/
src/entities/product/
src/widgets/navbar/
src/pages/checkout/

Project without src/

text

features/auth/
entities/product/
widgets/navbar/
pages/checkout/

Feature presets

When generating a generic feature, the CLI asks what the feature will use.

API: Axios + React Query

Local State: Zustand

Global State: Redux Toolkit

UI only

Feature preset examples

text

? What will this feature use?
> API: Axios + React Query

Creates API helpers, React Query hooks, typed request files, UI entry points,
and a public index.ts export.

text

? What will this feature use?
> Local State: Zustand

Creates a local store, typed actions/state, UI entry points,
and a public index.ts export.

text

? What will this feature use?
> Global State: Redux Toolkit

Creates a slice, actions/selectors, UI entry points,
and a public index.ts export.

text

? What will this feature use?
> UI only

Creates a typed React component, styles-ready structure,
and a public index.ts export.