Skyroc UI

一个基于 Radix UI 和 Tailwind CSS 构建的现代化 React UI 组件库，提供 50+ 个高质量组件，具有出色的可访问性和类型安全。

English | 简体中文

✨ 特性

• 🎨 现代化设计 - 精美简洁的设计，支持亮色和暗色主题
• 🧩 50+ 组件 - 全面的高质量 React 组件集合
• 🔧 高度可定制 - 基于 Tailwind CSS 构建，支持主题定制
• 📱 响应式 - 移动优先设计，适配所有设备
• ♿ 无障碍访问 - 基于 Radix UI 构建，遵循 WAI-ARIA 标准
• 🚀 TypeScript - 完整的 TypeScript 支持，优秀的开发体验
• 📋 强大的表单 - 内置表单系统，支持验证和状态管理
• 🎯 Tree Shaking - 支持 tree-shaking，优化打包体积
• 🔄 SSR 就绪 - 完美支持 Next.js 和其他 SSR 框架

📦 安装

# npm
npm install skyroc-ui

# pnpm
pnpm add skyroc-ui

# yarn
yarn add skyroc-ui

Tailwind CSS 配置

安装 Tailwind CSS 插件：

npm install @skyroc/tailwind-plugin

在 tailwind.config.js 中配置：

import { skyroc } from '@skyroc/tailwind-plugin';

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/skyroc-ui/dist/**/*.{js,ts,jsx,tsx}'
  ],
  plugins: [skyroc()]
};

🚀 快速开始

import { Button, Card, Input } from 'skyroc-ui';

const App = () => {
  return (
    <Card>
      <Card.Header>
        <Card.Title>欢迎使用 Skyroc UI</Card.Title>
      </Card.Header>

      <Card.Content className="space-y-4">
        <Input placeholder="请输入内容" />
        <Button>提交</Button>
      </Card.Content>
    </Card>
  );
};

🧩 组件

基础组件

• Button - 多种样式和状态的按钮
• Input - 多种类型的文本输入框
• Card - 卡片容器组件
• Badge - 状态指示器
• Avatar - 用户头像显示
• Chip - 用于标签的紧凑元素
• Icon - 支持 Iconify 的图标组件

布局组件

• Divider - 视觉分隔符
• Breadcrumb - 面包屑导航
• Tabs - 标签页界面
• Collapsible - 可展开的内容面板
• Resizable - 可调整大小的面板布局
• Aspect Ratio - 保持纵横比
• Scroll Area - 自定义滚动区域

表单组件

• Form - 强大的表单系统
• Checkbox - 复选框输入
• Radio - 单选按钮组
• Select - 下拉选择器
• Switch - 切换开关
• Slider - 范围滑块
• Textarea - 多行文本输入
• Input OTP - 一次性密码输入
• Label - 表单标签

反馈组件

• Alert - 警告消息
• Dialog - 模态对话框
• Drawer - 滑出面板
• Sheet - 底部面板
• Popover - 浮动内容
• Tooltip - 上下文提示
• Progress - 进度指示器
• Skeleton - 加载占位符
• Sonner - 消息通知
• Alert Dialog - 确认对话框
• Hover Card - 悬停触发的卡片

导航组件

• Menu - 菜单组件
• Menubar - 菜单栏
• Navigation Menu - 导航菜单
• Context Menu - 右键菜单
• Dropdown Menu - 下拉菜单

数据展示

• Carousel - 图片/内容轮播
• Command - 命令面板
• Accordion - 可折叠部分
• Keyboard Key - 键盘快捷键显示

工具组件

• ConfigProvider - 全局配置
• If - 条件渲染助手
• Toggle - 切换按钮
• Toggle Group - 切换按钮组
• Segment - 分段控制器

📖 文档

详细文档和在线示例，请访问：

• 文档: https://github.com/Ohh-889/skyroc-ui
• GitHub: https://github.com/Ohh-889/skyroc-ui

🛠️ 开发

# 安装依赖
pnpm install

# 启动开发
pnpm dev

# 构建库
pnpm build

# 运行代码检查
pnpm lint

🤝 贡献

欢迎贡献！请随时提交 Pull Request。

1. Fork 本仓库
2. 创建您的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交您的更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启一个 Pull Request

📄 许可证

本项目基于 MIT 许可证 - 查看 LICENSE 文件了解详情。

🙏 致谢

• Radix UI - 提供了优秀的无头组件
• Tailwind CSS - 提供了强大的样式系统
• shadcn/ui - 设计灵感来源
• Lucide React - 提供了精美的图标

📞 联系方式

• 作者: Ohh
• 邮箱: [email protected]
• GitHub: @Ohh-889

用 ❤️ 制作，作者 Ohh

如果这个项目对你有帮助，请给它一个 ⭐️！