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/commerce/skeleton.

When to use it

Use Skeleton when the final layout is known but the content is not ready yet. It is the flexible primitive behind custom loading states for cards, text blocks, avatars, and media.

Composition notes

Shape the skeleton with normal layout classes so it matches the final UI as closely as possible. That is what keeps the loading state stable and believable.

Behavior and theming guidance

Match the skeleton footprint to the real content. Large mismatches create layout shift and make the loading state feel cheap instead of intentional.

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

Implementation notes