Components

Dashboard shell

The application frame for a dashboard — a fixed left sidebar (brand + nav + footer) and a sticky topbar (title + actions) wrapping a scrolling content area. It turns a grid of Panels and StatCards into a product, not a page.

Install

npx shadcn@latest add @alix/dashboardShell

Preview

Engagement portfolio

Usage

<DashboardShell
  brand={<Logo className="h-5 w-auto text-primary" />}
  title="Engagement portfolio"
  subtitle="FY25 · all practices"
  actions={<Button size="sm" variant="outline">Last 12 months</Button>}
  nav={<>
    <DashboardNavSection>Overview</DashboardNavSection>
    <DashboardNavItem icon={<LayoutGrid />} active href="#">Portfolio</DashboardNavItem>
    <DashboardNavItem icon={<Users />} href="#">Staffing</DashboardNavItem>
  </>}
>
  <Grid columns={4}>{…stat cards…}</Grid>
</DashboardShell>

Examples

Navigation and active state

Use nav sections and active items when several analytical views share one dashboard frame.

Engagement portfolio

FY25 · all practices

Portfolio health

Priority engagements

On-track workstreams

Sponsor actions

Open this week

Actions closed

Steering packs

Ready for review

Pack completion

<DashboardShell
  className="h-[420px] min-h-0 overflow-hidden"
  brand={<Logo className="h-5 w-auto text-[#1b3644]" />}
  title="Engagement portfolio"
  subtitle="FY25 · all practices"
  nav={
    <>
      <DashboardNavSection>Portfolio</DashboardNavSection>
      <DashboardNavItem icon={<LayoutGrid />} active href="#">Overview</DashboardNavItem>
      <DashboardNavItem icon={<BriefcaseBusiness />} href="#">Engagements</DashboardNavItem>
      <DashboardNavItem icon={<Users />} href="#">People</DashboardNavItem>
    </>
  }
>
  <Grid columns={3} gap="sm">
    <Panel title="Portfolio health" description="Priority engagements">
      <Progress value={72} label="On-track workstreams" showValue />
    </Panel>
    <Panel title="Sponsor actions" description="Open this week">
      <Progress value={44} label="Actions closed" showValue />
    </Panel>
    <Panel title="Steering packs" description="Ready for review">
      <Progress value={86} label="Pack completion" showValue />
    </Panel>
  </Grid>
</DashboardShell>

Actions and account footer

Topbar actions and the sidebar footer keep controls and account context in predictable slots.

Delivery control

Updated 08:00

Steering readiness

Critical workstreams

On track

Board narrative

Sponsor decisions

Client data room

<DashboardShell
  className="h-[440px] min-h-0 overflow-hidden"
  brand={<Logo className="h-5 w-auto text-[#1b3644]" />}
  title="Delivery control"
  subtitle="Updated 08:00"
  actions={
    <>
      <Button size="sm" variant="outline" leftIcon={<CalendarDays />}>Last 12 months</Button>
      <DefaultAvatar size="sm" name="Amelia Ward" />
    </>
  }
  nav={
    <>
      <DashboardNavSection>Control room</DashboardNavSection>
      <DashboardNavItem icon={<ShieldCheck />} active href="#">Readiness</DashboardNavItem>
      <DashboardNavItem icon={<FileText />} href="#">Briefs</DashboardNavItem>
      <DashboardNavItem icon={<Settings />} href="#">Settings</DashboardNavItem>
    </>
  }
  sidebarFooter={
    <div className="flex items-center gap-2">
      <DefaultAvatar size="sm" name="Amelia Ward" />
      <div className="min-w-0">
        <p className="truncate text-xs font-medium text-sidebar-foreground">Amelia Ward</p>
        <p className="truncate text-[11px] text-muted-foreground">Managing director</p>
      </div>
    </div>
  }
>
  <Panel
    title="Steering readiness"
    description="Critical workstreams"
    actions={<Badge variant="success" dot>On track</Badge>}
  >
    <div className="flex flex-col gap-4">
      <Progress value={92} label="Board narrative" showValue />
      <Progress value={76} label="Sponsor decisions" showValue />
      <Progress value={58} label="Client data room" showValue color="var(--warning)" />
    </div>
  </Panel>
</DashboardShell>

