Usage

Get Lux into your project in under two minutes.

CDN (fastest)

Drop two tags into your HTML <head>. No build step, no npm, no config.

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

npm

npm install @suryanandx/lux
# or
pnpm add @suryanandx/lux

Then import in your entry file:

// CSS (via bundler)
import '@suryanandx/lux/dist/lux.min.css';

// JS (web components + toast API)
import '@suryanandx/lux/dist/lux.min.js';

Starter template

Full HTML page ready to copy:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Optional: Inter font -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@suryanandx/lux/dist/lux.min.css">
  <!-- Override brand color -->
  <style>:root { --brand: #6366f1; }</style>
</head>
<body>
  <nav>
    <a class="nav-brand" href="/">MyApp</a>
    <div class="nav-end">
      <button data-variant="brand">Get started</button>
    </div>
  </nav>

  <main class="container" style="padding-top:2rem">
    <h1>Hello Lux</h1>
    <p>Start building.</p>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/@suryanandx/lux/dist/lux.min.js"></script>
</body></html>

Framework usage

React / Next.js

// app/layout.tsx or _app.tsx
import '@suryanandx/lux/dist/lux.min.css';

// Use HTML attributes — data-variant works in JSX
<button data-variant="brand">Deploy</button>

// Web components need 'use client' or dynamic import
import dynamic from 'next/dynamic';
const LuxScript = dynamic(() => import('@suryanandx/lux/dist/lux.min.js'), { ssr: false });

Vue / Nuxt

// nuxt.config.ts
css: ['@suryanandx/lux/dist/lux.min.css']

// plugins/lux.client.ts
import '@suryanandx/lux/dist/lux.min.js'

JavaScript API

The only runtime API is lux.toast(). Everything else is CSS + HTML.

// Toast
lux.toast({ title: 'Done', message: 'Saved successfully.', variant: 'success' });
lux.toast.success('Saved!');
lux.toast.error({ title: 'Error', message: 'Something went wrong.' });

// Dialog (open/close programmatically)
document.getElementById('my-dialog').showModal();
document.getElementById('my-dialog').close();

// Listen to custom events
document.querySelector('lux-tabs').addEventListener('lux:tab', e => {
  console.log('Tab changed:', e.detail.tab);
});
document.querySelector('lux-dropdown').addEventListener('lux:open', () => {
  console.log('Dropdown opened');
});

Browser support

Lux targets all modern browsers. It uses:

light-dark() — Chrome 123+, Firefox 120+, Safari 17.5+
@layer — Chrome 99+, Firefox 97+, Safari 15.4+
Custom Elements (Web Components) — all modern browsers
Native <dialog> — Chrome 98+, Firefox 98+, Safari 15.4+

No polyfills needed for any supported browser.