@particle-network/ui-react

✨ 特性

- 🎨 现代设计 - 遵循最新的设计趋势和用户体验原则
- 📦 开箱即用 - 提供丰富的高质量 React 组件
- 🛡 TypeScript - 完整的 TypeScript 类型定义
- 🎯 按需加载 - 支持 Tree Shaking，优化打包体积
- 🎨 主题定制 - 灵活的主题系统，支持深度定制
- 💪 稳定可靠 - 经过生产环境验证的组件

📦 安装

``bash


使用 npm

`tsx
import { UXButton, UXInput, VStack } from '@particle-network/ui-react';

function App() {
return (



点击按钮


);
}
`

$3

本组件库提供了预设的 Tailwind 配置，可以快速集成：

`js
// tailwind.config.js
module.exports = {
presets: [require('@particle-network/ui-react/tailwind-preset')],
// 你的其他配置...
};
`

📚 组件列表

$3

- Box - 基础盒子组件
- Center - 居中布局
- Circle - 圆形容器
- Square - 正方形容器
- Flex - 弹性布局
- HStack - 水平堆叠
- VStack - 垂直堆叠

$3

- UXButton - 按钮
- UXInput - 输入框
- UXNumberInput - 数字输入框
- UXCheckbox - 复选框
- UXRadio - 单选框
- UXSwitch - 开关
- UXSelect - 选择器

$3

- UXModal - 模态框
- UXTooltip - 工具提示
- UXPopover - 弹出框
- UXDropdown - 下拉菜单
- UXHint - 提示信息

$3

- UXTabs - 标签页
- UXChip - 标签
- UXDivider - 分割线
- ProgressWrapper - 进度条
- Text - 文本组件

🎨 主题定制

$3

`tsx
import { UXButton } from '@particle-network/ui-react';

// 使用预设的颜色主题
Primary
Secondary
Success
Warning
Danger
`

$3

通过 CSS 变量自定义主题：

`css
:root {
--ux-primary: #1890ff;
--ux-secondary: #52c41a;
--ux-danger: #ff4d4f;
--ux-warning: #faad14;
--ux-success: #52c41a;
}
`

🔧 高级用法

$3

`tsx
import { VStack, HStack, UXButton, UXInput, UXCheckbox } from '@particle-network/ui-react';

function LoginForm() {
return (

} />
} />

记住我
忘记密码？


登录


);
}
`

🛠 开发

$3

`bash


安装依赖

`
src/
├── components/ # 组件源码
│ ├── layout/ # 布局组件
│ ├── form/ # 表单组件
│ ├── feedback/ # 反馈组件
│ └── display/ # 展示组件
├── utils/ # 工具函数
└── index.ts # 入口文件
``

🤝 贡献

欢迎贡献代码！请查看贡献指南了解更多信息。

📄 许可证

MIT © UniversalX Team

🔗 相关链接

- 文档站点
- GitHub 仓库
- NPM 包
- 更新日志

---