Tutorial 01 · Foundations

Build your first page

Create a complete lucUI page from scratch — stage, container, cards, buttons and theme toggle — no bundler.

8 minBeginnerlucUI 2 · v2.1.3

Objectives

  • Set up plain HTML that loads lucUI correctly.
  • Compose .luc-stage + .luc-container + .luc-card.
  • Verify light/dark themes and copy-code.
You will build

A hero with gradient title, two buttons, and a prism card — the minimum viable lucUI page.

Prerequisites

A blank index.html. Use CDN or npm install lucui-css-framework (v2.1.3). No frameworks.

head.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lucUI.min.css">
<html data-theme="dark">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lucUI.js"></script>

Steps

Scaffold

Create container and stage. Stage gives aurora + grid.

index.html
<div class="luc-container">
  <section class="luc-stage">
    <div class="luc-stage-content luc-text-center">
      <span class="luc-kicker">Hello</span>
      <h1 class="luc-gradient-text">Your first page</h1>
    </div>
  </section>
</div>

Add glass card + buttons

Buttons are real: .luc-btn-primary has gold gradient.

card.html
<article class="luc-card luc-prism" data-luc-spotlight>
  <h3 class="luc-card-title">Prism</h3>
  <button class="luc-btn luc-btn-primary">Get Started</button>
  <button class="luc-btn luc-btn-transparency">Docs</button>
</article>

Prism

Theme toggle

Add data-luc-theme-toggle — lucUI persists to localStorage.

theme.html
<button class="luc-theme-toggle" data-luc-theme-toggle>
  <svg data-luc-theme-icon="moon"></svg><svg data-luc-theme-icon="sun"></svg>
</button>

Result

Resize to 320px — no horizontal scroll, grid collapses, buttons become full-width. Try light/dark.

Manrope 800DM Sans 500

Exercise

  1. Swap --studio-gold to #c8b87a in :root and confirm buttons update.
  2. Add a second .luc-card with .luc-badge row.
  3. Deploy to Cloudflare Pages — only static files.
Check

Inspect with Lighthouse — lucUI ships focus rings and reduced-motion guards.

← Previous Next →