@luxeanor/uiVue 3 组件库

4 配色家族 × 浅深双档 · 零第三方 UI 依赖 · SSR 安全

一套代码，八副面孔amethyst 紫 / obsidian 金 / ink 蓝 / emerald 绿四个配色家族 × 浅深双档，html 上两个属性即完成切换。主题定制 →19 组件 + 9 composables按钮到表格、浮层到反馈全覆盖；useTheme / usePopover / useOverlay 等积木随取随用。逛组件 →SSR 安全是纪律浏览器 API 只出现在 onMounted / 事件里；浮层 Teleport + mounted 守卫，Nuxt / VitePress 直接用。SSR 说明 →~30 kB，零 UI 依赖唯一运行时依赖是定位引擎 @floating-ui/dom。ESM + 完整 d.ts + 三层可选 CSS。安装 →首屏不闪的换肤themeBootScript 在 CSS 解析前落属性；auto 档实时跟随系统深浅色；localStorage 持久化。防闪烁 →令牌驱动组件样式只消费 var(--lx-*)；TS 侧 tokens 对象与 CSS 逐字同步（有测试钉死），画布图表也能取到色。设计令牌 →

组件速览 · 全部活的，点点看

Button

Badge / Avatar

v0.2.0已发布Beta张小李

Input / Select

选个类型

Tabs

Toast / Confirm

Tooltip / Dropdown

三十秒装好

pnpmnpm

bash

pnpm add @luxeanor/ui

bash

npm i @luxeanor/ui

ts

// main.ts
import '@luxeanor/ui/styles/tokens.css'
import '@luxeanor/ui/style.css'

html

<html data-theme="amethyst" data-mode="light">

然后就可以 import { LxButton } from '@luxeanor/ui' 了 → 快速上手