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.

Lists upcoming appointments, tasks, or dated events.

Animates a formatted metric while keeping one stable accessible value.

Displays a file attachment with metadata.

Represents a person, team, or entity.

Labels status, type, plan, or count information.

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

Frames chat messages and short comments.

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

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.

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

Introduces or categorizes the heading that immediately follows it.

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

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

Encodes a labelled matrix with a sequential visualization scale.

Renders Lucide icons with Lumen sizing and accessibility defaults.

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

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.

Highlights status, position, or annotations.

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.

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.

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.

Surfaces contextual status messages.

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.

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.

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.

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.

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.