Get started

Choose your snippet

Pick what you are building and how you load it, then copy the lines. The CDN lines carry integrity hashes.

Snippets load tokens, core and catalog in the order the cascade layers expect; delete unused catalog lines.

Levels: Install LUZ. Build tool: With a bundler or framework.

Choose

Every snippet
What you are building	npm and a bundler	CDN with integrity hashes
Components only	Components only, with npm	Components only, from a CDN
Landing page	Landing page, with npm	Landing page, from a CDN
Blog or newspaper	Blog or newspaper, with npm	Blog or newspaper, from a CDN
Web application	Web application, with npm	Web application, from a CDN
Documentation site	Documentation site, with npm	Documentation site, from a CDN

Components only

Components only: with npm and a bundler


$
            pnpm add @luz-ds/tokens @luz-ds/core

Bundler

import "@luz-ds/tokens/css";
import "@luz-ds/core/css";

// Optional: copy buttons, tabs, players, the color mode
import "@luz-ds/core";

Components only: from a CDN, with integrity hashes

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css" integrity="sha384-XDR3N5eZIuICoLuh6LhwDDEdfeeDDf62e0WB8E0IMsBpvzBVFkwn7plVPLEHjP+W" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css" integrity="sha384-fMr2nR2ENqlXOiONQvKhudKJkiKRzMoTJ5GVe31O+28T4B7dAYQe9GTkBSKbWztr" crossorigin="anonymous">

<!-- Optional: copy buttons, tabs, players, the color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js" integrity="sha384-MgJmap9riiFYdSl/DtnXO2wMcRzxuIJS/nX5jqKRrOqK3VqhmfNRrfW3EP1WDJgA" crossorigin="anonymous"></script>

Landing page

Landing page: with npm and a bundler


$
            pnpm add @luz-ds/tokens @luz-ds/core @luz-ds/catalog

Bundler

import "@luz-ds/tokens/css";
import "@luz-ds/core/css";
// Optional: the search, then the site's patterns
import "@luz-ds/catalog/components/search.css";
import "@luz-ds/catalog/components/navbar.css";
import "@luz-ds/catalog/components/sidebar.css";
import "@luz-ds/catalog/components/timeline.css";
import "@luz-ds/catalog/components/site-header.css";
import "@luz-ds/catalog/components/hero.css";
import "@luz-ds/catalog/components/main.css";
import "@luz-ds/catalog/components/section.css";
import "@luz-ds/catalog/components/stat.css";
import "@luz-ds/catalog/components/site-footer.css";
import "@luz-ds/catalog/components/glow.css";
import "@luz-ds/catalog/components/social.css";
import "@luz-ds/catalog/components/pager.css";
import "@luz-ds/catalog/components/page-transition.css";

// Optional: copy buttons, tabs, players, the color mode
import "@luz-ds/core";
// Optional: the script of the search, cookie banner or color mode
import "@luz-ds/catalog";

