When to use it

Use Accordion when a section has several pieces of related content and showing all of them at once would overwhelm the layout. It works well for FAQ blocks, product specification breakdowns, shipping and returns info, and any progressive-disclosure pattern where the visitor chooses what to expand.

For data-driven CMS content that comes as a list of title/body pairs, see AccordionBlock in Storefront instead. This primitive is for cases where you control the composition directly.

Slot strategy

The accordion is a four-part composition:

• Accordion is the root container. It controls whether items expand in single or multiple mode.
• AccordionItem wraps one collapsible section and needs a unique value string.
• AccordionTrigger is the clickable header row. It renders a built-in chevron that rotates when the item is open.
• AccordionContent holds the body. It animates in and out with a height transition.

Behavior and theming guidance

The trigger chevron rotates automatically on open/close and does not need extra styling. Content sections animate with accordion-up and accordion-down keyframes that the recipe provides.

Items are visually separated by borders. The group container has rounded corners and a card-like surface, so it fits naturally inside product detail layouts without extra wrapper styling.

Use defaultValue to pre-expand the most important section on page load. This avoids forcing visitors to click before they see any content, which matters for specification blocks and FAQ pages where the first answer is usually the most relevant.