create-fsd-architecture

Scaffold production-ready projects with Feature-Sliced Design architecture in seconds.

📚 Documentation: https://fsd-docs.vercel.app

🚀 GitHub: https://github.com/FSD-architectures/cli

Features

• FSD Architecture — Pre-configured layers: app, pages, widgets, features, entities, shared
• Interactive CLI — Guided setup with project name, template selection, and dependency installation
• Turborepo Monorepos — Generate multi-app workspaces with shared packages
• In-project Generators — Add FSD slices to existing projects
• Multiple Templates — Choose from available project templates (more coming soon)
• Zero Config — Start coding immediately with sensible defaults
• TypeScript — Full TypeScript support out of the box

Quick Start

npx create-fsd-architecture@latest my-app

Create a Turborepo monorepo:

npx create-fsd-architecture@latest init my-project --monorepo
npx fsd-architecture@latest init my-project --monorepo

Or with a specific package manager:

npm create fsd-architecture@latest my-app

Generate slices inside an existing project:

npx create-fsd-architecture --generate feature auth

Usage

Interactive Mode

npx create-fsd-architecture@latest

The CLI will guide you through:

1. Project name — Name your project
2. Project type — Choose Single App or Turborepo Monorepo
3. Template selection — Choose your framework for single-app projects
4. Install dependencies — Optionally install packages for single-app projects
5. Start dev server — Optionally launch the development server

With Arguments

npx create-fsd-architecture@latest my-app

Pass the project name directly to skip the name prompt.

Turborepo Monorepo

npx create-fsd-architecture@latest init my-project --monorepo

The monorepo flow asks for:

• Project type — Single App or Turborepo Monorepo
• Apps — web, admin, and optional docs
• Framework per app — nextjs maps to the existing Next.js template, react maps to the existing React + Vite template
• Package manager — pnpm, npm, or yarn
• Shared UI package — optionally create packages/ui

Default monorepo generation creates:

my-project/
|-- apps/
|   |-- web/
|   `-- admin/
|-- packages/
|   |-- ui/
|   |-- shared/
|   |-- typescript-config/
|   `-- eslint-config/
|-- package.json
|-- turbo.json
|-- pnpm-workspace.yaml
|-- .gitignore
`-- README.md

If docs is selected, the CLI also creates apps/docs. If shared UI is disabled, packages/ui is not created and apps do not receive the @repo/ui dependency.

Monorepo flags:

npx create-fsd-architecture@latest init my-project --monorepo --apps web,admin
npx create-fsd-architecture@latest init my-project --monorepo --apps web,admin,docs
npx create-fsd-architecture@latest init my-project --monorepo --package-manager pnpm
npx create-fsd-architecture@latest init my-project --monorepo --shared-ui
npx create-fsd-architecture@latest init my-project --monorepo --no-shared-ui
npx create-fsd-architecture@latest init my-project --monorepo --web-framework nextjs --admin-framework react --docs-framework nextjs

Valid framework values are nextjs and react. Mobile app generation is not available yet, so the interactive prompt disables mobile and the CLI rejects --apps mobile with a clear message.

Package-manager-specific next steps:

pnpm install
pnpm dev

npm install
npm run dev

yarn install
yarn dev

When shared UI is enabled, apps can import from @repo/ui:

import { Button } from "@repo/ui";

Generate FSD Slices

npx create-fsd-architecture --generate <type> <name>
npx create-fsd-architecture -g feature auth

Allowed types:

• feature
• entity
• widget
• page

The generator writes into src/features, src/entities, src/widgets, or src/pages when src/ exists. Otherwise, it writes to root-level FSD folders. Existing slices are protected by default; pass --force to overwrite one.

Examples:

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

Available Templates

| Template | Status | | --- | --- | | React + Vite | Available | | Next.js | Coming Soon |

Project Structure

Projects are scaffolded with the FSD architecture:

src/
├── app/          # App-level setup: providers, routing, styles
├── pages/        # Full pages composed from widgets and features
├── widgets/      # Large self-contained UI blocks
├── features/     # User interactions and actions
├── entities/     # Business entities and their representations
└── shared/       # Reusable utilities, UI kit, configs

Requirements

• Node.js 18 or later

License

ISC