DocsDocsSDKs

Accordion

React SDK guidance for Accordion.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

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.

Single vs multiple

Use type="single" with collapsible for most storefront patterns. Switch to type="multiple" only when visitors genuinely need to compare two open sections, like shipping and returns side by side.

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.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/ui-resolver.
  • Playground route: /sandbox?component=Accordion.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

Accordion

# Accordion > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/ui-resolver`. - Live playground: [/components/base-ui/accordion](https://sdk.enad.io/components/base-ui/accordion). ## 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. > **Single vs multiple** > > Use `type="single"` with `collapsible` for most storefront patterns. Switch to `type="multiple"` > only when visitors genuinely need to compare two open sections, like shipping and returns side by > side. ## 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. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/ui-resolver`. - Playground route: /sandbox?component=Accordion. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes