Components

Button

A clickable control with six variants and four sizes, complete with spring-press feedback.

Avatar

An image element with a fallback for representing the user.

Badge

A small visual indicator for statuses, counts and labels.

Card

A container that groups related content and actions.

Alert

Displays a callout for user attention.

Progress

Displays an indicator showing the completion progress of a task.

Skeleton

A placeholder preview of content before the data loads.

Spinner

A status indicator for pending work.

Separator

Visually or semantically separates content.

Aspect Ratio

Constrains content to a desired width / height ratio.

Circular Progress

A circular progress indicator with determinate and indeterminate modes.

Meter

A quantitative measurement within a known range.

Copy Button

Copies text to the clipboard with success feedback.

Typography

Theme-aware text styles.

Link

A styled anchor element.

SvgIcon

A wrapper for custom SVG icons.

Chip

A compact label with optional delete action.

Button Group

Groups related buttons together.

Floating Action Button

A prominent circular action button.

Rating

Collects a numeric star rating.

Autocomplete

MUI-style alias around the combobox pattern.

Transfer List

Moves options between available and selected lists.

Textarea Autosize

A textarea that grows with its content.

Switch

A control that allows the user to toggle between checked and not checked.

Checkbox

A control that allows the user to toggle between checked, not checked, and indeterminate.

Slider

An input where the user selects a value from within a given range.

Input

A styled text input with focus ring and invalid state.

Textarea

A styled multi-line text input.

Toggle

A two-state button that can be on or off.

Toggle Group

A set of two-state buttons that can be single or multiple select.

Radio Group

A set of checkable buttons where only one can be checked at a time.

Form

A form with declarative validation built on native ValidityState.

One-Time Password Field

A segmented input for OTP / PIN codes.

Password Toggle Field

A password input with a show / hide toggle.

Number Field

A numeric input with stepper buttons and Intl formatting.

Calendar

A standalone calendar for selecting dates.

Date Picker

A calendar inside a popover for picking a date.

Date Range Picker

Pick a start and end date from a popover calendar.

Time Picker

A MUI-style time field with a 12-hour analog clock panel.

Date Time Picker

Pick a date first, then choose the time from one popover with MUI-style props.

Color Picker

An HSV color picker with hue and alpha sliders.

File Upload

A drag-and-drop file input with validation.

List

A vertical list of items and actions.

Image List

A grid for image collections.

Table

Styled native table parts.

Timeline

A chronological event list.

Code Block

A presentational code block with an optional filename header, line numbers, and a built-in copy button.

Description List

A semantic dl / dt / dd compound for key–value pairs, with horizontal or vertical layout.

Marquee

A CSS-only scrolling strip for logos, testimonials, or announcements. Respects reduced-motion.

Backdrop

A full-screen scrim for modal states.

Snackbar

A brief status message.

Banner

A full-width, site-level announcement bar with variants, an optional action, and a dismiss button.

Paper

A neutral elevated surface.

Box

A low-level layout primitive.

Container

Centers content with responsive max-widths.

Stack

Arranges children in a row or column with consistent spacing.

Grid

A responsive CSS grid wrapper.

Masonry

A masonry-style column layout.

App Bar

A top application bar.

Bottom Navigation

Bottom tab-style navigation.

Speed Dial

A floating action menu.

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Tabs

A set of layered sections of content — known as tab panels — displayed one at a time.

Collapsible

An interactive component that expands / collapses a panel.

Breadcrumb

Displays the path to the current resource.

Pagination

Navigation bar matching DataTable pagination: page controls, rows-per-page selector, and total row count.

Stepper

A multi-step process indicator.

Dialog

A window overlaid on the primary content, rendering the content underneath inert.

Popover

Displays rich content in a portal, triggered by a button.

Tooltip

A popup that displays information related to an element when it receives keyboard focus or hover.

Toast

A succinct message that is displayed temporarily.

Alert Dialog

A modal dialog that interrupts the user and expects a response.

Sheet

A panel that slides in from any edge of the screen.

Drawer

A bottom-anchored sheet, ideal for mobile.

Hover Card

A rich popover shown when an element receives hover.

Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Select

Displays a list of options for the user to pick from, triggered by a button.

Multi Select

Lets users choose multiple options from a searchable dropdown list.

Context Menu

A menu triggered by right-click or long-press.

Menubar

A horizontal bar of dropdown menus, like a desktop app.

Navigation Menu

A collection of links for navigating a website.

Combobox

An autocomplete input with a filtered list of options.

Command

A command palette with fuzzy search, cmdk-style.

Click-Away Listener

Calls a handler when interaction happens outside its child.

No SSR

Defers rendering until after mount.

Portal

Renders children into document.body or a custom container.

Popper

Low-level floating positioning primitive anchored to an element.

Transition

Manages entering/entered/exiting/exited states for CSS transitions.

CSS Baseline

Injects a small global reset.

Init Color Scheme Script

Sets the initial color-scheme attribute before hydration.

Scroll Area

A container with custom, themeable scrollbars.

Toolbar

A container for grouping a set of controls.

Resizable

Resizable panel groups with draggable handles.

Carousel

A slideshow for cycling through images or content.

Tree

A hierarchical list, like a file explorer.

Editable

Inline-editable text that swaps between preview and input.

Tags Input

An input that collects a list of tags as chips.

Mentions

A textarea with @-mention autocomplete.

Chart

A comprehensive custom SVG chart library with 45+ components — bar, line, area, pie/donut, scatter, bubble, radar, heatmap, treemap, funnel, gauge, candlestick, radial bar, radial line, sankey, waterfall, gantt, boxplot, sunburst, chord, histogram, and more. No external charting dependency.

DataTable

A full-featured data grid with a rich column definition API, tree data, copy/paste, density, bulk actions, row action menus, custom slots, search, nested filters, virtualization, pinning, grouping, aggregation and more.

Video Player

A fully-featured HTML5 video player with playlists, chapter markers, SRT/VTT subtitles, video filters, quality levels, and HLS adaptive streaming.