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.
Vanilla Breeze
A layered HTML component system. Build with native HTML, enhance with CSS, add interactivity with JavaScript - each layer optional.
Write this...
<section data-layout="stack"> <h1>Dashboard</h1> <nav data-layout="cluster"> <button>New Project</button> <button class="secondary">Import</button> </nav> <table> <thead> <tr><th>Project</th><th>Tasks</th></tr> </thead> <tbody> <tr><td>Website Redesign</td><td>12</td></tr> <tr><td>Mobile App</td><td>8</td></tr> </tbody> </table> <details> <summary>Filters</summary> <form class="stacked"> <label>Status <select> <option>All</option> <option>Active</option> </select> </label> <button>Apply</button> </form> </details></section>
Native HTML
>
<div> Soup
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
<section data-layout="stack"> <h3>Settings</h3> <details name="settings"> <summary>Appearance</summary> <form class="stacked"> <label>Theme <select> <option>Default</option> <option>Ocean</option> <option>Forest</option> </select> </label> <label> <input type="checkbox" checked> Dark mode </label> </form> </details> <details name="settings"> <summary>Keyboard Shortcuts</summary> <dl> <div><dt>Search</dt> <dd><kbd>Ctrl</kbd>+<kbd>K</kbd></dd></div> <div><dt>Save</dt> <dd><kbd>Ctrl</kbd>+<kbd>S</kbd></dd></div> <div><dt>Shortcuts</dt> <dd><kbd>Shift</kbd>+<kbd>?</kbd></dd></div> </dl> </details> <details name="settings"> <summary>Notifications</summary> <label><input type="checkbox" checked> Email notifications</label> </details> <footer data-layout="cluster" data-layout-gap="s"> <button>Save Changes</button> <button class="secondary" popovertarget="confirm-reset">Reset</button> </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">Cancel</button> <button class="ghost">Confirm</button> </footer> </div></section><details> discloses, popovertarget opens popovers, <form> submits — zero CSS or JS needed.2. + CSS
Add one stylesheet
<link rel="stylesheet" href="vanilla-breeze.css"><kbd> keycap styling, and 30+ themes. No build step.3. + JavaScript
Add one script
<script type="module" src="vanilla-breeze.js"></script>Built Different
-
HTML-First 114 native elements styled out of the box.
<details>,<dialog>,<kbd>,[popover]— real HTML, not<div>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
<link>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
data-layoutto any semantic element. No wrapper divs. -
Accessible ARIA patterns built-in. Keyboard navigation with Arrow, Home, End, Escape. Accessibility themes including high contrast.
One Attribute, 30+ Themes
Pick a theme. Watch everything transform.