Dashboard Layout

App shell with collapsible sidebar navigation, top navbar, and content area with cards and tabs.

Preview

$48,120

+12.4%vs last monthup vs last month

2,847

+3.1%vs last monthup vs last month

4.82%

-0.4%vs last monthdown vs last month

1.2%

0.0%vs last monthflat vs last month

Recent activity

View all

New subscriptionJane Cooper
Acme Corp upgraded to the Team plan.
2 minutes ago
User invitedWade Warren
dev@initech.example was invited to the workspace.
18 minutes ago
Payment receivedSystem
$1,240.00 from Stark Industries.
1 hour ago
Report exportedEsther Howard
Q1 revenue report exported as CSV.
3 hours ago

When to Use

Admin dashboards and internal tools
Multi-section apps with persistent navigation
Content-heavy layouts needing sidebar + main area structure

Components Used

Structure

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <h2>App Name</h2>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Main</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton asChild>
              <a href="/dashboard">Dashboard</a>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton asChild>
              <a href="/settings">Settings</a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>

  <main>
    <Navbar>
      <SidebarTrigger />
      <Separator orientation="vertical" />
      <span>Dashboard</span>
    </Navbar>

    <ScrollArea>
      <Tabs defaultValue="overview">
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="analytics">Analytics</TabsTrigger>
        </TabsList>
        <TabsContent value="overview">
          <div style={{ display: "grid", gap: "var(--spacing-4)", gridTemplateColumns: "repeat(3, 1fr)" }}>
            <Card>
              <CardHeader><CardTitle>Revenue</CardTitle></CardHeader>
              <CardContent>$12,345</CardContent>
            </Card>
            <Card>
              <CardHeader><CardTitle>Users</CardTitle></CardHeader>
              <CardContent>1,234</CardContent>
            </Card>
            <Card>
              <CardHeader><CardTitle>Orders</CardTitle></CardHeader>
              <CardContent>567</CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </ScrollArea>
  </main>
</SidebarProvider>

Notes

SidebarProvider manages the collapsed/expanded state and provides context to child components.
SidebarTrigger in the Navbar toggles the sidebar on mobile and desktop.
Use ScrollArea for the main content area to get consistent styled scrollbars.
Cards in a CSS Grid layout adapt to the content area width.
Tabs organize different dashboard views without page navigation.