@astrake/lumora-ui

@astrake/lumora-ui

Headless Vue 3 component framework targeting three distinct surface types — Mobile, Desktop, and Embedded — with a unified --lu-* design token system.

Documentation · npm · Changelog · Issues

Overview

@astrake/lumora-ui provides a single component library with three surface targets:

Install

bun add @astrake/lumora-ui vue@^3.5.0 tailwindcss @tailwindcss/vite \
        echarts vue-echarts \
        @tiptap/vue-3 @tiptap/starter-kit @tiptap/extension-placeholder \
        vue-draggable-plus

The postinstall script will print this command automatically after bun add @astrake/lumora-ui.

Usage

// Import shared components and layout primitives
import { LuButton, LuDataGrid, LuKanban, LuStack } from "@astrake/lumora-ui"

// Import surface-specific shells
import { LuMobileShell, LuDesktopShell, LuEmbeddedShell } from "@astrake/lumora-ui"

Register the plugin:

// main.ts
import { createApp } from "vue"
import { createLumoraUI } from "@astrake/lumora-ui"
import "@astrake/lumora-ui/style"
import App from "./App.vue"

createApp(App).use(createLumoraUI()).mount("#app")

Design Token System

All targets share a --lu-* CSS custom property namespace:

Each target root overrides tokens as appropriate (e.g., Embedded reduces shadow and motion values for performance).

Runtime Stack

Repo Shape

LumoraUI/
├── packages/core/        ← @astrake/lumora-ui (published package)
│   └── src/
│       ├── components/   ← shared primitives + complex components (Lu*)
│       ├── layout/       ← layout primitives (LuStack, LuGrid, LuDock, etc.)
│       ├── shell/        ← surface shells (LuDesktopShell, LuMobileShell, etc.)
│       ├── composables/  ← shared composition functions
│       ├── skins/        ← SkinMap default theme
│       ├── lumora.css    ← structural CSS baseline
│       └── index.ts
├── apps/showcase/        ← reference Vite + Vue 3 showcase app
├── tools/                ← build, check, version, changelog scripts
├── .agent/               ← AI agent rules and authoring guides
└── docs/                 ← architecture, development, releases, legal

Local Development

git clone https://github.com/madlybong/LumoraUI.git
cd LumoraUI
bun install
bun run check      # typecheck
bun run test --run # run test suite
bun run dev        # start the showcase app

Documentation

• Project Overview
• Architecture Guide
• Development Workflow
• Release Workflow
• AI Agent Knowledge Base
• Legal Notice & Disclaimer

Automation

Required secrets: NPM_TOKEN — see docs/RELEASES.md.

Contributing

Contributions are welcome. Please read the working rules in AGENTS.md before submitting a PR. By contributing, you agree your work is licensed under MIT. See docs/LEGAL.md.

Disclaimer

@astrake/lumora-ui is provided "as is" without warranty of any kind. The author accepts no liability for damages arising from the use of this software. See docs/LEGAL.md for the full warranty disclaimer and legal notice.

License

MIT © 2026 Anuvab Chakraborty