All Components

A set of vertically stacked collapsible panels with headings.

Displays a callout message to attract user attention.

A modal dialog that interrupts the user for a critical confirmation.

Maintains a consistent width-to-height ratio for content.

An image element with a fallback for representing the user.

A small label for status, category, or metadata display.

Displays a hierarchical navigation trail showing the user's current location.

A clickable element with multiple variants and sizes for triggering actions.

Groups related buttons together with shared styling and spacing.

A date picker calendar for selecting single or multiple dates.

A container for grouping related content and actions within a bordered surface.

A scrollable set of slides for cycling through content.

Themed chart components built on Recharts with consistent styling.

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

A component that expands and collapses a panel of content.

An autocomplete input with a filterable dropdown list of options.

A menu triggered by right-clicking or long-pressing an element.

A modal window that overlays the page for focused interactions.

A provider for setting the text direction (LTR/RTL) of children.

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

A menu of actions triggered by a button, with keyboard navigation.

A placeholder for empty states with icon, title, and description.

A wrapper that connects a label, input, and validation message.

A card that appears on hover for previewing linked content.

A styled text input field for collecting user input.

Groups an input with prefix/suffix addons or icons.

A one-time password input with individual character slots.

A versatile list item with icon, text, and description layout.

Displays a keyboard shortcut or key combination.

An accessible label for form controls.

A horizontal menu bar with dropdown menus, like a desktop app.

A styled wrapper around the native HTML select element.

A responsive navigation menu with links and dropdown panels.

Navigation controls for paging through multi-page content.

A floating panel anchored to a trigger element.

A horizontal bar indicating task completion progress.

A set of mutually exclusive options where only one can be selected.

Draggable panels that can be resized by the user.

A scrollable container with custom styled scrollbars.

A dropdown for picking a single value from a list of options.

A visual divider between content sections, horizontal or vertical.

A panel that slides in from the edge of the viewport.

A placeholder animation shown while content is loading.

A draggable control for selecting a numeric value within a range.

Toast notifications powered by the Sonner library.

An animated loading indicator.

A toggle control for switching between on and off states.

A structured data display with rows, columns, and optional captions.

Organizes content into switchable panels with tab navigation.

A multi-line text input for longer form content.

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

A set of toggle buttons where one or multiple can be active.

A small popup that displays additional information on hover.

A sticky, full-width header with responsive navigation, logo, and actions.