Skip to main content
Luminescent UI provides a comprehensive Qwik component library with pre-built components, utility functions, and logo icons optimized for Qwik’s resumability model.

​
Installation

1

Install dependencies

Install both the core Luminescent UI package and the Qwik-specific package:
pnpm install @luminescent/ui @luminescent/ui-qwik
The Qwik package requires Node.js >= 23.11.0 and pnpm >= 10.10.0
2

Configure Tailwind CSS

Add the Luminescent UI imports 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";
The @config directive loads Qwik-specific Tailwind configuration, while @source enables JIT compilation for component classes.
3

Optional: Add Markdown formatting

For automatic formatting of Markdown elements, add this import:
app.css
@import "@luminescent/ui/formatting";

​
Available Components

Luminescent UI for Qwik exports three main categories of components:

​
Elements

Interactive UI components with full Qwik reactivity:
  • Anchor - Enhanced link component with routing support
  • Blobs - Animated background blob elements
  • ColorPicker - Interactive color selection component
  • Dropdown - Dropdown menu with keyboard navigation
  • Nav - Navigation component with responsive behavior
  • NumberInput - Number input with increment/decrement controls
  • RangeInput - Slider input component
  • SelectMenu - Custom select dropdown
  • Sidebar - Collapsible sidebar navigation
  • Toggle - Checkbox and toggle switch component

​
Functions

Utility functions for enhanced interactions:
  • Hoverable - 3D hover effect with perspective transforms

​
Logos

Pre-built SVG logo components:
  • Birdflop, Discord, Fabric, Forge, Luminescent, Paper, Pterodactyl, Purpur, Velocity, Waterfall

​
Import Patterns

import { Toggle, Nav, Sidebar } from '@luminescent/ui-qwik';
import { Hoverable } from '@luminescent/ui-qwik';
import { Discord, Luminescent } from '@luminescent/ui-qwik';

​
Usage Examples

​
Toggle Component

Create toggle switches with optional labels:
component.tsx
import { component$, useSignal } from '@builder.io/qwik';
import { Toggle } from '@luminescent/ui-qwik';

export default component$(() => {
  const isEnabled = useSignal(false);
  
  return (
    <div>
      <Toggle
        id="feature-toggle"
        checked={isEnabled.value}
        onChange$={(e) => {
          isEnabled.value = (e.target as HTMLInputElement).checked;
        }}
      >
        Enable Feature
      </Toggle>
      
      {/* Checkbox variant */}
      <Toggle
        id="checkbox-toggle"
        checkbox
        checked={isEnabled.value}
      >
        Checkbox Style
      </Toggle>
      
      {/* Round variant */}
      <Toggle
        id="round-toggle"
        round
        checked={isEnabled.value}
      >
        Round Toggle
      </Toggle>
    </div>
  );
});

​
Navigation Component

Build responsive navigation menus:
nav.tsx
import { component$ } from '@builder.io/qwik';
import { Nav } from '@luminescent/ui-qwik';

export default component$(() => {
  return (
    <Nav>
      <a href="/">Home</a>
      <a href="/docs">Documentation</a>
      <a href="/components">Components</a>
    </Nav>
  );
});

​
Hoverable Effect

Add 3D perspective hover effects to any element:
card.tsx
import { component$ } from '@builder.io/qwik';
import { Hoverable } from '@luminescent/ui-qwik';

export default component$(() => {
  return (
    <div
      class="lum-card p-6"
      {...Hoverable}
    >
      <h3>Interactive Card</h3>
      <p>Hover over me for a 3D effect!</p>
    </div>
  );
});
The Hoverable object spreads event handlers (onMouseMove$ and onMouseLeave$) that apply perspective transforms on hover.

​
Logo Components

Use pre-built logo SVGs with customizable sizing:
logos.tsx
import { component$ } from '@builder.io/qwik';
import { Luminescent, Discord, Paper } from '@luminescent/ui-qwik';

export default component$(() => {
  return (
    <div class="flex gap-4 items-center">
      <Luminescent class="h-8 w-8" />
      <Discord class="h-8 w-8" />
      <Paper class="h-8 w-8" />
    </div>
  );
});

​
TypeScript Support

All components include full TypeScript definitions. Component props extend native HTML element props:
types.ts
import type { PropsOf } from '@builder.io/qwik';
import type { Toggle } from '@luminescent/ui-qwik';

// Toggle extends Omit<PropsOf<'input'>, ...>
type ToggleProps = Parameters<typeof Toggle>[0];

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us