dashboard shell

the canonical klera 4-area dashboard layout. brand corner top-left, topnav across the top, sidenav running the left column, stage filling the rest.

this design app is rendered with it. what you see around this content — the brand corner, the breadcrumb in the topnav, the section nav on the left — is DashboardShell from @klera/ui.

import from @klera/ui/components/dashboard/DashboardShell

API: <DashboardShell brand topnav sidenav sidenavFooter? stageFooter?>{stage}</DashboardShell>. each slot is a ReactNode. for the brand corner there's a convenience: <ShellBrand suffix="design" /> renders the dot + lowercase "klera" + optional suffix. both footer slots are optional and both are 100px tall (matching the topnav) so when present they form a footer band that mirrors the header band — this design app uses both.

variants

the grid (annotated)

brand290 × 100

topnav1fr × 100

sidenav-content290 × 1fr · scrolls

stage-content1fr × 1fr · scrolls

sidenav-footer290 × 100 · pinned

stage-footer1fr × 100 · scrolls w/ stage

brand 290×100 · topnav (1fr × 100) · sidenav-content (290 × 1fr, scrolls) · sidenav-footer (290 × 100, pinned) · stage-content (1fr × 1fr, scrolls) · stage-footer (1fr × 100, scrolls with stage).

what's in each slot (typical apps)

brandklera mark + wordmark + app suffix ("design", "hq", "patient").

topnavbreadcrumb / search / page actions (left), identity + notifications + logout (right).

sidenavnav links, identity card, contextual side panels, footer chrome.

stagepage content. typically opens with a HeroHeader, then composes cards / rows / tables.

sidenavFooterpinned at the bottom of the sidenav cell. version / license / link to canonical spec. design app puts its DESIGN.md pointer here.

stageFooterlast child of the stage scroll. only visible after scrolling to the bottom; aligns with sidenavFooter when both are visible.

footer-slot behavior

look down. the sidenav footer ("canonical rules in DESIGN.md") is pinned at the bottom-left of this app — it never moves even if you make the sidenav nav very long.

the stage footer ("klera design language · v0.1 · 22 components") sits at the end of every page's scrollable content — scroll any page to the bottom and you'll see it align with the sidenav footer to its left.

sidenavFooter pins at the bottom of the sidenav cell with content scrolling above it. stageFooter sits at the natural end of the stage scroll. both are 100px tall (matching the topnav) so they form a coherent footer band when visible together.