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/gallery.

When to use it

Use Gallery when several visual blocks belong to one section and need a shared heading plus a repeatable layout rhythm. It works for image collections, grouped campaign cards, and editorial grids that mix several child block types.

If the children are specifically LinkBlock tiles in a horizontal browsing row, GalleryWithLinkBlocks is the more opinionated choice.

Composition notes

Gallery is a wrapper component. You bring the children and choose the layout:

• variant="grid" is the balanced default.
• variant="masonry" gives uneven image sets a looser editorial feel.
• variant="filmstrip" pushes the layout toward a horizontal sequence.
• heading adds section framing above the children.

Because children are free-form, keep one visual language per gallery. Mixing too many card shapes usually makes the section feel noisy.

Behavior and theming guidance

Use the heading only when the gallery needs section framing. If the surrounding page already provides a clear heading, the wrapper can stay visual and simple.

Spacing comes from the gallery recipe, so prefer choosing the right variant before manually forcing lots of item-level margin tweaks.

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=Gallery.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes