内容
# @florexlabs/ui
[](https://www.npmjs.com/package/@florexlabs/ui)
[](https://github.com/florextech/florex-ui/blob/main/LICENSE)
[](https://florextech.github.io/florex-ui/)
基于 **Tailwind CSS v4**、**TypeScript** 和 **CVA** 构建的首选暗色 React 组件库。包含 46+ 个可访问、可组合的组件，适用于现代 Web 应用程序。
## 特性
- 🌙 **首选暗色** — 为暗色界面设计，搭配绿色/青柠色品牌强调色
- 🧩 **46+ 组件** — 表单、数据展示、反馈、导航、覆盖层、布局
- 🎨 **设计令牌** — 颜色、间距、半径、阴影的 CSS 变量
- ♿ **可访问性** — 语义化 HTML、ARIA 属性、键盘导航
- 📦 **可树状摇动** — ESM + CJS，按需导入
- 🎯 **TypeScript** — 导出类型，提供完整类型安全
- 💚 **Phosphor Icons** — 可选集成 [Phosphor Icons](https://phosphoricons.com/)
## 安装
```bash
pnpm add @florexlabs/ui
# peer dependencies
pnpm add react react-dom tailwindcss
# icons (optional, recommended)
pnpm add @phosphor-icons/react
```
## 快速开始
```tsx
// 1. 在应用程序入口导入 CSS 令牌
import "@florexlabs/ui/florex.css";
// 2. 使用组件
import { Button, Card, Badge, Input } from "@florexlabs/ui";
function App() {
return (
<Card variant="hover">
<Input placeholder="Enter your email" />
<Button variant="primary">Subscribe</Button>
<Badge tone="brand">New</Badge>
</Card>
);
}
```
## 组件
### 表单
`Button` · `IconButton` · `Input` · `Textarea` · `Select` · `Checkbox` · `Radio` · `Switch` · `Label` · `FormMessage`
### 数据展示
`Card` · `Badge` · `Tag` · `Avatar` · `Table` · `Code` · `CodeBlock` · `Kbd` · `Status` · `Stat` · `DataList`
### 排版
`Heading` · `Text` · `Blockquote` · `Highlight` · `List`
### 反馈
`Alert` · `EmptyState` · `Spinner` · `Skeleton` · `Progress`
### 导航
`Tabs` · `Accordion` · `Breadcrumb` · `Pagination` · `Steps` · `Menu`
### 覆盖层
`Modal` · `Drawer` · `Popover` · `Tooltip`
### 布局
`Container` · `Section` · `Navbar` · `Stack` · `Divider` · `Timeline` · `TreeView`
### 实用工具
`VisuallyHidden` · `cn()`
## 图标
我们推荐 [Phosphor Icons](https://phosphoricons.com/) — 包含 9,000+ 个图标，6 种重量，可与 Florex 设计系统匹配。
```tsx
import { Plus, Gear, Warning } from "@phosphor-icons/react";
import { Button, IconButton, Alert } from "@florexlabs/ui";
<Button><Plus size={16} weight="bold" /> 创建</Button>
<IconButton icon={<Gear size={18} />} aria-label="设置" variant="ghost" />
<Alert variant="warning" icon={<Warning size={18} />}>检查配置</Alert>
```
诸如 Pagination、Accordion、Breadcrumb 和 Tag 之类的组件在安装后会自动使用 Phosphor 图标，否则会使用文本作为备用。
## 设计令牌
所有令牌均可通过 `florex.css` 以 CSS 自定义属性的形式使用：
```css
/* 颜色 */
--bg · --surface · --surface-muted · --foreground · --muted · --border
--brand-900 · --brand-700 · --brand-600 · --brand-500 · --brand-300
--danger · --warning · --success
/* 半径 */
--radius-sm · --radius-md · --radius-lg · --radius-xl · --radius-full
/* 阴影 */
--shadow-card · --shadow-glow
/* 排版 */
--font-montserrat · --font-poppins
```
令牌也以 TypeScript 对象形式提供：
```ts
import { colors, spacing, radius, shadows } from "@florexlabs/ui";
```
## 文档
- **[Storybook](https://florextech.github.io/florex-ui/)** — 组件实时演示
- **[docs/](./docs)** — MDX 文档，包含道具表格和示例
## 开发
```bash
pnpm install
pnpm dev # 监听模式
pnpm test # 运行测试（153 个测试）
pnpm storybook # 组件演示
pnpm lint # eslint + tailwind 规范检查
pnpm build # 生产环境构建
```
## 许可证
[MIT](./LICENSE) © [Florex Labs](https://florexlabs.com)
MCP 市场