@sortui

A vertically stacked set of headers that expand and collapse their panels, revealing one section of content at a time.

A message composer for AI chats: one row with actions around the text that opens into a column once the text wraps or attachments are added, with an expand act…

A callout that surfaces important contextual information — such as a status update or a failure — without interrupting the user's flow.

A modal confirmation dialog that interrupts the user before a destructive or irreversible action is carried out.

Constrains its content to a fixed width-to-height ratio so media, embeds, and placeholders keep their shape at any container size.

An uploaded or in-flight file as a picture, a card that names its type or a row (full or compact) with its icon, name and metadata, with its upload state and a…

Displays a user's image with an automatic initials fallback, plus optional status badge and stacked group with overflow count.

A small inline label for surfacing statuses, categories, and metadata next to other content.

Displays the path to the current page as a hierarchy of links so users can see where they are and jump back to any parent level.

A chat message bubble for conversation UIs, with sender alignment, tonal variants, grouped messages, and emoji reactions.

Triggers an action. Six emphasis levels, five sizes with icon-only counterparts and an optional count chip.

Groups related buttons and controls into a single connected segment with shared borders and rounded outer corners.

A month grid for picking a single date, multiple dates, or a date range, built on react-day-picker.

An opaque surface that groups related content, with slots for a header, title, description, action, content, and footer.

A slide container for cycling through related content, built on Embla with previous/next buttons and arrow-key navigation.

Recharts-based building blocks — a themed container, tooltip, and legend that pull series labels and colors from a single chart config.

Chat history in a sidebar: new chat with its shortcut, search, conversations grouped by date with pinning, per-chat actions on hover and the account menu.

A conversation with an assistant: your messages and attachments on the right, answers across the full width with folded reasoning, lists and bold text, copy / …

The empty state of a new chat: a greeting, the prompt input and suggestion buttons that start a conversation in one click.

A control that lets the user toggle a single option between checked and unchecked states.

A panel that expands and collapses to reveal or hide secondary content behind a trigger.

An input that filters a list of options as the user types and lets them pick a value from a popup.

A searchable command menu for finding and running actions, with grouped, keyboard-navigable results and built-in filtering.

A menu of contextual actions that opens at the pointer position when the user right-clicks (or long-presses) a target element.

A modal window over the page content. Composed from focused subcomponents.

Shows the changes to a file as a unified or split diff — line numbers, added and removed lines, +/- counts in the header and syntax highlighting — from a patch…

A context provider that switches Base UI components between left-to-right and right-to-left reading directions.

A panel that slides in from an edge of the screen and can be swiped away, for supplementary content and quick actions.

A menu of actions or options that opens from a trigger element, with support for groups, submenus, checkbox and radio items.

A model-effort picker: a stepped slider whose thumb is pulled toward the nearest level and springs onto it, with a cross-fading level name, a recommended mark …

A placeholder state for screens with no data yet, combining an icon, a title, a description, and follow-up actions.

Composable building blocks for form fields — label, description, error, and layout primitives that wrap any control.

A coloured icon for each kind of file — document, spreadsheet, presentation, PDF, image, video, music, archive or a plain file — sized like a Lucide icon in at…

A card that previews linked content, such as a user or project, when the pointer rests on its trigger.

A single-line text field. Three heights that line up with Button.

Groups an input or textarea with icons, text, buttons, and keyboard hints inside a single field container.

A one-time password input with individual character slots, caret animation, and paste support for verification codes.

A composable list row that arranges media, text content, and actions into a single flexible container.

Displays a keyboard key or key combination, used for surfacing shortcut hints in menus, tooltips, and documentation.

An accessible caption for a form control, associated via htmlFor and styled to dim automatically when its control is disabled.

A muted inline label row with an optional icon for annotating lists, feeds, and timelines — usable as a plain note, a centered separator, or a bordered section…

A horizontal bar of persistent dropdown menus, like the command menus along the top of a desktop application.

A layout wrapper for chat threads that positions an avatar, message bubbles, a sender header, and a timestamp footer, with start or end alignment per message.

A scroll container for chat and feed interfaces that starts at the latest message, keeps its position while history changes, and shows a button to jump back to…

A header menu for choosing the model a chat runs on — each option with a one-line description and a Pro badge — plus an upgrade entry.

A styled wrapper around the browser's built-in select element for compact, dependency-free option pickers that use the platform's native dropdown UI.

A horizontal menu of links and animated dropdown panels for top-level site or product navigation.

Navigation between pages of a long list, with previous/next controls, numbered page links, and an ellipsis for collapsed ranges.

A floating panel anchored to a trigger element, for lightweight details and actions that don't need a full dialog.

Displays a bar or circular ring that shows how far a task or quota has progressed toward completion, with optional label and value text.

A chat composer: a growing message field, file attachments with previews, a tools menu (web search, deep research, image), and a send button that turns into st…

A set of mutually exclusive options where selecting one choice deselects the others.

Resizable panel groups with draggable, keyboard-accessible handles for building split views and adjustable layouts.

A scrollable region with a custom, consistently styled scrollbar that replaces the native one across browsers and platforms.

A dropdown control for picking one option from a list, opened from a trigger button and submitted like a native form field.

A thin rule that visually and semantically divides content, either horizontally between sections or vertically between inline items.

A panel that slides in from an edge of the screen to show supplementary content or actions without leaving the current page.

A composable side navigation panel with collapsible, floating, and inset modes for building application layouts.

Renders a brand icon from Simple Icons — GitHub, Apple, Google, Figma — as a currentColor svg that sizes like a Lucide icon inside buttons and text.

A pulsing placeholder that reserves the shape of content while it loads.

Last night's sleep: the stages along a usage bar with a time axis, the totals per stage, a smart alarm switch and a wake-window slider.

A draggable control for selecting a numeric value or range within fixed bounds.

An opinionated toast component for showing brief, stackable notifications — successes, errors, and undoable actions — from anywhere in your app.

An animated loading indicator for pending actions and in-flight state.

A toggle control for switching a single setting on or off instantly.

A styled HTML table for presenting structured data in rows and columns, with header, body, footer, and caption parts and a built-in horizontal-scroll container.

A set of layered panels where selecting a tab in the list shows its panel and hides the others.

A multi-line text field for longer free-form input such as notes, descriptions, and messages, with content-based auto-sizing.

The SortUI tokens v2 as one theme: opaque surfaces with a dark ladder (card 900, popover 800), the translucent fill ladder fill-1…4, the roles field / raised /…

A two-state button for switching an option on or off, such as view or formatting settings in a toolbar.

A set of two-state buttons that share one selection state, allowing either a single pressed item or several at once.

A small floating label that reveals extra context for a control when it is hovered or focused.

Lines of agent activity — reasoning, tool calls, searches, sources, plans and subagent runs — each with an icon, a title and an optional description and status…

Shows how a whole is shared out — storage, a data plan, a quota — as one row of segments sized by their value, with a legend, an axis and a highlighted segment…

React hook that tracks whether the viewport is below the mobile breakpoint (768px).

The cn() class-merge helper used by every component.