Vanilla Breeze

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

Without JavaScript, the tabs above degrade to a native exclusive accordion — <tab-set> enhances <details name="…">, it doesn't replace it.

Install

CDN
npm
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 are available — each one a tiny standalone CSS file (a few KB) that stays out of your bundle until you use it.

Changes reload the preview below.

Committing to one theme? Link it next to the main stylesheet — no JavaScript needed:

Switching themes at runtime — with <theme-picker> or ThemeManager — fetches each theme automatically the first time it's applied.

Browse all themes →

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.

2. + CSS

Add the stylesheet and every element above is themed, spaced, and tokenized. No classes to write.

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.

Your next 5 minutes

↑