Playground

Kitchen sink

Every primitive's main example, one per section, in alphabetical order.

Accordion

What is an accordion?

A disclosure widget built from the native <details> and <summary> elements. The open/close animation uses the ::details-content pseudo-element — no JavaScript.

How does it work?

Each item is a separate <details>, so several can stay open at once. Click a summary or focus it and press Enter to toggle.

Why use it?

Keyboard support, state, and accessibility come from the platform — Zazz only styles the chrome through theme tokens.

Alert dialog

Autocomplete

Fruit

No results.

Avatar

John Doe

John Doe Founder, ACME Inc.

John Doe

John Doe Founder, ACME Inc.

Badge

Breadcrumbs

Button

Button group

Callout

Aside

A quieter surface for tips and context that readers can skip.

Scheduled maintenance

The dashboard is read-only on Saturday from 2 to 4 a.m. UTC.

Payment received

Your invoice is paid, and a receipt is on its way to your inbox.

Your trial ends in 3 days

Add a payment method to keep your projects running.

Deleting a workspace can't be undone

Its projects, files, and members are removed for good.

Card

Research

Migration patterns

Satellite collars reveal ancient routes herds still follow each dry season across the floodplain.

Carousel

Featured Articles

Field notes

How quickly zebras jump

Striped coats and sudden bursts of speed help herds evade predators when the grasslands go quiet at dusk.

Wildlife

Lions at golden hour

Warm light and long shadows make dawn patrols the best time to photograph big cats on the open plain.

Research

Migration patterns decoded

Satellite collars reveal ancient routes herds still follow each dry season across the floodplain.

Conservation

Rewilding the highlands

Community nurseries are planting native grasses and bringing endemic songbirds back to the ridgeline.

Checkbox

Preferences

Select all Subscribe to the newsletter Accept terms & conditions

Combobox

Country

No matches.

Command

No commands found.

Dialog

Fields

Input

Name

Email

We'll never sell or share your email address. Please enter a valid email address.

Phone

Datetime

Input group

Search

Search across every page in the docs.

Website https://

Where people can find you online. Enter a valid URL, e.g. https://zazz.sh.

Prompt

Enter to send · Shift + Enter for a new line.

Kbd

⌘ ⇧ ⌥ ↵ esc

Layout

Default band (xl)

--band: layout-md

--band: layout-bleed

--band: layout-sm, --band--lg: layout-xl

nested layout, data-layout-size="md"

Menu

Menubar

Documentation

Keyboard shortcuts

Report an issue

Meter

Storage used 52/100 GB 52 GB of 100 GB

Nearly full 93/100 GB 93 GB of 100 GB

OTP

Password group

Progress

Reticulating splines… 62% 62%

Prose

Heading 1

How vexingly quick daft zebras jump.

The Art of Typography

Heading 2

How vexingly quick daft zebras jump.

Heading 3

How vexingly quick daft zebras jump.

Heading 4

How vexingly quick daft zebras jump.

Heading 5