---
name: "@sortui"
slug: "sortui"
description: "A design system built on shadcn/ui: every component restyled on one token set, plus AI chat, diff and usage components and ready-made blocks."
category: "AI/chat UI"
tags: ["ai", "auth", "blocks", "buttons", "cards", "charts", "dashboard", "design-system", "forms", "hooks", "icons", "loaders", "media", "mobile", "navigation", "overlays", "pro-available", "tables", "theming"]
framework: "react"
license: "MIT"
author: "sortui"
website: "https://sortui.dev"
github: "https://github.com/sortui/ui"
registry: "https://sortui.dev/r/registry.json"
pro: true
pro_url: "https://sortui.dev/pricing"
github_stars: 22
component_count: 76
generated_at: "2026-10-27T06:34:08.542Z"
---

# @sortui

A design system built on shadcn/ui: every component restyled on one token set, plus AI chat, diff and usage components and ready-made blocks.

## Links

- Website: https://sortui.dev
- GitHub: https://github.com/sortui/ui
- Registry JSON: https://sortui.dev/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/sortui
- This file: https://sh4dcn.netlify.app/md/sortui.md
- Pro / pricing: https://sortui.dev/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://sortui.dev/r/registry.json
pnpm dlx shadcn@latest add https://sortui.dev/r/registry.json
bunx shadcn@latest add https://sortui.dev/r/registry.json
# clone the source repo
git clone https://github.com/sortui/ui.git
# fetch the raw registry index
curl -s https://sortui.dev/r/registry.json
```

## Components (76)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:ui | A vertically stacked set of headers that expand and collapse their panels, revealing one section of content at a time. | `npx shadcn@latest add https://sortui.dev/r/accordion.json` |
| ai-chat-composer | registry:ui | 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… | `npx shadcn@latest add https://sortui.dev/r/ai-chat-composer.json` |
| alert | registry:ui | A callout that surfaces important contextual information — such as a status update or a failure — without interrupting the user's flow. | `npx shadcn@latest add https://sortui.dev/r/alert.json` |
| alert-dialog | registry:ui | A modal confirmation dialog that interrupts the user before a destructive or irreversible action is carried out. | `npx shadcn@latest add https://sortui.dev/r/alert-dialog.json` |
| aspect-ratio | registry:ui | Constrains its content to a fixed width-to-height ratio so media, embeds, and placeholders keep their shape at any container size. | `npx shadcn@latest add https://sortui.dev/r/aspect-ratio.json` |
| attachment | registry:ui | 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… | `npx shadcn@latest add https://sortui.dev/r/attachment.json` |
| avatar | registry:ui | Displays a user's image with an automatic initials fallback, plus optional status badge and stacked group with overflow count. | `npx shadcn@latest add https://sortui.dev/r/avatar.json` |
| badge | registry:ui | A small inline label for surfacing statuses, categories, and metadata next to other content. | `npx shadcn@latest add https://sortui.dev/r/badge.json` |
| breadcrumb | registry:ui | 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. | `npx shadcn@latest add https://sortui.dev/r/breadcrumb.json` |
| bubble | registry:ui | A chat message bubble for conversation UIs, with sender alignment, tonal variants, grouped messages, and emoji reactions. | `npx shadcn@latest add https://sortui.dev/r/bubble.json` |
| button | registry:ui | Triggers an action. Six emphasis levels, five sizes with icon-only counterparts and an optional count chip. | `npx shadcn@latest add https://sortui.dev/r/button.json` |
| button-group | registry:ui | Groups related buttons and controls into a single connected segment with shared borders and rounded outer corners. | `npx shadcn@latest add https://sortui.dev/r/button-group.json` |
| calendar | registry:ui | A month grid for picking a single date, multiple dates, or a date range, built on react-day-picker. | `npx shadcn@latest add https://sortui.dev/r/calendar.json` |
| card | registry:ui | An opaque surface that groups related content, with slots for a header, title, description, action, content, and footer. | `npx shadcn@latest add https://sortui.dev/r/card.json` |
| carousel | registry:ui | A slide container for cycling through related content, built on Embla with previous/next buttons and arrow-key navigation. | `npx shadcn@latest add https://sortui.dev/r/carousel.json` |
| chart | registry:ui | Recharts-based building blocks — a themed container, tooltip, and legend that pull series labels and colors from a single chart config. | `npx shadcn@latest add https://sortui.dev/r/chart.json` |
| chat-sidebar-01 | registry:block | 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. | `npx shadcn@latest add https://sortui.dev/r/chat-sidebar-01.json` |
| chat-thread-01 | registry:block | 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 / … | `npx shadcn@latest add https://sortui.dev/r/chat-thread-01.json` |
| chat-welcome-01 | registry:block | The empty state of a new chat: a greeting, the prompt input and suggestion buttons that start a conversation in one click. | `npx shadcn@latest add https://sortui.dev/r/chat-welcome-01.json` |
| checkbox | registry:ui | A control that lets the user toggle a single option between checked and unchecked states. | `npx shadcn@latest add https://sortui.dev/r/checkbox.json` |
| collapsible | registry:ui | A panel that expands and collapses to reveal or hide secondary content behind a trigger. | `npx shadcn@latest add https://sortui.dev/r/collapsible.json` |
| combobox | registry:ui | An input that filters a list of options as the user types and lets them pick a value from a popup. | `npx shadcn@latest add https://sortui.dev/r/combobox.json` |
| command | registry:ui | A searchable command menu for finding and running actions, with grouped, keyboard-navigable results and built-in filtering. | `npx shadcn@latest add https://sortui.dev/r/command.json` |
| context-menu | registry:ui | A menu of contextual actions that opens at the pointer position when the user right-clicks (or long-presses) a target element. | `npx shadcn@latest add https://sortui.dev/r/context-menu.json` |
| dialog | registry:ui | A modal window over the page content. Composed from focused subcomponents. | `npx shadcn@latest add https://sortui.dev/r/dialog.json` |
| diff | registry:ui | 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… | `npx shadcn@latest add https://sortui.dev/r/diff.json` |
| direction | registry:ui | A context provider that switches Base UI components between left-to-right and right-to-left reading directions. | `npx shadcn@latest add https://sortui.dev/r/direction.json` |
| drawer | registry:ui | A panel that slides in from an edge of the screen and can be swiped away, for supplementary content and quick actions. | `npx shadcn@latest add https://sortui.dev/r/drawer.json` |
| dropdown-menu | registry:ui | A menu of actions or options that opens from a trigger element, with support for groups, submenus, checkbox and radio items. | `npx shadcn@latest add https://sortui.dev/r/dropdown-menu.json` |
| effort-slider-01 | registry:block | 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 … | `npx shadcn@latest add https://sortui.dev/r/effort-slider-01.json` |
| empty | registry:ui | A placeholder state for screens with no data yet, combining an icon, a title, a description, and follow-up actions. | `npx shadcn@latest add https://sortui.dev/r/empty.json` |
| field | registry:ui | Composable building blocks for form fields — label, description, error, and layout primitives that wrap any control. | `npx shadcn@latest add https://sortui.dev/r/field.json` |
| file-icon | registry:ui | 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… | `npx shadcn@latest add https://sortui.dev/r/file-icon.json` |
| hover-card | registry:ui | A card that previews linked content, such as a user or project, when the pointer rests on its trigger. | `npx shadcn@latest add https://sortui.dev/r/hover-card.json` |
| input | registry:ui | A single-line text field. Three heights that line up with Button. | `npx shadcn@latest add https://sortui.dev/r/input.json` |
| input-group | registry:ui | Groups an input or textarea with icons, text, buttons, and keyboard hints inside a single field container. | `npx shadcn@latest add https://sortui.dev/r/input-group.json` |
| input-otp | registry:ui | A one-time password input with individual character slots, caret animation, and paste support for verification codes. | `npx shadcn@latest add https://sortui.dev/r/input-otp.json` |
| item | registry:ui | A composable list row that arranges media, text content, and actions into a single flexible container. | `npx shadcn@latest add https://sortui.dev/r/item.json` |
| kbd | registry:ui | Displays a keyboard key or key combination, used for surfacing shortcut hints in menus, tooltips, and documentation. | `npx shadcn@latest add https://sortui.dev/r/kbd.json` |
| label | registry:ui | An accessible caption for a form control, associated via htmlFor and styled to dim automatically when its control is disabled. | `npx shadcn@latest add https://sortui.dev/r/label.json` |
| marker | registry:ui | 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… | `npx shadcn@latest add https://sortui.dev/r/marker.json` |
| menubar | registry:ui | A horizontal bar of persistent dropdown menus, like the command menus along the top of a desktop application. | `npx shadcn@latest add https://sortui.dev/r/menubar.json` |
| message | registry:ui | 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. | `npx shadcn@latest add https://sortui.dev/r/message.json` |
| message-scroller | registry:ui | 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… | `npx shadcn@latest add https://sortui.dev/r/message-scroller.json` |
| model-picker-01 | registry:block | 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. | `npx shadcn@latest add https://sortui.dev/r/model-picker-01.json` |
| native-select | registry:ui | 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. | `npx shadcn@latest add https://sortui.dev/r/native-select.json` |
| navigation-menu | registry:ui | A horizontal menu of links and animated dropdown panels for top-level site or product navigation. | `npx shadcn@latest add https://sortui.dev/r/navigation-menu.json` |
| pagination | registry:ui | Navigation between pages of a long list, with previous/next controls, numbered page links, and an ellipsis for collapsed ranges. | `npx shadcn@latest add https://sortui.dev/r/pagination.json` |
| popover | registry:ui | A floating panel anchored to a trigger element, for lightweight details and actions that don't need a full dialog. | `npx shadcn@latest add https://sortui.dev/r/popover.json` |
| progress | registry:ui | Displays a bar or circular ring that shows how far a task or quota has progressed toward completion, with optional label and value text. | `npx shadcn@latest add https://sortui.dev/r/progress.json` |
| prompt-input-01 | registry:block | 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… | `npx shadcn@latest add https://sortui.dev/r/prompt-input-01.json` |
| radio-group | registry:ui | A set of mutually exclusive options where selecting one choice deselects the others. | `npx shadcn@latest add https://sortui.dev/r/radio-group.json` |
| resizable | registry:ui | Resizable panel groups with draggable, keyboard-accessible handles for building split views and adjustable layouts. | `npx shadcn@latest add https://sortui.dev/r/resizable.json` |
| scroll-area | registry:ui | A scrollable region with a custom, consistently styled scrollbar that replaces the native one across browsers and platforms. | `npx shadcn@latest add https://sortui.dev/r/scroll-area.json` |
| select | registry:ui | A dropdown control for picking one option from a list, opened from a trigger button and submitted like a native form field. | `npx shadcn@latest add https://sortui.dev/r/select.json` |
| separator | registry:ui | A thin rule that visually and semantically divides content, either horizontally between sections or vertically between inline items. | `npx shadcn@latest add https://sortui.dev/r/separator.json` |
| sheet | registry:ui | A panel that slides in from an edge of the screen to show supplementary content or actions without leaving the current page. | `npx shadcn@latest add https://sortui.dev/r/sheet.json` |
| sidebar | registry:ui | A composable side navigation panel with collapsible, floating, and inset modes for building application layouts. | `npx shadcn@latest add https://sortui.dev/r/sidebar.json` |
| simple-icon | registry:ui | 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. | `npx shadcn@latest add https://sortui.dev/r/simple-icon.json` |
| skeleton | registry:ui | A pulsing placeholder that reserves the shape of content while it loads. | `npx shadcn@latest add https://sortui.dev/r/skeleton.json` |
| sleep-widget-01 | registry:block | 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. | `npx shadcn@latest add https://sortui.dev/r/sleep-widget-01.json` |
| slider | registry:ui | A draggable control for selecting a numeric value or range within fixed bounds. | `npx shadcn@latest add https://sortui.dev/r/slider.json` |
| sonner | registry:ui | An opinionated toast component for showing brief, stackable notifications — successes, errors, and undoable actions — from anywhere in your app. | `npx shadcn@latest add https://sortui.dev/r/sonner.json` |
| spinner | registry:ui | An animated loading indicator for pending actions and in-flight state. | `npx shadcn@latest add https://sortui.dev/r/spinner.json` |
| switch | registry:ui | A toggle control for switching a single setting on or off instantly. | `npx shadcn@latest add https://sortui.dev/r/switch.json` |
| table | registry:ui | 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. | `npx shadcn@latest add https://sortui.dev/r/table.json` |
| tabs | registry:ui | A set of layered panels where selecting a tab in the list shows its panel and hides the others. | `npx shadcn@latest add https://sortui.dev/r/tabs.json` |
| textarea | registry:ui | A multi-line text field for longer free-form input such as notes, descriptions, and messages, with content-based auto-sizing. | `npx shadcn@latest add https://sortui.dev/r/textarea.json` |
| theme | registry:theme | 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 /… | `npx shadcn@latest add https://sortui.dev/r/theme.json` |
| toggle | registry:ui | A two-state button for switching an option on or off, such as view or formatting settings in a toolbar. | `npx shadcn@latest add https://sortui.dev/r/toggle.json` |
| toggle-group | registry:ui | A set of two-state buttons that share one selection state, allowing either a single pressed item or several at once. | `npx shadcn@latest add https://sortui.dev/r/toggle-group.json` |
| tooltip | registry:ui | A small floating label that reveals extra context for a control when it is hovered or focused. | `npx shadcn@latest add https://sortui.dev/r/tooltip.json` |
| trace | registry:ui | 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… | `npx shadcn@latest add https://sortui.dev/r/trace.json` |
| usage-bar | registry:ui | 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… | `npx shadcn@latest add https://sortui.dev/r/usage-bar.json` |
| use-mobile | registry:hook | React hook that tracks whether the viewport is below the mobile breakpoint (768px). | `npx shadcn@latest add https://sortui.dev/r/use-mobile.json` |
| utils | registry:lib | The cn() class-merge helper used by every component. | `npx shadcn@latest add https://sortui.dev/r/utils.json` |

## For AI agents

```text
You are adding components from @sortui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/sortui.md) for the component list.
2. Fetch the machine-readable index: https://sortui.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: sortui).
```