Adding Pages

Dashboard Pages

Dashboard pages live inside the src/app/(dashboard)/ route group. Create a new folder with a page.tsx file inside it. Every dashboard page uses the "use client" directive because the layout relies on client-side state (sidebar collapse, theme, etc.). Import PageBreadcrumb to render the header breadcrumb automatically.

"use client";
import { PageBreadcrumb } from "@/components/dashboard/breadcrumb";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@dashboardpack/core/components/ui/card";

export default function MyPage() {
  return (
    <>
      <PageBreadcrumb
        title="My Page"
        items={[{ label: "Custom" }, { label: "My Page" }]}
      />
      <Card>
        <CardHeader>
          <CardTitle>Hello World</CardTitle>
        </CardHeader>
        <CardContent>Your content here</CardContent>
      </Card>
    </>
  );
}

The file should be placed at src/app/(dashboard)/your-page/page.tsx. The (dashboard) route group applies the shared dashboard layout (sidebar, header, breadcrumb wrapper) without adding a URL segment.

Adding to Navigation

The sidebar navigation is defined in src/lib/navigation.ts. Open that file, import the Lucide icon you want, then add a new item to the appropriate NavGroup.

// src/lib/navigation.ts
import { LayoutDashboard, FileText, Star } from "lucide-react";

export const navigation: NavGroup[] = [
  {
    title: "General",
    items: [
      {
        title: "Analytics",
        href: "/dashboard/analytics",
        icon: LayoutDashboard,
      },
      // Add your new page here
      {
        title: "My Page",
        href: "/your-page",
        icon: Star,
      },
    ],
  },
  // ... other groups
];

If your page belongs in a new group, add a new object with a title and an items array to the exported array. The sidebar renders groups automatically in the order they appear.

Auth Pages

Authentication pages (sign in, sign up, forgot password, etc.) live inside the src/app/(auth)/v1/ route group. Create your page at src/app/(auth)/v1/your-page/page.tsx.

Auth pages are typically wrapped in one of two layout components:

• AuthCardLayout — centered card on a plain background, ideal for simple sign-in forms.
• AuthSplitLayout — two-column split with a branded panel on one side, ideal for sign-up flows.

Auth pages are publicly accessible — they sit outside the dashboard route group and therefore bypass the authentication guard applied to (dashboard) routes.

Standalone Pages

For full-screen pages that need to render outside the dashboard shell — such as landing pages, error pages, or maintenance screens — create the file inside src/app/(pages)/your-page/page.tsx.

The (pages) route group uses a minimal layout with no sidebar or header. You have full control over the page structure and can build any custom UI without dashboard chrome getting in the way.