Accordion
Collapsible content sections using the native
<details> and <summary> elements.
Default
What is Jazz?
Jazz is a minimal CSS design system that styles native HTML
elements directly — no utility classes or component wrappers
needed.
<details>
<summary>What is Jazz?</summary>
<div>
Jazz is a minimal CSS design system that styles native HTML elements
directly.
</div>
</details>Multiple items
Stack multiple <details> elements — they get
automatic spacing between them.
Getting started
Import
@jazz/core and start writing HTML.
Customization
Override CSS custom properties to match your brand.
Dark mode
Jazz responds to
prefers-color-scheme automatically.
<details>
<summary>Getting started</summary>
<div>...</div>
</details>
<details>
<summary>Customization</summary>
<div>...</div>
</details>
<details>
<summary>Dark mode</summary>
<div>...</div>
</details>Exclusive
Give a group the same name attribute — only one item can
be open at a time.
Getting started
Import
@jazz/core and start writing HTML.Customization
Override CSS custom properties to match your brand.
Dark mode
Jazz responds to
prefers-color-scheme automatically.
<details name="faq">
<summary>Getting started</summary>
<div>...</div>
</details>
<details name="faq">
<summary>Customization</summary>
<div>...</div>
</details>
<details name="faq">
<summary>Dark mode</summary>
<div>...</div>
</details>Open by default
Add the open attribute to expand an item on load.
This one is open
Use the
open attribute to expand by default.
<details open>
<summary>This one is open</summary>
<div>Use the open attribute to expand by default.</div>
</details>