@luxeanor/ui

English

简体中文

English

简体中文

Installation ​

Requirements ​

  • Vue ^3.5
  • Modern browsers (no IE support)

Install the package ​

bash
npm i @luxeanor/ui
bash
pnpm add @luxeanor/ui

The package is only ~30 kB (ESM + full type declarations + three CSS layers). The single runtime dependency is the floating-position engine @floating-ui/dom.

Import styles ​

Styles come in three layers — order matters, tokens must come first:

ts
// main.ts
import '@luxeanor/ui/styles/tokens.css'   // ① design tokens (required)
import '@luxeanor/ui/styles/reset.css'    // ② base reset (optional; skip in docs-style sites like VitePress)
import '@luxeanor/ui/styles/effects.css'  // ③ effects layer (optional: reveal / glass / texture)
import '@luxeanor/ui/style.css'           // ④ component styles (required)

Mount theme attributes ​

Component colors are driven by two attributes on <html> (defaults to family amethyst, light mode when absent):

html
<html data-theme="amethyst" data-mode="light">
  • data-theme: color family — amethyst (purple) / obsidian (gold) / ink (blue) / emerald (green)
  • data-mode: light / dark

For a fixed theme just hard-code the attributes; for runtime switching see Theming.

Nuxt ​

Consuming the npm build requires no extra configuration. If you consume the source via workspace:* in a monorepo, transpile it:

ts
// nuxt.config.ts
export default defineNuxtConfig({
  build: { transpile: ['@luxeanor/ui'] },
})

Next: Quick Start