# SUI

> SUI is a collection of composable React components built on Base UI and Tailwind CSS. These documents include complete examples from the workspace.

## Getting started

- [CLI](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=cli): Search, inspect, install, and update SUI source with shadcn.
- [Compatibility](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=compatibility): Application responsibilities, SSR, worker loading, and browser capabilities.
- [Design guidelines](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=design-guidelines): Complete typography, spacing, surface, and interaction rules with recommended and avoid examples for every rule.
- [Installation](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=installation): Install editable SUI source with the shadcn CLI.
- [Introduction](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=): Start with a component. Build an interface that feels like yours.
- [LLMs](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=llms-txt): Read SUI documentation and complete examples as plain text.
- [MCP](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=mcp): Connect AI assistants to the SUI registry.
- [Registry](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=registry): Understand SUI manifests, shared styles, and GitHub distribution.
- [Theming](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=theming): Semantic colors, light and dark surfaces, and reusable palettes.

## Components

- [Components](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components): Browse all 67 SUI components, listed alphabetically.
- [Accordion](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Faccordion): A vertically stacked set of interactive headings that each reveal a section of content.
- [Alert](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Falert): Displays a callout for user attention.
- [Alert Dialog](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Falert-dialog): A modal dialog that interrupts the user with important content and expects a response.
- [Aspect Ratio](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Faspect-ratio): Displays content within a desired ratio.
- [Attachment](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fattachment): Displays a file or image attachment with media, metadata, upload state, and actions.
- [Autocomplete](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fautocomplete): Suggests matching options while keeping the input free to accept custom text.
- [Avatar](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Favatar): An image element with a fallback for representing the user.
- [Badge](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fbadge): Displays a badge or a component that looks like a badge.
- [Breadcrumb](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fbreadcrumb): Displays the path to the current resource using a hierarchy of links.
- [Bubble](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fbubble): Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.
- [Button](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fbutton): Displays a button or a component that looks like a button.
- [Button Group](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fbutton-group): A container that groups related buttons together with consistent styling.
- [Calendar](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fcalendar): A calendar component that allows users to select a date or a range of dates.
- [Card](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fcard): Displays a card with header, content, and footer.
- [Carousel](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fcarousel): A carousel with motion and swipe built using Embla.
- [Chart](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fchart): Beautiful charts. Built using Recharts. Copy and paste into your apps.
- [Checkbox](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fcheckbox): A control that allows the user to toggle between checked and not checked.
- [Clipboard Text](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fclipboard-text): A selectable text field with a separate copy action and async feedback.
- [Code Viewer](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fcode-viewer): Syntax-highlighted code with folding, line highlights, copying, and streaming feedback.
- [Collapsible](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fcollapsible): An interactive component which expands/collapses a panel.
- [ColorPicker](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fcolor-picker): Choose colors using a saturation area, hue and opacity sliders, editable values and preset swatches.
- [Combobox](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fcombobox): Autocomplete input with a list of suggestions.
- [Command](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fcommand): Command menu for search and quick actions.
- [Context Menu](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fcontext-menu): Displays a menu of actions triggered by a right click.
- [Dialog](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fdialog): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [Diff Viewer](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fdiff-viewer): A line-based code comparison with split and unified views.
- [Direction](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fdirection): A provider component that sets the text direction for your application.
- [Drawer](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fdrawer): A drawer component for React.
- [Dropdown Menu](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fdropdown-menu): Displays a menu to the user — such as a set of actions or functions — triggered by a button.
- [Editor](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Feditor): A client-loaded code editor with preview, toolbar actions, and fullscreen modes.
- [Empty](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fempty): Use the Empty component to display an empty state.
- [Field](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Ffield): Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
- [Glass](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fglass): SVG highlights and CSS frosted surfaces, progressively enhanced with WebGPU refraction.
- [Hover Card](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fhover-card): For sighted users to preview content available behind a link.
- [HTML Viewer](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fhtml-viewer): An isolated iframe preview for HTML content.
- [Image Viewer](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fimage-viewer): A dialog image viewer with navigation, zoom, rotation, and panning.
- [Inline Copy Text](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Finline-copy-text): Inline code that stays readable and copies its value when activated.
- [Input](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Finput): A text input component for forms and user data entry with built-in styling and accessibility features.
- [Input Group](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Finput-group): Add addons, buttons, and helper content to inputs.
- [Input OTP](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Finput-otp): Individual code inputs with character filtering and asynchronous verification feedback
- [Item](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fitem): A versatile component for displaying content with media, title, description, and actions.
- [Kbd](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fkbd): Used to display textual user input from keyboard.
- [Label](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Flabel): Renders an accessible label associated with controls.
- [Loader](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Floader): Eighteen loading animations with accessible labels, adjustable speed, and reduced motion support.
- [Locale Toggle](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Flocale-toggle): A controlled language button or selector without routing or persistence assumptions.
- [LongText](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Flong-text): Truncated text with a full-text disclosure only when the content overflows.
- [Markdown Viewer](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fmarkdown-viewer): Markdown rendering with tables, task lists, alerts, highlighted code, and sanitized HTML.
- [Marker](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fmarker): Displays an inline status, system note, bordered row, or labeled separator in a conversation.
- [Menubar](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fmenubar): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
- [Message](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fmessage): Displays a message in a conversation, with optional avatar, header, footer, and alignment.
- [Message Scroller](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fmessage-scroller): A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.
- [Native Select](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fnative-select): A styled native HTML select element with consistent design system integration.
- [Navigation Menu](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fnavigation-menu): A collection of links for navigating websites.
- [NavigationProgress](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fnavigation-progress): A controlled navigation loading bar with delayed start and completion feedback.
- [Pagination](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fpagination): Compact data pagination with range information, page navigation, and page-size selection.
- [Popover](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fpopover): Displays rich content in a portal, triggered by a button.
- [Progress](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fprogress): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [QRCode](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fqr-code): A theme-aware QR code with loading feedback and optional reveal animation.
- [Questionnaire](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fquestionnaire): A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.
- [Radio Group](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fradio-group): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
- [Resizable](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fresizable): Accessible resizable panel groups and layouts with keyboard support.
- [Scroll Area](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fscroll-area): Augments native scroll functionality for custom, cross-browser styling.
- [Select](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fselect): Displays a list of options for the user to pick from—triggered by a button.
- [Sensitive Input](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fsensitive-input): A sensitive-value input with a fixed mask, click-to-reveal interaction, and copy feedback.
- [Separator](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fseparator): Visually or semantically separates content.
- [Sheet](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fsheet): Extends the Dialog component to display content that complements the main content of the screen.
- [Sidebar](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fsidebar): A composable, themeable and customizable sidebar component.
- [Skeleton](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fskeleton): Use to show a placeholder while content is loading.
- [Slider](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fslider): An input where the user selects a value from within a given range.
- [Switch](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Fswitch): A control that allows the user to toggle between checked and not checked.
- [TabBar](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Ftab-bar): Controlled application navigation with press-and-slide selection and optional glass material.
- [Table](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Ftable): A responsive table component.
- [Tabs](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Ftabs): A set of layered sections of content—known as tab panels—that are displayed one at a time.
- [Tag Input](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Ftag-input): A multi-value input with custom tags, suggestions, and keyboard-accessible chips.
- [Textarea](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Ftextarea): Displays a form textarea or a component that looks like a textarea.
- [Theme Toggle](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Ftheme-toggle): A controlled light/dark switch with optional view-transition effects.
- [Toast](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Ftoast): A succinct message that is displayed temporarily.
- [Toggle](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Ftoggle): A two-state button that can be either on or off.
- [Toggle Group](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Ftoggle-group): A set of two-state buttons that can be toggled on or off.
- [Toolbar](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Ftoolbar): Groups related commands and controls with arrow-key focus navigation.
- [Tooltip](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=components%2Ftooltip): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

## Blocks

- [DataTable](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=blocks%2Fdata-table): A shared table block with search, filters, column settings, selection, pagination, and drag sorting.
- [Delete Resource](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=blocks%2Fdelete-resource): Resource name confirmation with asynchronous deletion, pending state, and retryable errors.
- [TanStack Form](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=blocks%2Ftanstack-form): Validated report and profile forms composed from SUI fields and TanStack Form.

## Utils

- [Utilities](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=utils): CSS effects for scroll containers and loading text, included in SUI’s shared styles.
- [Scroll fade](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=utils%2Fscroll-fade): Utilities for adding a fade effect to the edges of a scroll container.
- [Shimmer](https://sui.draco.dev/api/llms-markdown?locale=en-US&slug=utils%2Fshimmer): Utilities for adding a shimmer effect to text elements.

## Optional

- [Complete documentation](https://sui.draco.dev/llms-full.txt)