Theme Playground

Commerce

Skeleton

Low-level loading placeholder for building custom content and media shells.

Best for

loading placeholdersprogressive loadinglayout stability

Import

import { Skeleton } from "@enadhq/enad-react-sdk/client/storefront"

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.

Examples

Live examples you can edit directly in the sandbox.

1 example

Basic shapes

Combine several simple skeleton blocks to mirror the real layout while content loads.

Component Sets

Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.

Props

PropTypeDefaultDescription
classNamestring
No description yet.