Accordion

Components

Accordion

A keyboard-accessible group of disclosure panels for dense supporting content.

Grouped disclosures

Visible to workspace members and invited guests.

tsx
<Accordion.Root defaultValue={["details"]}>
  <Accordion.Item value="details">
    <Accordion.Header>
      <Accordion.Trigger>Project details</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>
      <Accordion.Content>Visible to workspace members.</Accordion.Content>
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>