Landing page: from a CDN, with integrity hashes

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css" integrity="sha384-XDR3N5eZIuICoLuh6LhwDDEdfeeDDf62e0WB8E0IMsBpvzBVFkwn7plVPLEHjP+W" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css" integrity="sha384-fMr2nR2ENqlXOiONQvKhudKJkiKRzMoTJ5GVe31O+28T4B7dAYQe9GTkBSKbWztr" crossorigin="anonymous">
<!-- Optional: the search, then the site's patterns -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/search.min.css" integrity="sha384-lktvmtjXJkC+jS1MMF6Yy/v6A4rPYhVrr92UquHxNMnB5PN/SyACqXPtuRFN6FUr" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/navbar.min.css" integrity="sha384-0Ei6tmImyRUt2v+8h1nC5eFL476Rf4AFL1pDqjqETU8/+v4Of4/M+I+ZOzS49yN7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/sidebar.min.css" integrity="sha384-vt36+ffiZY/k7pMatnSg+vcsgcYLY2cJSuWh3NBijr6OCkoyR0URAZbP0j6jTpjY" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/timeline.min.css" integrity="sha384-WQ94ImVKUsNsMfgRFc24RdFDrzH/9Dc6HCz4FWlUsAcQHX63oP72OzxMchEcBH5g" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/site-header.min.css" integrity="sha384-21PMBkvzBZetFOsMonT4oc4Ak41zobEeRyD0yfqjWd9UWhrz0PEpMPo/3hyvH1BH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/hero.min.css" integrity="sha384-yY6Z5/WOdLWJ5gJVsJd6tYONFWiaFA3uu8P2nHPqbXqdGhDCL5lVbif0VJ2a5CnB" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/main.min.css" integrity="sha384-fSDcBofUvDclss8ermBOj5Mp3HwqS0KiPg5PdY1+ux+91hdpKOF9wcLmM+G3Coq4" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/section.min.css" integrity="sha384-IQZYJCtvKeQG+qt4Hfu95jMHtMMQam8TJG78lOSvj106ud4ncidLUQ+JjWKJKKpV" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/stat.min.css" integrity="sha384-BWlLefgZb0IeWPuX51tf8D1yWKqyXVA8/5vQz+wACTjN+NRcfynLunkuHbLbeBf1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/site-footer.min.css" integrity="sha384-FR+jyrfxxEHbQxuQlEqke2i0HzUuuxoD3YoDetXacWWX9xoIm9TJ4NBGxW9dty3n" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/glow.min.css" integrity="sha384-Jz/eFLH0Ygi6iqQ+xcRrRhniKJbUEGD6yVdCDsRKJDrTq4H6FcjT1dFGo7UmRWba" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/social.min.css" integrity="sha384-a7rXzTCKPeGP05JiCrgSd1tOyQsheAc5koMRVa+SJ4QqOquCUAa6LOIai3xAbSD1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/pager.min.css" integrity="sha384-apHOhshKXJ9cDKk4V1UbHHNZsD1LAKerRICcUm1M/Eq0D9+4MP773thdHVdCz+Hs" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-transition.min.css" integrity="sha384-GsqR+xHLk9aIrM1VSOFUNPawklWIz22hiY8HI7pyriRycpgyDLTu5SOO2Fh9rPYW" crossorigin="anonymous">

<!-- Optional: copy buttons, tabs, players, the color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js" integrity="sha384-MgJmap9riiFYdSl/DtnXO2wMcRzxuIJS/nX5jqKRrOqK3VqhmfNRrfW3EP1WDJgA" crossorigin="anonymous"></script>
<!-- Optional: the script of the search, cookie banner or color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/catalog.min.js" integrity="sha384-9yK+raedLrnQW5Km+05ONPqF1nwZNDofo1bNJIfP4E10fnl8m8SSwYsuXQpw6Q97" crossorigin="anonymous"></script>

Blog or newspaper

Blog or newspaper: with npm and a bundler


$
            pnpm add @luz-ds/tokens @luz-ds/core @luz-ds/catalog

Bundler

import "@luz-ds/tokens/css";
import "@luz-ds/core/css";
// Optional: the search, then the site's patterns
import "@luz-ds/catalog/components/search.css";
import "@luz-ds/catalog/components/navbar.css";
import "@luz-ds/catalog/components/sidebar.css";
import "@luz-ds/catalog/components/timeline.css";
import "@luz-ds/catalog/components/site-header.css";
import "@luz-ds/catalog/components/masthead.css";
import "@luz-ds/catalog/components/site-footer.css";
import "@luz-ds/catalog/components/social.css";
import "@luz-ds/catalog/components/page-header.css";
import "@luz-ds/catalog/components/article-header.css";
import "@luz-ds/catalog/components/article.css";
import "@luz-ds/catalog/components/post-list.css";
import "@luz-ds/catalog/components/pager.css";
import "@luz-ds/catalog/components/page-transition.css";

// Optional: copy buttons, tabs, players, the color mode
import "@luz-ds/core";
// Optional: the script of the search, cookie banner or color mode
import "@luz-ds/catalog";

