Demo

Dashboard layout with fixed sidebar, top bar, and scrollable content area

Current Configuration
Props used for this example
<DashboardShell
  sidebar={<Sidebar />}
  topbar={<Topbar />}
  scrollArea="content"
  mobileSidebarOpen={mobileSidebarOpen}
  onMobileSidebarChange={setMobileSidebarOpen}
>
  {children}
</DashboardShell>
Available Props
Customize the DashboardShell behavior
sidebarReact.ReactNoderequired

Sidebar content (navigation)

topbarReact.ReactNode

Top bar content (optional)

scrollArea"content" | "page"default: "content"

Scroll behavior (content area only or entire page)

sidebarWidthstringdefault: "16rem"

Sidebar width (CSS value)

insetbooleandefault: true

Enable inset padding for content

mobileSidebarOpenboolean

Mobile sidebar state (controlled)

onMobileSidebarChange(open: boolean) => void

Callback when mobile sidebar state changes

Total Users
1234

+12% from last month

Revenue
1334

+12% from last month

Active Sessions
1434

+12% from last month

Conversion Rate
1534

+12% from last month

Content Section 1
This is a sample content section to demonstrate scrolling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. The content area scrolls independently while the sidebar and topbar remain fixed.

Content Section 2
This is a sample content section to demonstrate scrolling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. The content area scrolls independently while the sidebar and topbar remain fixed.

Content Section 3
This is a sample content section to demonstrate scrolling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. The content area scrolls independently while the sidebar and topbar remain fixed.