@luxeanor/uiVue 3 Component Library
4 color families × light/dark modes · Zero third-party UI dependencies · SSR-safe
Skip to content
One codebase, eight looksamethyst / obsidian / ink / emerald families × light & dark modes — switched by two attributes on html.Theming →19 components + 9 composablesButtons to tables, overlays to feedback; useTheme / usePopover / useOverlay ready to compose.Browse components →SSR safety as a disciplineBrowser APIs only in onMounted / handlers; overlays use Teleport + mounted guards. Works in Nuxt / VitePress out of the box.SSR notes →~30 kB, zero UI depsThe single runtime dependency is @floating-ui/dom. ESM + full d.ts + three optional CSS layers.Install →Flash-free themingthemeBootScript lands attributes before CSS parses; auto mode follows the system; persisted to localStorage.How it works →Token-drivenComponents consume var(--lx-*) exclusively; the TS token objects stay literally in sync with CSS (test-enforced).Design tokens →
Live preview · everything works, go ahead
Button
Badge / Avatar
v0.2.0已发布Beta张小李
Input / Select
选个类型
Tabs
Toast / Confirm
Tooltip / Dropdown
Installed in thirty seconds
bash
pnpm add @luxeanor/uibash
npm i @luxeanor/uits
// main.ts
import '@luxeanor/ui/styles/tokens.css'
import '@luxeanor/ui/style.css'html
<html data-theme="amethyst" data-mode="light">Then just import { LxButton } from '@luxeanor/ui' → Quick Start