Blog or newspaper: from a CDN, with integrity hashes

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css" integrity="sha384-XDR3N5eZIuICoLuh6LhwDDEdfeeDDf62e0WB8E0IMsBpvzBVFkwn7plVPLEHjP+W" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css" integrity="sha384-fMr2nR2ENqlXOiONQvKhudKJkiKRzMoTJ5GVe31O+28T4B7dAYQe9GTkBSKbWztr" crossorigin="anonymous">
<!-- Optional: the search, then the site's patterns -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/search.min.css" integrity="sha384-lktvmtjXJkC+jS1MMF6Yy/v6A4rPYhVrr92UquHxNMnB5PN/SyACqXPtuRFN6FUr" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/navbar.min.css" integrity="sha384-0Ei6tmImyRUt2v+8h1nC5eFL476Rf4AFL1pDqjqETU8/+v4Of4/M+I+ZOzS49yN7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/sidebar.min.css" integrity="sha384-vt36+ffiZY/k7pMatnSg+vcsgcYLY2cJSuWh3NBijr6OCkoyR0URAZbP0j6jTpjY" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/timeline.min.css" integrity="sha384-WQ94ImVKUsNsMfgRFc24RdFDrzH/9Dc6HCz4FWlUsAcQHX63oP72OzxMchEcBH5g" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/site-header.min.css" integrity="sha384-21PMBkvzBZetFOsMonT4oc4Ak41zobEeRyD0yfqjWd9UWhrz0PEpMPo/3hyvH1BH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/masthead.min.css" integrity="sha384-Z8LZh/hdX8e75aVw/+7wsEa/DGjmU5P5Jr3gDfMgW5yUXZw0JBlB1bEZt8nUX9nx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/site-footer.min.css" integrity="sha384-FR+jyrfxxEHbQxuQlEqke2i0HzUuuxoD3YoDetXacWWX9xoIm9TJ4NBGxW9dty3n" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/social.min.css" integrity="sha384-a7rXzTCKPeGP05JiCrgSd1tOyQsheAc5koMRVa+SJ4QqOquCUAa6LOIai3xAbSD1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-header.min.css" integrity="sha384-ztr1TpMlxsr0pNxReBhVERsfWxHXAiYMNVCFT+0huLQ7YHwnUvU04TQSacaMQClw" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/article-header.min.css" integrity="sha384-CcF15TBfLmCLd5Zwh61D6udMRigUVTBJIag9a9m9AiT9rcJkGsbezhKC21x6xdJf" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/article.min.css" integrity="sha384-++/qFKiq0czspViBwQZuh0EkOdjOJVbhRawyPCZDM6MqKb06/TXzqV1chdzP7Lt7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/post-list.min.css" integrity="sha384-kK6zd16AVte8C1ge85pYFbh52scr+Tf3HNyUDxai1uQkIAT9+/5HJOWZZ/zzFn8H" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/pager.min.css" integrity="sha384-apHOhshKXJ9cDKk4V1UbHHNZsD1LAKerRICcUm1M/Eq0D9+4MP773thdHVdCz+Hs" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-transition.min.css" integrity="sha384-GsqR+xHLk9aIrM1VSOFUNPawklWIz22hiY8HI7pyriRycpgyDLTu5SOO2Fh9rPYW" crossorigin="anonymous">

<!-- Optional: copy buttons, tabs, players, the color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js" integrity="sha384-MgJmap9riiFYdSl/DtnXO2wMcRzxuIJS/nX5jqKRrOqK3VqhmfNRrfW3EP1WDJgA" crossorigin="anonymous"></script>
<!-- Optional: the script of the search, cookie banner or color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/catalog.min.js" integrity="sha384-9yK+raedLrnQW5Km+05ONPqF1nwZNDofo1bNJIfP4E10fnl8m8SSwYsuXQpw6Q97" crossorigin="anonymous"></script>

Web application

Web application: with npm and a bundler


$
            pnpm add @luz-ds/tokens @luz-ds/core @luz-ds/catalog

Bundler

import "@luz-ds/tokens/css";
import "@luz-ds/core/css";
// Optional: the search, then the site's patterns
import "@luz-ds/catalog/components/search.css";
import "@luz-ds/catalog/components/navbar.css";
import "@luz-ds/catalog/components/sidebar.css";
import "@luz-ds/catalog/components/social.css";
import "@luz-ds/catalog/components/app-bar.css";
import "@luz-ds/catalog/components/dashboard.css";
import "@luz-ds/catalog/components/bar-list.css";
import "@luz-ds/catalog/components/column-chart.css";
import "@luz-ds/catalog/components/stacked-bar.css";
import "@luz-ds/catalog/components/heat-map.css";
import "@luz-ds/catalog/components/ring.css";
import "@luz-ds/catalog/components/pager.css";
import "@luz-ds/catalog/components/page-transition.css";

