# LUZ documentation

Install LUZ, find a component and copy its markup, or look up a token, a page pattern or an HTML element.

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](https://github.com/nandovejer/luz/blob/main/CHANGELOG.md)

[Browse the A–Z index](https://nandovejer.github.io/luz/docs/a-z/) 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](https://nandovejer.github.io/luz/docs/tokens/) Colors, spacing, type and motion, in light, dark and high contrast.
- [Catalog](https://nandovejer.github.io/luz/docs/catalog/) Page patterns: shell, header, sections, footer and search.
- [HTML elements](https://nandovejer.github.io/luz/docs/html/) How LUZ styles each of the 116 HTML elements.
- [Accessibility](https://nandovejer.github.io/luz/docs/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.