Seed / Starter Version

Overview

The seed/ directory contains a standalone Next.js project that includes all the infrastructure from the full Flux Dashboard — theming, i18n, layouts, 33 UI components, Storybook and Vitest configurations — but none of the demo pages, mock data, or showcase content. It provides a clean foundation for building your own application.

Quick Start

# Copy seed to a new project directory
cp -r seed/ ../my-new-project
cd ../my-new-project

# Install dependencies
npm install

# Start dev server
npm run dev

The dev server starts at http://localhost:3838 with two routes: Dashboard (home) and Settings.

What's Included

• Dashboard Shell — Sidebar, header, top-nav, command palette, page transitions
• Theme System — Dark/light/system mode, 6 color presets, 3 density levels, RTL support, Theme Customizer drawer
• i18n — Locale context, en/de/fr message files, locale switcher
• 33 UI Components — All vendored shadcn/ui primitives
• Shared Components — PageHeader, EmptyState, LazyChart
• Configs — TypeScript, ESLint, Vitest, Storybook, Tailwind CSS v4

What's Not Included

• Demo pages (Analytics, eCommerce, CRM, SaaS, etc.)
• Mock data layer (orders, products, customers, invoices)
• Auth pages (sign-in, sign-up, forgot password, etc.)
• Error/utility pages (404, 403, 500, maintenance, coming soon)
• Documentation site
• Storybook stories and Vitest test files (configs are included)

Project Structure

seed/
├── .storybook/                 # Storybook configuration
├── public/                     # Static assets
├── src/
│   ├── app/
│   │   ├── (dashboard)/
│   │   │   ├── settings/       # Settings page
│   │   │   ├── layout.tsx      # Dashboard shell
│   │   │   └── page.tsx        # Home (getting started cards)
│   │   ├── fonts/              # Local Geist fonts
│   │   ├── globals.css         # Tailwind + color tokens
│   │   └── layout.tsx          # Root layout
│   ├── components/
│   │   ├── dashboard/          # Sidebar, Header, Shell, Customizer
│   │   ├── shared/             # PageHeader, EmptyState, LazyChart
│   │   ├── ui/                 # 33 shadcn/ui components
│   │   └── theme-provider.tsx
│   └── lib/
│       ├── i18n/               # Locale context + message files
│       ├── navigation.ts       # Sidebar nav config (2 items)
│       └── utils.ts            # cn() utility
├── vitest.config.ts
├── tsconfig.json
├── next.config.ts
└── package.json

Adding Your First Page

The seed project's home page includes step-by-step cards explaining how to add pages, configure theming, and set up i18n. The process is identical to the full template:

1. Create a page file in src/app/(dashboard)/your-page/page.tsx
2. Add a navigation entry in src/lib/navigation.ts
3. (Optional) Add translation keys to src/lib/i18n/messages/*.json

See the Adding Pages guide for detailed instructions.

Referencing the Full Template

Need a DataTable, chart, or form pattern? Copy the relevant files from the full Flux Dashboard into your seed project. The component paths and import patterns are identical, so code is directly portable.

Next Steps

Explore the Theming guide to customize colors and density, or the i18n guide to add new languages.