Skip to content

# Seed / Starter Version

A minimal, clean starting point with all infrastructure but no demo pages or mock data.

## Overview

The `seed/` directory contains a standalone Next.js project that includes all the infrastructure from the full Zenith 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:3737` 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 Zenith 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.