Dashboard Shell

A dashboard layout with Sidebar, app header and dedicated content scroll region.

Application shell

import {
  DashboardShell,
  DashboardShellHeader,
  DashboardShellInset,
  DashboardShellMain,
  DashboardShellSidebar,
  DashboardShellSidebarHeader,
  DashboardShellSidebarTrigger,
} from "@/components/patterns/dashboard-shell";
import {
  SidebarContent,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import { HomeIcon } from "lucide-react";

export function Example() {
  return (
    <DashboardShell>
      <DashboardShellSidebar>
        <DashboardShellSidebarHeader>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton size="lg" tooltip="Siteplane">
                <HomeIcon />
                <span>Siteplane</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </DashboardShellSidebarHeader>
        <SidebarContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive tooltip="Overview">
                <HomeIcon />
                <span>Overview</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarContent>
      </DashboardShellSidebar>
      <DashboardShellInset>
        <DashboardShellHeader>
          <DashboardShellSidebarTrigger />
          <span>Projects</span>
        </DashboardShellHeader>
        <DashboardShellMain>{/* App content */}</DashboardShellMain>
      </DashboardShellInset>
    </DashboardShell>
  );
}

Installation

With the Siteplane registry alias configured, add the component and import the installed source from your app.

CLI

pnpm dlx shadcn@4.16.1 add @siteplane/dashboard-shell

Import

import {
  DashboardShell,
  DashboardShellHeader,
  DashboardShellInset,
  DashboardShellMain,
  DashboardShellSidebar,
  DashboardShellSidebarHeader,
  DashboardShellSidebarTrigger,
} from "@/components/patterns/dashboard-shell";

Need the machine-readable source metadata? View registry JSON.

Usage

DashboardShell binds the Sidebar and app header into one layout contract. Fill the slots with product-specific navigation and content.

import {
  DashboardShell,
  DashboardShellHeader,
  DashboardShellInset,
  DashboardShellMain,
  DashboardShellSidebar,
  DashboardShellSidebarHeader,
  DashboardShellSidebarTrigger,
} from "@/components/patterns/dashboard-shell";
import {
  SidebarContent,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import { HomeIcon } from "lucide-react";

export function Example() {
  return (
    <DashboardShell>
      <DashboardShellSidebar>
        <DashboardShellSidebarHeader>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton size="lg" tooltip="Siteplane">
                <HomeIcon />
                <span>Siteplane</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </DashboardShellSidebarHeader>
        <SidebarContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive tooltip="Overview">
                <HomeIcon />
                <span>Overview</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarContent>
      </DashboardShellSidebar>
      <DashboardShellInset>
        <DashboardShellHeader>
          <DashboardShellSidebarTrigger />
          <span>Projects</span>
        </DashboardShellHeader>
        <DashboardShellMain>{/* App content */}</DashboardShellMain>
      </DashboardShellInset>
    </DashboardShell>
  );
}

Purpose

Dashboard Shell is a registry:block for product surfaces that combine the native Siteplane Sidebar with an app header and a dedicated content scroll region.

API Reference

DashboardShell renders the native SidebarProvider and defaults --dashboard-shell-header-height to 4rem.
DashboardShellSidebar renders the native Sidebar and defaults to collapsible="icon".
DashboardShellSidebarHeader and DashboardShellHeader share the same minimum-height variable so their top edge and height remain aligned.
The visible header divider belongs to DashboardShellHeader. Do not add a second divider directly below the sidebar header.
DashboardShellHeader accepts divider={false} when the app header should not separate from the main region.
DashboardShellInset uses the native SidebarInset and contains horizontal overflow. DashboardShellMain owns content scrolling.
Render SidebarMenuButton labels in child elements such as <span> and provide a tooltip in icon-collapse mode.

Motion

Sidebar collapse, mobile behavior and nested navigation motion remain native to the Sidebar primitive.
The shell adds no route or content entrance animation. Reduced-motion behavior comes from the primitives it composes.

Accessibility

Use the native Sidebar trigger so its keyboard shortcut, focus behavior and screen-reader label remain intact.
Keep the header and main content as separate regions. The header stays fixed while the main region owns content scrolling.
Preserve a readable label and native tooltip contract for every icon-only item in collapsed navigation.

Implementation Guidance

Start with Dashboard Shell for product layouts that require both Sidebar and an aligned app header.
Do not rebuild Sidebar internals or create separate hardcoded header heights in the consumer.
Reusable shell changes belong in this pattern source; product-specific navigation and account content stay outside the pattern.

Registry

Source Contract

Registry item: dashboard-shell

Files

src/components/patterns/dashboard-shell.tsx to components/patterns/dashboard-shell.tsx

Registry dependencies: @siteplane/base, @siteplane/sidebar