Get started →

    Accordion

    The <Accordion> component creates expandable sections with title, optional description and icon, URL-hash deep linking, and full keyboard accessibility. Built on react-aria-components for ARIA support.

    Basic

    Code

    import { Accordion } from '@theme'

<Accordion title="What is ciderpress?">

ciderpress is a documentation framework built on Rspress that generates
beautiful, themeable documentation sites from your codebase.

</Accordion>

    Output

    With description and icon

    Code

    <Accordion
  title="Installation"
  description="How to install ciderpress in your project"
  icon="pixelarticons:cloud-download"
>

Run the following command to install ciderpress:

```bash
pnpm add ciderpress
```

</Accordion>

    Output

    Default open

    Use defaultOpen to start the accordion in the expanded state.

    Code

    <Accordion title="Expanded by default" defaultOpen>

This content is visible on page load.

</Accordion>

    Output

    This content is visible on page load.

    AccordionGroup

    Wrap multiple accordions in <AccordionGroup> to coordinate them. Set exclusive so only one can be open at a time.

    Code

    import { Accordion, AccordionGroup } from '@theme'

<AccordionGroup exclusive>
  <Accordion title="Step 1: Install">
    Install the package with your preferred package manager.
  </Accordion>
  <Accordion title="Step 2: Configure">
    Create a `ciderpress.config.ts` file in your project root.
  </Accordion>
  <Accordion title="Step 3: Build">Run `pnpm build` to generate your documentation site.</Accordion>
</AccordionGroup>

    Output

    Deep linking

    Each accordion generates a URL hash from its title (or custom id prop). Navigating to #your-title will auto-expand the matching accordion.

    <Accordion title="Custom Anchor" id="my-custom-id">
  Link to this section with `#my-custom-id`.
</Accordion>

    Accordion props

    PropTypeRequiredDefaultDescription
    titlestringyes—Title displayed in the trigger
    descriptionstringno—Description below the title
    iconstringno—Iconify icon ID rendered before the title
    defaultOpenbooleannofalseWhether to start expanded
    idstringnoslug of titleCustom anchor ID for deep linking
    childrenReactNodeyes—Content revealed when expanded

    AccordionGroup props

    PropTypeRequiredDefaultDescription
    exclusivebooleannofalseOnly one accordion can be open at a time
    childrenReactNodeyes—Accordion components to coordinate