Some content inside a card with a header.
One stylesheet.
That's it.
Drop in a single CSS file and get a full component library, theming and dark mode. 7.6 kB brotli compressed packing all that jazz.
<link
rel="stylesheet"
href="https://esm.sh/gh/erikthalen/jazz@v0.1.0-beta.25/jazz.css"
/>Account
Manage your account settings and preferences.
Privacy
Control who can see your data and activity.
Notifications
Choose what you want to be notified about.
⌘K
⌃⇧P
⌃⇧P
| Name | Role | Status |
|---|---|---|
| Alice | Engineer | Active |
| Bob | Designer | Away |
Badge
Secondary
Destructive
Outline
<button>Save changes</button>
<button class="outline">Cancel</button>
<button class="ghost">Reset</button>
<label>
<svg data-prefix><!-- icon --></svg>
<input type="search" placeholder="Search..." />
</label>
<fieldset role="group">
<button class="ghost">Week</button>
<button class="ghost">Month</button>
<button class="ghost">Year</button>
</fieldset>
<article>
<header>Card title</header>
<p>Some content inside a card.</p>
<footer>
<button class="ghost">Cancel</button>
<button>Save</button>
</footer>
</article>Reset + UI in one import
Batteries included
Jazz normalizes browser defaults and builds on top of them. You get a consistent baseline and a full component library from a single stylesheet.
No class soup
Just write HTML
Components map to native elements. A
<button> is a button, a
<dialog> is a dialog — no wrappers or utility
classes needed.
Works out of the box
Dark mode included
Responds to prefers-color-scheme automatically. Force a
mode with .jazz-light or .jazz-dark on any
element.