Find the right primitive.

Triggers primary, secondary, destructive, and quiet actions.

Groups related button actions.

Copies arbitrary text or the content of another element with accessible success and failure feedback.

Coordinates controlled or persistent locale selection and document language as a compact accessible control.

Switches between the configured light and dark color themes.

Keeps the pressed state of a tool action such as pin, mute, or bold.

Coordinates related pressed-state controls with shared keyboard navigation.

Reveals any inline SVG logo with accessible, reduced-motion-aware animation.

Presents a portrait with optional motion and floating profile facts.

Adds a portable ambient pattern behind meaningful content.

Frames product-owned artwork with portable glow, grid, or orbit treatments.

Adds optional token-based backgrounds, highlights, and drawing effects.

Lists upcoming appointments, tasks, or dated events.

Animates a formatted metric while keeping one stable accessible value.

Displays a file attachment with metadata.

Groups file rows with independent download, replacement and removal actions.

Previews browser-owned images with localized loading, error and unsupported-file fallbacks.

Represents a person, team, or entity.

Labels status, type, plan, or count information.

Compares categorical or discrete-period values with grouped and stacked bars.

Shows precomputed quartiles, whiskers and outliers.

Frames chat messages and short comments.

Compares a measured value with a target and optional labeled performance ranges.

Shows daily patterns with explicit missing observations.

Compares explicit current and proposed values before a user confirms a change.

Frames metric headers, SVG plots, and captions for lightweight data visualization.

Animates stable SVG marks without delaying accessible chart values.

Renders inline code and framed code blocks with theme-aware palettes.

Groups related code examples into accessible, persistent tabs.

Combines bars, lines, and areas on one meaningful shared value domain.

Presents responsive editorial artwork with optional hover lift and gradient treatment.

Styles dense tabular data and records.

Composes rich description detail content.

Composes rich description item content.

Presents a set of labeled facts as an aligned key–value list.

Composes rich description term content.

Presents HTML, images, and live iframe demos in responsive device silhouettes.

Compare two measurements per category with connected dots.

Introduces or categorizes the heading that immediately follows it.

Composes dashboard filtering, active criteria, and result announcements without owning queries.

Shows a high-emphasis notification count over an icon, avatar, or control.

Pairs human-readable date text with a machine-readable datetime value.

Compares ordered conversion stages without inferred percentages.

Encodes a labelled matrix with a sequential visualization scale.

Shows a numeric distribution using explicit bins and an accessible frequency table.

Renders Lucide icons with Lumen sizing and accessibility defaults.

Styles accessible images while preserving Astro, Next.js, and browser-native optimization.

Compares aligned before and after media with an accessible reveal control.

Aligns primary content, supporting metadata, and optional actions in a compact row.

Displays keyboard shortcuts.

Shows ordered trends, multiple series, missing-value gaps, areas, markers, and reference values.

Rank categories using a dot and a zero-based stem.

Highlights status, position, or annotations.

Groups ordered media thumbnails and a localized selection summary.

Selects application-owned media with a visible label, pressed state and optional order.

Inspects application-owned media with bounded zoom, pan, fit and keyboard alternatives.

Structures a chat, activity, or system message.

Displays a scalar value within a known range.

Keeps supplementary information visually attached to nearby content.

Shows part-to-whole relationships as an accessible donut or pie chart.

Pairs a rounded text label with an optional trailing count.

Renders a scannable QR code for a URL or other short value.

Shows ordered low-to-high intervals as a tokenized range band.

Collects or presents a bounded star-based score.

Shows numeric relationships and bubble magnitude across one or more series.

Displays calendar events across day, week, or resource grids.

Links to a safely validated source with a meaningful label.

Shows a compact, text-labelled trend beside an existing metric.

Pairs one prominent metric with a concise descriptive label.

Adds supporting context to a composed statistic.

Provides an icon region for a composed statistic.

Labels a composed statistic.

Communicates a metric delta with a semantic tone.

Displays the prominent value in a composed statistic.

Separates streamed content from accessible state announcements.

Styles semantic tables for records and comparisons.

Builds scoped token previews with hue, scheme, manual color, and export controls.

Orders milestones or activity events along a chronological track.

Displays hierarchical navigation or object collections.

Displays hierarchical rows with grid-like columns.

Frames long scrollable collections for virtualization adapters.

Explains signed changes and explicit total checkpoints.

Highlights countries and labeled locations on a reusable animated dotted or solid world map.

Surfaces contextual status messages.

Presents an application-owned proposal and explicit decision controls.

Emphasizes an important explanation, caveat, or instruction within page content.

Explains an empty state and next action.

Explains why primary content is unavailable and provides an application-owned recovery path.

Shows a built-in semantic scene for empty, success, error, or offline states.

Shows completion, loading progress, or quota usage.

