Luminescent UI Docs

To use the Luminescent UI Tailwind Library, you need to install the package from npm.

pnpm install @luminescent/ui

Once installed, include the following to your tailwind css file

@import '@luminescent/ui';
@plugin "@luminescent/ui/lum-bg";

Once finished, you can use the classes included, shown in the documentation.

Luminescent UI also provides default formatting for various elements

This is mainly for people who would like to easily format Markdown elements, you can add it to your tailwind css file. You can see the formatting in action in the Markdown Documentation.

@import '@luminescent/ui/formatting';

To use the Luminescent UI Qwik Library, you need to install the qwik package from npm in addition to the main package.

pnpm install @luminescent/ui-qwik

Once installed, include the following to your tailwind css file after the previous imports

@config "@luminescent/ui-qwik/config";
@source "../node_modules/@luminescent/ui-qwik";

To use the Luminescent UI React Library, you need to install the react package from npm in addition to the main package.

pnpm install @luminescent/ui-react

Once installed, include the following to your tailwind css file after the previous imports

@source "../node_modules/@luminescent/ui-react";

Classes

Background Classes

lum-bg-<color>/[opacity]

lum-bg (with --bg-color set to a color)

lum-grad-bg-<color>/[opacity] (for gradient backgrounds)

lum-flat-bg-<color>/[opacity] (for flat backgrounds, can also be gradient with lum-flat-grad-bg-<color>/[opacity])

lum-depth-bg-<color>/[opacity] (for depth backgrounds, can also be gradient with lum-depth-grad-bg-<color>/[opacity])

lum-depth-shadow (if you want to add depth to an element without using the full lum-bg utility)

Element Classes

lum-btn lum-card lum-input

Padding Classes

lum-btn-p-<size>

Button

class

warning: only some classes will work because of the way tailwindcss works

Card

class

warning: only some classes will work because of the way tailwindcss works

blur

loading

hoverable (qwik only)

This is a card

This is a description

Input

class

warning: only some classes will work because of the way tailwindcss works

Anchor

The element is in the title

ButtonContainer

A container element for grouping interactive buttons and links with consistent styling

ColorPicker

preview

horizontal

showInput

opacity

A dropdown menu component with customizable alignment, trigger mode, and panel position

hover

top

align:

hover

opened

Label

Adds a consistent label to elements that it wraps

Label

Wrapping element

Nav

fixed

floating

nohamburger

colorClass

<Nav>

<button q:slot="start" class={'lum-btn lum-bg-transparent'}>
    Brand
  </button>

<button q:slot="center" class={'lum-btn hidden sm:flex lum-bg-transparent'}>
    Center button
  </button>

<Dropdown
    id="nav-dropdown"
    hover
    q:slot="end"
    class={{ 'lum-bg-transparent hidden sm:flex': true }}
  >
    <span q:slot="dropdown">Dropdown</span>
    <button class="lum-btn lum-bg-transparent rounded-lum-1">
      Option 1
    </button>
    <button class="lum-btn lum-bg-transparent rounded-lum-1">
      Option 2
    </button>
    <button class="lum-btn lum-bg-transparent rounded-lum-1">
      Option 3
    </button>
  </Dropdown>

<button class={'lum-btn lum-bg-transparent'} q:slot="hamburger">
    hamburger button 1
  </button>
  <button class={'lum-btn lum-bg-transparent'} q:slot="hamburger">
    hamburger button 2
  </button>
  <h3 q:slot="hamburger" class="mx-4 py-2 text-lum-text-secondary border-b border-gray-700">
    Dropdown
  </h3>
  <button class={'lum-btn lum-bg-transparent'} q:slot="hamburger">
    Option 1
  </button>
  <button class={'lum-btn lum-bg-transparent'} q:slot="hamburger">
    Option 2
  </button>
  <button class={'lum-btn lum-bg-transparent'} q:slot="hamburger">
    Option 3
  </button>

<button class={'lum-btn lum-bg-transparent'} q:slot="mobile">
    Mobile 1
  </button>
  <button class={'lum-btn lum-bg-transparent'} q:slot="mobile">
    Mobile 2
  </button>
  <button class={'lum-btn lum-bg-transparent'} q:slot="mobile">
    Mobile 3
  </button>

</Nav>

NumberInput

input

Number Input

RangeInput

Range Input

0

customDropdownButton

hover

align

Select Menu

Sidebar

floating

<Sidebar>
  <h3 q:slot="title" class="text-lg font-bold">
    Sidebar
  </h3>

<button class="lum-btn lum-bg-transparent hidden sm:flex">
    Button
  </button>

<DropdownButton opened={store.dropdownOpen}
    id="sidebar-dropdown"
    onClick$={() => {
      store.dropdownOpen = !store.dropdownOpen;
    }}
    class={{
      'w-full lum-bg-transparent border-b-lum-border/10 -mb-4': true,
    }}
  >
    Dropdown
  </DropdownButton>
  <div class={{
    'transition-all duration-200 overflow-hidden flex flex-col gap-1 pl-2 pt-2 border-l border-l-lum-border/10': true,
    'max-h-0 opacity-0 scale-98': !store.dropdownOpen,
    'max-h-screen opacity-100 mt-1': store.dropdownOpen,
  }}>
    <button class="lum-btn lum-bg-transparent lum-btn-p-1">
      Option 1
    </button>
    <button class="lum-btn lum-bg-transparent lum-btn-p-1">
      Option 2
    </button>
    <button class="lum-btn lum-bg-transparent lum-btn-p-1">
      Option 3
    </button>
  </div>
</Sidebar>

Tabs

A tab bar component for switching views or managing tabbed items with optional add and delete actions

Toggle

class

warning: only some classes will work because of the way tailwindcss works

checkbox

round

Toggle

Luminescent UI Documentation

Get Started

To use the Luminescent UI Tailwind Library, you need to install the package from npm.

Luminescent UI also provides default formatting for various elements

To use the Luminescent UI Qwik Library, you need to install the qwik package from npm in addition to the main package.

To use the Luminescent UI React Library, you need to install the react package from npm in addition to the main package.

Luminescent UI Tailwind Components

Classes

Button

Card

This is a card

This is a description

Input

Luminescent UI Qwik Components

Anchor

The element is in the title

ButtonContainer

A container element for grouping interactive buttons and links with consistent styling

ColorPicker

A dropdown menu component with customizable alignment, trigger mode, and panel position

Label

Adds a consistent label to elements that it wraps

Nav

NumberInput

RangeInput

SelectMenu

Sidebar

Tabs

A tab bar component for switching views or managing tabbed items with optional add and delete actions

Toggle