luxcss

v2.0.3

Published

13 days ago

Attribute-first CSS & JS library. Style anything with one HTML attribute. Zero dependencies, no build step.

0High
0Medium
0Low

abideen

css javascript css-library frontend ui design-system zero-dependency attributes html styling nextjs react

✦ Lux — Attribute-First CSS & JS Library

Style anything with one HTML attribute. Zero dependencies. Zero build step.

🌐 Live Demo: https://abideen-program.github.io/luxcss/ 📖 Docs: https://abideen-program.github.io/luxcss/docs.html 📦 npm: https://www.npmjs.com/package/luxcss

⚡ Quick Start

CDN (Plain HTML — simplest)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luxcss/dist/lux.css"/>
<script src="https://cdn.jsdelivr.net/npm/luxcss/dist/lux.js"></script>

npm

npm install luxcss

🚀 Framework Setup

React / Vite

// src/main.jsx — add these two lines, done
import 'luxcss/dist/lux.css';
import 'luxcss/dist/lux.js';

Next.js — App Router

app/layout.tsx is a Server Component, so lux.js needs a small Client Component wrapper:

// src/components/LuxLoader.tsx
'use client';
import 'luxcss/dist/lux.js';
export default function LuxLoader() {
  return null;
}

// app/layout.tsx
import 'luxcss/dist/lux.css';
import LuxLoader from '@/components/LuxLoader';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <LuxLoader />
        {children}
      </body>
    </html>
  );
}

See FRAMEWORKS.md for the full explanation.

Next.js — Pages Router

// pages/_app.tsx
import 'luxcss/dist/lux.css';
import 'luxcss/dist/lux.js';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

No LuxLoader needed — Pages Router has no Server Components.

Vue 3

// src/main.js — add these two lines, done
import 'luxcss/dist/lux.css';
import 'luxcss/dist/lux.js';

SvelteKit

// src/routes/+layout.svelte — add these two lines, done
import 'luxcss/dist/lux.css';
import 'luxcss/dist/lux.js';

That's it. No providers, no useEffect, no extra config — just like Tailwind.

✦ Usage

After setup, add attributes to any HTML element:

<!-- Glass card with animated title and a confetti button -->
<div surface="glass" radius="xl" density="spacious" motion="expressive">
  <span badge="dot" tone="success">Live</span>
  <h2 text="heading" text-gradient="electric">Hello Lux</h2>
  <p text="body">One attribute per feature.</p>
  <button surface="solid" tone="primary" radius="full" ripple magnetic confetti-trigger>
    Celebrate 🎉
  </button>
</div>

🎨 What's Included

| Category | Attributes | |---|---| | Surfaces | surface= — solid, glass, frosted, ghost, matte, neon, aurora, ink, raised, mesh, outline | | Color | tone= — primary, danger, success, warning, info, accent, neutral | | Typography | text= — hero, display, heading, subheading, lead, body, caption, label, code, overline | | Text FX | text-gradient=, text-stroke=, text-glow, text-shadow=, truncate=, balance, fluid= | | Layout | layout= — stack, row, grid, center, cover, sidebar, masonry, prose, split, bento | | Grid | cols=, span=, sm-cols=, md-cols=, lg-cols=, gap=, align=, justify= | | Motion | motion= — subtle, expressive, dramatic, press | | Animations | animate= — spin, pulse, bounce, wiggle, shake, ping, heartbeat, rubber, flip, swing, tada | | Reveal | reveal= — bottom, top, left, right, scale, blur, rotate, flip | | Gradients | 18 named gradients — sunset, ocean, aurora, fire, neon, candy, gold, cosmos, electric… | | Glow & Ring | glow=, text-glow, ring=, shadow=colored | | Patterns | pattern= — grid, dots, stripes, crosshatch, checker, diamonds, hexagon | | Masks | mask= — fade-bottom, fade-top, fade-x, vignette, circle, spotlight | | Filters | filter=, backdrop= — blur, grayscale, sepia, vintage, dreamy… | | Forms | input=, field=, hint= | | Components | Accordion, Tabs, Modal, Drawer, Popover, Toast, Progress, Badges, Tooltips | | JS Magic | Confetti, Cursor trail, Magnetic, Tilt 3D, Typewriter, Ripple, Counter, Spotlight |

