Dashboard Layout

A layout pattern for analytics, admin panels, and data-heavy applications.

Preview

Implementation

Installation

npx shadcn@latest add cs-coe-frontend/dashboard-layout

Usage

import {
  DashboardLayout,
  DashboardLayoutSidebar,
  DashboardLayoutHeader,
  DashboardLayoutMain,
  DashboardLayoutContent,
} from '@/components/layouts/dashboard-layout';

<DashboardLayout>
  <DashboardLayoutSidebar>
    {/* Navigation menu */}
  </DashboardLayoutSidebar>
  <DashboardLayoutMain>
    <DashboardLayoutHeader>
      {/* Page title, actions */}
    </DashboardLayoutHeader>
    <DashboardLayoutContent>
      {/* Dashboard widgets */}
    </DashboardLayoutContent>
  </DashboardLayoutMain>
</DashboardLayout>

Use Cases

• Analytics dashboards
• Admin panels
• Data management interfaces
• Research portals

Components

DashboardLayoutSidebar - Collapsible navigation
DashboardLayoutHeader - Top bar with actions
DashboardLayoutMain - Main content wrapper
DashboardLayoutContent - Scrollable content area

Features

• Collapsible sidebar
• Responsive design
• Sticky header
• Scrollable content area