简介
Skyroc UI — 基于 Radix UI 与 Tailwind CSS 的现代 React 组件库
@skyroc/web-ui 是一套面向现代 React 应用的组件库，基于 Radix UI 无障碍原语与 Tailwind CSS 构建，提供 50+ 开箱即用的高质量组件。
核心特性
- 可组合 — 从简单原语构建复杂 UI，支持 Slot 模式和
asChild渲染委托，每个组件都可以灵活组合。 - 主题系统 — 通过
ConfigProvider全局预设尺寸、颜色、变体，一行代码切换整套风格。 - 无障碍 — 底层基于 Radix UI 原语，完整 WAI-ARIA 支持，开箱即用的键盘导航与焦点管理。
- 高性能 — Tree-shaking 友好，零运行时开销。只打包你使用的组件，极致的包体积优化。
- TypeScript — 100% TypeScript 编写，完备的类型推导与 IDE 提示。
- 统一尺寸 — 全部组件支持
xs到2xl共 6 级尺寸，保持视觉一致性。
快速开始
安装
pnpm add @skyroc/web-ui基本使用
import { Button } from '@skyroc/web-ui';
const App = () => {
return <Button color="primary">点击我</Button>;
};更完整的环境配置请参考 快速开始，主题与全局配置请参考 主题系统。
体系文档
如果你正在为一个完整应用接入 Skyroc UI，建议先阅读这些体系化文档，再进入单个组件 API。
设计系统
颜色语义、尺寸体系、设计令牌与暗色模式
使用指南
表单、弹层、导航和反馈组件的组合原则
场景示例
官网首页、注册登录、内容列表和订阅表单
迁移与约定
从 shadcn 或自定义 Tailwind 组件迁移时的边界
组件总览
输入控件
表单元素与用户输入。
数据展示
内容呈现与数据可视化。
弹层与反馈
模态框、弹出层与提示。
导航
菜单、选项卡与路由导航。
布局
页面结构与空间组织。
切换与菜单
开关控件与上下文菜单。