components / accordion

accordion.

collapsible rows on native <details>/<summary> with a rotating chevron. share a name across items for one-open-at-a-time behavior. zero javascript state.

what is this?

a collapsible row built on native <details> — no javascript state.

how does exclusivity work?

siblings sharing a name auto-close each other, browser-handled.

can i nest content?

yes — any children render in the open panel.

installation

bunx @justin06lee/chrome@latest add accordion

usage

Exclusive (shared name)

first

one open at a time.

second

siblings sharing a name auto-close.

third

zero javascript — native <details>.

<Accordion>
  <AccordionItem title="first" name="faq" defaultOpen>
    one open at a time.
  </AccordionItem>
  <AccordionItem title="second" name="faq">
    siblings sharing a name auto-close.
  </AccordionItem>
</Accordion>