Folder Structure

Project Tree

flux-dashboard/
├── public/                     # Static assets (favicon, images)
├── e2e/                        # Playwright end-to-end tests
│   └── smoke.spec.ts
├── src/
│   ├── app/
│   │   ├── (auth)/             # Auth pages (standalone layout)
│   │   │   ├── sign-in/
│   │   │   ├── sign-up/
│   │   │   ├── forgot-password/
│   │   │   ├── reset-password/
│   │   │   ├── two-factor/
│   │   │   ├── verify-email/
│   │   │   └── lock-screen/
│   │   ├── (dashboard)/        # Dashboard routes (sidebar + header layout)
│   │   │   ├── activity/
│   │   │   ├── analytics/
│   │   │   ├── billing/
│   │   │   ├── calendar/
│   │   │   ├── changelog/
│   │   │   ├── charts/         # Charts showcase (Radar, Treemap, etc.)
│   │   │   ├── chat/
│   │   │   ├── crm/
│   │   │   ├── customers/
│   │   │   ├── deployments/
│   │   │   ├── ecommerce/
│   │   │   ├── feature-flags/
│   │   │   ├── feedback/
│   │   │   ├── files/
│   │   │   ├── invoices/
│   │   │   ├── kanban/
│   │   │   ├── mail/
│   │   │   ├── notifications/
│   │   │   ├── orders/         # CRUD (list, [id], new, [id]/edit)
│   │   │   ├── pricing/
│   │   │   ├── products/       # CRUD (list, [id], new, [id]/edit)
│   │   │   ├── profile/
│   │   │   ├── roadmap/
│   │   │   ├── saas/
│   │   │   ├── settings/
│   │   │   ├── sprints/
│   │   │   ├── support/
│   │   │   ├── users/          # User management (CRUD, roles, permissions)
│   │   │   ├── wizard/
│   │   │   ├── layout.tsx      # Dashboard shell (sidebar + header)
│   │   │   └── page.tsx        # Home / overview
│   │   ├── docs/               # Built-in documentation site
│   │   ├── globals.css         # Tailwind config + OKLCh color tokens
│   │   ├── layout.tsx          # Root layout (ThemeProvider, fonts)
│   │   └── not-found.tsx       # Custom 404 page
│   ├── components/
│   │   └── dashboard/          # Sidebar, Header, Shell, Charts, Customizer
│   │       ├── sidebar.tsx
│   │       ├── sidebar-context.tsx
│   │       ├── header.tsx
│   │       ├── dashboard-shell.tsx
│   │       ├── theme-customizer.tsx
│   │       ├── top-nav.tsx
│   │       └── ...
│   ├── lib/
│   │   ├── navigation.ts       # Dashboard sidebar nav config
│   │   ├── docs-navigation.ts  # Docs sidebar nav config
│   │   └── utils.ts            # cn() helper (clsx + tailwind-merge)
│   └── test/                   # Vitest setup and type declarations
├── vitest.config.ts            # Vitest test configuration
├── playwright.config.ts        # Playwright E2E configuration
├── components.json             # shadcn/ui CLI configuration
├── tsconfig.json               # TypeScript configuration
├── next.config.ts              # Next.js configuration
├── .storybook/                 # Storybook configuration
└── package.json

Key Directories

src/app/(dashboard)/

All dashboard pages live inside this route group. The parentheses tell Next.js this is a grouping folder — it does not appear in the URL. Every page here automatically inherits the dashboard layout (sidebar, header, and content shell). Flux adds specialty pages for dev-tool workflows: activity, changelog, deployments, feature-flags, feedback, roadmap, and sprints.

src/app/(auth)/

Authentication and utility pages (sign-in, sign-up, forgot password, reset password, two-factor, email verification, lock screen) have their own layout without the dashboard chrome. They use a centered card design.

src/app/docs/

The documentation site (what you are reading now). It lives outside the route groups and has its own dedicated layout with a sidebar navigation.

src/components/dashboard/

Higher-level components that compose the dashboard UI: sidebar, header, theme customizer, top-nav, stats cards, charts, and activity feeds. UI primitives (Button, Card, etc.), shared components (DataTable, PageHeader, etc.), and the ThemeProvider are imported from @dashboardpack/core rather than vendored locally.

src/lib/

Local utilities and configuration. The navigation.ts file defines all sidebar links. The docs-navigation.ts file defines the docs sidebar links. The utils.ts file exports the cn() class-merging function. Mock data, i18n infrastructure, and additional shared utilities are provided by @dashboardpack/core.

Path Aliases

The project uses two import patterns configured in tsconfig.json:

"@/*" → "src/*"

// From @dashboardpack/core (UI, shared components, data, i18n):
import { Button } from "@dashboardpack/core/components/ui/button";

// Local files with @/ alias:
import { navigation } from "@/lib/navigation";

Local imports use the @/ alias. UI primitives, shared components, mock data, and i18n are imported directly from @dashboardpack/core.

Next Steps

Learn how to customize the look and feel in the Theming guide, or see how to add new pages to the dashboard.