Lu Design

✨ 特性

• 🎨 高端视觉 - 深海蓝 + 珊瑚橙配色，玻璃拟态 + 多层阴影，现代感十足
• 📚 完整组件 - Button、Table、Input、Modal、Badge 等企业级组件
• 🎯 TypeScript - 严格类型定义，开发体验一流
• 🎡 流畅动画 - 基于 Framer Motion，微交互细节拉满
• 🌙 暗黑模式 - 内置 Light/Dark 模式切换
• 📦 按需引入 - 支持 Tree Shaking，打包体积最小化

🚀 快速开始

安装

npm install lu-design
# 或
pnpm add lu-design
# 或
yarn add lu-design

使用

import { Button, Table, Input } from 'lu-design';
import 'lu-design/dist/style.css';

function App() {
  return (
    <div>
      <Button variant="primary">开始使用</Button>
      <Input placeholder="输入内容" allowClear />
    </div>
  );
}

🎨 设计理念

Lucid - 清晰

• 高对比度的色彩体系，确保信息层级清晰
• 舒适的行高与留白，营造空气感
• 一致的交互反馈，降低认知成本

Unique - 独特

• 深海蓝 (#2B5CFF) + 珊瑚橙 (#FF7A59) 的高端配色
• 玻璃拟态 + 多层阴影的现代视觉
• 流畅的动画与微交互设计

📚 文档

访问 Lu Design 官网 查看完整文档。

🛠️ 技术栈

• React 19
• TypeScript 5.9
• Vite 7
• Tailwind CSS v4
• Framer Motion 12
• Lucide React

📝 开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 代码检查
npm run lint

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License