Skip to main content

​
Overview

Luminescent UI offers three packages depending on your needs:
  • @luminescent/ui - Core Tailwind CSS utilities (required for all installations)
  • @luminescent/ui-qwik - Qwik components (requires @luminescent/ui)
  • @luminescent/ui-react - React components (requires @luminescent/ui)
All packages require pnpm as the package manager and Tailwind CSS v4.

​
Prerequisites

Before installing, ensure you have:

Node.js

Version 23.11.0 or higher

pnpm

Version 10.10.0 or higher

Tailwind CSS

Version 4.1.18 or compatible v4.x

Framework

Qwik 1.18+ or React 19+ (for components)

​
Core Package Installation

1

Install @luminescent/ui

The core package provides Tailwind CSS utilities and is required for all Luminescent UI installations.
pnpm install @luminescent/ui
2

Configure Tailwind CSS

Add the Luminescent UI imports to your Tailwind CSS file:
app.css
@import "@luminescent/ui";
@plugin "@luminescent/ui/lum-bg";
The lum-bg plugin provides special background utilities for creating luminescent effects.

Optional: Add Markdown Formatting

If you want to use Luminescent UI’s default formatting for Markdown elements, add this import:
app.css
@import "@luminescent/ui";
@plugin "@luminescent/ui/lum-bg";
@import "@luminescent/ui/formatting";
The formatting styles are designed for rendering Markdown content with beautiful typography and spacing. See it in action →

​
Qwik Components Installation

1

Install packages

Install both the core package and Qwik components:
pnpm install @luminescent/ui @luminescent/ui-qwik
2

Configure Tailwind CSS

Add the Qwik-specific configuration to your Tailwind CSS file:
app.css
@import "@luminescent/ui";
@plugin "@luminescent/ui/lum-bg";
@config "@luminescent/ui-qwik/config";
@source "../node_modules/@luminescent/ui-qwik";
Make sure to add the Qwik configuration after the core imports.
3

Import components

Import Qwik components in your .tsx files:
import { Toggle, Dropdown, SelectMenu } from '@luminescent/ui-qwik';

​
Available Qwik Components

The @luminescent/ui-qwik package includes:
  • Toggle - Checkbox and switch toggles
  • Dropdown - Dropdown menus
  • SelectMenu - Select inputs
  • Nav - Navigation components
  • Sidebar - Sidebar navigation
  • ColorPicker - Color selection
  • NumberInput - Numeric inputs
  • RangeInput - Range sliders
  • Anchor - Enhanced links
  • Blobs - Decorative blob shapes
  • Logos - Brand logo components

​
React Components Installation

1

Install packages

Install both the core package and React components:
pnpm install @luminescent/ui @luminescent/ui-react
2

Configure Tailwind CSS

Add the React-specific configuration to your Tailwind CSS file:
app.css
@import "@luminescent/ui";
@plugin "@luminescent/ui/lum-bg";
@source "../node_modules/@luminescent/ui-react";
Make sure to add the React source after the core imports.
3

Import components

Import React components in your .tsx or .jsx files:
import { Toggle, Dropdown, SelectMenu } from '@luminescent/ui-react';

​
Available React Components

The @luminescent/ui-react package includes:
  • Toggle - Checkbox and switch toggles
  • Dropdown - Dropdown menus
  • SelectMenu - Select inputs
  • Nav - Navigation components
  • Logos - Brand logo components
React components use Lucide React for icons, which is included as a dependency.

​
Complete Configuration Examples

/* app.css */
@import "@luminescent/ui";
@plugin "@luminescent/ui/lum-bg";

​
Verification

To verify your installation is working:
1

Start your dev server

pnpm dev
2

Test a utility class

Add a Luminescent UI class to any element:
<div class="lum-card">
  Hello Luminescent UI!
</div>
3

Test a component (if installed)

import { component$ } from '@builder.io/qwik';
import { Toggle } from '@luminescent/ui-qwik';

export default component$(() => {
  return (
    <Toggle id="test-toggle">
      Test Toggle
    </Toggle>
  );
});
Next steps: Check out the Quick Start guide to start building with Luminescent UI.

​
Troubleshooting

Make sure:
  • Your Tailwind CSS file includes the @import statements
  • You’re using Tailwind CSS v4.x
  • Your build process is processing the CSS file
  • The import order is correct (core imports before framework-specific)
Verify:
  • You’ve installed the correct package (@luminescent/ui-qwik or @luminescent/ui-react)
  • The package is listed in your package.json dependencies
  • You’ve restarted your dev server after installation
Luminescent UI requires pnpm. If you’re using npm or yarn:
npm install -g pnpm
pnpm install
Luminescent UI is designed for Tailwind CSS v4. If you’re on v3, you’ll need to upgrade:
pnpm add -D tailwindcss@^4

Build docs developers (and LLMs) love

Get started for freeTalk to us