Find the right primitive.

Triggers primary, secondary, destructive, and quiet actions.

Groups related button actions.

Presents the current locale as a compact control for changing language.

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.

Lists upcoming appointments, tasks, or dated events.

Displays a file attachment with metadata.

Represents a person, team, or entity.

Labels status, type, plan, or count information.

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.

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.

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.

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.

Pairs a rounded text label with an optional trailing count.

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

Collects or presents a bounded star-based score.

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

Pairs one prominent metric with a concise descriptive label.

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.

Applies Lumen text rhythm to article content.

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.

Shows completion, loading progress, or quota usage.

Reserves space during loading states.

Provides the toast viewport for notifications.

Indicates short loading states.

Displays temporary feedback for background actions.

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.

Captures a color token or brand swatch value.

Combines text entry and option selection.

Provides a styled date input.

Groups start and end date controls for range selection.

Groups labels, controls, descriptions, and errors.

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

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.

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

Styles the browser-native select element.

Captures constrained numeric values.

Pairs a country dial-code select with a telephone number input.

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.

Displays a horizontal sequence of slides.

Shows and hides one optional content region.

Controls directional layout and text flow.

Separates sections with a decorative brand-colored gradient line.

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.

Provides a styled scroll container.

Animates wrapped content as it first enters the viewport.

Creates a semantic visual boundary between adjacent content groups.

Groups frequently used controls into one compact action row.

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.

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.