N6 组件库
88 个组件
基础
SinglePaneLayout
单栏内容页的横向画布
TwoPaneLayout
页面级列表与详情
动作与选择
Button
执行一个明确动作
HeaderIconButton
标题栏里的图标动作
DialogFooterButtonGroup
弹窗底部的双 / 多动作按钮栅格
ActionMenu
标准动作菜单
Select
固定候选集单值选择
SearchSelect
可搜索的单选 / 多选,含远程搜索
CommandDialog
居中遮罩的搜索面板
Cascader
有上下级的数据逐级选择某一层节点
SegmentedControl
少量互斥视图或模式切换
RadioCardGroup
带标题与说明的互斥单选卡片
TabBar
全局或模块级导航栏
Tabs
带内容面板的章节导航
ToolBar
一排并列的图标或文字操作
SplitButton
主操作加一个展开其它选项的按钮
InlineTextAction
夹在文字里的轻量文字操作
DropdownMenu
底层下拉菜单
ContextMenu
右键菜单
SortableTabs
可拖动排序的标签页
标题与内容
HeaderBar
标准标题栏与操作槽
ContentSection
内容板块及其标题和折叠
DetailSurfaceStack
详情正文的标准纵向节奏
ListCard
具有稳定槽位的列表卡片
ListRow
主次操作独立的列表行
SettingGroup
一组设置项及值或操作
ListBanner
嵌在页面或列表中的轻量引导
Tag
分类、属性与可移除的标签 / 筛选 chip
TruncatedText
静态纯文本的 1–3 行截断与全文入口
Table
多列结构化数据的对比阅读
VirtualList
长列表虚拟化(平铺 / 分组 / 网格)
ScrollFade
局部滚动区边缘的「还有更多」渐隐
Divider
分隔两块内容的细线
Pagination
表格或列表的翻页
Accordion
可展开收起的一组段落
DefinitionList
一组「名称:值」的只读信息
ListGroupHeading
列表里一组条目的组标题
CarouselIndicator
轮播的分页圆点
MarkdownContent
渲染 Markdown 正文
DetailBodySection
详情正文里的一段
BannerShell
横幅外壳
字段与表单
FormSectionTitle
表单分组的小标题与就近提示
Input
单行文本输入及尾部槽位
Textarea
多行文本输入
Switch
立即生效的开 / 关设置
Form 组件族
字段、帮助、错误及提交的可访问关联
Checkbox
多选与单个勾选确认
DatePicker
选一个日期
TimePicker
选一个时刻(时:分)
OtpInput
逐格输入验证码
SearchInput
带搜索图标和清除的单行搜索框
TitleInput
直接在标题位置改名字
TagEditor
输入并管理一组标签
FormTagEditor
表单里的标签编辑字段
弹层与提示
SplitViewDialog
从别处临时打开、做完回原处的两栏任务
UniversalDialog
独立且边界清楚的任务
ConfirmDialog
需要用户停下来明确决策
DialogFlow
同一弹窗内推进多步内容
PanelLeft / PanelRight
保留主体页面上下文
SheetPanel
底部锚定的非模态辅助面板
OnboardingDialog
介绍功能的一组引导内容
UniversalTooltip
轻量文字提示
OverlayTriggerTooltip
菜单触发器的提示协调
Popover
触发控件附近的补充内容
HoverCard
只读信息预览
InlineHintTooltipTrigger
名称旁的问号,悬停出补充说明
Tooltip弃用
底层提示(Radix)
状态与反馈
RemoteContent
远端数据的加载、空、失败与旧数据保留
ContentErrorBoundary
渲染出错时只坏一条消息或一个面板
TryAgain
区块内的失败说明与重试入口
Loader(DotLoader / LoadingIndicator)
结构或数量未知的等待态
LoadingDots
文案末尾的轻量等待
Skeleton
已知结构的加载占位
Empty
确认成功后的空数据或无结果
Message
保存、发送、关注等操作结果的全局反馈
ProgressRing
环形进度:确定或不定
AppStateScreen
整屏的加载、空与出错
身份与媒体
Avatar 组件族
动态身份头像及本地失败回退
ImageSlot
固定尺寸的图片位,带加载与失败兜底
业务组件
Agent 对话块
Agent 对话里的卡片、人物行、按钮与轨迹行
ChatMessageBubble
对话里的一条消息气泡
ChatInput
对话底部的输入框与发送
DraggableChat
可拖动的迷你对话窗
AgentActivityGlow
Agent 正在工作时的边缘光效
SchoolAndCompany
一行显示人物的学校与公司
HalftonePortrait
网点风格的人物肖像
FloatingAssistCard
贴在页面角落的浮动辅助卡
LinkedSummaryCard
带跳转的摘要卡