Scorecard workspace

Grid, StatCard, Sparkline, Delta, Panel, and Progress turn the shell into a dense operating dashboard.

Value creation

Meridian Industrials

Run-rate value$42.8M

+6.4%vs. plan

Open risks14

-3this week

Sponsor decisions8

+2pending

Delivery confidence86%

+4ptsurvey

Workstream readiness

Latest programme checkpoint

Two watch items

Cost actions

Working capital

Procurement

<DashboardShell
  className="h-[500px] min-h-0 overflow-hidden"
  brand={<Logo className="h-5 w-auto text-[#1b3644]" />}
  title="Value creation"
  subtitle="Meridian Industrials"
  actions={<Button size="sm" variant="outline">Export report</Button>}
  nav={
    <>
      <DashboardNavSection>Value office</DashboardNavSection>
      <DashboardNavItem icon={<LayoutGrid />} active href="#">Scorecard</DashboardNavItem>
      <DashboardNavItem icon={<BriefcaseBusiness />} href="#">Workstreams</DashboardNavItem>
      <DashboardNavItem icon={<Users />} href="#">Sponsors</DashboardNavItem>
    </>
  }
>
  <Grid columns={4} gap="sm">
    <StatCard
      size="sm"
      label="Run-rate value"
      value="$42.8M"
      delta={<Delta value="+6.4%" direction="up" intent="positive" size="sm" />}
      caption="vs. plan"
      sparkline={<Sparkline data={[31, 34, 35, 38, 40, 42.8]} />}
    />
    <StatCard
      size="sm"
      label="Open risks"
      value="14"
      delta={<Delta value="-3" direction="down" intent="positive" size="sm" />}
      caption="this week"
      sparkline={<Sparkline data={[22, 20, 19, 17, 15, 14]} />}
    />
    <StatCard
      size="sm"
      label="Sponsor decisions"
      value="8"
      delta={<Delta value="+2" direction="up" intent="negative" size="sm" />}
      caption="pending"
      sparkline={<Sparkline data={[4, 5, 5, 7, 6, 8]} color="var(--warning)" />}
    />
    <StatCard
      size="sm"
      label="Delivery confidence"
      value="86%"
      delta={<Delta value="+4pt" direction="up" intent="positive" size="sm" />}
      caption="survey"
      sparkline={<Sparkline data={[72, 75, 79, 80, 84, 86]} />}
    />
    <Panel
      className="md:col-span-2 lg:col-span-4"
      title="Workstream readiness"
      description="Latest programme checkpoint"
      actions={<Badge variant="warning" dot>Two watch items</Badge>}
    >
      <Grid columns={3} gap="sm">
        <Progress value={91} label="Cost actions" showValue />
        <Progress value={74} label="Working capital" showValue />
        <Progress value={58} label="Procurement" showValue color="var(--warning)" />
      </Grid>
    </Panel>
  </Grid>
</DashboardShell>

When to use it

Use it for

Dashboard products with multiple analytical views that need persistent navigation and a shared topbar.
Internal operating tools where Panels, StatCards, tables, and controls should sit on one application ground.
Role-aware dashboards that need real links, controls, and account context in shell slots.

Reach for something else

A single chart, table, or KPI group inside an existing page — use Panel or StatCard instead.
Editorial, marketing, or CMS page sections — use SectionWrapper and section blocks instead.
Short navigation trails inside content pages — use Breadcrumbs instead.
Transient filters or contextual commands — use Popover or Menu instead.

Props

Prop	Type	Default	Description
brand	ReactNode	—	Sidebar-top slot — a Logo, wordmark, or product name. Moves into the topbar below lg.
nav	ReactNode	—	Sidebar navigation — compose DashboardNavItems and DashboardNavSection labels. A slot, not a config array, so each item can be a real framework link.
title / subtitle	ReactNode	—	Topbar heading and a quiet sub-line (period, scope, last-updated).
actions	ReactNode	—	Topbar-right slot — date-range control, filters, search, an avatar.
sidebarFooter	ReactNode	—	Bottom-of-sidebar slot — an account row, environment switcher, or help link.
DashboardNavItem / DashboardNavSection	components	—	Shipped alongside the shell. NavItem is an icon + label link with an active state; NavSection is a small group label between sets of items.