THE SYSTEM / ARCHITECTURE
Good structure.
From the ground up.
Understand the layers behind your codebase, then follow the complete journey from your first command to your first feature.
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
How It Works
From one command to a scalable foundation
Six steps. One command. An architecture that grows with your team.
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.
Step 2
Select your template
Pick from five framework templates. React + Vite, Next.js, Vue + Vite, Nuxt, and SvelteKit each include the full FSD structure.
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.
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.
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.
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.
YOUR NEXT CHAPTER
Build something big.
Start with structure.
Your framework. Your stack. A foundation you can build on.
$ npm create fsd-architecture@latest