v2.0.3 — Stable

Style anything
with one attribute.

Lux is a zero-dependency, attribute-first CSS + JS library. Drop it in with a <link> tag. No build step. No classes to memorize. Just HTML attributes that do everything.

0 Attributes
~42 CSS + JS
0 Dependencies
∞ Possibilities
Get Started

Two lines. Any project.

<!-- Add to your <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luxcss/dist/lux.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/luxcss/dist/lux.js"></script>
// src/main.jsx
import 'luxcss/dist/lux.css';
import 'luxcss/dist/lux.js';
// app/layout.tsx
import 'luxcss/dist/lux.css';
import LuxLoader from '@/components/LuxLoader';

// Then add <LuxLoader /> inside <body>
// See full guide → docs.html#frameworks
// src/main.js or +layout.svelte
import 'luxcss/dist/lux.css';
import 'luxcss/dist/lux.js';

Install via npm: npm install luxcss  ·  Full framework guide →

What's Included

Everything you need.
Nothing you don't.

200+ attributes covering styling, layout, motion, components, and JS interactions — all from plain HTML.

🎨
11 Surface Types
solid, glass, frosted, ghost, matte, neon, outline, raised, ink, aurora, mesh — for every visual moment.
✍️
Rich Typography
10 type presets, text gradients, stroke, glow, typewriter, fluid scaling, and truncation helpers.
📐
Powerful Layouts
stack, row, grid, bento, masonry, sidebar, split, prose — with responsive column controls.
🌈
18 Gradients
Named background and text gradients — sunset, ocean, aurora, neon, candy, electric, and more.
✨
Motion & Animations
Hover effects, 12 looping animations, scroll reveal, stagger children, float, and spring physics.
🧩
Ready Components
Modal, drawer, accordion, tabs, popover, toast, badges, tooltips, progress, and forms.
⚡
JS Magic
Tilt 3D, magnetic, ripple, confetti, counter animation, typewriter, cursor trail — all via HTML attributes.
🎭
Effects & Filters
Glow, ring, blur, backdrop, patterns, masks, clip paths, blend modes, and CSS filters.
🪶
~52kb. Zero deps.
CSS + JS combined. No build step. No dependencies. Drop in two tags and go.
Surfaces

Materials for every moment.

Solid
Glass
Frosted
Matte
Ghost
Neon
Aurora
Ink
Gradients

18 ready-made gradients.

Sunset
Ocean
Aurora
Fire
Midnight
Neon
Candy
Gold
Cosmos
Electric
Forest
Peach
Effects

Visual magic. One attribute.

Text Gradients
Sunset Headline
Ocean Headline
Neon Headline
Fire Headline
Typewriter

Building the future of CSS.

Glow
Primary Glow
Accent Glow
Success
Components

No JS framework required.

Accordion

Lux is an attribute-first CSS + JS library. Style and interact with HTML elements purely through attributes — no class names needed.

Tailwind uses utility classes. Lux uses semantic HTML attributes. Your markup stays clean and readable, and you get JS-powered interactions for free.

Zero. Drop a <link> and <script> tag in your HTML and you're live. Works in React, Vue, Svelte, or plain HTML.

Tabs

Lux ships with built-in tab panels. Click a tab above to switch. Panels animate in with a smooth slide-up. No JS needed on your end.

<div tabs>
<div tab-list>
<button tab>One</button>
<button tab>Two</button>
</div>
<div tab-panel>...</div>
<div tab-panel>...</div>
</div>

Access the JS API: Lux.toast(msg, opts), Lux.confetti(opts), Lux.openModal(el), and more.

Interactions

Click to see the magic.

Hello from Lux!

This modal was created with zero JavaScript on your end. Just add modal-backdrop and modal attributes, and a button with modal-open. Lux handles the rest — animations, backdrop blur, ESC key, and focus management.

<div modal-backdrop id="my-modal">
<div modal-wrapper>
<button modal-close>✕</button>
<div modal>Your content here</div>
</div>
</div>

Lux Drawer

Drawers slide in from any side: right, left, top, or bottom. Just set drawer-side="right".

◆ Dashboard
◆ Analytics
◆ Settings
Motion

Hover these cards.

👋
Subtle
✨
Expressive
🚀
Dramatic
🎮
Tilt 3D
⬆
⟳
●
↔
○
❤
↑
↑
↑
More Components
Popover
Quick Actions
✏ Edit item
📋 Duplicate
🗑 Delete
Badges
Primary Success Danger Warning Info Live 99+ New
Progress
Design80%
Dev60%
Launch35%
Forms

Beautiful forms. Zero config.

This is how you'll appear publicly.
Open Source — MIT

Start building
with Lux today.

Drop two lines in your HTML. Style everything with attributes.
Ship faster than ever.