/feature-slicing

FSD Quick Reference

Sources: Layers | Slices & Segments | Public API

Layer Hierarchy

app/      → Providers, routing, global styles          [segments only, REQUIRED]
pages/    → Route screens; default home for code       [slices, REQUIRED]
widgets/  → Reused UI blocks, may own logic/data       [slices, optional]
features/ → Reused user interactions                   [slices, optional]
entities/ → Reused business domain models              [slices, optional]
shared/   → Infrastructure: UI kit, API client, utils  [segments only, REQUIRED]

Import Rule: only import from layers BELOW. Never sideways or up. Deprecated: processes/ — move contents to features/ and app/.

Import Matrix

¹ app/ and shared/ have no slices — their segments import each other freely ² Cross-entity references only via @x notation

"Where does this code go?" (pages-first, v2.1)

├─ Used by exactly ONE page              → that page's slice (even forms/logic)
├─ App-wide config, providers, routing   → app/
├─ Infra with no domain knowledge        → shared/
├─ Reused across pages:
│  ├─ Large UI block (may own logic)     → widgets/
│  ├─ User action (verb)                 → features/
│  └─ Domain model/data (noun)           → entities/

Feature or Entity?

Entities: THINGS with identity, displayed in lists. Features: ACTIONS with side effects, triggered by the user — and only if reused; single-page interactions stay in the page.

Segments

Purpose-driven names only — never hooks/, components/, types/, utils/.

File Structure Templates

Entity / Feature slice (one index, no segment indexes)

entities/{name}/            features/{name}/
├── ui/                     ├── ui/
│   └── {Name}Card.tsx      │   └── {Name}Form.tsx
├── api/                    ├── api/
│   └── {name}Api.ts        │   └── {name}Api.ts
├── model/                  ├── model/
│   ├── types.ts            │   ├── schema.ts
│   └── schema.ts           │   └── store.ts
└── index.ts                └── index.ts

Page slice

pages/{name}/
├── ui/
│   ├── {Name}Page.tsx
│   └── (page-local blocks live here too)
├── api/
│   └── loader.ts
└── index.ts

Public API Rules

// entities/user/index.ts — explicit named exports only
export { UserCard } from './ui/UserCard';
export { getUser, updateUser } from './api/userApi';
export type { User, UserRole } from './model/types';

// ✅ Consume via public API
import { UserCard, type User } from '@/entities/user';

// ❌ Deep import
import { UserCard } from '@/entities/user/ui/UserCard';

// ✅ Inside the slice: relative imports (never your own index.ts)
import { userSchema } from '../model/schema';

• One index.ts per slice — no segment indexes on sliced layers
• No root shared/index.ts — per segment (shared/api/index.ts), per component for shared/ui (@/shared/ui/button)
• No export *

Cross-Entity References (@x)

Entities layer only:

// entities/product/@x/order.ts — exports intended for the order entity
export type { ProductId } from '../model/types';

// entities/order/model/types.ts
import type { ProductId } from '@/entities/product/@x/order';

Tooling

npm i -D steiger @feature-sliced/steiger-plugin
npx steiger ./src          # official FSD linter; --watch during refactors

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] }
  }
}

Anti-Patterns

Minimal FSD Setup

src/
├── app/
├── pages/
└── shared/

Add entities/, features/, widgets/ only when something is reused by 2+ pages.

Resources