Vanilla Breeze

Kitchen Sink

All Vanilla Breeze components demonstrated in one scrollable page. Use this as a comprehensive reference and visual testing ground.

Design Tokens

Gray Scale

Gray scale tokens (requires JS)

Semantic Colors

Semantic color tokens (requires JS)

Spacing Scale

3xs
var(--size-3xs)
2xs
var(--size-2xs)
xs
var(--size-xs)
s
var(--size-s)
m
var(--size-m)
l
var(--size-l)
xl
var(--size-xl)
2xl
var(--size-2xl)
3xl
var(--size-3xl)

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Prose

This is a paragraph with bold text, italic text, and inline code. Links look like this.

This is a blockquote. It's styled with a left border and muted color. 
// Preformatted code block
function greet(name) {
  return name;
}

Lists

  • Unordered list item one
  • Unordered list item two
  • Unordered list item three
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three

Inline Semantics

  • HTML - abbreviation with tooltip
  • The Elements of Typographic Style - citation
  • Progressive Enhancement - definition term
  • To be or not to be - inline quote
  • The price was $100 $80 - strikethrough and insert
  • H2O and E=mc2 - subscript and superscript
  • - time element
  • Press Ctrl + S to save - keyboard input
  • Old content New content - diff-style editing

Highlighted text: important, success, warning, error

Ruby Annotations

Japanese: 漢かん字じ (Kanji with furigana)

Chinese: 北京Beijing (Pinyin pronunciation)

With fallback: 明日(あした)

Heading Group

Article Title

A subtitle or tagline for the article

Chapter 1

The Beginning

Icons

Using the <icon-wc> component with Lucide icons.

Sizes

Common Icons

In Buttons

Inherits Color

Buttons & Actions

Variants

Sizes

slide-accept

Slide-to-confirm interaction. Falls back to checkbox without JS.

share-wc

Share buttons with Web Share API integration.

Form Controls

Text Inputs

Checkbox & Radio

Checkboxes
Radio Buttons

data-switch

Toggle switches in three sizes.

data-range

Enhanced range slider with value bubble.

data-stepper

Number input with increment/decrement buttons.

data-color

Enhanced color picker with swatch and hex display.

data-upload

File upload with drag-and-drop zone.

data-toggle-tags

Pill-style tag selection.

Favorite Topics

data-accept & data-mask

Customizable Select

Uses appearance: base-select in supporting browsers (Chrome 135+).

star-rating

Interactive star rating. Falls back to radio buttons.

Rating

combo-box

Enhanced autocomplete. Falls back to native datalist.

Form Layouts

.stacked
.inline

Fieldset

Account Details

Layout Primitives

layout-stack

Vertical stacking with configurable gap.

gap="xs"

Item 1

Item 2

Item 3

 gap="m"

Item 1

Item 2

Item 3

 gap="xl"

Item 1

Item 2

Item 3

layout-cluster

Horizontal flex layout with wrapping.

Item 1

Item 2

Item 3

Item 4

Item 5

Start

Middle

End

layout-card

Container with background, padding, and optional shadow or border.

Default

Subtle shadow

 Elevated

Stronger shadow

 Outlined

Border, no shadow

 Ghost

No background or shadow

layout-grid

Auto-fit grid with configurable minimum column width.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Sidebar layout with flexible main content area.

Sidebar

Navigation or filters

 Main Content

This area grows to fill available space while the sidebar maintains its width.

layout-center

Centered content container with configurable max-width.

Narrow - Max width for reading content

Intrinsic + Text

Content centered within container

layout-cover

Full-height container with vertically centered principal element.

Header content

Centered Principal

This content is vertically centered using data-layout-principal
Footer content

data-media

Aspect ratio container for media.

16:9
16:9 image
1:1
Square image
4:3
4:3 image

layout-reel

Horizontal scrolling container with scroll snap.

Card 1

Scroll horizontally to see more cards.

 Card 2

Each card snaps into place.

 Card 3

