Patterns
50 multi-component recipes, straight from the metadata. Each names the components it composes, when to reach for it, and the accessibility contract the composition honors — the same recipes agents match via garn_match_recipe.
Faceted Filter
A faceted multi-select filter — a dashed Button trigger opens a Popover of searchable, checkable options; the trigger shows the chosen values as Badges, or past a few, a Counter (the 'Status ⌄ 3 selected' pattern). A Clear item resets. Selection state is the consumer's (a Set of values, usually driving a table query).
When: filtering a data table or list by one column's values — multi-select with search
Data Table
A sortable, selectable, paged data table with bulk actions.
When: showing a large, interactive dataset
Editor Formatting Bar
A dense formatting bar that stays one row at any width: toggle-groups for text style, action buttons, and measured overflow into a more-menu.
When: a prioritised action set must stay a single row at any width
Anchored Form
A small form (e.g. quick settings) anchored to a button.
When: a quick, non-blocking edit anchored to a control
Date Picker
A date field: a labeled trigger opening a calendar in a popover.
When: selecting a date in a form without leaving the page
Gallery Lightbox
Activate a tile to open a full-screen viewer with prev/next paging — a Dialog wrapping a Carousel.
When: opening a full-screen image viewer when a tile is activated
Kanban Board
A status board — cards reorder within a column and move between columns (a drag writes back the status field); a portal overlay follows the pointer.
When: moving cards between ordered status/stage columns where the move changes data
Master Detail
The three-pane master–detail: a single-select List (or Table) in Main drives the detail Aside. Selecting a row peeks the Aside open (controlled `asideOpen`) and swaps its contents; an Empty fills the Aside until a row is chosen; at the compact tier the Aside floats as an overlay Sheet — no consumer media queries. The reusable capture of the email / CRM-record / settings / file-browser layout.
When: selecting a row or item in a list should reveal its detail in a side pane within the same view, collapsing to a single column on mobile (email client, CRM record, settings, file browser)
Modal Form
A short form inside a dialog, with footer actions.
When: a focused create/edit task shouldn't navigate away
Selection Bubble
A floating formatting bar that tracks a text selection — anchor ToolbarFloating to a ref exposing getBoundingClientRect (a DOM node or a virtual selection rect).
When: a formatting bar should appear over and follow a text selection
Split Button
A primary action attached to a menu of related ones. Use the SplitButton part — it shares the axes and owns the seam; hand-assembling a ButtonGroup leaves every consumer re-solving seam, labels, and disabled.
When: a primary action has a small set of related variants
Toolbar Split Button
A primary toolbar action attached to a menu of related ones, as one roving stop. Use ToolbarSplitButton — the standalone SplitButton is not a roving item.
When: a primary toolbar action has a small set of related variants
Validated Field
A labeled, described, validated field bound to React Hook Form.
When: a form needs validation + accessible error messaging
Avatar Profile Preview
An avatar that reveals a profile card on hover/focus.
When: previewing a user's profile from their avatar
Backlog Drag In
Drag an unscheduled item from an outside list onto the grid to schedule it (onExternalDrop gives the dropped start/end).
When: unscheduled tasks in a side list should be draggable onto a time grid to schedule them
Book A Slot
A booking / availability grid: drag empty time to propose a slot, then confirm it in a Dialog before committing to your events.
When: a user picks a time range on a calendar to create an appointment/booking and confirms details before it is saved
Card With Actions
A titled card whose footer holds the primary and secondary actions.
When: a self-contained unit needs its own actions
Column Visibility
A dropdown-menu of checkbox items toggling which columns render — the consumer conditionally renders the matching TableHead/TableCell (garn owns no `columns` config).
When: a wide table needs user-toggleable columns
Command Action Panel
Per-row secondary actions — each item declares CommandItemActions; → / ⌘. opens a focus-scoped Popover panel of that row's actions (each with its own shortcut), and a bound shortcut fires the highlighted row's action from the main list.
When: a palette row needs more than one action (open · edit · duplicate · delete)
Command Palette
A ⌘K command palette wired into the shell.
When: the app has more than a handful of destinations/actions
Data Table Filter Bar
A filter bar wired to a data table — one `useFilters` engine drives both the chips and the rows.
When: letting users filter the rows of a table/list by any column
Destructive Confirm
An irreversible action gated behind an explicit confirmation.
When: irreversible || bulk-delete
Detail Panel
An entity detail panel — a carded DataList with aligned values and a divider.
When: showing one entity's fields as label/value pairs
Editable Detail Panel
An editable detail panel — a DataList whose values are InlineEdits, so a read-only block becomes editable in place without losing its <dl> semantics.
When: showing one entity's fields as editable label/value pairs
Event Detail
Open an event's detail/edit surface on click — a Popover peek or a Dialog form — driven by onEventClick + the selectedId.
When: clicking an event should reveal or edit its details
Faceted Value Editor
The count-annotated multi-select value editor — `label (count)`, selected-first, recomputed against the current set (disjunctive two-query so OR-siblings don't zero out). The faceted-filter recipe, folded in.
When: picking several enum values with live counts that prevent zero-result dead-ends
Form Wizard
A multi-step form: position-matched StepContent panels, Prev/Next triggers, and an async forward-gate that validates each step.
When: a user must complete an ordered set of steps, validating before advancing
Formatting Toolbar
A multi-select toolbar of formatting marks (bold / italic / underline).
When: toggling several independent options on a selection
Icon Button Tooltip
A tooltip clarifying an icon-only button (which still carries its own aria-label).
When: an icon-only control needs a visible hint
Kpi Tile
A carded KPI tile — Card surface around a terse Stat with an icon and a sentiment-aware delta.
When: showing a single headline metric on a dashboard
Labeled Checkbox
A checkbox with a clickable label.
When: offering a single boolean opt-in (e.g. accept terms)
Labeled Combobox
A labelled searchable single-select field.
When: choosing one option from a long, searchable list in a form
Labeled Date Field
A labeled date field — the canonical form row.
When: collecting a date in a form
Labeled Field
A labeled text field — the canonical form row.
When: collecting a single line of text in a form
Labeled Multi Select
A labelled multi-value picker over a searchable option list.
When: assembling several values from a long, searchable list in a form
Labeled Radio Group
A labeled set of mutually-exclusive options.
When: choosing one of a few visible options
Labeled Select
A labeled single-select field.
When: choosing one option from a list in a form
Labeled Switch
A switch with an adjacent label describing the setting.
When: exposing an instant-effect setting
Labeled Textarea
A labeled multi-line field.
When: collecting multi-line text in a form
Mobile Actions
A swipe-dismissable bottom sheet of contextual actions on touch.
When: a touch user needs a quick, dismissable surface
No Results
A filtered list returned nothing; offer a way to clear filters.
When: a filtered or searched collection returns zero items
Peek
Open a list row's detail in a sheet without leaving the list (a quicklook).
When: a row needs an inline detail preview
Radio Option Cards
Pick-one option cards — each RadioGroupItem in its own card Field inside one RadioGroup.
When: choosing one option from a small set with descriptions
Reorderable Gallery
A drag-to-reorder moodboard — tiles reorder by pointer, keyboard, or touch via the sortable primitive.
When: letting users curate / reorder tiles by drag
Roadmap Editor
A grouped product roadmap with milestones, progress and a full drag editor, plus a scale/zoom toolbar built from useGantt.
When: planning and adjusting phased work on a horizontal timeline where users drag bars to reschedule/resize
Row Actions
An overflow (kebab) menu of actions for a list/table row.
When: a row/card needs secondary actions without crowding the layout
Switch Field
A switch inside a Field — a settings row or option card with a label + description, wired for a11y.
When: a toggle needs a description or a card surface
Switch Settings Row
A switch settings row — label + description on the left, switch on the right.
When: a toggle needs a description
Wbs Rail
A work-breakdown rail — nested subtasks, extra columns (owner, %), a resizable divider, inline rename and drag-to-reorder — beside the timeline.
When: the left rail should read as a mini spreadsheet / WBS with editable, reorderable rows
Workspace Switcher
A workspace switcher on the sidebar brand row.
When: the user belongs to more than one workspace/team