// Optional: copy buttons, tabs, players, the color mode
import "@luz-ds/core";
// Optional: the script of the search, cookie banner or color mode
import "@luz-ds/catalog";

Web application: from a CDN, with integrity hashes

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css" integrity="sha384-XDR3N5eZIuICoLuh6LhwDDEdfeeDDf62e0WB8E0IMsBpvzBVFkwn7plVPLEHjP+W" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css" integrity="sha384-fMr2nR2ENqlXOiONQvKhudKJkiKRzMoTJ5GVe31O+28T4B7dAYQe9GTkBSKbWztr" crossorigin="anonymous">
<!-- Optional: the search, then the site's patterns -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/search.min.css" integrity="sha384-lktvmtjXJkC+jS1MMF6Yy/v6A4rPYhVrr92UquHxNMnB5PN/SyACqXPtuRFN6FUr" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/navbar.min.css" integrity="sha384-0Ei6tmImyRUt2v+8h1nC5eFL476Rf4AFL1pDqjqETU8/+v4Of4/M+I+ZOzS49yN7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/sidebar.min.css" integrity="sha384-vt36+ffiZY/k7pMatnSg+vcsgcYLY2cJSuWh3NBijr6OCkoyR0URAZbP0j6jTpjY" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/social.min.css" integrity="sha384-a7rXzTCKPeGP05JiCrgSd1tOyQsheAc5koMRVa+SJ4QqOquCUAa6LOIai3xAbSD1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/app-bar.min.css" integrity="sha384-coazETaShJ8FGQ4mRfMwvCnFxdigv1KQ6ShOIpp7Uu6aaRTzQcuPJJdYCKDLwiLM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/dashboard.min.css" integrity="sha384-G+VBlP1ufPGoYlRgylA/N+xI4iqLCarfUXTGrPbwteTmtaqhi7iVz7gXNXkK/gVy" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/bar-list.min.css" integrity="sha384-Xl3NzktxixQWSXVFEmjRxNMgf0ez9vdz5p03hix/CwaM9sMmZZWIxrG1tYeDXVuy" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/column-chart.min.css" integrity="sha384-K41y3b0ofKFEbXhPjLBtb3Df9mEHL3G4TWMgg3TdG6Xv9wQTxynvP/vdgh/m44rk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/stacked-bar.min.css" integrity="sha384-EawyC0MeY43Ls6Vyna5Wo6tQtAJbKY4vu6C6J930w4veLj3B1yFokJZyIu5APjrV" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/heat-map.min.css" integrity="sha384-DJgfU9rFnD5GNimPOCLjdOuNzoYZICrPETuLVH/pOo2F3LcYvJLCAPq85abuQpaw" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/ring.min.css" integrity="sha384-YaRd4u10aQ2xYJEzSk0IBieFbMmJkBTRW8kCchIj7ejPMF7CLvBpdCPmju18ffH5" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/pager.min.css" integrity="sha384-apHOhshKXJ9cDKk4V1UbHHNZsD1LAKerRICcUm1M/Eq0D9+4MP773thdHVdCz+Hs" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-transition.min.css" integrity="sha384-GsqR+xHLk9aIrM1VSOFUNPawklWIz22hiY8HI7pyriRycpgyDLTu5SOO2Fh9rPYW" crossorigin="anonymous">

<!-- Optional: copy buttons, tabs, players, the color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js" integrity="sha384-MgJmap9riiFYdSl/DtnXO2wMcRzxuIJS/nX5jqKRrOqK3VqhmfNRrfW3EP1WDJgA" crossorigin="anonymous"></script>
<!-- Optional: the script of the search, cookie banner or color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/catalog.min.js" integrity="sha384-9yK+raedLrnQW5Km+05ONPqF1nwZNDofo1bNJIfP4E10fnl8m8SSwYsuXQpw6Q97" crossorigin="anonymous"></script>

Documentation site

Documentation site: with npm and a bundler


