SKYROC UI · COMPONENT SYSTEM
组件不是终点是产品界面的起点
54 个可组合 React 组件，覆盖输入、展示、弹层、导航与反馈。每个组件都连接真实 Demo、完整类型与使用边界，让团队从选型到交付保持同一套语言。
54Components
8Categories
Radix UIFoundation
COMPONENT MAP
按界面任务找到正确组件
先按界面意图缩小范围，再进入组件页查看交互 Demo、关键用法和完整 API。
通用
基础操作、图标、键盘提示与内容分隔。
ButtonIconKeyboardKeyLayoutDivider
输入
覆盖文本、选择、校验与复杂表单输入。
InputSelectCheckboxRadioFormSlider
数据展示
让内容、状态与复杂数据更易于扫描。
CardBadgeTagAvatarTreeProgress
弹层覆盖
承载模态任务、浮层信息与快捷操作。
DialogDrawerPopoverTooltipCommand
导航
组织页面层级、位置与连续任务路径。
TabsSegmentBreadcrumbPaginationMenubar
布局容器
处理折叠、缩放、滚动与内容比例。
AccordionCollapsibleResizableScrollArea
反馈
为状态变化提供明确且一致的反馈。
AlertToggleToggleGroup
底层原语
供复杂组件复用的几何与行为基础。
Arrow
LIVE COMPOSITION
把组件放进真实界面里理解
文档中的组件不是静态截图。输入、切换、选择与状态反馈都能直接操作，先体验，再读 API。
Form
Data
Feedback
用户设置
深色模式
消息通知
字体大小
68%
通知中心
3
张
张三 提交了新的 Pull Request
2 分钟前PR
李
李四 评论了你的代码审查
15 分钟前评论
王
王五 完成了部署任务
1 小时前部署
项目统计
组件覆盖率92%
测试通过率87%
文档完善度64%
选项卡
当前面板：概览
控件 & 标签
React 19
稳定版
Beta
新功能
废弃
颜色主题
Primary
Success
Warning
Info
DOCUMENTATION PATHS
从第一个组件走向完整界面
组件 API 解决“怎么用”，体系文档继续回答“为什么这样选”和“如何在业务里组合”。