Components

Accordion

Collapsible content container that organizes related information into expandable panels.

Alert

Contextual message for communicating status, warnings, or important information.

Avatar

Visual representation of a user or entity, displayed as an image, icon, or fallback initials.

Badge

Compact indicator used to highlight numeric values, statuses, or labels.

Bottom Navigation

Bar of top-level destinations along the bottom of the screen, each an icon over a short label.

Breadcrumb

Navigational trail showing the current page's location within the site hierarchy.

Bubble

Chat message bubble with alignment, semantic variants, attachment previews, and reactions.

Button

Interactive control for triggering actions, available in multiple semantic style variants.

Button Group

Container that visually groups related buttons into a single, cohesive control.

Card

Flexible content container designed to present grouped information.

Carousel

Slideshow that cycles through slides with controls, indicators, keyboard nav, and optional autoplay.

Checkbox

Standard selection control for multi-option forms and interfaces.

Chip

Compact, interactive element representing a filter or selection, with an optional dismiss button.

Calendar

Full event calendar with month, week, day, and year views.

Calendar (Inline)

Compact monthly calendar for selecting a single date or a date range.

Date Picker

User-friendly control for picking dates from a calendar.

Date Time Picker

Combined control for selecting a date and time together within a single popover.

Month Picker

Text input paired with a popup for selecting a month and year.

Slot Picker

Inline calendar showing consecutive days with a grid of selectable time slots.

Time Picker

Text input paired with a popup panel for selecting hours, minutes, and seconds.

Week Picker

Text input paired with a month calendar for selecting a whole ISO week.

Dialog

Modal interface for focused user interactions such as confirmations, forms, and alerts.

Expansion Panel

Container for toggling the visibility of a section of content with a clickable header.

Fieldset

Structural grouping element for associating related form controls with a legend.

File Upload

Input for choosing one or more files, showing the selected files as tags inside the field.

Floating Action Button

Prominent, elevated button that carries the primary action of a screen and can pin itself to a corner.

Icon

Renders built-in or custom SVG icons with accessible role and label support.

Info Page

Structured layout for presenting help content or informational panels.

Input

Single-line text field for capturing user input in forms.

Input Group

Composite input container that combines text fields with addons or buttons.

Input Number

Input container that combines a number field with increase and decrease buttons.

Label

Descriptive text element that enhances form accessibility.

List

Vertically arranged collection of items for displaying related data.

Listbox

Selectable list interface supporting single or multiple item selection.

Menubar

Horizontal bar of always-visible command menus, like the File and Edit menus of desktop applications.

Notifications

Displays system feedback, status updates, or alerts as toast-style or inline notifications.

One-Time Password

Row of single-character cells for entering a verification code or PIN, with paste and autofill support.

Pagination

Navigational control for traversing multi-page or segmented content.

Popover

Floating container for supplemental content or contextual actions anchored to an element.

Progress

Visual indicator that communicates task completion or load progression.

Radio

Mutually exclusive input control for selecting one option from several.

Range

Slider control for selecting a numeric value by dragging a thumb along a track.

Rating

Star-based control for viewing and setting a subjective score, with half-star precision.

Select

Dropdown component for choosing options from a list with search support.

Separator

Simple visual divider used to organize content into logical sections.

Sheet

Slide-over panel that presents additional navigation or tools without disrupting context.

Sidebar

Fixed or collapsible navigation container for application menus and quick links.

Skeleton

Placeholder loading state that improves perceived performance during content fetches.

Spinner

Dynamic loader graphic signaling ongoing activity or processing.

Step Indicator

Sequential progress tracker highlighting completed, active, and upcoming steps.

Switch

Toggle control designed for binary on/off state selection.

Table

Styled component for displaying structured data in rows and columns with a clear visual hierarchy.

Tabs

Navigation control that switches between panels of related content using tab buttons.

Tag

Concise label for categorization, keywords, or key indicators.

Text

Applies consistent typographic styles for headings, paragraphs, code blocks, and other text elements.

Textarea

Multiline text input field optimized for longer user content.

Tile

Clickable or informational block combining an image, title, and supporting content.

Toolbar

Grouped action bar providing quick access to common commands.

Tooltip

Small floating label that appears on hover to provide context or clarify a UI element.

Tree

Structured list component designed to represent hierarchical relationships.

Components ​