Skip to main content

​
Get Up and Running

This guide will help you build your first component with Luminescent UI. We’ll create a simple card with a toggle switch.
Make sure you’ve completed the installation before starting this guide.

​
Choose Your Framework

1

Install packages

pnpm install @luminescent/ui @luminescent/ui-qwik
2

Configure Tailwind CSS

Add to your CSS file:
app.css
@import "@luminescent/ui";
@plugin "@luminescent/ui/lum-bg";
@config "@luminescent/ui-qwik/config";
@source "../node_modules/@luminescent/ui-qwik";
3

Create your first component

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

export default component$(() => {
  return (
    <div class="lum-card p-6">
      <h2 class="text-2xl font-bold mb-4">Settings</h2>
      
      <div class="space-y-4">
        <Toggle id="notifications">
          Enable notifications
        </Toggle>
        
        <Toggle id="dark-mode" checkbox>
          Dark mode
        </Toggle>
        
        <Toggle id="beta-features" round>
          Beta features
        </Toggle>
      </div>
    </div>
  );
});
4

Run your app

pnpm dev
Open your browser and you’ll see a card with three different toggle styles.

​
Understanding the Code

lum-card is a utility class that applies Luminescent UI’s card styling:
  • Subtle background with blur effect
  • Rounded corners
  • Border styling
  • Hover and focus states
You can combine it with standard Tailwind classes like p-6 for padding.
The Toggle component accepts these props:
  • checkbox - Makes it appear as a checkbox instead of a switch
  • round - Makes it fully rounded (circular)
  • id - Required for label association
  • All standard checkbox input attributes
<Toggle id="example" checkbox round disabled>
  Label text
</Toggle>
Luminescent UI uses CSS variables for theming:
  • --lum-text - Primary text color
  • --lum-text-secondary - Secondary text color
  • --lum-accent - Accent color
  • --lum-input-bg - Input background
  • And many more…
These can be customized in your CSS to match your brand.

​
Try More Components

Dropdown

Create dropdown menus with Luminescent styling

SelectMenu

Build accessible select inputs

Nav

Add navigation with active states

ColorPicker

Let users pick colors (Qwik only)

​
Next Steps

1

Explore Components

Browse the full component library to see what’s available
2

Customize Your Theme

Learn how to customize colors and theming variables
3

Add Markdown Support

Install the optional markdown formatting for beautiful content rendering
4

Learn Core Concepts

Understand Tailwind utilities and depth effects

​
Common Patterns

​
Form with Toggles

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

export default component$(() => {
  return (
    <form class="lum-card p-6 max-w-md space-y-6">
      <h3 class="text-xl font-bold">Preferences</h3>
      
      <Toggle id="emails">
        Email notifications
      </Toggle>
      
      <Toggle id="marketing" checkbox>
        Marketing emails
      </Toggle>
      
      <button type="submit" class="lum-btn w-full">
        Save Preferences
      </button>
    </form>
  );
});

​
Card Grid

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="lum-card p-6">
    <h3 class="font-bold mb-2">Card 1</h3>
    <p class="text-lum-text-secondary">Content here</p>
  </div>
  
  <div class="lum-card p-6">
    <h3 class="font-bold mb-2">Card 2</h3>
    <p class="text-lum-text-secondary">Content here</p>
  </div>
  
  <div class="lum-card p-6">
    <h3 class="font-bold mb-2">Card 3</h3>
    <p class="text-lum-text-secondary">Content here</p>
  </div>
</div>
Pro tip: Combine Luminescent UI classes with standard Tailwind utilities for maximum flexibility.

​
Troubleshooting

If components aren’t rendering correctly, check that:
  • You’ve imported the correct CSS configuration
  • Your Tailwind CSS version is 4.x
  • You restarted your dev server after installation
Make sure your CSS imports are in the correct order:
  1. @import "@luminescent/ui";
  2. @plugin "@luminescent/ui/lum-bg";
  3. Framework-specific configuration (@config or @source)
Check your import paths:
// Correct
import { Toggle } from '@luminescent/ui-qwik';
import { Toggle } from '@luminescent/ui-react';

// Incorrect
import { Toggle } from '@luminescent/ui';
Make sure your TypeScript is configured correctly and the package types are being recognized. The packages include type definitions.

​
Need Help?

Core Concepts

Learn about Tailwind utilities and theming

Qwik Components

Browse Qwik component documentation

React Components

Browse React component documentation

GitHub

Report issues or contribute

Build docs developers (and LLMs) love

Get started for freeTalk to us