Components

Inline banner for showing an info, success, warning, or error message.

Reveals its content with an animation effect the first time it scrolls into view.

A small indicator that highlights new or unread content, such as a notification count.

A trail of links showing the current page's position within a site's hierarchy.

Clickable element for triggering an action, such as submitting a form or confirming a choice.

A family of card surfaces for grouping related content, from a simple bordered box to an image tile, each one a blank layout you fill with your own markup.

A horizontally scrolling carousel for paging through a row of slides.

A binary or tri-state form control, usable standalone or grouped into a list.

A small, removable piece of information, such as a selected filter or an invited guest.

An accordion-style disclosure that reveals a content panel in place, without navigating away.

A field for picking a color, from preset swatches or a custom hex value.

A numeric stepper with increment and decrement buttons for a bounded quantity.

An accessible date field with segmented day, month, and year inputs, plus a calendar popover for picking values directly.

A thin line separating two areas of content, horizontal or vertical.

A side panel that slides in for a focused task, with a built-in safeguard against losing unsaved changes.

A button that opens a menu of actions when clicked.

A circular button that highlights a screen's single most important action.

A single icon glyph, loaded by name, in any size or color.

An image gallery with a main viewing area, thumbnails, and a full-size lightbox.

A list that loads more items automatically as you scroll to the end.

A single-line text field for forms, with validation and an optional click-to-edit mode.

A file picker with drag-and-drop, thumbnails or file rows, and bulk removal.

An international phone number field with a searchable country selector.

A label, required asterisk, and instructions text for a form field

A themed anchor for inline or standalone navigation, with an optional decorative leading icon

A compact loading indicator, shown as bouncing dots, a rotating spinner, or a bar.

A reusable dialog with confirm and cancel actions.

A set of page numbers letting someone jump between the pages of a longer list, with first/previous/next/last controls

A password strength meter, graded into levels with an always-visible level name.

A progress gauge with optional labels in all four corners.

A single-choice form control, usable standalone or grouped into a list of options.

A text field specialized for search, with an optional keyboard shortcut and command-palette panel.

A field for picking one or more values from a list of options.

A persistent, non-modal navigation panel pinned beside page content, collapsible to an icon rail or fully hidden, and resizable by dragging its border.

A generic shimmer loading placeholder that stands in for content while it loads.

A slider for picking a single numeric value within a range, with optional graduation marks and a floating value tooltip.

Shows progress through a multi-step process, as a numbered list of steps or as a continuous bar.

A toggle for a setting that takes effect right away.

A tab system for switching between different views of content on the same page.

A small inline label for a status, category, or count.

A multi-line text field with auto-resize, an optional click-to-edit mode, and an optional rich-text formatting toolbar.

A segmented time field with a picker panel, a mobile fallback, and full timezone support.

A self-dismissing notification anchored to a screen corner, stacking automatically with any other toast sharing its position.

A pressed or unpressed button, usable standalone or grouped into a switch or a filter.

A sticky top page toolbar with layout slots, a responsive burger menu, scroll collapse, and background-adaptive theming.

A floating, non-interactive description anchored to another element, guaranteed to never run past the viewport edge.