$
            pnpm add @luz-ds/tokens @luz-ds/core @luz-ds/catalog

Bundler

import "@luz-ds/tokens/css";
import "@luz-ds/core/css";
// Optional: the search, then the site's patterns
import "@luz-ds/catalog/components/search.css";
import "@luz-ds/catalog/components/navbar.css";
import "@luz-ds/catalog/components/sidebar.css";
import "@luz-ds/catalog/components/terminal.css";
import "@luz-ds/catalog/components/social.css";
import "@luz-ds/catalog/components/docs-layout.css";
import "@luz-ds/catalog/components/doc-header.css";
import "@luz-ds/catalog/components/page-rail.css";
import "@luz-ds/catalog/components/example.css";
import "@luz-ds/catalog/components/do-dont.css";
import "@luz-ds/catalog/components/pager.css";
import "@luz-ds/catalog/components/page-footer.css";
import "@luz-ds/catalog/components/page-transition.css";

// Optional: copy buttons, tabs, players, the color mode
import "@luz-ds/core";
// Optional: the script of the search, cookie banner or color mode
import "@luz-ds/catalog";

Documentation site: from a CDN, with integrity hashes

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css" integrity="sha384-XDR3N5eZIuICoLuh6LhwDDEdfeeDDf62e0WB8E0IMsBpvzBVFkwn7plVPLEHjP+W" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css" integrity="sha384-fMr2nR2ENqlXOiONQvKhudKJkiKRzMoTJ5GVe31O+28T4B7dAYQe9GTkBSKbWztr" crossorigin="anonymous">
<!-- Optional: the search, then the site's patterns -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/search.min.css" integrity="sha384-lktvmtjXJkC+jS1MMF6Yy/v6A4rPYhVrr92UquHxNMnB5PN/SyACqXPtuRFN6FUr" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/navbar.min.css" integrity="sha384-0Ei6tmImyRUt2v+8h1nC5eFL476Rf4AFL1pDqjqETU8/+v4Of4/M+I+ZOzS49yN7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/sidebar.min.css" integrity="sha384-vt36+ffiZY/k7pMatnSg+vcsgcYLY2cJSuWh3NBijr6OCkoyR0URAZbP0j6jTpjY" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/terminal.min.css" integrity="sha384-DKqk/lNOyNOUUo7fPv1IE50Kem82XAMIrVewVyJVZ1XQZI8HSjIXq/4xahlXy/Ai" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/social.min.css" integrity="sha384-a7rXzTCKPeGP05JiCrgSd1tOyQsheAc5koMRVa+SJ4QqOquCUAa6LOIai3xAbSD1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/docs-layout.min.css" integrity="sha384-4mL+wj5xGmF98hYy2houcLGyUl4xNNTemLvMbtsCj1A7wpQ7RE3Ng26GboK9hgm9" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/doc-header.min.css" integrity="sha384-cVHBijhO5S1m513QmZHN7btnqgne60iGIX8ZA3KRh9BkZafEAbeVcEurGxtfGbg+" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-rail.min.css" integrity="sha384-rtBwzNTcuj/dbwc7iMTxhqi7LU16M2g06o5Y73z+/VADATrf1qbSJBM+Z2b3pNjq" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/example.min.css" integrity="sha384-6PMwsV5nwigGpYPyw438GJj5Dk1YJ3/7pLnMLEe0VWvR1iM/pgM131Vldh0IEwh7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/do-dont.min.css" integrity="sha384-Oy/gLexm/R2x1z6J/k+HPFqeZFukZ9a8dRAA4oXn0+KTbjg3uYSlaRV5fhdnM+UK" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/pager.min.css" integrity="sha384-apHOhshKXJ9cDKk4V1UbHHNZsD1LAKerRICcUm1M/Eq0D9+4MP773thdHVdCz+Hs" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-footer.min.css" integrity="sha384-jt0ORcEHERojNhPk2BjZ9bJ3A6cELFABApWGVM0vxUZRBxP3Ey+rPedqU+FdVuwx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-transition.min.css" integrity="sha384-GsqR+xHLk9aIrM1VSOFUNPawklWIz22hiY8HI7pyriRycpgyDLTu5SOO2Fh9rPYW" crossorigin="anonymous">

