Luma UI

A modern Vue 3 component library with powerful theming support.

Features

• 180+ Components - Forms, modals, tables, navigation, and more
• Theme System - 4 built-in themes with full customization
• Dark/Light Mode - First-class support for both color schemes
• TypeScript - Full type safety and IntelliSense
• Accessible - Built on Reka UI primitives
• Tailwind CSS - Utility-first styling with easy customization

Installation

npm install luma-ui

Quick Start

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

// Import Luma UI styles
import 'luma-ui/styles';

createApp(App).mount('#app');

<script setup>
import { Button, Input, Card } from 'luma-ui';
</script>

<template>
  <Card>
    <Input label="Email" placeholder="[email protected]" />
    <Button>Submit</Button>
  </Card>
</template>

Theming

Luma UI includes 4 built-in themes:

• default - Slate gray
• blue - Blue
• green - Green
• orange - Orange

<script setup>
import { ThemeProvider, Button } from 'luma-ui';
</script>

<template>
  <ThemeProvider theme="blue">
    <Button>Blue Button</Button>
  </ThemeProvider>
</template>

License

MIT