Page heading with steps

A page title with a row of tabs beneath it for switching sections. Use it on profile or settings screens that split content across many views.

A centered page title with optional description text, balanced on the screen. Use it on focused app views like settings or a single record detail.

A page title paired with buttons on the right for primary and secondary actions. Use it atop list or detail views where users create or edit.

A page title with a search field and filter controls sitting below it. Use it on data heavy screens so users narrow long tables and lists fast.

A page title sitting above a row of key metrics like totals and trends. Use it on dashboards to frame the view and surface numbers at a glance.

A full-page docs shell with a slim topbar, a column of anchored section cards, and a sticky On this page rail tracking the active section.

IDE style shell with a slim run bar, an open canvas, a docked console panel with log tabs, and a pinned status bar.

Full-page shell for deep detail views with a breadcrumb trail, page title, meta row, and action buttons above two content panels.

A gallery workspace shell with an icon nav rail, a toolbar with search, sort, and view toggle, and a responsive card grid of projects.

A slim top bar and a max-w-3xl reading column on a muted background for docs, articles, or single settings detail pages.

An onboarding home shell with a topbar, welcome header, a setup checklist card with progress and one expanded step, plus a resources rail.

Icon-only nav rail with an expand affordance, badge count on Projects, and an inline tooltip hint on one item.