LUZ documentation

Install LUZ, find a component and copy its markup. Every example is live and follows the color mode you pick.

Beta Names and classes can still change. Pin an exact version. Read the changelog

Browse the A–Z index Search components, tokens and HTML elements by name.

Start here

• Get started

  Install the tokens only, add the components, or take the full stack. One command, or the CDN tags to paste.

• Core

  29 components with a live demo, the markup to copy, and when to use each.

More reference

• Tokens Colors, spacing, type and motion, in light, dark and high contrast.
• Catalog Page patterns: shell, header, sections, footer and search.
• HTML elements How LUZ styles each of the 116 HTML elements.
• Accessibility What is tested, what is not, and the known issues.

How these pages work

• Every component and pattern page shows a live example and its known issues first, then two tabs: Code for developers and Design for designers.
• Pages open on Code. If you pick Design, the next page opens on Design too: this browser remembers your last choice, as it remembers the color mode. Nothing is sent anywhere.
• Without JavaScript, both tabs show one after the other.