Installation

Add Zazz to any project using npm, CDN, or standalone source files. No build step required.

Zazz runs on CSS and standard browser APIs without required bundlers or frameworks.

Choose an installation method:

npm: For projects with a package.json needing versioned package updates.
CDN: Load two tags in HTML without installing dependencies.
Copy files: Keep component source directly in your project.

npm

pnpm add @zazz-ui/core
# or: npm install @zazz-ui/core

Import the stylesheet and optional component scripts:

import "@zazz-ui/core/index.css";
import "@zazz-ui/core"; // component scripts

Pre-flattened bundles are available at @zazz-ui/core/zazz.css and @zazz-ui/core/zazz.js.

CDN

Load pre-bundled files via jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zazz-ui/core/dist/zazz.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@zazz-ui/core/dist/zazz.js"></script>

You can also load individual stylesheets:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@zazz-ui/core/src/primitives/dialog/dialog.css"
/>

Pin an explicit version in production (@zazz-ui/core@0.x.y) to avoid unexpected changes.

Copy source files

Components live in src/primitives/<name>/ with their stylesheets, scripts, and markup examples. Base layers live in src/base/.

Copy using degit:

# entire source directory
pnpm dlx degit dereknelsen/zazz-ui/packages/core/src ./zazz

# single component folder
pnpm dlx degit dereknelsen/zazz-ui/packages/core/src/primitives/dialog ./zazz/primitives/dialog

Repo component scripts are TypeScript. For compiled JS without a TS build step, extract .js files from the published npm package or CDN URLs.

Link the stylesheet

Reference index.css in your HTML:

<link rel="stylesheet" href="./zazz/index.css" />

Enable gzip or Brotli on your server for production compression.

Verification

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="light dark" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zazz-ui/core/dist/zazz.css" />
    <title>Zazz Test</title>
  </head>
  <body>
    <button class="ui-button" data-variant="primary">It works</button>
  </body>
</html>

Package structure

@zazz-ui/core/
├── src/
│   ├── index.css                   (stylesheet entry)
│   ├── index.js                    (script entry)
│   ├── base/
│   │   ├── _layers.css             (cascade layers)
│   │   ├── _variables.css          (design tokens)
│   │   ├── _reset.css              (element baselines)
│   │   ├── _typography.css         (type scale and .ui-prose)
│   │   ├── _view-transitions.css   (page transitions)
│   │   ├── _utilities.css          (utility classes)
│   │   ├── _layout.css             (container and layout utilities)
│   │   └── utils.js, reveal.js...  (shared runtime)
│   └── primitives/
│       ├── button/
│       │   ├── button.css
│       │   └── button.html
│       └── ...
└── dist/
    ├── zazz.css                    (standalone CSS bundle)
    └── zazz.js                     (standalone JS bundle)

Customization

Override variables in your own stylesheet loaded after Zazz:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zazz-ui/core/dist/zazz.css" />
<link rel="stylesheet" href="./your-styles.css" />

/* your-styles.css */
:root {
  --primary: oklch(0.6 0.2 145);
  --radius-md: 0;
}