DashboardLayout

PopularPro

Admin/dashboard layout with navigation.

layoutdashboardadmin

Import

import { DashboardLayout, DashboardSidebar, DashboardNavItem, DashboardHeader } from "@/components/ui";

Basic Usage

DashboardLayout Preview

DashboardLayout provides a full admin dashboard shell with sidebar navigation, header, and main content area. Best viewed at full page scale.

Code

tsx

<DashboardLayout
  sidebar={
    <DashboardSidebar>
      <DashboardNavItem href="/dashboard" icon="LayoutDashboard">
        Dashboard
      </DashboardNavItem>
      <DashboardNavItem href="/users" icon="Users">
        Users
      </DashboardNavItem>
      <DashboardNavItem href="/settings" icon="Settings">
        Settings
      </DashboardNavItem>
    </DashboardSidebar>
  }
  header={
    <DashboardHeader>
      <h1>Dashboard</h1>
    </DashboardHeader>
  }
>
  <main>{children}</main>
</DashboardLayout>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring