Luminescent UI Documentation

Get Started

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

@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";

Luminescent UI Tailwind Components

Classes

Background Classes

lum-bg-<color>/[opacity]

Element Classes

lum-btn lum-card lum-input

Padding Classes

lum-btn-p-<size>

Button

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

Card

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

This is a card

This is a description

Input

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

Luminescent UI Qwik Components

Anchor

The element is in the title

Blobs

ColorPicker

Dropdown

Nav

NumberInput

Toggle

Icons/Logos