Skip to main content
Luminescent UI Hero

​
Welcome to Luminescent UI

Luminescent UI is a comprehensive Tailwind CSS component library designed to help you build beautiful, accessible user interfaces faster. With support for both Qwik and React frameworks, you can use the same design system across your projects.

Quick Start

Get up and running with Luminescent UI in minutes

Installation

Install the packages you need for your project

Components

Explore our collection of pre-built components

Customization

Learn how to customize and theme your components

​
Key Features

Tailwind CSS Utilities

Built on top of Tailwind CSS v4 with custom utilities and plugins

Framework Support

Native components for both Qwik and React frameworks

Performance First

Optimized for speed with minimal runtime overhead

Accessible

Components follow accessibility best practices

Customizable

Easy to customize with CSS variables and Tailwind configuration

Markdown Support

Optional formatting preset for beautiful markdown rendering

​
Package Structure

Luminescent UI is organized into three packages:
The base package containing Tailwind CSS utilities, custom plugins, and CSS variables. This package is required for both Qwik and React integrations.What’s included:
  • Custom Tailwind utilities
  • lum-bg plugin for background effects
  • CSS custom properties
  • Optional markdown formatting styles
Pre-built components for Qwik applications including Toggle, Dropdown, SelectMenu, Nav, ColorPicker, and more.What’s included:
  • Interactive Qwik components
  • Qwik-specific utilities
  • Brand logos and icons
  • Tailwind configuration preset
Pre-built components for React applications with the same API as the Qwik components.What’s included:
  • Interactive React components
  • React-specific utilities
  • Brand logos and icons
  • Lucide React icons integration
New to Luminescent UI? Start with the Quick Start guide to build your first component in under 5 minutes.

​
Requirements

Luminescent UI requires Tailwind CSS v4 and pnpm as the package manager.
Before installing Luminescent UI, make sure you have:
  • Node.js >= 23.11.0
  • pnpm >= 10.10.0
  • Tailwind CSS v4.x
  • Qwik 1.18+ (for Qwik components)
  • React 19+ (for React components)

​
Next Steps

1

Install the package

Follow the installation guide to add Luminescent UI to your project
2

Configure Tailwind

Set up your Tailwind CSS configuration with Luminescent imports
3

Start building

Use the components or utility classes in your application

Build docs developers (and LLMs) love

Get started for freeTalk to us