lucUI gives you editorial typography, reactive glass, and 40+ accessible components — with a light/dark system that actually ships. Build a real interface, not a prototype.
<button class="luc-btn luc-btn-primary">
Get Started
</button>
<article class="luc-card luc-prism" data-luc-spotlight>
<span class="luc-kicker">New perspective</span>
<h2 class="luc-gradient-text">Build a feeling.</h2>
</article>The code above renders real lucUI. No build step — just HTML and classes.
lucUI is a CSS framework and a design system. It provides tokens, typography, and 40+ components so you don't build everything from scratch — but it leaves visual direction to you.
Use Manrope + DM Sans out of the box, or swap type and accent and keep the structure. The system is plain CSS: no Sass, no compiler, no lock-in.
Single file. Drop lucUI.min.css and lucUI.js into any HTML page. No bundler required.
Semantic tokens (--luc-surface, --luc-ink) keep components consistent across light and dark without rewriting.
Prism glass is the signature — not a mandate. Override tokens, keep the layout and accessibility.
Glass, shadow, and blur are used sparingly. The hierarchy comes from type and space — not gradients for their own sake.
Brand primitives (--luca-navy, --studio-gold) and semantic aliases make theming trivial.
Focus rings, keyboard navigation, ARIA wiring, and reduced-motion guards ship in the CSS and JS — no extra config.
Everything below is rendered with actual lucUI classes. No mocks.
Tactile, four accents
Status without noise
Glass alert with specular edge. Use .luc-alert-info.
Accent alert for system notices.
Glass fields, focus rings
Reactive spotlight on hover — add data-luc-spotlight to .luc-prism.
Blur + saturate surface.
Spotlight follows pointer.
Keyboard accessible
Tabs are wired by lucUI.js — arrow keys, Home/End, and proper ARIA.
40+ in the bundle
Also includes: dropdowns, modals, toasts, breadcrumbs, pagination, accordion, carousel, data tables, skeletons, timeline, stepper, pricing, testimonials, sidebar, search, datepicker, file upload, range slider, toggle, notifications, user card, cookie consent.
Browse components →<nav class="luc-navbar">
<div class="luc-navbar-container">
<a class="luc-navbar-brand" href="/">lucUI</a>
<div class="luc-navbar-links">
<a class="luc-navbar-link" href="#">Docs</a>
</div>
</div>
</nav><div class="luc-form-group">
<label class="luc-label" for="email">Email</label>
<input id="email" class="luc-input"
placeholder="[email protected]">
</div>
<button class="luc-btn luc-btn-primary">Continue</button>Toggle with data-luc-theme-toggle. lucUI persists the choice and syncs localStorage automatically. Components use semantic tokens so they adapt without extra classes.
<html data-theme="light">
<button class="luc-theme-toggle" data-luc-theme-toggle>
<svg data-luc-theme-icon="moon"></svg>
<svg data-luc-theme-icon="sun"></svg>
</button>Navy canvas, gold ink, azure focus.
Warm paper, navy text, softer shadows. Same components.
This page is already theme-aware — try the toggle in the navigation.
Grid and type use fluid scales and breakpoint-aware utilities. No horizontal scroll at any viewport — verified with touch-size tap targets.
.luc-grid-cols-auto and .luc-container handle 320px → 1400px. Columns collapse via CSS — no JS.
.luc-text-fluid-* scales headings fluidly. .luc-measure caps line length.
48px minimum tap targets on mobile, no text smaller than 16px in inputs, horizontal overflow guarded.
One CSS file, one JS file. Works in plain HTML. No Sass, no bundler, no config.
Reactive spotlight and aurora drift — subtle, pointer-driven lighting, reduced-motion safe.
Ctrl/Cmd+K palette with filtering and focus trapping included.
Focus trap, Escape to close, body scroll lock, and trigger return — handled.
Spacing, radius, shadow, and glass scales exposed as --space-*, --radius-*, --glass-*.
From pricing and testimonials to datepicker and data tables — consistent language, one install.
Use the real package name lucui-css-framework and the real repository.
npm install lucui-css-framework<link rel="stylesheet" href="node_modules/lucui-css-framework/lucUI.min.css">
<script src="node_modules/lucui-css-framework/lucUI.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lucUI.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lucUI.js"></script>Also available via unpkg: https://unpkg.com/[email protected]/lucUI.min.css
git clone https://github.com/lucaf1-15/lucUI.git
cd lucUI
# open lucUI.css or run npm run build for lucUI.min.cssRepository: github.com/lucaf1-15/lucUI · License: MIT
20 standalone, hands-on tutorials. Each is one page with live preview, copyable code and an exercise.
Browse all 20 → · 1–2 for every major area, 1 for every secondary group.
Stage, container, card, buttons and theme toggle.
Open tutorial →Container 1400px, auto-fit and responsive collapse.
Open tutorial →12-col bento, metrics, wide/tall items.
Open tutorial →All accents, sizes, groups, disabled/loading.
Open tutorial →Glass inputs, selects, error hints.
Open tutorial →Also: Navbar, Theming, Modals, Tabs, Data Tables, Alerts, Carousel, Pricing, Timeline and Advanced Inputs.
Browse all →No scaffolding, no config. Copy a snippet, see it, ship it.