`Accordion` Component

A vertically stacked, interactive heading component that reveals or hides content when toggled.

Note

This Accordion uses native HTML <details> and <summary> elements, which are collapsible by default and fully compatible with platforms like GitHub.

Exported from nextra/components.

Props

Name	Type	Default
`open`	`boolean \| undefined` Default open state.
`className`	`string \| undefined` CSS class name.
`...props`	`Omit<DetailedHTMLProps<DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "open" \| "className">`

Example

Summary

Details

Summary 2

Details 2

Usage

page.mdx


<details>
  <summary>Section 1</summary>
  Content for section 1.
  <details>
    <summary>Section 2</summary>
    Content for section 2.
  </details>
</details>

page.jsx


import { Accordion, AccordionTrigger } from 'nextra/components'
 
export function Demo() {
  return (
    <Accordion>
      <AccordionTrigger>Section 1</AccordionTrigger>
      Content for section 1.
 
      <Accordion>
        <AccordionTrigger>Section 2</AccordionTrigger>
        Content for section 2.
      </Accordion>
    </Accordion>
  )
}

Accordion Component