Works with touch and mouse.

 Card 4

Configurable gap and item width.

 Card 5

Last card in the reel.

layout-text

Content container with proper typographic spacing.

Article Title

This paragraph follows the heading with tighter spacing due to the proximity principle.

Another paragraph with standard vertical rhythm.

  • First item
  • Second item
  • Third item

Paragraphs after lists continue with normal rhythm.

layout-switcher

Flexbox that switches from horizontal to vertical at a container threshold.

Panel A

Panel B

Panel C

layout-imposter

Positioning helper for overlays and badges. Centers content by default.

Centered

layout-canvas

Full-bleed surface for content sections.

Canvas provides a full-bleed background surface.

layout-badge

Inline badge/tag component with color and size variants.

Default Primary Success Warning Error Info Small Default Large Outlined Subtle Square

Content & Data Display

Table

Monthly Sales Data
Month Product Units Revenue
January Widget A 150 $4,500
January Widget B 89 $2,670
February Widget A 175 $5,250
February Widget B 102 $3,060
Total 516 $15,480

Progress & Meter

Progress sizes Progress colors Meter states

Figure

Default figure
Default figure with caption
Bordered figure
Bordered figure with caption

Images

Default Random landscape .rounded Rounded image .circle Avatar

Aside Callouts

Output

42 $1,234.56 Success Warning Error

Horizontal Rule

Default
.decorative

Definition List

HTML
HyperText Markup Language — the standard markup for web documents.
CSS
Cascading Style Sheets — describes how HTML elements are displayed.
JavaScript
A programming language for adding interactivity to web pages.

progress (ring mode)

Circular progress indicator via native <progress>.

25% 60% 90%

loading-spinner

text-divider

Horizontal rule with centered text.

or continue with Chapter 1

brand-mark

Logo + wordmark component.

Acme Inc

user-avatar

Avatar with image or text fallback.

User User AB CD

status-message

Alert/notification banners with variants.

Information
This is an informational message.
Success
Operation completed successfully.
Warning
Please review before continuing.
Error
Something went wrong. Please try again.

Data Attributes & Utilities

data-format-number

Locale-aware number formatting.

Decimal 1,234,567 Currency $48,200 Percent 85% Compact 1.5M

data-format-date

Locale-aware date formatting.

Medium (default) Full Relative

data-format-bytes

File size formatting.

1 MB 1 MB 5 GB 5 GB

data-copy

Clipboard copy with visual feedback.

data-hotkey

Platform-aware keyboard shortcut display.

Save Ctrl+S Search Ctrl+K Bold Ctrl+B

data-spoiler

Content concealment with reveal interaction.

Blur (default)
The butler did it, in the library, with the candlestick.
 Solid
Hidden content behind a solid overlay.

Interactive Components

Details / Accordion

What is Vanilla Breeze?

Vanilla Breeze is a layered HTML component system that extends HTML's native model with CSS custom properties, custom elements, and web components.

How does progressive enhancement work?

Components are built to work without JavaScript first. CSS provides visual styling and layout. JavaScript then enhances with interactivity and accessibility features.

What browsers are supported?

All modern browsers are supported. The library uses native CSS features like @layer, custom properties, and :has() which have broad support.

tab-set

Accessible tab component built on native details elements.

Overview

The tab-set component uses native <details name=""> elements for progressive enhancement. Without JavaScript, it works as an accordion.
Features
  • Progressive enhancement - works without JS
  • Arrow keys to move between tabs
  • Automatic ARIA role assignment
Usage

Wrap <details name="..."> elements in a <tab-set>.

accordion-wc

Collapsible content panels with optional single-open mode.

Default (multi-open)
What is Vanilla Breeze?

A layered HTML component system that extends HTML's native model.

How does it work?

Components work without JavaScript first. CSS provides styling, then JS enhances.

 Bordered + Single-open
Bordered Style

The bordered variant adds a container border and dividers between items.

Single Open Mode

Only one panel can be open at a time.

dialog

