中文版
AuraUI(GitHub:https://github.com/981029l/-Aura ,2026-10-24 创建,MIT 协议)是一个专为 Vue 3 打造的动效组件库,作者来自 LINUX DO 社区。在线演示站:https://auraui.lvky.cn ,可以直接打开看效果。
核心思路:代码即用
它学的是 shadcn/ui 的哲学——不发黑盒 npm 包,每个组件就是一个独立的 .vue 单文件,看中哪个就把源码复制进自己项目,代码完全归你掌控,想改随便改。组件的动画逻辑自包含在文件内或走 Tailwind 工具类,不用大改现有的 tailwind 配置,拷过去立刻生效。
规模:232 个组件 + 109 个区块
- 232 款原子动效组件,分八大类:AI 原生交互(智能体状态、思维树、注意力热力图、工具调用卡片这类为 AI 产品准备的界面件)占 24 款,流光与立体卡片 20 款,空间与 3D 纵深 16 款,动态背景与纹理 14 款,文字与动态排版 26 款,触觉反馈按钮 14 款,交互与导航 40 款,表单与高阶输入 6 款
- 109 款场景业务区块,是能整页或整块直接搬走的组合模板,覆盖首屏营销、特性矩阵、定价方案、客户评价、AI 控制台、SaaS 数据大盘、认证引导、页脚 CTA 八个常见场景
其他特点
- 明暗双模是原生设计的:浅色走纯白极简,深色走流光科技风,不是简单反色
- 动效基于 Canvas 2D、SVG 与 CSS 3D 做硬件加速,目标是大量粒子、流体效果下依然保持 60 FPS
- TypeScript 类型完备,Props、Emits、插槽都有明确定义
- 展示站自带 Cloudflare(wrangler 配置)和 Nginx 两种部署方式的现成配置
上手方式
先装几个基础依赖(@vueuse/core、clsx、tailwind-merge、lucide-vue-next),在项目里加一个 cn 样式合并小工具,然后从仓库里挑组件文件复制进 src/components/ui/ 就能用。
一句提醒
仓库刚开源不到一周,属于非常早期的项目:组件数量看着很唬人,但成熟度和长期维护还有待观察。建议先在演示站上挑几个自己真正需要的组件小范围试用,合适再成规模引入。
English Version
AuraUI (GitHub: https://github.com/981029l/-Aura , created 2026-10-24, MIT license) is an animated component library built specifically for Vue 3, by an author from the LINUX DO community. A live demo site is available at https://auraui.lvky.cn .
The core idea: copy and paste
It follows the shadcn/ui philosophy — no black-box npm package. Every component is a standalone .vue single file; find one you like, copy its source into your project, and the code is entirely yours to change. Animation logic is self-contained in each file or expressed with Tailwind utilities, so components work without major surgery to your existing Tailwind config.
Scale: 232 components + 109 blocks
- 232 atomic animated components across eight categories: an AI-native interaction suite (agent status, reasoning trees, attention heatmaps, tool-call cards — UI pieces made for AI products) with 24, glowing and 3D cards with 20, spatial and 3D depth with 16, dynamic backgrounds and textures with 14, typography and kinetic type with 26, haptic-feedback buttons with 14, interaction and navigation with 40, and advanced form inputs with 6
- 109 scene blocks: ready-made composite templates you can lift as a whole page or section, covering marketing heroes, feature matrices, pricing, testimonials, AI consoles, SaaS dashboards, auth/onboarding flows, and footer CTAs
Other notes
- Light and dark modes are designed natively — minimal white in light mode, glowing tech in dark mode — not a simple color inversion
- Motion is hardware-accelerated with Canvas 2D, SVG, and CSS 3D, aiming to hold 60 FPS even with heavy particle and fluid effects
- Complete TypeScript typing for props, emits, and slots
- The showcase site ships with ready deployment configs for both Cloudflare (wrangler) and Nginx
Getting started
Install a few base dependencies (@vueuse/core, clsx, tailwind-merge, lucide-vue-next), add a small cn class-merge utility to your project, then copy the component files you want into src/components/ui/ and use them.
One caveat
The repository has been public for less than a week, so this is a very early project: the component count is impressive, but maturity and long-term maintenance remain to be proven. Try a few components you actually need from the demo site first, and adopt it at scale only if they hold up.

评论(0)
暂无评论