• Expander

    Reveal hidden content by transitioning from a user-defined height to height: auto. Set the closed height via --height.

    Default

    Jazz is a minimal CSS design system that styles native HTML elements directly — no utility classes, no component wrappers, no build step required. It ships as a single stylesheet and works with any framework or none at all. Colors, spacing, and easing are all driven by CSS custom properties, so theming is a matter of overriding a handful of variables. Dark mode is handled automatically via color-scheme. Every component is built from semantic HTML and progressively enhanced with modern CSS features like :has(), @starting-style, the Popover API, and anchor positioning.

    <div class="expander">
  <p>Long content...</p>
  <label>
    <input type="checkbox" />
    Show more
  </label>
</div>

    Lines

    Control how many lines are shown when collapsed via --lines. Defaults to 3.

    Jazz is a minimal CSS design system that styles native HTML elements directly — no utility classes, no component wrappers, no build step required. It ships as a single stylesheet and works with any framework or none at all. Colors, spacing, and easing are all driven by CSS custom properties, so theming is a matter of overriding a handful of variables. Dark mode is handled automatically via color-scheme. Every component is built from semantic HTML and progressively enhanced with modern CSS features like :has(), @starting-style, the Popover API, and anchor positioning.

    <div class="expander" style="--lines: 6">
  <p>Long content...</p>
  <label>
    <input type="checkbox" />
    Show more
  </label>
</div>

    Search 5021 icons

    Type a name to find icons from the Tabler icon set.