A clickable button that triggers actions
A toggle button with pressed/unpressed state
A group of toggle buttons where one or multiple items can be active
A toolbar of action buttons with optional separators
A row of segments in a pill container for selecting one option from a group
A container card with optional header and content sections
A collapsible accordion with expandable sections
A collapsible section with a trigger button to show/hide content
A visual divider between sections of content
A tabbed interface for switching between content panels
A scrollable container with styled scrollbars for overflowing content
A heading element for section titles and page structure
A paragraph of text with optional styling variants
A text label for form fields
A text input field for user data entry
A text input with optional prefix and suffix text addons
A multi-line text area for longer form input
A checkbox toggle for boolean values
A group of checkboxes for selecting multiple values
A group of radio buttons for selecting a single option from a list
A dropdown select field for choosing from a list of options
A range slider input for selecting a numeric value within a range
A toggle switch for on/off states
A numeric input with increment and decrement buttons
A universal field wrapper that renders a label, description, and error message around content
A fieldset for grouping related form fields with an optional legend
A form container that handles submission
A progress bar indicating completion status
A meter gauge indicating a value within a known range
An alert banner for displaying important messages with variant-based styling
A small label for status, categories, or counts
A self-dismissing notification card. Auto-hides after a configurable duration with a color accent based on variant.
A modal dialog or side sheet overlay. Open/close is controlled via a state binding path.
A modal confirmation dialog that requires user acknowledgment. Used for destructive or important actions.
A slide-in panel/sheet with a drag handle indicator. Opens from any edge of the screen.
A floating panel that appears when clicking a trigger button
A card that appears on hover to show a preview of linked content
A tooltip that displays informational text when hovering over its trigger content
A dropdown menu triggered by a button click. Displays a list of actions or options.
A context menu that appears on right-click. Displays a list of actions at the cursor position.
A horizontal navigation menu with optional dropdown panels
A horizontal menu bar with dropdown menus
A circular avatar displaying a user image or fallback initials