DocsDocsSDKs

AccordionBlock

React SDK guidance for AccordionBlock.

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 AccordionBlock when the content comes from a CMS or API as a list of title and body pairs. It is the easiest way to ship FAQ sections, specification groups, and policy content without manually composing the base accordion primitives.

If you need custom triggers, nested layout inside each panel, or a hand-built composition, use the base Accordion primitive instead.

Composition notes

AccordionBlock is a data-driven wrapper around the base accordion system:

  • items is the canonical reference for titles, HTML content, and per-item variants.
  • variant="standard" fits general copy and FAQ content.
  • variant="technical-data" fits denser specification-style content.
  • variant="downloads" is useful when the body should read like attachment or document content.
  • defaultValue lets you open the most important panel on first render.

Because the body is HTML-driven, keep editorial markup predictable and sanitized before it reaches the component.

Behavior and theming guidance

Start with concise panel titles. The block reads best when visitors can scan the list quickly before deciding what to open.

The wrapper inherits the visual language of the base accordion, so theme changes stay aligned with the rest of the docs and storefront. Focus styling and spacing around the surrounding section before changing the internal accordion treatment.

Contract scope

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

Implementation notes

AccordionBlock

# AccordionBlock > 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/storefront`. - Live playground: [/components/storefront/accordion-block](https://sdk.enad.io/components/storefront/accordion-block). ## When to use it Use `AccordionBlock` when the content comes from a CMS or API as a list of title and body pairs. It is the easiest way to ship FAQ sections, specification groups, and policy content without manually composing the base accordion primitives. If you need custom triggers, nested layout inside each panel, or a hand-built composition, use the base `Accordion` primitive instead. ## Composition notes `AccordionBlock` is a data-driven wrapper around the base accordion system: - `items` is the source of truth for titles, HTML content, and per-item variants. - `variant="standard"` fits general copy and FAQ content. - `variant="technical-data"` fits denser specification-style content. - `variant="downloads"` is useful when the body should read like attachment or document content. - `defaultValue` lets you open the most important panel on first render. Because the body is HTML-driven, keep editorial markup predictable and sanitized before it reaches the component. ## Behavior and theming guidance Start with concise panel titles. The block reads best when visitors can scan the list quickly before deciding what to open. The wrapper inherits the visual language of the base accordion, so theme changes stay aligned with the rest of the docs and storefront. Focus styling and spacing around the surrounding section before changing the internal accordion treatment. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/storefront`. - Playground route: /sandbox?component=AccordionBlock. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes