Vanilla Breeze

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

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

Dashboard

ProjectTasks
Website Redesign12
Mobile App8
Filters

Native HTML > <div> Soup

Native Elements
114
Custom Elements
21
Web Components
30
Dependencies
0

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

Settings

Appearance
Keyboard Shortcuts
Search
Ctrl+K
Save
Ctrl+S
Shortcuts
Shift+?
Notifications

Reset all settings to defaults?
Native HTML that works in any browser. <details> discloses, popovertarget opens popovers, <form> submits — zero CSS or JS needed.
2. + CSS
<link rel="stylesheet" href="vanilla-breeze.css">

Settings

Appearance
Keyboard Shortcuts
Search
Ctrl+K
Save
Ctrl+S
Shortcuts
Shift+?
Notifications

Reset all settings to defaults?
One stylesheet adds design tokens, layout attributes, <kbd> keycap styling, and 30+ themes. No build step.
3. + JavaScript
<script type="module" src="vanilla-breeze.js"></script>

Settings

Appearance
Keyboard Shortcuts
Search
Ctrl+K
Save
Ctrl+S
Shortcuts
Shift+?
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, <tab-set> degrades to a native exclusive accordion via the name attribute on <details>.

Built Different

One Attribute, 30+ Themes

Pick a theme. Watch everything transform.

Explore the Docs