Data display

Accordion

Themed accordion for collapsible content sections with single or multi-open panels and keyboard navigation.

03

Import

#import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjAccordionComponent } from '@kouji-ui/components';
04

Playground

#playground
type
items
open
<kj-accordion
  type="single"
>
  <kj-accordion-item value="one" label="What is kouji-ui?">
    <kj-accordion-content>A headless-first component library for Angular.</kj-accordion-content>
  </kj-accordion-item>
  <kj-accordion-item value="two" label="Is it free?">
    <kj-accordion-content>Yes — MIT licensed.</kj-accordion-content>
  </kj-accordion-item>
  <kj-accordion-item value="three" label="Does it support theming?">
    <kj-accordion-content>Themes are CSS-variable driven; swap tokens at the host element.</kj-accordion-content>
  </kj-accordion-item>
</kj-accordion>