Patterns
Code patterns for common UI challenges. Copy and adapt them to your project.
Layout
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.
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.
Form
The canonical form unit: Label stacked above Input with optional helper text below. Every form is composed of this atomic pattern repeated.
Input with a leading search icon and optional trailing clear button or keyboard shortcut badge. Used in toolbars, filter bars, and command palette triggers.
Label and description on the left, Switch on the right. The standard atomic unit for settings panels and preference lists.
Label and description on the left, Select dropdown on the right. Mirrors the toggle-setting-row pattern for enum choices in settings panels.
Data Display
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 label, Progress bar, and trailing value. The standard pattern for skill bars, usage meters, quota displays, and upload progress rows.
A standard table row with truncated primary text, secondary label, trailing Badge, and timestamp. The repeating unit inside data tables, activity feeds, and resource lists.
Interaction
Buttons composed in a UI Lab Group component. Covers toolbar formatting controls, segmented option selectors, and split-button arrangements.
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 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.
Feedback
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.
Centered zero-state with icon, heading, supporting message, and optional action button. Fills a list, table, or panel when there is nothing to show.