The component library

Your building blocks.

From the first button to the finishing touch. Find the right piece for your next interface.

46 components

Button

Six visual treatments, compact icon buttons, and clear loading and pressed states. Built for everyday actions and the moments that matter.

Forms

Checkbox

Checkbox with label, description text, error state, and three sizes.

Forms

FileUpload

Drag-and-drop file upload zone with click-to-browse fallback. Shows selected files in a removable list and validates against an optional maxSize cap.

Forms

Input

Text input with label, hint text, error message, icon slots, and built-in search-icon helpers.

Forms

NumberInput

Numeric input with increment and decrement buttons. Respects min/max bounds and supports label, error, and hint text.

Forms

RadioGroup

Clear choices, from simple radio lists to full selectable cards with icons, descriptions, and pricing. Native keyboard and form behavior included.

Forms

Select

A custom select with native form values, keyboard navigation, and optional icons and descriptions. Give people the context to choose confidently.

Forms

Slider

Range input with a custom track and thumb. Supports a label, live value readout, min/max/step configuration, and disabled state.

Forms

Switch

Toggle control rendered as a styled checkbox with role="switch". Accepts label and description text.

Forms

Textarea

Multi-line text input matching the Input API — label, hint, error, resize control, and three sizes.

Forms

Avatar

Distinct identities with softly colored initials, images, presence indicators, and optional rings. Compose overlapping teams with Avatar.Group and an accessible overflow count.

Display

Badge

Compact signals for status, metadata, and membership. Six semantic colors with soft, outline, and solid treatments, icon slots, and status dots.

Display

EmptyState

Zero-data placeholder with an icon, title, description, and optional call-to-action. Use to fill tables, lists, or panels that have no content.

Display

Skeleton

Shimmering placeholder for loading states. Renders a single block or a stack of lines, with configurable width, height, and border radius.

Display

Table

Sortable data table with optional striped rows and bordered cells. Column definitions support a custom cell render function.

Display

Tag

Interactive chip extending Badge with a removable close button. Use for filters, selections, and user-generated labels.

Display

Title

Heading component that decouples visual size from semantic level. Renders any h1–h6 with independent size scale, font weight, alignment, and color variants including a gradient.

Display

AnimatedBackground

A composable wrapper for decorative animated layers. Handles content layering, reduced-motion friendly timing, and ambient intensity controls.

Layout

Card

Container component with compound sub-components: Card.Header, Card.Body, and Card.Footer. Supports four visual variants and an optional hover animation.

Layout

Divider

Horizontal or vertical separator line. Supports an optional centered text label.

Layout

GradientOrbs

A soft blurred ambient preset that places animated color fields around the edges of a container.

Layout

GridGlow

A structured ambient preset with a subtle grid, glow falloff, and animated beam for dashboard and technical surfaces.

Layout

Alert

Notification banner with four semantic color variants, an automatic icon, an optional title, and a dismiss button.

Feedback

Progress

Linear progress bar for values 0–100. Supports four color variants, three sizes, an optional label, and a percentage readout.

Feedback

Spinner

Animated SVG ring for loading states. Supports three sizes and color options.

Feedback

Toast

Portal-based notifications rendered in the bottom-right corner. Wrap your app in ToastProvider and call useToast() to fire toasts with variants, durations, and dismiss callbacks.

Feedback

Accordion

Collapsible sections with CSS grid animation. Supports single or multiple open items, three visual variants, and controlled/uncontrolled modes.

Navigation

Breadcrumb

Navigation trail showing the current page location within a hierarchy. Marks the last item with aria-current="page".

Navigation

Pagination

Page navigation with previous/next buttons, numbered pages, ellipsis truncation, and optional first/last shortcuts.

Navigation

Stepper

Multi-step progress indicator showing completed, active, and pending steps. Supports horizontal, vertical, and compact (icon-only) orientations.

Navigation

Tabs

Tab component with keyboard navigation (Arrow keys, Home, End), three visual variants, and controlled/uncontrolled modes.

Navigation

Dialog

Modal dialog with focus trapping, Escape-key close, and ARIA attributes. Supports compound sub-components Dialog.Header, Dialog.Body, and Dialog.Footer across four sizes.

Overlays

Dropdown

Action menu anchored to a trigger. Items support icons, disabled states, and separators. Portal-rendered to avoid overflow clipping.

Overlays

Overlay anchored to a trigger, capable of holding any rich content. Unlike Tooltip, it persists on click. Supports four placements, portal rendering, click-outside and Escape dismissal, and controlled/uncontrolled modes.

Overlays

Tooltip

Tooltip shown on hover and focus. Supports four placement directions and an optional show delay.

Overlays

ChatBubble

Message bubble component with sent, received, system, and AI variants. Supports avatars, timestamps, delivery status, message grouping, and streaming cursors.

Chat