Shows the reader’s current position in a long document.

Reserves space during loading states.

Indicates short loading states.

Displays temporary feedback for background actions.

Configures where transient toast notifications are announced and stacked.

Discloses observable tool activity and application-owned results.

Formats localized amounts while preserving exact decimal drafts.

Captures searchable text connected to suggestions.

Presents a calendar surface for date selection.

Selects one value by drilling through dependent levels of a hierarchy.

Captures a binary form value.

Groups related checkbox choices under one legend.

Captures a color token or brand swatch value.

Combines text entry and option selection.

Selects a date from a polished, accessible Calendar popover.

Selects a start and end date through a cohesive pair of custom Calendar popovers.

Summarizes form errors and links people back to invalid controls.

Groups labels, controls, descriptions, and errors.

Displays an error connected to a form control.

Collects files through a picker or drag-and-drop target.

Adds consistent validation and submission state to a native form.

Captures short text, email, password, search, or numeric values.

Combines inputs with prefixes, suffixes, or controls.

Collects one-time passcodes and verification codes.

Labels form controls with consistent spacing.

Presents a visible single- or multi-select option list.

Captures multi-line text with suggestions triggered by @ mentions.

Styles the browser-native select element.

Captures constrained numeric values.

Combines a password input with guidance, errors, and a visibility toggle.

Combines localized country metadata, calling codes, formatting, validation, and E.164 output.

Composes prompts with explicit submission and cancellation events.

Groups mutually exclusive options.

Frames rich text toolbar and editing compositions.

Captures search queries with native search semantics.

Presents a small, always-visible set of mutually exclusive values.

Provides an enhanced single-choice list when text search is not needed.

Captures numeric values across a bounded range.

Toggles a single setting on or off.

Groups removable or selectable tags.

Captures longer free-form text.

Captures a native time value.

Moves selected items between available and chosen collections.

Selects nodes from a branching hierarchy inside a dropdown.

Stacks collapsible content sections.

Keeps important controls visible after their original position scrolls out of view.

Keeps media and embeds in a predictable ratio.

Frames a focused item, metric, plan, or form.

Provides the main content region inside a Card.

Adds supporting copy to a Card header.

Groups actions at the end of a Card.

Groups introductory content at the start of a Card.

Provides a semantic Card title with a stable styling hook.

Displays a horizontal sequence of slides.

Shows and hides one optional content region.

Centers page content within responsive gutters and a maximum width.

Controls directional layout and text flow.

Separates sections with a decorative brand-colored gradient line.

Arranges content in fixed or responsive tokenized columns.

Organizes controlled workflow columns with keyboard, pointer, and touch movement requests.

Defines a named destination inside a controlled Kanban board.

Provides a scrollable message feed.

Coordinates keyed list entrances, exits, and changes in position.

Adds a density-controlled decorative particle field behind foreground content.

Adds readable spacing and typography to rendered Markdown or CMS content.

Frames panes that can be resized.

Reveals a group of direct children with tokenized, reduced-motion-aware staggering.

Provides a styled scroll container.

Animates wrapped content as it first enters the viewport.

Creates a semantic visual boundary between adjacent content groups.

Arranges children with tokenized direction, spacing, and alignment.

Groups frequently used controls into one compact action row.

Gives hand-authored semantic text consistent Lumen spacing, color, and reading rhythm.

Keeps meaningful content available to assistive technology without displaying it.

Overlays a text or image watermark on content.

Links to sections within a long page and exposes the page’s local structure.

Returns user to the top of the page.

Shows page hierarchy and parent navigation.

Gives navigation the visual emphasis of a button while retaining anchor semantics.

Builds command palettes and filterable action lists.

Pairs a stable scope selector or identity with horizontally scrollable contextual links.

Styles ordinary text navigation while preserving native anchor behavior.

Creates horizontal application menus.

Builds grouped top-level navigation.

Moves through paginated records or result sets.

Builds persistent app navigation.

Lets keyboard users bypass repeated navigation and move directly to main content.

Expands a floating primary action into a compact set of related actions.

Shows a person’s current position and progress through an ordered multi-step flow.

Switches between related panels.

Confirms destructive or high-commitment actions.

Provides contextual actions for a selected object.

Presents modal content for focused tasks.

Scrolls long task content while keeping actions visible.

Closes the enclosing dialog through an accessible button.

Keeps dialog actions outside the scrolling body.

Groups the dialog title and description.

Provides a semantic heading for dialog labeling.

Slides in supporting navigation, filters, or task panels.

Shows compact actions from a trigger.

Shows extra context on hover and focus.

Requests a brief confirmation beside the action that triggered it.

Displays lightweight floating content from a trigger.

Shows a side sheet for secondary flows.

Adds concise helper text to compact controls.

Guides people through product features using a sequence of anchored steps.