Components
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 a Prosefly theme?
Yes. Import them directly from @prosefly/astro-components in any Astro or
MDX page, and register @prosefly/astro-components/integration when you want
the shared Markdown, icon, and gallery setup.
<Accordions> <AccordionItem title="Can I use these components without a Prosefly theme?"> Yes. Import them directly from `@prosefly/astro-components` in any Astro or MDX page, and register `@prosefly/astro-components/integration` when you want the shared Markdown, icon, and gallery setup. </AccordionItem> <AccordionItem title="Do Prosefly themes need extra component configuration?"> No. [Dahlia](https://astro-theme-dahlia.prosefly.dev/) and [Lotus](https://astro-theme-lotus.prosefly.dev/) register the shared `proseflyComponents()` integration automatically. </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. |
Last updated Sep 1, 2026