Getting Started

Get up and running with Luma UI in minutes. Follow these simple steps to integrate our Neo-Minimal design system into your Angular application.

Prerequisites

Before installing Luma UI, ensure you have the following set up in your project:

  • ✓Angular 20+: Luma UI requires Angular 20 or higher with standalone components support
  • ✓Tailwind CSS v4: Our design tokens are built on Tailwind CSS v4. Install Tailwind CSS if you haven't already
  • ✓Node.js & npm: Ensure you have Node.js 18+ and npm 9+ installed

Installation

Install the Luma UI package via npm: 

npm install @lumaui/angular

Setup

1. Import Design Tokens

Import the Luma CSS tokens in your global stylesheet to enable all design tokens and theme variables: 

/* styles.css or styles.scss */
@import '@lumaui/tokens/build/luma.css';

2. Configure Tailwind CSS

If you haven't set up Tailwind CSS yet, follow the official Tailwind installation guide for Angular . Once installed, Luma's design tokens are automatically available as standard Tailwind utilities (e.g., bg-primary, text-foreground, rounded-md).

No additional Tailwind configuration is needed for Luma—the tokens are pre-compiled and ready to use after importing them in Step 1.

3. Enable Dark Theme (Optional)

For dark theme support, import the dark theme tokens and toggle the dark class on your root element: 

/* Import dark theme tokens */
@import '@lumaui/tokens/build/luma.css';
@import '@lumaui/tokens/build/luma-dark.css';

/* Toggle dark theme by adding 'dark' class to <html> */

First Usage

Import and use a Luma component in your Angular application. Here's a simple example using the Button component:

Import in Component 

import { Component } from '@angular/core';
import { LmButtonDirective } from '@lumaui/angular';

@Component({
  selector: 'app-root',
  imports: [LmButtonDirective],
  templateUrl: './app.component.html',
})
export class AppComponent {}

Use in Template 

<button lumaButton lmVariant="primary" lmSize="md">
  Click Me
</button>

<button lumaButton lmVariant="outline" lmSize="lg">
  Secondary Action
</button>