Dashboard

Overview

The Dashboard archetype is a deployable Next.js application shell. Running the deploy command copies the full file tree into your project — no black-box abstraction, no hidden config. Every file is yours to edit from day one.

What's included:

• A root layout with ToastProvider wired up
• A /dashboard route with DashboardLayout, sidebar navigation and a dark mode toggle
• Three pre-built pages: overview with KPI cards, an analytics page, and a settings form
• Tailwind pre-configured via venatorPreset
• All @venator dependencies listed in package.json

Deploy

npx venator init dashboard

Once deployed:

cd my-dashboard
npm install
npm run dev

What's included

my-app/
app/
  layout.tsx           # Root layout with ToastProvider
  page.tsx             # Redirects to /dashboard
  dashboard/
    layout.tsx         # DashboardLayout with Sidebar and Header
    page.tsx           # Overview with StatCards and ModuleGrid
    analytics/
      page.tsx         # Analytics page with metrics
    settings/
      page.tsx         # Settings form
components/
  sidebar.tsx          # SidebarNav with navigation sections
  header.tsx           # Topbar with dark mode toggle
tailwind.config.js     # Pre-configured with venatorPreset
package.json           # Dependencies pre-configured

Venator packages used

• @venator-ui/ui — Button, Card, Input, Label, Separator, Badge
• @venator-ui/patterns — DashboardLayout, SidebarNav, Topbar, PageHeader, ModuleGrid, StatCard
• @venator-ui/tokens — included via venatorPreset in tailwind.config.js

Customization

All files are copied into your project and are fully yours. Common entry points:

• Update components/sidebar.tsx sections with your own routes
• Replace hardcoded values in app/dashboard/page.tsx with real data
• Add new pages under app/dashboard/ following the same pattern

Next steps

Add an individual pattern to an existing project:

npx venator add page-header

Install Venator UI components directly:

npm install @venator-ui/ui