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.

Breadcrumb

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

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.

Calendar

Interactive monthly calendar for browsing and selecting dates.

Card

Flexible content container designed to present grouped information.

Checkbox

Standard selection control for multi-option forms and interfaces.

Chip

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

Date Picker

User-friendly control for picking dates from a calendar.

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.

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.

Notifications

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

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.

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.

Time Picker

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

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 ​