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

When to use it

Use Spacer when vertical whitespace is a real part of the page composition. It is useful in editorial layouts, CMS-driven longform pages, and builder-style content where the gap itself needs to be explicit and reusable.

If the spacing only belongs to one local component relationship, normal layout utilities are usually simpler.

Composition notes

Spacer is intentionally minimal. size chooses between sm, md, and lg based on the rhythm the page needs.

Because the component is pure layout, place it intentionally. It should represent a real structural pause, rather than patch over inconsistent local spacing.

Behavior and theming guidance

Prefer one spacing language per page. If most of the layout already uses normal stack or section spacing, reserve Spacer for the places where content authors genuinely need explicit control.

Use the smallest size that communicates the rhythm. Large whitespace is powerful, but too many large spacers can make long pages feel disconnected.

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

Implementation notes