Feature-Sliced Design Awesome List

A showcase of real-world FSD implementations and examples is available on the official website.

https://feature-sliced.github.io/documentation/examples

To maintain Feature-Sliced Design (FSD) compliance and prevent architectural violations, use the following linting tools:

• Steiger: An official universal architectural linter with full support for FSD.
• @feature-sliced/eslint-config: The official ESLint configuration for FSD projects.
• @conarti/eslint-plugin-feature-sliced: A community-maintained ESLint plugin for FSD.

Use these pre-configured templates to start a new project following FSD principles:

• React + Vite: Minimal template or SSR template.
• Next.js: TypeScript + Next.js template.
• Nuxt3: TypeScript + Nuxt3 + UnoCSS template or Pure Nuxt3 template.
• SvelteKit: SvelteKit + Shadcn + Tailwind template.
• Quasar: Quasar 2 + Vite + Dprint template.
• Flutter: Flutter + Flutter Lint template.

Speed up your workflow by using IDE-specific plugins to manage FSD structures:

• IntelliJ IDEA: Use the Feature-Sliced Design Helper to quickly create layers, slices, and segments.
• VS Code: Use the FSD Slices Generator extension to quickly create FSD slices.

The following tools assist with generating FSD structures and visualizing dependencies:

• feature-sliced/cli: The official command-line generator used to create layers, slices, and segments.
• fsd-cruise: A tool for simple dependency visualization based on dependency-cruiser.
• fsd-crawler: A utility for the visualization and analysis of slices and their dependencies.