🔥 Examples

Surfaces

<div surface="glass">Glass card</div>
<div surface="neon" tone="primary">Neon card</div>
<div surface="aurora">Animated aurora</div>
<div surface="solid" tone="success">Solid button</div>

Layout

<div layout="grid" cols="3" gap="md">
  <div surface="matte">Card 1</div>
  <div surface="matte">Card 2</div>
  <div surface="matte">Card 3</div>
</div>

Typography

<h1 text="hero" text-gradient="electric">Hero Heading</h1>
<h2 text="heading" balance>Section Title</h2>
<p text="lead">Intro paragraph.</p>
<code text="code">const x = 42;</code>

Motion

<div motion="expressive">Spring hover effect</div>
<div tilt tilt-glare>3D tilt on hover</div>
<button magnetic ripple surface="solid" tone="primary">Magnetic</button>
<div reveal="bottom">Fades in on scroll</div>
<div layout="grid" cols="3" stagger="100">
  <div surface="matte">1</div>
  <div surface="matte">2</div>
  <div surface="matte">3</div>
</div>

Modal

<button modal-open="my-modal">Open</button>
<div modal-backdrop id="my-modal">
  <div modal-wrapper>
    <button modal-close>✕</button>
    <div modal>
      <h2 text="heading">Modal Title</h2>
      <p>Content here.</p>
    </div>
  </div>
</div>

Toast

<!-- Via HTML -->
<button toast-trigger toast-title="Done!" toast-msg="Saved." toast-type="success">
  Save
</button>

<!-- Via JS -->
<script>
  Lux.toast('Saved!', { title: 'Done!', type: 'success' });
</script>

Confetti

<button confetti-trigger confetti-count="100">🎉 Celebrate!</button>

Counter Animation

<span counter="1250" counter-sep counter-prefix="$" counter-suffix="k">0</span>

Typewriter

<p typewriter typewriter-speed="60" typewriter-cursor>
  This text types itself on scroll.
</p>

Forms

<div field>
  <label>Email</label>
  <input input type="email" placeholder="[email protected]"/>
  <span hint>We'll never share your email.</span>
</div>

<div field state="error">
  <label>Password</label>
  <input input type="password"/>
  <span hint>Must be 8+ characters.</span>
</div>

🎨 Theming

Override any CSS variable to match your brand:

:root {
  --lux-primary:       #your-color;
  --lux-font-sans:     'Your Font', sans-serif;
  --lux-font-display:  'Your Display Font', sans-serif;
  --lux-r-lg:          0.5rem;
  --lux-gap-md:        1.25rem;
}

Seed color per element:

<div seed="#e11d48" surface="neon">Custom color surface</div>

Dark / Light mode:

<html scheme="dark">   <!-- force dark -->
<html scheme="light">  <!-- force light -->
<button theme-toggle>Toggle</button>  <!-- auto persists to localStorage -->

🧠 JS API

// Toast
Lux.toast('Message', { title: 'Title', type: 'success', duration: 3000 });

// Confetti
Lux.confetti({ count: 80, origin: { x: 0.5, y: 0.4 } });

// Theme
Lux.applyScheme('dark');
Lux.applyScheme('light');

// Modal
Lux.openModal(backdropElement);
Lux.closeModal(backdropElement);

// Drawer
Lux.openDrawer(backdropElement);
Lux.closeDrawer(backdropElement);

// Re-init after dynamic content
Lux.init();

📦 File Sizes

| File | Size | |---|---| | lux.css | ~55 KB | | lux.js | ~32 KB | | lux.d.ts | ~8 KB | | Total | ~95 KB unpacked |

Zero dependencies. No build step required.

🗂 Full Docs

See FRAMEWORKS.md for detailed framework integration guides.

See the full documentation site for live demos of every feature.