Skeleton

Prop-driven loading placeholder.

import { Skeleton } from "@evolve-storefront/ui/skeleton";

Preview

DefaultOpen in Storybook ↗

Usage

// Size it like the text it stands in for, so nothing reflows on load.
if (isPending) return <Skeleton className="h-4 w-48" />;

Props

No props of its own.

Examples

VariantsThe shapes a placeholder takes: a text line, an avatar circle, and a card that mirrors the real card's DOM (image, title, price), so nothing reflows when it loads.

<Skeleton className="size-12 rounded-full" />
// Mirror the real card's DOM: image, title, price.
<div className="flex flex-col gap-3">
  <Skeleton className="aspect-square w-full rounded-lg" />
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</div>;

Open in Storybook ↗