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/variable-text-content.

When to use it

Use VariableTextContent when the page needs to render HTML content that already exists outside of JSX, such as CMS output or transformed editorial copy.

Composition notes

html is required and should already be sanitized and structured before it reaches the component. className gives you control over spacing and width without rebuilding the prose styling.

The component wraps the content in the shared prose typography classes and a centered width constraint, so it is best for rich text that should read like editorial copy. Use className to adjust the outer section spacing or max width, not to recreate every heading and paragraph rule from scratch.

Behavior and theming guidance

Because the component renders HTML directly, keep the source content predictable and safe. It works best for trusted editorial markup, not arbitrary user-generated HTML.

Plan the incoming markup around standard prose elements such as headings, paragraphs, lists, and links. If the CMS output needs custom embeds, product cards, or bespoke layout blocks, render those as separate components around VariableTextContent instead of packing everything into one HTML blob.

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

Implementation notes