Screen patterns
Component-level API reference with live demos for each screen pattern export. For copy-paste full-page files, see Recipes — snippets only, no duplicate demos here.
PageHeader
/screens/page-header/A consistent page title block with eyebrow, description, metadata, and action slots.
PageHeaderProps| Prop | Type |
|---|---|
eyebrow? | ReactNode |
title | ReactNode |
description? | ReactNode |
actions? | ReactNode |
meta? | ReactNode |
align? | PageHeaderAlign |
size? | PageHeaderSize |
Hosts
Monitor machines, containers, and incidents from one view.
DashboardShell
/screens/dashboard-shell/Docs-aligned app shell: sidebar brand lockup, structured nav, context top bar, and main content. Use variant="topnav" for the legacy horizontal TopNav layout.
DashboardShellProps| Prop | Type |
|---|---|
projectName | ReactNode |
projectSubtitle? | ReactNode |
homeHref? | string |
variant? | DashboardShellVariant |
sidebarGroups? | SidebarNavGroup[] |
sidebarItems? | SidebarNavItem[] |
breadcrumb? | ReactNode |
pageTitle? | ReactNode |
navItems? | TopNavItem[] |
topActions? | ReactNode |
sidebar? | ReactNode |
header? | ReactNode |
density? | MainContentDensity |
contentWidth? | 'default' | 'wide' | 'full' |
SettingsLayout + FormPanel
/screens/settings-form/Settings pages get section navigation, page header, form surfaces, and footer actions. Pass onNavSelect for client-side section switching.
SettingsLayoutProps| Prop | Type |
|---|---|
title | ReactNode |
description? | ReactNode |
actions? | ReactNode |
navItems? | SettingsNavItem[] |
activeId? | string |
onNavSelect? | (id: string) => void |
Account settings
Manage profile and security preferences.
Profile
Shown in activity logs.
Ask before risky actions.
ResourceList + DetailPage
/screens/resource-detail/List and detail pages share page-header structure, actions, filters, empty states, and optional aside columns.
ResourceListProps| Prop | Type |
|---|---|
title | ReactNode |
description? | ReactNode |
actions? | ReactNode |
filters? | ReactNode |
count? | ReactNode |
emptyState? | ReactNode |
Hosts
Machines connected to Tollerud.
emma.tollerud.no
Primary production host.
EmptyPage
/screens/empty-page/A full-page empty state composition for first-run, no-results, and error pages.
EmptyPageProps| Prop | Type |
|---|---|
icon? | EmptyStateIconName | ReactNode |
title | ReactNode |
description? | ReactNode |
action? | ReactNode |
secondaryAction? | ReactNode |
background? | PageShellBackground |
accent? | boolean |
Connect your first machine and Tia will start watching it.
FeatureSection + StatsSection
/screens/featuresection-statssection/Higher-level sections for marketing and dashboard overview pages.
FeatureSectionProps| Prop | Type |
|---|---|
eyebrow? | ReactNode |
title | ReactNode |
description? | ReactNode |
actions? | ReactNode |
features | FeatureSectionItem[] |
columns? | CardGridColumns |
Operate with guardrails
Common sections without raw utility grids.
Roll out compose changes with health checks.
Review risky operations before they run.
Surface useful state without alert fatigue.
Fleet health
Hosts online
3
Open alerts
1
Deploys today
12