Solids UI Kit

一个现代化的 Solid.js UI 组件库，基于 Tailwind CSS 构建。

特性

• 🚀 基于 Solid.js 构建，性能卓越
• 🎨 使用 Tailwind CSS v4，样式现代化
• 📦 TypeScript 支持，类型安全
• 🌙 支持深色模式
• 📱 响应式设计
• 🎯 Element UI 设计风格

安装

npm install solids-ui-kit
# 或
pnpm add solids-ui-kit
# 或
yarn add solids-ui-kit

使用

基础使用

import { Button } from 'solids-ui-kit';
import 'solids-ui-kit/styles';

function App() {
  return (
    <div>
      <Button variant="primary">点击我</Button>
    </div>
  );
}

按钮组件

import { Button } from 'solids-ui-kit';

// 不同变体
<Button variant="primary">主要按钮</Button>
<Button variant="success">成功按钮</Button>
<Button variant="warning">警告按钮</Button>
<Button variant="danger">危险按钮</Button>

// 不同样式类型
<Button styleType="solid">实心按钮</Button>
<Button styleType="outline">边框按钮</Button>
<Button styleType="ghost">幽灵按钮</Button>
<Button styleType="plain">朴素按钮</Button>

// 不同尺寸
<Button size="sm">小按钮</Button>
<Button size="md">中按钮</Button>
<Button size="lg">大按钮</Button>

// 形状变体
<Button round>圆角按钮</Button>
<Button circle icon={<span>♥</span>} />

// 带图标
<Button icon={<span>📁</span>}>打开文件</Button>

// 状态
<Button disabled>禁用状态</Button>
<Button loading>加载中...</Button>

API 文档

Button Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | variant | 'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' | 'default' | 按钮变体 | | styleType | 'solid' \| 'outline' \| 'ghost' \| 'plain' | 'outline' | 样式类型 | | size | 'sm' \| 'md' \| 'lg' | 'md' | 按钮尺寸 | | round | boolean | false | 圆角按钮 | | circle | boolean | false | 圆形按钮 | | loading | boolean | false | 加载状态 | | disabled | boolean | false | 禁用状态 | | icon | JSX.Element | - | 图标元素 |

开发

# 克隆项目
git clone https://github.com/wllcyg/solids.git

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建库
pnpm build:lib

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！