A flex-wrapped row of Badge components for tags, categories, skills, and status collections. Controls overflow gracefully and prevents arbitrary color usage for status mapping.

A resource-row pattern built from List slots, with optional selection and disclosure behavior. Suitable for compact data lists and activity feeds.

A label, Progress bar, and trailing value. The standard pattern for skill bars, usage meters, quota displays, and upload progress rows.

An avatar with a primary identity label and supporting account or workspace context.

Centered zero-state with icon, heading, supporting message, and optional action button. Fills a list, table, or panel when there is nothing to show.

A compact yes/no helpfulness prompt that acknowledges the reader once they respond.

An inline notification banner with icon, title, and message. Lives inside content areas — not a toast, not a modal. Used for persistent contextual warnings, info banners, and error states.

The canonical form unit: Label stacked above Input with optional helper text below. Every form is composed of this atomic pattern repeated.

A search field composed through Input's icon, action, hint, and state APIs. Supports a native search role, a clear action, ghost treatment, and keyboard shortcut hints without overlay CSS.

Label and description on the left, Select dropdown on the right. Mirrors the toggle-setting-row pattern for enum choices in settings panels.

Label and description on the left, Switch on the right. The standard atomic unit for settings panels and preference lists.

An identity trigger opening a standard profile, settings, and sign-out action menu.

Buttons composed in a UI Lab Group component. Covers toolbar formatting controls, segmented option selectors, and split-button arrangements.

A searchable, keyboard-driven command palette with grouped results, ranked filtering, and a hint footer.

Previous and next link cards for sequential navigation between articles, docs, or wizard steps.

A clipboard action that swaps its icon and label to confirm the copy, then quietly resets.

A search Input paired with Select facets for status and sort, plus a reset Button that appears only while filters are active. Composes UI Lab's form controls into a data-filtering toolbar without custom layout CSS.

A compact row of small icon-only buttons for per-item actions (edit, copy, delete). Appears in table rows, card footers, list item hover states, and toolbars.

A minimal pop-over Menu: a Button trigger and a handful of plain Menu.Item rows. The baseline shape every richer menu builds on.

A selectable navigation row combining an icon, label, and optional count badge.

A title with optional description on the left, and a right-aligned action button. The standard header pattern inside tabbed panels, Card sections, and settings group blocks.

An eyebrow category, headline, lead paragraph, and meta row that open a documentation or blog article.

A compact product mark paired with its wordmark for headers, sidebars, and footers.

Icon or image anchored left with stacked title and description on the right. The universal building block for list items, feature descriptions, notifications, and sidebars.

A responsive page heading with supporting description and a right-aligned action group.

A meaningful icon-and-text badge that leads a section heading, replacing the decorative wide-tracked eyebrow with a label that carries category or status.

Primary content left, secondary content or actions right. The universal shell for list rows, settings entries, and table rows where metadata or controls live opposite the label.

A large metric value with label and optional trend indicator. The repeating unit inside dashboard summary cards and analytics panels.