Kitchen Sink

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

Design Tokens

Colors

Gray 900
Gray 600
Gray 200
Interactive

Spacing Scale

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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. 
// Code block
const greeting = "Hello, world!";
console.log(greeting);

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

Icons

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

Sizes

Common Icons

In Buttons

Inherits Color

Buttons

Variants

Sizes

Form Inputs

Fieldset Example

Layout: layout-stack

Vertical stacking with configurable gap.

data-layout-gap="xs"
Item 1
Item 2
Item 3
 data-layout-gap="m"
Item 1
Item 2
Item 3
 data-layout-gap="xl"
Item 1
Item 2
Item 3

Layout: layout-cluster

Horizontal flex layout with wrapping for inline elements.

Default (centered, wrapping)

Item 1
Item 2
Item 3
Item 4
Item 5

Justify: space-between

Start
Middle
End

Tags example

HTML CSS JavaScript

Layout: 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

Padding Variants

padding="s" padding="m" padding="l" padding="xl"

Layout: layout-grid

Auto-fit grid with configurable minimum column width.

data-layout-min="15rem" (default)

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

data-layout-min="20rem"

Card 1

Card 2

Card 3

Card 4

Layout: layout-center

Centered content container with configurable max-width.

Narrow - Max width for reading content

Intrinsic + Text

Content centered within container

Layout: layout-cover

Full-height container with vertically centered principal element. Ideal for hero sections.

Header content

Centered Principal

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

data-media

Aspect ratio container for media. Apply to any element to ensure consistent proportions.

16:9 (default)
16:9 image
1:1 (square)
Square image
4:3
4:3 image
contain (fit)
Contained image

Layout: layout-reel

Horizontal scrolling container with scroll snap. Drag or scroll horizontally.

Card Reel

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.

Image Reel with Scrollbar

Image 1
Image 2
Image 3
Image 4

Layout: layout-text

Content container with proper typographic spacing.

Article Title

This paragraph follows the heading with tighter spacing due to the proximity principle. Subsequent paragraphs have normal spacing.

Another paragraph with standard vertical rhythm. The layout-text container automatically manages spacing between different element types.

Subsection

Content after a heading gets tighter spacing. Lists and other elements also get appropriate spacing.

  • First item
  • Second item
  • Third item

Paragraphs after lists continue with normal rhythm.

Native: Details/Accordion

Styled native details elements for accordion patterns.

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.

Web Component: tabs-wc (Details-based)

Accessible tab component built on native details elements. Works as accordion without JS.

Overview

Overview

The tabs-wc component uses native <details name=""> elements for progressive enhancement. Without JavaScript, it works as an accordion. With JavaScript, it adds keyboard navigation and ARIA tab semantics.
Features

Features

  • Progressive enhancement - works without JS
  • Native details provides exclusive open behavior
  • Arrow keys to move between tabs
  • Home/End to jump to first/last tab
  • Automatic ARIA role assignment
  • Custom event on tab change
Usage

Usage

<tabs-wc aria-label="Example"> <details name="my-tabs" open> <summary>Tab 1</summary> <div>Content 1</div> </details> <details name="my-tabs"> <summary>Tab 2</summary> <div>Content 2</div> </details> </tabs-wc>

Web Component: accordion-wc

Collapsible content panels with optional single-open mode. Built on native details elements.

Default (multi-open)

What is Vanilla Breeze?

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

How does progressive enhancement work?

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

What browsers are supported?

All modern browsers are supported.

Single-open mode

First Question

Only one panel can be open at a time in single mode.

Second Question

Opening this will close the other panels.

Third Question

The name attribute helps browsers enforce exclusive open.

Bordered variant

Bordered Style

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

Clean Appearance

Useful for forms, FAQs, and settings panels.

Compact Option

Add data-compact for tighter spacing.

Compact + Bordered

Compact Item 1

Smaller padding for dense layouts.

Compact Item 2

Still fully accessible.

Native: Table

Styled native table with hover states and alignment options.

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

Native Element: dialog

Modal dialog with focus trap, ESC to close, and animations. Uses Invokers API for declarative open/close.

Small Dialog

A compact dialog for quick confirmations or alerts.

Medium Dialog

The default dialog size, suitable for most content.

Features include:

  • Press ESC to close
  • Animated open/close transitions
  • Automatic focus management
  • Native accessibility built-in

Large Dialog

A larger dialog for content that needs more space.

Feature Description
Focus Trap Native dialog provides automatic focus trapping
Invokers API Declarative open/close with commandfor/command
Animations Smooth fade and scale transitions
Accessibility ARIA modal semantics and keyboard support

Form Dialog

Web Component: tooltip-wc

Enhanced tooltips with positioning, arrows, and keyboard support.

Positions

With Links and Icons

Hover this link

Long Content

Web Component: toast-wc

Non-modal notifications with auto-dismiss, variants, and action buttons.

Toast Variants

With Action Button

Position (check corners)

Web Component: x-footnotes

Progressive enhancement for footnotes. Without JS, footnotes appear inline in parentheses.

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.

The footnotes component demonstrates progressive enhancementProgressive enhancement ensures content is accessible even when JavaScript fails to load. by collecting inline references into a list at the bottom of the content.

RTL Test

All layouts use logical properties for automatic RTL support.

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

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

Native: Images

Responsive image styling with variants.

Default (responsive) Random landscape .rounded Rounded image .circle (avatars) Avatar .thumbnail Thumbnail

Native: Progress & Meter

Progress bars and meter gauges with variants.

Progress (default) Progress sizes Progress colors Meter (gauge) 70% Meter states

Native: Form Layout

Form layout patterns with fieldsets and groups.

.stacked
.inline

Native: Figure & Figcaption

Figure with caption variants.

Default figure
Default figure with caption
Bordered figure
Bordered figure with caption
Centered figure
Centered figure with rounded image

Native: Aside Callouts

Aside variants for sidebars, callouts, and notes.

Native: Inline Semantics

Semantic inline text elements.

Here are examples of inline semantic elements:

  • 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

Native: Heading Group

Heading groups with subtitles.

Article Title

A subtitle or tagline for the article

Chapter 1

The Beginning

Native: Output

Calculated result display.

42 $1,234.56 Success Warning Error

Native: Horizontal Rule

Divider lines with variants.

Default
.decorative

Native: Ruby Annotations

East Asian typography with pronunciation guides.

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

Chinese example: 北京Beijing (Pinyin pronunciation)

With fallback: 明日(あした) (shows parentheses in non-supporting browsers)

Native: Address

Contact information with variants.

Default
123 Main Street
City, State 12345
hello@example.com
.card
Acme Corporation
456 Business Ave
Suite 100
(123) 456-7890
.compact
123 Main St • City, ST 12345 • hello@example.com
.footer
© 2024 Company Name
Privacy Policy · Terms of Service

Native: Video & Audio

Media elements with variants.

Video (default) Video .rounded Audio (default) Audio .compact

Native: Canvas

Drawing canvas with variants.

.bordered .loading (placeholder)

Native: SVG Icons

Inline SVG with sizing and animation variants.

Sizes Colors Animations .spin .pulse

Native: Article

Article variants for different content patterns.

Card Article

An article styled as a card with border and padding.

Thumbnail

Compact Article

A compact layout for list-style content.

Nested Article

Used for comments and replies with left border.

Native: Datalist

Autocomplete suggestions for inputs.

Native: Iframe

Embedded content with responsive wrappers.

.rounded .bordered .embed-responsive (16:9)
.embed-responsive.ratio-4x3