<!-- Optional: copy buttons, tabs, players, the color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js" integrity="sha384-MgJmap9riiFYdSl/DtnXO2wMcRzxuIJS/nX5jqKRrOqK3VqhmfNRrfW3EP1WDJgA" crossorigin="anonymous"></script>
<!-- Optional: the script of the search, cookie banner or color mode -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/catalog.min.js" integrity="sha384-9yK+raedLrnQW5Km+05ONPqF1nwZNDofo1bNJIfP4E10fnl8m8SSwYsuXQpw6Q97" crossorigin="anonymous"></script>

In a project that already has a design

Link luz.conditional.css instead of luz.css: LUZ then styles only what is inside an element with data-luz and leaves the rest of the page alone. The tokens still go on the whole page. Put the hash on the link as below.

Bundler

import "@luz-ds/core/conditional.css";

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.conditional.min.css" integrity="sha384-1jsTEY3cLnNPfALWtfrz96HsP+qTD5jAdrw052lyYK8p/qQC6kuOwYR5oTiFCSDD" crossorigin="anonymous">

Lazy chunks

Core and catalog load some files only when the page needs them: a sortable table, a timeline, a MIDI player, a page in Spanish, the search, the cookie banner. A hash on a script covers that file only, so a chunk needs its own. An import map with an integrity section, before the first module script, gives it one in every browser: each chunk is checked when imported, and a file with a wrong hash does not run.

Safari and Firefox do not use the integrity of a <link rel="modulepreload"> to block a file: it is a performance hint only, to fetch a chunk earlier, never the check. The import map below lists every chunk; keep only the lines for what the page has, as the rows say.

HTML

<script type="importmap">
{
  "integrity": {
    "https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/midi.min.js": "sha384-qYxDdj3uAhbdUBDWT7jKDDCywLuqavvW9tVuyh+dRvCaf9Ukr/C93m7VAx3EgYjj",
    "https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/table-sort.min.js": "sha384-R+imdkLSyzPq7oSWCtDRr7lxmMxpy4ukmtJG2wc+DtF7AfPuRnKbaMxnSEPQrMFi",
    "https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/theme-mode.min.js": "sha384-natHpSKARqNGw7XHQ7s2PQjzR83vuwhXKtW/xxpDvNHakqeGpuN/B33vrBFWvVLr",
    "https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/i18n-es.min.js": "sha384-hmysBmnti/r4ub7ZS3vur8pw2+jJw8QpZYTaLopcro/UVYoInmtmrYxDd5bwxQJM",
    "https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/search.min.js": "sha384-S9oCuJm2Eyxy52qJPehLtpUO6057TK/v4BurHupLx74lJjHKds3lGW2wS+mkA0ZS",
    "https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/cookie-consent.min.js": "sha384-67nVjdLKj+0xrpgF+0EJ2cvph+Cz00GUBTcP94H01lHn2xJ6+4c2p1C5i6tiDekk",
    "https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/theme-time.min.js": "sha384-79NCjHgg/L5aw6lJesDu0BPd1MfmzEKBwrL6hoZAyFCvu5/rzpgFFAFQTtazvqe0",
    "https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/theme-time-bar.min.js": "sha384-UsWVYOe04YXi+RzpJoLBTyF2Kji5Xl77xVRxiQQ0r5PrihUMq43BosGMo9Z1grmI",
    "https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/timeline.min.js": "sha384-V0MpD8vJQAhW+TsJde49OKnXnDZxBD0bNnlGpzNT1vW7DSQphT9FS97dwiC/ZI8f",
    "https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/embed.min.js": "sha384-/AxQtyKTjA48ndCh3MqFojzjPXKQv1HACJqM59folkNXdgE1HyK0k9T4WPtDf22I",
    "https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/chart.min.js": "sha384-BpfRIlP3eLWKd8NDIZjYJZpwBj+/XcK1+af4itrd8u4YsCSQOSa/qaVXPiZ8xsxK",
    "https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/sidebar.min.js": "sha384-cJ/dAd5heZXVOf1Bss/FCjYe56msQTYileWWgrQJo614LNEXL0CtVgvOc1SOMctD"
  }
}
</script>

