Lighter pointers rather than full recipes — these three compose directly, no library decision behind them, just "use these ui-kit patterns instead of hand-rolling the layout."

PageHeader

The title block for a detail or admin page — an optional eyebrow, the title, a description, an optional backHref wayfinding link, and a right-aligned actions slot. Use it instead of a hand-styled <h1> + button row.

FilterBar

A horizontal bar that hosts a row of filter controls (labelled Select/MultiSelect fields as children) plus a trailing actions area and a built-in onClear. Needing a filter panel that can collapse/expand instead of always being visible? See the related CollapsibleFilterPanel.

SaveBar

Pins to the bottom of a form or configuration surface (sticky by default) with a message on the left (e.g. "2 unsaved changes") and commit actions — Cancel/Undo/Save — on the right. This demo sets sticky={false} since it's rendered inside a small preview frame, not a real page.

Do / Don't

• Do reach for these three before hand-assembling the equivalent layout with raw Cards and flexbox — that's exactly the drift this catalog exists to prevent.
• Don't build a second "are there unsaved changes" bar per app — SaveBar is the one true pattern for it.