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/layout/promotion-bar.

When to use it

Use PromotionBar when the page shell needs a lightweight announcement region. In the new composed layout model, the app decides explicitly where that strip belongs.

Common placements:

• inside Header.Promotion
• above a custom header shell
• as a standalone strip on campaign pages

Preferred composition surface

Use child slots when the app wants to keep the built-in carousel logic but explicitly control the visible anatomy:

• PromotionBar.Message
• PromotionBar.Controls
• PromotionBar.PrevButton
• PromotionBar.NextButton
• PromotionBar.DismissButton

The existing messages[] API remains the convenience path.

Behavior and theming guidance

The bar still uses bg-accent text-accent-foreground semantic colors by default, and classNames still exposes stable hooks for message, prevButton, nextButton, dismissButton, and icon.

Use the slot-first path when the storefront wants to:

• change where the controls sit relative to the message
• inject richer inline message markup
• keep the same carousel/dismiss logic while treating the bar as a composable announcement primitive

Use the fast path when the default centered shell is already right.

Keep PromotionBar small and reusable

PromotionBar is still a lightweight announcement primitive, not a full layout system. If the top strip needs several independent regions or a much richer information hierarchy, compose a custom section around it instead of turning it into a full header substitute.

Messages still cycle with a wraparound carousel: the last message wraps to the first and vice versa. Navigation and close buttons stay optional, and the labels prop can localize the button text used for accessibility.

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

Implementation notes