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！