# SUI

> SUI 是基于 Base UI 和 Tailwind CSS 构建的可组合 React 组件库。本文档包含工作区中的完整示例源码

## 开始使用

- [CLI](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=cli): 使用 shadcn 搜索、查看、安装和更新 SUI 源码
- [LLMs](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=llms-txt): 以纯文本读取 SUI 文档和完整示例
- [MCP](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=mcp): 将 AI 助手连接到 SUI registry
- [Registry](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=registry): 了解 SUI 条目、共享样式和 GitHub 分发方式
- [主题](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=theming): 语义颜色、明暗表面与可复用配色
- [兼容性](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=compatibility): 应用职责、SSR、Worker 加载和浏览器能力
- [安装](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=installation): 通过 shadcn registry 安装 SUI 源码
- [简介](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=): 从一个组件开始，构建属于你的界面
- [设计规范](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=design-guidelines): 完整的排版、间距、表面与交互设计规则，包含每条规则的推荐和避免对照

## 组件

- [组件](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components): 按英文名称字母顺序浏览全部 67 个 SUI 组件
- [Accordion](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Faccordion): 一组垂直堆叠的交互式标题，每个标题显示一部分内容
- [Alert](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Falert): 显示标注以引起用户注意
- [Alert Dialog](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Falert-dialog): 模式对话框，用重要内容打断用户并期望得到响应
- [Aspect Ratio](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Faspect-ratio): 以所需的比例显示内容
- [Attachment](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fattachment): 显示带有媒体、元数据、上传状态和操作的文件或图像附件
- [Autocomplete](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fautocomplete): 根据输入提供匹配建议，同时允许用户输入自定义文本
- [Avatar](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Favatar): 具有代表用户的备用图像元素
- [Badge](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fbadge): 显示徽章或看起来像徽章的组件
- [Breadcrumb](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fbreadcrumb): 使用链接层次结构显示当前资源的路径
- [Bubble](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fbubble): 在消息气泡中显示对话内容。支持变体、对齐、分组、回应和可折叠内容
- [Button](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fbutton): 显示按钮或看起来像按钮的组件
- [Button Group](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fbutton-group): 将相关按钮分组在一起并具有一致样式的容器
- [Calendar](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fcalendar): 允许用户选择日期或日期范围的日历组件
- [Card](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fcard): 显示带有页眉、内容和页脚的卡片
- [Carousel](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fcarousel): 使用 Embla 构建的具有运动和滑动功能的轮播
- [Chart](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fchart): 漂亮的图表。使用 Recharts 构建。复制并粘贴到您的应用程序中
- [Checkbox](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fcheckbox): 允许用户在选中和不选中之间切换的控件
- [Clipboard Text](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fclipboard-text): 可选择的文本字段，配备独立复制按钮和异步反馈
- [Code Viewer](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fcode-viewer): 支持语法高亮、折叠、行高亮、复制和流式反馈的代码查看器
- [Collapsible](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fcollapsible): 展开/折叠面板的交互式组件
- [ColorPicker](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fcolor-picker): 通过饱和度区域、色相和透明度滑条、颜色值与预设色板选择颜色
- [Combobox](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fcombobox): 自动完成输入并包含建议列表
- [Command](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fcommand): 用于搜索和快速操作的命令菜单
- [Context Menu](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fcontext-menu): 显示右键单击触发的操作菜单
- [Dialog](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fdialog): 覆盖在主窗口或另一个对话框窗口上的窗口，使下面的内容呈现inert 状态
- [Diff Viewer](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fdiff-viewer): 支持并排与合并视图的逐行代码差异查看器
- [Direction](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fdirection): 为您的应用程序设置文本方向的提供程序组件
- [Drawer](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fdrawer): React 的抽屉组件
- [Dropdown Menu](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fdropdown-menu): 向用户显示由按钮触发的菜单，例如一组操作或功能
- [Editor](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Feditor): 按需加载的代码编辑器，支持内容预览、工具栏操作与全屏模式
- [Empty](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fempty): 使用 Empty 组件显示空状态
- [Field](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Ffield): 组合标签、控件和帮助文本以组成可访问的表单字段和分组输入
- [Glass](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fglass): 以 SVG 高光和 CSS 磨砂为基础，按能力通过 WebGPU 增强真实折射
- [Hover Card](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fhover-card): 供视力正常的用户预览链接后面可用的内容
- [HTML Viewer](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fhtml-viewer): 使用独立 iframe 展示 HTML 内容的查看器
- [Image Viewer](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fimage-viewer): 支持切换、缩放、旋转和平移的图片查看对话框
- [Inline Copy Text](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Finline-copy-text): 可读的行内代码，点击或键盘激活后复制其值
- [Input](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Finput): 用于表单和用户数据输入的文本输入组件，具有内置样式和辅助功能
- [Input Group](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Finput-group): 为输入框添加附加内容、按钮和辅助信息
- [Input OTP](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Finput-otp): 支持字符过滤与异步验证反馈的独立验证码输入框
- [Item](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fitem): 一个多功能组件，用于显示带有媒体、标题、描述和操作的内容
- [Kbd](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fkbd): 用于显示来自键盘的文本用户输入
- [Label](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Flabel): 呈现与控件关联的可访问标签
- [Loader](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Floader): 十八种加载动效，支持可访问文案、自定义速度及减少动态效果设置
- [Locale Toggle](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Flocale-toggle): 受控语言切换按钮或选择器，不预设路由与持久化方式
- [LongText](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Flong-text): 文本溢出时截断，并支持查看完整内容。
- [Markdown Viewer](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fmarkdown-viewer): 支持表格、任务列表、提示块、代码高亮和 HTML 清理的 Markdown 查看器
- [Marker](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fmarker): 显示对话中的内联状态、系统注释、边框行或带标签的分隔符
- [Menubar](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fmenubar): 桌面应用程序中常见的视觉持久菜单，可提供对一组一致命令的快速访问
- [Message](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fmessage): 显示对话中的消息，带有可选的头像、页眉、页脚和对齐方式
- [Message Scroller](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fmessage-scroller): 聊天滚动容器：锚定对话轮次、恢复已保存的记录、跟随流式回复、稳定加载历史消息，并跳转至指定消息
- [Native Select](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fnative-select): 具有一致设计系统集成的样式化原生 HTML 选择元素
- [Navigation Menu](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fnavigation-menu): 用于导航网站的链接的集合
- [NavigationProgress](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fnavigation-progress): 通过受控状态显示延迟出现、完成收尾的页面加载进度条。
- [Pagination](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fpagination): 紧凑的数据分页，支持范围摘要、页码导航和每页条数选择
- [Popover](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fpopover): 通过按钮触发，在Portal 容器中显示富内容
- [Progress](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fprogress): 显示任务完成进度的指示器，通常显示为进度条
- [QRCode](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fqr-code): 支持主题适配、加载反馈和可选揭示动画的二维码组件
- [Questionnaire](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fquestionnaire): 多步骤调查问卷，包括单项选择、多项选择、自由形式和可跳过的问题
- [Radio Group](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fradio-group): 一组可检查按钮（称为单选按钮），一次只能检查一个按钮
- [Resizable](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fresizable): 通过键盘支持可访问可调整大小的面板组和布局
- [Scroll Area](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fscroll-area): 增强了自定义跨浏览器样式的原生滚动功能
- [Select](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fselect): 显示选项列表供用户选择（由按钮触发）
- [Sensitive Input](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fsensitive-input): 使用固定遮罩的敏感内容输入框，支持点击揭示、键盘操作与复制反馈
- [Separator](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fseparator): 在视觉上或语义上分隔内容
- [Sheet](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fsheet): 扩展 Dialog 组件以显示补充屏幕主要内容的内容
- [Sidebar](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fsidebar): 一个可组合、可主题化和可定制的侧边栏组件
- [Skeleton](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fskeleton): 用于在加载内容时显示占位符
- [Slider](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fslider): 用户从给定范围内选择一个值的输入
- [Switch](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Fswitch): 允许用户在选中和不选中之间切换的控件
- [TabBar](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Ftab-bar): 支持受控应用导航、长按滑动选择和可选玻璃材质的 TabBar
- [Table](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Ftable): 响应式表格组件
- [Tabs](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Ftabs): 一组分层的内容部分（称为选项卡面板），一次显示一个
- [Tag Input](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Ftag-input): 多值标签输入框，支持自由输入、建议选项与键盘操作
- [Textarea](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Ftextarea): 显示表单文本区域或看起来像文本区域的组件
- [Theme Toggle](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Ftheme-toggle): 支持可选视图过渡效果的受控明暗主题切换按钮
- [Toast](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Ftoast): 暂时显示的简洁消息
- [Toggle](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Ftoggle): 可以打开或关闭的两种状态按钮
- [Toggle Group](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Ftoggle-group): 一组可以打开或关闭的两种状态按钮
- [Toolbar](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Ftoolbar): 将相关操作与控件组合在一起，并提供方向键焦点导航
- [Tooltip](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=components%2Ftooltip): 当元素接收键盘焦点或鼠标悬停在其上时显示与该元素相关的信息的弹出窗口

## Blocks

- [DataTable](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=blocks%2Fdata-table): 支持搜索、筛选、列设置、选择、分页和拖拽排序的共享表格组合。
- [Delete Resource](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=blocks%2Fdelete-resource): 通过资源名称确认删除，支持异步状态和失败重试
- [TanStack Form](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=blocks%2Ftanstack-form): 使用 SUI 字段和 TanStack Form 组合的报告与资料表单。

## 工具

- [工具类](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=utils): SUI 共享样式中的滚动边缘渐隐与文字微光效果
- [Scroll fade](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=utils%2Fscroll-fade): 为滚动容器的边缘添加随滚动位置变化的渐隐效果
- [Shimmer](https://sui.draco.dev/api/llms-markdown?locale=zh-CN&slug=utils%2Fshimmer): 为文字添加沿阅读方向移动的微光效果

## Optional

- [完整文档](https://sui.draco.dev/zh-CN/llms-full.txt)