Tutorials
20 standalone, hands-on tutorials. Each is one page, lives in plain HTML + lucUI, and ends with a working interface. 1–2 for every major area, 1 for every secondary component group.
Major — Foundations & Theming
Core system — layout, type, tokens and themes. Two tutorials each where depth matters.
Build your first page
Stage, container, prism card, buttons and theme toggle — zero tooling.
Open → 02 · 10 minLayout & Grid
Container 1400px, auto-fit, flex and responsive collapse.
Open → 03 · 15 minBento Dashboard
12-col bento, metrics, wide/tall items.
Open → 08 · 10 minTheming — Light & Dark
data-theme, semantic tokens and persistence.
Open → 08b · 12 minTokens & Customization
Override --studio-gold etc. without forking.
Open →Major — Components (1–2 each)
The workhorses — each gets a dedicated tutorial, some two where variants matter.
Buttons
All accents, sizes, groups, disabled/loading.
Open → 05 · 10 minCards & Prism
Glass levels, spotlight, header/body/footer.
Open → 06 · 12 minForms — Inputs
Glass inputs, selects, checkboxes.
Open → 06b · 10 minForm Validation
Error hints, aria-invalid and alerts.
Open → 07 · 12 minNavbar — Responsive
Fixed glass bar, hamburger wiring.
Open → 07b · 10 minNavbar — Mega & Search
Mega grid, search and user menu.
Open → 09 · 12 minModals, Toasts & Command
Overlays, focus trap, Cmd+K.
Open → 10 · 10 minTabs & Accordion
Arrow keys, native details.
Open → 11 · 12 minData Tables & Progress
Tables, pagination, skeletons.
Open →Secondary — one per group
Less frequent but still lucUI — each group gets a focused, copy-paste tutorial.
Alerts, Badges & Chips
Feedback without noise.
Open → 13 · 8 minBreadcrumbs & Pagination
Navigation aids, dropdowns, tooltips.
Open → 14 · 10 minCarousel & Gallery
Indicators, grid gallery.
Open → 15 · 12 minPricing & Marketing
Hero, features, pricing, testimonials.
Open → 16 · 8 minTimeline & Stepper
Progress over time.
Open → 17 · 12 minAdvanced Inputs
Search, datepicker, file upload, range, toggle.
Open →