Accordion

Collapsible sections built on native <details> elements, so they open and close with no JavaScript at all — including for keyboard users, and before your bundle has loaded.

When am I billed?

On the first of each month, for the month ahead. Changing plans mid-month is prorated to the day.

What counts as a seat?

Anyone who can open a project. People with view-only links are free.

Can I cancel any time?

Yes. Your workspace stays readable until the end of the period you've paid for.

Props

Prop	Values	Default	Description
`items`	array	required	One object per section: `{ value, title, content }`.
`name`	string	—	Set it to make the group exclusive.
`defaultOpen`	string	—	`value` of the section that starts open.
`className`	string	`""`	Appended after the component's own classes.

Common patterns

// Any number open at once
<Accordion items={faqs} />

// Exclusive — opening one closes the others
<Accordion name="faq" items={faqs} defaultOpen="billing" />

Notes

Passing name uses the browser's own exclusive-accordion behaviour: <details> elements sharing a name close each other, the same way radio buttons do. No state, no effect, no handler.

Because the open state lives in the DOM rather than in React, it survives re-renders you didn't expect — and it also means you can't read or control it from JavaScript without a ref. If you need controlled behaviour, Tabs is probably the component you actually want.

Content in a closed <details> is in the DOM but not rendered, so in-page search won't find it in most browsers. Don't hide anything essential in there.