Zazz Design Framework

A web-native ui library

Zazz is a CSS and vanilla JavaScript UI kit that does not require a build step. It uses semantic design tokens, cascade layers, data-* variants, and browser APIs such as popover, dialog, and anchor positioning.

Read the docsFigma kit

Examples

button
Loading components…
<button class="ui-button" data-variant="primary">
switch
Loading components…
<input type="checkbox" role="switch">
slider
Loading components…
<input type="range">
badge
Loading components…
<button class="ui-badge">
toggle-group
Loading components…
<ui-toggle-group role="group">
progress
Loading components…
<progress class="ui-progress">
kbd
Loading components…
<kbd>⌘</kbd>
otp
Loading components…
<ui-otp data-otp-groups="3-3">

How it works

No build step
Zazz runs on CSS and standard browser APIs without required bundlers or frameworks.
Cascade layers
Later layers override earlier ones regardless of selector specificity, so utilities beat component rules without !important.
Design tokens
Values are CSS custom properties on :root. Components read var(--token), so updating a variable restyles the UI.
Data attributes
Variants use attributes like data-variant="primary" instead of modifier classes. Omitting the attribute renders the default.

Install

pnpm add @zazz-ui/core
import "@zazz-ui/core/index.css"; // all styles, imported in cascade orderimport "@zazz-ui/core"; // custom elements and shared behaviors