Folder Structure

Project Tree

apex-dashboard/
├── public/                     # Static assets (favicon, images)
├── src/
│   ├── app/
│   │   ├── (auth)/             # Auth pages (sign-in, sign-up)
│   │   │   ├── sign-in/
│   │   │   └── sign-up/
│   │   ├── (dashboard)/        # Dashboard routes (inherits sidebar layout)
│   │   │   ├── analytics/
│   │   │   ├── billing/
│   │   │   ├── customers/
│   │   │   ├── invoices/
│   │   │   ├── notifications/
│   │   │   ├── orders/
│   │   │   ├── products/
│   │   │   ├── settings/
│   │   │   ├── support/
│   │   │   ├── layout.tsx      # Dashboard shell (sidebar + header)
│   │   │   └── page.tsx        # Home / overview
│   │   ├── docs/               # Documentation site (this section)
│   │   ├── fonts/              # Local font files (Geist)
│   │   ├── globals.css         # Tailwind config + CSS custom properties
│   │   ├── layout.tsx          # Root layout (ThemeProvider, fonts)
│   │   └── not-found.tsx       # Custom 404 page
│   ├── components/
│   │   ├── dashboard/          # Dashboard-specific components
│   │   │   ├── sidebar.tsx
│   │   │   ├── sidebar-context.tsx
│   │   │   ├── header.tsx
│   │   │   ├── dashboard-shell.tsx
│   │   │   ├── stats-cards.tsx
│   │   │   ├── revenue-chart.tsx
│   │   │   └── ...
│   │   ├── ui/                 # shadcn/ui primitives (vendored)
│   │   │   ├── button.tsx
│   │   │   ├── card.tsx
│   │   │   ├── dialog.tsx
│   │   │   ├── input.tsx
│   │   │   ├── table.tsx
│   │   │   └── ...
│   │   └── theme-provider.tsx  # Dark/light/system theme context
│   └── lib/
│       ├── navigation.ts       # Dashboard sidebar nav config
│       ├── docs-navigation.ts  # Docs sidebar nav config
│       └── utils.ts            # cn() helper (clsx + tailwind-merge)
├── components.json             # shadcn/ui CLI configuration
├── tailwind.config.ts          # Tailwind CSS configuration
├── tsconfig.json               # TypeScript configuration
├── next.config.ts              # Next.js 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).

src/app/(auth)/

Authentication pages (sign-in, sign-up) 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/ui/

Vendored shadcn/ui components. These are not installed from a package — they are source files you own and can customize freely. Each component uses CVA for variants and the cn() utility for class merging.

src/components/dashboard/

Higher-level components that compose the dashboard UI: the sidebar, header, stats cards, charts, data tables, and activity feeds.

src/lib/

Shared utilities and configuration. The navigation.ts file defines all sidebar links. The utils.ts file exports the cn() class-merging function used throughout the project.

Path Aliases

The project uses a single path alias configured in tsconfig.json:

"@/*" → "src/*"

// Usage:
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

All imports throughout the project use this alias instead of relative paths.

Next Steps

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