Modal dialog with focus trap, ESC to close, and animations.

Dialog

The default dialog with Invokers API for declarative open/close.

  • Press ESC to close
  • Animated transitions
  • Automatic focus management

Form Dialog

tool-tip

Enhanced tooltips with positioning and keyboard support.

toast-msg

Non-modal notifications with auto-dismiss and variants.

foot-notes

The Vanilla Breeze frameworkVanilla Breeze is an experimental component library exploring progressive enhancement patterns. provides a layered approach to styling HTML. It builds on native browser featuresIncluding CSS custom properties, @layer, :has(), and the details element. rather than requiring heavy JavaScript frameworks.

drop-down

Enhanced dropdown menu. Falls back to native details/summary.

    •

    context-menu

    Right-click context menu. Right-click the card below.

    Right-click here

    • command-palette

    Searchable command panel. Press Ctrl+K or click the button.

    carousel-wc

    Accessible carousel with keyboard navigation and indicators.

    Slide 1

    Progressive enhancement at every layer.

         Slide 2

    Native HTML elements, enhanced with CSS.

         Slide 3

    Web components for complex interactions.

    content-swap

    Two-face card with click-to-toggle. Falls back to both faces visible.

    Front Face

    Click to flip this card.

         Back Face

    Click again to return.

    compare-surface

    Before/after image comparison with draggable divider.

    Before After

    split-surface

    Resizable panel layout with draggable divider.

    Content

    Drag the divider to resize panels.

    consent-banner

    Cookie consent banner. Dismiss persists to localStorage.

    This site uses cookies for analytics. Privacy Policy

    If already dismissed, to see it again.

    emoji-picker

    Emoji insertion for text inputs.

    Specialized Components

    qr-code

    Generates a QR code from a URL or text.

    vanillabreeze.dev

    color-palette

    Interactive color swatch display. Click to copy hex value.

    Color palette (requires JS)

    type-specimen

    Font preview with editable sample text.

    The quick brown fox jumps over the lazy dog

    ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

    print-page

    Print button injection.

    Press Ctrl+P to print this page.

    text-reader

    Text-to-speech reader with word highlighting.

    This paragraph can be read aloud using the text reader component. It uses the Web Speech API and highlights words as they are spoken.

    social-embed

    Lazy-loaded social media embeds. See docs.

    <social-embed>

    Supports Bluesky, Mastodon, YouTube, X, and Instagram. Requires a post URL.

    drag-surface

    Drag-and-drop reorderable list.

    First item Second item Third item Fourth item

    geo-map

    Interactive map with marker. Uses OpenStreetMap tiles.

    Empire State Building
    20 W 34th St, New York, NY 10001

    youtube-player

    Privacy-first YouTube embed with facade pattern — zero iframe until click.

    video-player

    Enhanced video with overlay controls.

    audio-player

    Styled audio with custom controls.

    audio-visualizer

    Frequency bar visualization linked to an audio element.

    image-map

    Interactive image with clickable hotspot regions.

    Floor plan with interactive areas Conference Hall

    Seats 120 people. AV equipment available.

     Server Room

    24 racks, climate controlled.

     Open Office

    Hot-desking area with 80 workstations.

    chat-window

    Chat interface with message thread and input.

    Chat Demo

    Welcome! How can I help you today?

    Misc Native Elements

    .toolbar
    • .context

    • Address

    Default
    123 Main Street
    City, State 12345
    [email protected]
    .card
    Acme Corporation
    456 Business Ave
    (123) 456-7890
    Default .inline

    Video & Audio

    Video Audio

    Canvas

    .bordered .loading

    SVG

    Article

    Card Article

    An article styled as a card with border and padding.

    Nested Article

    Used for comments and replies with left border.

    Datalist

    RTL Support

    All layouts use logical properties for automatic RTL support.

    عنوان بالعربية

    هذا النص يظهر من اليمين إلى اليسار. جميع الهوامش والحشو تستخدم خصائص منطقية.
    ↑