Components

Vertically stacked, collapsible sections built on Base UI Accordion.

Inline callout for status messages, with default and destructive variants and an optional action.

Modal confirmation dialog that interrupts the user and expects a response.

Displays content within a fixed width-to-height ratio.

File attachment chip with name, size and remove action, for chat and forms.

User image with a text fallback, built on Base UI Avatar.

Small status or count label with semantic color variants.

Page-wide message at the top of a page, such as planned maintenance or an outage, that can be dismissed.

Hierarchical page trail with separators and an overflow ellipsis.

Chat message bubble with incoming and outgoing styles.

Button with default, outline, secondary, ghost, destructive and link variants, sm, default and lg sizes plus icon sizes; renders as a link or another element with `render`.

Groups related buttons into a single attached control, with optional separators.

Date grid built on react-day-picker, used by the date pickers.

Surface container with header, title, description, content and footer slots.

Swipeable carousel with previous/next controls, built on Embla.

Recharts wrapper with theme-aware colors, tooltips and legends.

Accessible checkbox with checked, unchecked and indeterminate states.

Show and hide a single region of content, built on Base UI Collapsible.

Color picker with a saturation/hue area and hex input in a popover.

Composable combobox with a compound API built on Popover and Command.

Command menu / searchable list built on cmdk, usable inline or in a dialog.

Right-click menu with items, checkboxes, radio items and submenus.

TanStack Table wrapper with toolbar, faceted filters, pagination, column visibility and resizing.

Combined date and time picker in a popover.

Key–value pairs such as applicant, property and fee, as valid dl markup in stacked, side-by-side or grid layouts.

Modal window with header, footer, title and description, built on Base UI Dialog.

Provider that sets left-to-right or right-to-left direction for its subtree.

Panel that slides in from an edge of the screen and can be swiped closed, built on Base UI Drawer.

Menu triggered by a button, with items, groups, checkboxes, radio items and submenus.

Empty state with icon, title, description and actions.

Accessible form field layout: label, control, description and error, with horizontal and vertical orientations.

Drag-and-drop multi-file uploader with size and type validation, built on react-dropzone.

Single file or image input with preview, drag-and-drop and size validation.

react-hook-form bindings (`Form`, `FormField`, `FormItem`, `FormMessage`) with accessible labels and errors.

Month, week and day calendar for apps that show and schedule events, with a time grid and all-day events.

Preview card shown when hovering or focusing a link.

Text input with consistent sizing, focus and invalid states.

Input with leading/trailing addons, buttons and text slots.

One-time-password input with individual slots, built on input-otp.

Flexible row for lists: media, title, description and actions, with outline and muted variants.

Keyboard key and shortcut display.

Accessible form label built on Base UI Label.

Small status marker (dot, count or label) to annotate other elements.

Desktop-style menu bar with menus, submenus, checkboxes and radio items.

Chat message layout with avatar, author, content and actions.

Scroll container for chat messages that sticks to the bottom as new messages arrive.

A styled native HTML select element for simple lists and mobile-friendly forms.

Top-level site navigation with dropdown panels.

Numeric input with increment and decrement buttons and min/max/step.

Shows which organisation the user works in and lets them switch, with optional sub-organisations, search and favourites.

Page navigation with previous/next, page links and ellipsis.

Floating panel anchored to a trigger, built on Base UI Popover.

Horizontal progress bar built on Base UI Progress.

Step-by-step question flow with single and multiple choice answers.

Set of mutually exclusive options built on Base UI Radio Group.

Resizable panel groups with drag handles, built on react-resizable-panels.

Renders HTML produced by the rich text editor with consistent typography.

Tiptap rich text editor with formatting toolbar, links, alignment and font size.

Custom-styled scroll container built on Base UI Scroll Area.

Native-feeling select menu built on Base UI Select.

Horizontal or vertical divider line.

Panel that slides in from a screen edge, built on Base UI Dialog.

Composable, collapsible application sidebar with mobile sheet support.

Animated placeholder shown while content loads.

Range slider with one or more thumbs, built on Base UI Slider.

Loading indicator.

A key figure with a label, a trend and a comparison, for dashboards and overviews.

Secondary, lower-emphasis tabs for nested navigation.

On/off toggle switch built on Base UI Switch.

Semantic, styled HTML table primitives.

Tabbed views built on Base UI Tabs.

Multi-line text input.

Time picker: a 24-hour field with hour/minute segments in the style of Input, standalone segment inputs, and a visual popover variant.

Short notifications that appear over the page, built on Base UI Toast, with types, actions and loading states.

Two-state button built on Base UI Toggle.

Group of toggles with single or multiple selection.

Hover/focus hint built on Base UI Tooltip.