A hint to fetch a chunk earlier looks like this. It checks nothing in Safari and Firefox, so it never replaces the import map:

HTML

<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/search.min.js" integrity="sha384-S9oCuJm2Eyxy52qJPehLtpUO6057TK/v4BurHupLx74lJjHKds3lGW2wS+mkA0ZS" crossorigin="anonymous">

To add one chunk to a map you have, put its line from the table inside integrity, with a comma after every line but the last.

Lazy chunks
File	Add the line only if the page has	Line to add
`midi.min.js`	a `.luz-player` with `data-type="midi"`	HTML `"https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/midi.min.js": "sha384-qYxDdj3uAhbdUBDWT7jKDDCywLuqavvW9tVuyh+dRvCaf9Ukr/C93m7VAx3EgYjj"`
`table-sort.min.js`	a sortable table, with `th[data-luz-sort]`	HTML `"https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/table-sort.min.js": "sha384-R+imdkLSyzPq7oSWCtDRr7lxmMxpy4ukmtJG2wc+DtF7AfPuRnKbaMxnSEPQrMFi"`
`theme-mode.min.js`	a `<luz-theme-mode>`	HTML `"https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/theme-mode.min.js": "sha384-natHpSKARqNGw7XHQ7s2PQjzR83vuwhXKtW/xxpDvNHakqeGpuN/B33vrBFWvVLr"`
`i18n-es.min.js`	an element with `lang="es"` in the page, outside a link or an option	HTML `"https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/i18n-es.min.js": "sha384-hmysBmnti/r4ub7ZS3vur8pw2+jJw8QpZYTaLopcro/UVYoInmtmrYxDd5bwxQJM"`
`search.min.js`	a `<luz-search>`	HTML `"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/search.min.js": "sha384-S9oCuJm2Eyxy52qJPehLtpUO6057TK/v4BurHupLx74lJjHKds3lGW2wS+mkA0ZS"`
`cookie-consent.min.js`	a `<luz-cookie-consent>`	HTML `"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/cookie-consent.min.js": "sha384-67nVjdLKj+0xrpgF+0EJ2cvph+Cz00GUBTcP94H01lHn2xJ6+4c2p1C5i6tiDekk"`
`theme-time.min.js`	a `<luz-theme-time>`	HTML `"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/theme-time.min.js": "sha384-79NCjHgg/L5aw6lJesDu0BPd1MfmzEKBwrL6hoZAyFCvu5/rzpgFFAFQTtazvqe0"`
`theme-time-bar.min.js`	a `<luz-theme-time>` with `variant="bar"`	HTML `"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/theme-time-bar.min.js": "sha384-UsWVYOe04YXi+RzpJoLBTyF2Kji5Xl77xVRxiQQ0r5PrihUMq43BosGMo9Z1grmI"`
`timeline.min.js`	a `<luz-timeline>`	HTML `"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/timeline.min.js": "sha384-V0MpD8vJQAhW+TsJde49OKnXnDZxBD0bNnlGpzNT1vW7DSQphT9FS97dwiC/ZI8f"`
`embed.min.js`	an `<luz-embed>`	HTML `"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/embed.min.js": "sha384-/AxQtyKTjA48ndCh3MqFojzjPXKQv1HACJqM59folkNXdgE1HyK0k9T4WPtDf22I"`
`chart.min.js`	a `<luz-chart>`	HTML `"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/chart.min.js": "sha384-BpfRIlP3eLWKd8NDIZjYJZpwBj+/XcK1+af4itrd8u4YsCSQOSa/qaVXPiZ8xsxK"`
`sidebar.min.js`	a `.luz-sidebar`, or a list marked `data-luz-spy`	HTML `"https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/sidebar.min.js": "sha384-cJ/dAd5heZXVOf1Bss/FCjYe56msQTYileWWgrQJo614LNEXL0CtVgvOc1SOMctD"`

Verify a hash yourself

Every hash here is computed from the published file when the docs are built. To check one, hash the file you load the same way:

Shell

curl -s <url of the file> | openssl dgst -sha384 -binary | openssl base64 -A

The result, after sha384-, is the value of integrity. If it differs from the page, do not load the file: the version or the file has changed.