Zazz tests
Components

Component kitchen sink

Each block is adapted from the component's single-source example. Tooltips, menus, and the dialog use the native Popover and Invoker Commands APIs; tabs are a light-DOM custom element. Try them with mouse and keyboard.

Buttons

Toggle Group

Buttons

Badges

Breadcrumbs

Tooltip and menu

Add to library

Dialog

Dialog title

Opened with an invoker command. Closes on backdrop click, Escape, or either button.

Set the size of the dialog with the data-size attribute.

Accordion

What is an accordion?

A disclosure widget built from the native <details> and <summary> elements. The open and close animation uses the ::details-content pseudo-element, with 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.

Tabs

Account

Manage your profile, email, and password.

Billing

Review invoices and update your payment method.

Notifications

Choose what we email you about and how often.

Cards

Zebras grazing at dawn on the savanna
Field notes

How quickly zebras jump

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

Read article
A lion resting in tall golden grass
Wildlife

Lions at golden hour

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

View gallery
Elephants crossing a dusty riverbed
Research

Migration patterns decoded

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

See the data

Avatars

John Doe Founder, ACME Inc.
Ada Lovelace Initials fallback
Prose

Long-form content

Wrap rich text in .ui-prose for tuned typography. Body and paragraphs default to .text-md; override size with .text-xs through .text-xl.

How vexingly quick daft zebras jump.

Default paragraph — no class needed; matches body size. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

How vexingly quick daft zebras jump.

Default paragraph — no class needed; matches body size. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

How vexingly quick daft zebras jump.

Default paragraph — no class needed; matches body size. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

How vexingly quick daft zebras jump.

Default paragraph — no class needed; matches body size. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

How vexingly quick daft zebras jump.

Default paragraph — no class needed; matches body size. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

How vexingly quick daft zebras jump.

Default paragraph — no class needed; matches body size. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.

text-lg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.

text-md

Default paragraph — no class needed; matches body size. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.

text-xs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.

Prose

Paragraph spacing

Wrap rich text in .ui-prose for tuned typography. Body and paragraphs default to .text-md; override size with .text-xs through .text-xl.

Inline semantics: strong emphasis, italic emphasis, a prose link, and inline code.

Typography is the craft of endowing human language with a durable visual form.

— Robert Bringhurst
Unordered list
  • Unordered list item with disc markers.
  • Sentence case headings and labels throughout.
  • Semantic role tokens, so dark mode swaps for free.
Ordered list
  1. Ordered list item one.
  2. Ordered list item two.
  3. Ordered list item three.
Soliloquy
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
Monologue
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
Aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.
Placeholder demonstrating figure and image styling within prose
Figure with caption — images pick up radius and border from prose tokens.