KAUI CSS KitComponent Showcase

Accordion Component (.k-accordion)

Collapsible content sections ideal for FAQs, dense data disclosures, and settings trees.

All modern evergreen browsers including Chrome, Edge, Safari, Firefox, and mobile WebKit.

Zero framework dependencies. KAUI is built strictly with Dart Sass and standard CSS Custom Properties.

Set data-theme="dark" on your root <html> element to dynamically remap all surfaces and contrast tokens.

Usage guide & code sample

Use one .k-accordion__item per disclosure. Add is-open to the item that should start expanded and keep the trigger as a real button.

<div class="k-accordion">
  <div class="k-accordion__item is-open">
    <button type="button" class="k-accordion__trigger">Shipping details</button>
    <div class="k-accordion__body">Delivery takes 2–4 business days.</div>
  </div>
</div>