an HTML-first
design system.

Native HTML. Modern CSS. Progressive custom elements by default, Shadow DOM when it pays off. Rename the l- prefix to ship a design system that bears your name.

Get started Browse components

// principles

htmlnative first. extend until the platform catches up.
cssmodern only — :has(), color-mix(), light-dark().
domlight dom by default. shadow only when it earns its keep.
jstiny runtime. tree-shakeable. no framework lock-in.
a11ywcag 2.2 aa — semantics, aria, focus.
agentships an agent skill for ai code generation.

signup.htmlvite.config.tstheme.css

123456789

// rename the l- prefix to your design system
import { setPrefix } from 'luxen-ui';
setPrefix('l');

<!-- in your markup -->
<button class="l-button" data-variant="primary">
  <l-icon name="heroicons:sparkles" />
  Ship it
</button>▍

● builtprefix → l-utf-8html · css · ts

tip PostCSS + Vite plugins rewrite every CSS class, custom property, keyframe and tag for you.

an HTML-firstdesign system.

// principles───────────────────

an HTML-first
design system.

// principles