A Layered HTML Component System | Vanilla Breeze

for the user's saved theme. With<br>cross-document View Transitions enabled (@view-transition in<br>view-transitions.css), the new page's first paint can happen before<br>that stylesheet arrives, producing a one-frame flash in default theme<br>before the user's real theme repaints. Hiding the body via :has()<br>on the loading attribute keeps paint suppressed until the onload<br>handler flips state → "ready" (or onerror → "error"), at which point<br>this selector no longer matches and body becomes visible. -->

Search

Welcome to Vanilla Breeze

This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.

Read the /go/ convention

Theme

Vanilla Breeze

A layered HTML component system. Build with native HTML, enhance with CSS, add interactivity with JavaScript - each layer optional.

Write this...

Copy

section data-layout="stack"> h1>Dashboardh1> nav data-layout="cluster"> button>New Projectbutton> button class="secondary">Importbutton> nav> table> thead> tr>th>Projectth>th>Tasksth>tr> thead> tbody> tr>td>Website Redesigntd>td>12td>tr> tr>td>Mobile Apptd>td>8td>tr> tbody> table> details> summary>Filterssummary> form class="stacked"> label>Status select> option>Alloption> option>Activeoption> select> label> button>Applybutton> form> details>section>

Dashboard

New Project<br>Import

ProjectTasks

Website Redesign12<br>Mobile App8

Filters

Status

All<br>Active

Apply

Dashboard

ProjectTasks

Website Redesign12<br>Mobile App8

Filters

Status

All<br>Active

Apply

Native HTML<br>Soup

Native Elements<br>114<br>Custom Elements<br>21<br>Web Components<br>30<br>Dependencies

Progressive Enhancement in Action

The same HTML, enhanced layer by layer. Each layer is optional — the previous one always works on its own.

1. HTML

Source HTML

Copy

section data-layout="stack"> h3>Settingsh3> details name="settings"> summary>Appearancesummary> form class="stacked"> label>Theme select> option>Defaultoption> option>Oceanoption> option>Forestoption> select> label> label> input type="checkbox" checked> Dark mode label> form> details> details name="settings"> summary>Keyboard Shortcutssummary> dl> div>dt>Searchdt> dd>kbd>Ctrlkbd>+kbd>Kkbd>dd>div> div>dt>Savedt> dd>kbd>Ctrlkbd>+kbd>Skbd>dd>div> div>dt>Shortcutsdt> dd>kbd>Shiftkbd>+kbd>?kbd>dd>div> dl> details> details name="settings"> summary>Notificationssummary> label>input type="checkbox" checked> Email notificationslabel> details> footer data-layout="cluster" data-layout-gap="s"> button>Save Changesbutton> button class="secondary" popovertarget="confirm-reset">Resetbutton> footer> div id="confirm-reset" popover> p>Reset all settings to defaults?p> footer data-layout="cluster" data-layout-gap="s"> button popovertarget="confirm-reset">Cancelbutton> button class="ghost">Confirmbutton> footer> div>section>

Settings

Appearance

Theme

Default<br>Ocean<br>Forest

Dark mode

Keyboard Shortcuts

Search Ctrl+K<br>Save Ctrl+S<br>Shortcuts Shift+?

Notifications<br>Email notifications

Save Changes<br>Reset

Reset all settings to defaults?

Cancel<br>Confirm

Settings

Appearance

Theme

Default<br>Ocean<br>Forest

Dark mode

Keyboard Shortcuts

Search Ctrl+K

Save Ctrl+S

Shortcuts Shift+?

Notifications<br>Email notifications

Reset all settings to defaults?

Native HTML that works in any browser. discloses, popovertarget opens popovers, submits — zero CSS or JS needed.

2. + CSS

Add one stylesheet

Copy

link rel="stylesheet" href="vanilla-breeze.css">

Settings

Appearance

Theme

Default<br>Ocean<br>Forest

Dark mode

Keyboard Shortcuts

Search Ctrl+K

Save Ctrl+S

Shortcuts Shift+?

Notifications<br>Email notifications

Reset all settings to defaults?

One stylesheet adds design tokens, layout attributes, keycap styling, and 30+ themes. No build step.

3. + JavaScript

Add one script

Copy

script type="module" src="vanilla-breeze.js">script>

Settings

Appearance

Theme

Default<br>Ocean<br>Forest

Dark mode

Keyboard Shortcuts

Search Ctrl+K

Save Ctrl+S

Shortcuts Shift+?

Notifications<br>Email notifications

Reset all settings to defaults?

One script adds keyboard navigation (↑↓ Home End), ARIA roles, command palette, and 30 interactive components.

This section is itself a progressive enhancement demo — without JavaScript, degrades to a native exclusive accordion via the name attribute on .

Built Different

HTML-First

114 native elements styled out of the box. , , , [popover] — real HTML, not abstractions.

Layered

Every component starts as working HTML. CSS adds styling, JS adds keyboard nav and ARIA. Disable JS and nothing breaks.

Zero Dependencies

No frameworks, no build tools, no npm required. One CSS file, one optional JS file. System fonts by default, variable fonts one away.

OKLCH Theming

30+ themes across color, personality, and extreme categories. Apply with one attribute on any element.

Layout Attributes

Stack, Grid, Cluster, Sidebar, Dashboard — add...