Component gallery
Living reference for @hq/ui — foundations, primitives, shell layout, data surfaces, agent UX, and Workshop page patterns. Use the sidebar to browse.
Type ramp, display/body/mono roles, density-aware sizes.
Themesdata-theme matrix — light, dark, and brand variants.
DensityDensityProvider modes for power-user vs comfortable layouts.
Form tokensShared control chrome — borders, surfaces, focus rings.
Layout contractPageLayout, ToolbarRow, ListPageFooter — Workshop page grammar.
Button, Badge, StatusDot — accent discipline and loading states.
FormsInput, Select, Textarea, FormField, SubmitButton patterns.
Form controlsCheckbox, Switch, RadioGroup for boolean and single-choice fields.
Data displayTable, Card, Tabs — structured content without domain opinion.
FeedbackAlert, Skeleton, EmptyState, ErrorState, Toast, TopProgress.
OverlaysDialog, Sheet, Popover — layered surfaces and focus traps.
CommandCommand palette primitives — ⌘K dialog shell and keyboard nav.
Alert dialogDestructive confirms — irreversible actions only.
ChromeScrollArea, Avatar, Breadcrumb, Calendar — shell-adjacent primitives.
Power densityContextMenu, HoverCard, Accordion, ToggleGroup, Kbd, Progress.
Agent UX compounds map — transcript through inspector.
TranscriptStreaming messages, tool steps, turn separators.
ComposerComposerBar, attachments, context chips.
Chain of thoughtExpandable reasoning steps and search results.
ConfirmationsTool approval requests — accept/reject chrome.
ArtifactsGenerated output panels with actions.
Thread list rowUnified row for agent rail and sidebar threads.
InspectorTimeline, artifacts, and approvals tabs.
Message actionsCopy, retry, branch — per-message action bar.
Composer depthAttachment strip and composer expansion.
UI Lab → http://localhost:3004 (this gallery)
Workshop → http://localhost:3002 (live product)