Accordion

Keep optional details available without lengthening the main path.

Use accordions for supporting details, troubleshooting notes, FAQs, or advanced options. Do not hide required steps in an accordion; readers should be able to complete the main task by scanning the visible page.

Import

import { AccordionItem, Accordions } from '@prosefly/astro-components';

Basic Usage

Can I use these components without Lotus?

Yes. Import them directly from @prosefly/astro-components in any Astro or MDX page.

Does Lotus need extra markdown configuration?

No. Lotus enables the package manager tabs and image gallery transforms by default.

<Accordions>
  <AccordionItem title="Can I use these components without Lotus?">
    Yes. Import them directly from `@prosefly/astro-components` in any Astro or
    MDX page.
  </AccordionItem>
  <AccordionItem title="Does Lotus need extra markdown configuration?">
    No. [Lotus](https://astro-theme-lotus.prosefly.dev/) enables the package
    manager tabs and image gallery transforms by default.
  </AccordionItem>
</Accordions>

Multiple Open Items

By default, opening one item closes the others. Set multiple when several answers should remain open for comparison.

Requirements

Use Astro v7 or newer and enable MDX in the project that renders the docs.

Limits

Accordions are for optional detail. Keep required setup steps visible.

Disabled item

Disabled items remain visible but cannot be opened by the interaction script.

<Accordions multiple defaultValue={['requirements', 'limits']}>
  <AccordionItem title="Requirements" value="requirements">
    Use Astro v7 or newer and enable MDX in the project that renders the docs.
  </AccordionItem>
  <AccordionItem title="Limits" value="limits">
    Accordions are for optional detail. Keep required setup steps visible.
  </AccordionItem>
  <AccordionItem title="Disabled item" disabled>
    Disabled items remain visible but cannot be opened by the interaction
    script.
  </AccordionItem>
</Accordions>

Props

Component	Prop	Type	Notes
`Accordions`	`multiple`	`boolean`	Allows more than one item to stay open.
`Accordions`	`defaultValue`	`string \| string[]`	Opens matching item values on load.
`AccordionItem`	`title`	`string`	Required summary text.
`AccordionItem`	`value`	`string`	Stable item value, defaults to `id` or `title`.
`AccordionItem`	`defaultOpen`	`boolean`	Opens the item before client behavior runs.
`AccordionItem`	`disabled`	`boolean`	Marks the item as disabled.

Edit this page

Last updated Jul 18, 2026