SelectRx
Pick one value from a short, fixed set. The canonical lookup molecule on an RSC page — Radix self-manages open state, uncontrolled via defaultValue.
Uncontrolled select
Composed of
Tier 2 — Molecules
Molecules showcase
Canonical molecules from @stackmates/ui-interactive/molecules rendered in the paper design language. A molecule is two-to-five atoms composed for one job — every card names the atoms it is built from in a Composed of block. This tier teaches how components combine, not just what exists.
Self-managed molecules only — each renders meaningfully with uncontrolled or trigger-driven state. Combobox and Toast/ToasterProvider are deferred: their contracts need function props or imperative handlers, which cannot cross the RSC→client boundary.
§01
Selection & lookup
Pick one value from a set. SelectRx is the canonical lookup molecule — Radix self-manages open state. Combobox is deferred: its headless contract needs a displayValue function and render-prop children, which cannot cross the RSC boundary.
Command
A searchable command palette — fuzzy-filtered groups of actions with keyboard shortcuts.
Navigation items are real links and route on select. Action items are disabled — this showcase wires no domain behaviour, so they are shown inert rather than as dead clickable rows.
§01
Disclosure & overlays
Reveal content on demand — inline expansion or a floating surface anchored to a trigger.
Accordion
Vertically stacked sections that expand one panel at a time. Self-manages open state.
Composed of
AccordionTriggerSeparator
DialogRx
A modal overlay that interrupts the flow for a focused task or confirmation. Trigger-driven — opens on click.
SheetRx
A panel that slides in from an edge for secondary content — filters, detail, settings. Trigger-driven.
Popover
A small floating surface anchored to a trigger — for inline detail or a compact form. Trigger-driven.
§01
Navigation
Help the user understand where they are and move between views.
Breadcrumb
A trail showing the current location in a hierarchy, with links back to each ancestor.
Composed of
BreadcrumbLinkSeparator
TabsRx
Switch between peer views in the same space. Uncontrolled via defaultValue.
Tabs let peer views share one region without a route change.
DropdownMenu
A menu of actions anchored to a trigger — labelled groups, separators, and keyboard shortcuts. Trigger-driven.
§01
Feedback & status
Surface state to the user — a message, a measure of progress.
AlertNotice
An inline message banner with a title and description across five semantic variants.
Heads up
Pipeline data refreshes every fifteen minutes.
Export complete
Your CSV is ready to download.
Review needed
Three deals are missing a close date.
Sync failed
The last import could not be completed.
Composed of
Progress
A horizontal bar measuring completion of a known-length task.
Composed of
§01
Input controls
Server-safe input controls only. Controls that need local client state move to a client-island QA page.
ToggleGroupRx
A segmented control of toggle buttons — single or multiple selection. Uncontrolled via defaultValue.
Single select
Multiple select
Composed of
Toggle