Inspira UI 不写一行 CSS 也能打造超好看界面

开源 作者：云助手 2025-05-03 18:23:31 阅读：36

Inspira UI 是一个基于 Vue 3 + UnoCSS 打造的 UI 组件库，它主打“轻量级”、“高定制”和“原子化”三大特性。由前端爱好者 unovue 发起，适合追求极致灵活性与现代开发体验的前端开发者。

 整个项目采用 monorepo 架构，结构清晰，开发体验一级棒。不依赖任何臃肿的 UI 框架，搭配 UnoCSS 原子类，组件风格随便你调，想怎么搭怎么搭！

项目特点

别看它现在组件还不多，但设计思路非常超前，下面这些亮点值得你关注：

• • Vue 3 + Vite 加持：开发体验就是一个字，爽！
• • 完全基于 UnoCSS：告别臃肿 CSS class，享受原子化的快乐。
• • 模块化组件：按需引入，极致轻量。
• • Playground 自带组件测试环境：边写边预览，开发效率翻倍。
• • 自定义主题轻而易举：颜色、圆角、字体统统都能改，打造你的专属 Design System。

技术架构

Inspira UI 的内部结构也很清晰，采用了前端界最时髦的组合：

• • 框架：Vue 3（Composition API）
• • 样式系统：UnoCSS（没用 Tailwind，但用法类似）
• • 构建工具：Vite（极致快速）
• • 包管理器：pnpm（速度快到飞起）
• • 类型系统：TypeScript（不支持它都不好意思说自己是组件库）

项目目录一览：

• • packages/components/：核心组件源代码
• • packages/theme/：可定制主题配置（是的，变量你自己调）
• • playground/：本地开发测试环境
• • docs/：未来将用于构建在线文档站（目前暂无内容）

已有组件

目前组件数量还处于成长初期，已包含以下常用组件：

• • Button 按钮（点它会开心）
• • Input 输入框（敲代码之前先敲字）
• • Icon 图标（UnoCSS 图标系统集成）
• • Modal 模态框（弹窗选手登场）
• • Tooltip 提示框（贴心小提示）

未来计划支持 Table、Tabs、Form 等更多高级组件，值得期待！

快速上手

只需 3 步，你就可以玩起来了：

# 1. 克隆项目
git clone https://github.com/unovue/inspira-ui.git
cd inspira-ui

# 2. 安装依赖
pnpm install

# 3. 启动 Playground
pnpm dev

然后就可以尽情修改组件，看效果啦！

自定义你的 Design System

不想用别人的配色和圆角？Inspira UI 专门为你准备了 tokens 文件，在里面修改变量即可。

// packages/theme/tokens.ts
export const tokens = {
  colorPrimary: '#10b981', // 改成你喜欢的绿色吧
  borderRadius: '12px',     // 圆润一点
  fontFamily: 'Inter, sans-serif',
}

修改完自动生效，无需重复编译，开发体验超丝滑。

适合人群

• • 想做自己的 UI 库，但不想从头造轮子的前端小伙伴
• • Vue 3 + Vite 项目使用者，追求灵活轻便的组件方案
• • 不喜欢太“企业味”UI，希望打造美而独立界面的创意型开发者

源码地址

https://github.com/unovue/inspira-ui

小结一下

Inspira UI 是一个正在快速成长的 Vue 组件库，它灵活、现代、极具个性，非常适合用来打造个性化项目或者作为团队内部 UI 基础设施。虽然目前组件还不多，但设计理念先进，潜力无限。

如果你喜欢 UnoCSS 的开发体验，又在用 Vue 3，不妨 clone 一下这个项目试试！