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.
Quick Start
Write semantic HTML. Get a designed page. No classes, no wrapper divs, no build step — three minutes from here to running.
See it build itself
Each tab is the same idea: wrap semantic elements with data-layout, skip the <div> soup, and the styling comes with the elements you already know.
Dashboard
You write this
<section data-layout="stack" data-layout-gap="l"> <header data-layout="cluster" data-layout-justify="between" data-layout-align="center"> <h1>Projects</h1> <nav data-layout="cluster" data-layout-gap="s"> <button type="button">New</button> <button type="button" class="secondary">Import</button> </nav> </header> <table> <thead><tr><th>Project</th><th>Owner</th><th>Tasks</th></tr></thead> <tbody> <tr><td>Website Redesign</td><td>Alice</td><td>12</td></tr> <tr><td>Mobile App</td><td>Bob</td><td>8</td></tr> <tr><td>Design System</td><td>Carol</td><td>23</td></tr> </tbody> </table> <details> <summary>Filters</summary> <form data-layout="cluster" data-layout-gap="m"> <label>Status <select><option>All</option><option>Active</option></select></label> <button type="submit">Apply</button> </form> </details></section>Article
You write this
<main data-layout="center" data-layout-max="prose" data-layout-gap="m"> <article data-layout="stack" data-layout-gap="m"> <header data-layout="stack" data-layout-gap="xs"> <p><small>Engineering · 6 min read</small></p> <h1>Shipping a design system without a framework</h1> <p><small>By Jane Doe · April 20, 2026</small></p> </header> <p class="lead">Frameworks aren't the only way to scale…</p> <p>The pitch is familiar: pick a framework, adopt the ecosystem, then spend the next two years fighting it.</p> <blockquote> <p>"The most durable UI is the one that works before any JavaScript runs."</p> </blockquote> <h2>Three layers</h2> <ul> <li>Semantic elements do the heavy lifting</li> <li>Design tokens keep colors and spacing consistent</li> <li>Web components fill the gaps — no build step required</li> </ul> </article></main>Form
You write this
<main data-layout="center" data-layout-max="narrow"> <form data-layout="stack" data-layout-gap="m" aria-labelledby="form-title"> <header data-layout="stack" data-layout-gap="xs"> <h1 id="form-title">Create your account</h1> <p>Takes about a minute. Cancel anytime.</p> </header> <p> <label for="name">Full name</label> <input id="name" type="text" required/> </p> <p> <label for="email">Email</label> <input id="email" type="email" required/> </p> <footer data-layout="cluster" data-layout-gap="s"> <button type="submit">Create account</button> <button type="button" class="ghost">Cancel</button> </footer> </form></main>Without JavaScript, the tabs above degrade to a native exclusive accordion — <tab-set> enhances <details name="…">, it doesn't replace it.
Install
CDN
Paste into head
<link rel="stylesheet" href="https://unpkg.com/vanilla-breeze/dist/cdn/vanilla-breeze.css"><script type="module" src="https://unpkg.com/vanilla-breeze/dist/cdn/vanilla-breeze.js"></script>npm
Install the package
npm install vanilla-breezeImport in your app
import 'vanilla-breeze';import 'vanilla-breeze/css';Download
Grab the release archive from GitHub Releases, drop vanilla-breeze.css and vanilla-breeze.js into your project, and link them.
Zero dependencies. The JS file is optional — load it only when you use interactive web components like <tab-set> or <accordion-wc>.
One attribute. Every theme.
The same dashboard, re-skinned by changing one value. 30+ themes ship in the box.
Three optional layers
Each layer is optional. Each layer works without the next. Your markup never changes — the layers add to it.
1. HTML
Start with native, semantic elements. Content is accessible and functional before a single byte of CSS loads.
Pure HTML
<details> <summary>Keyboard shortcuts</summary> <dl> <dt>Search</dt> <dd><kbd>Ctrl</kbd>+<kbd>K</kbd></dd> <dt>Save</dt> <dd><kbd>Ctrl</kbd>+<kbd>S</kbd></dd> </dl></details>2. + CSS
Add the stylesheet and every element above is themed, spaced, and tokenized. No classes to write.
Add one line
<link rel="stylesheet" href="https://unpkg.com/vanilla-breeze/dist/cdn/vanilla-breeze.css">3. + JavaScript
Add the bundle only where you need enhancement — keyboard nav on <tab-set>, ARIA live regions on <toast-msg>, and drag handles on <split-surface>. Disable JS and your page still works.
Add one more line
<script type="module" src="https://unpkg.com/vanilla-breeze/dist/cdn/vanilla-breeze.js"></script>