Wensity

Skeleton

Loading placeholders for text, avatars, cards, and tables, plus a wrapper for composing your own custom layouts.

skeletonloadingplaceholdershimmeravatarcardtablefeedback
Loading preview

Examples

Practical examples and common states for the same installable component.

Text

Line placeholders with realistic width rhythm.

examples/skeleton-text.tsx
import { SkeletonText } from "@/components/wensity/skeleton";


export function TextSkeleton() {
  return <SkeletonText rows={5} widths={["92%", "100%", "74%", "46%"]} />;
}

Avatar

Circular identity placeholders that match avatar sizes.

examples/skeleton-avatar.tsx
import { SkeletonAvatar } from "@/components/wensity/skeleton";


export function AvatarSkeleton() {
  return <SkeletonAvatar size="lg" />;
}

Card

A composed media, identity, and text loading shell.

examples/skeleton-card.tsx
import { SkeletonCard } from "@/components/wensity/skeleton";


export function CardSkeleton() {
  return <SkeletonCard />;
}

Table

Header and row placeholders for dense data screens.

examples/skeleton-table.tsx
import { SkeletonTable } from "@/components/wensity/skeleton";


export function TableSkeleton() {
  return <SkeletonTable rows={5} columns={4} />;
}

Custom

Raw blocks for product-specific loading layouts.

examples/skeleton-custom.tsx
import { Skeleton } from "@/components/wensity/skeleton";


export function CustomSkeleton() {
  return (
    <div className="grid grid-cols-[4rem_1fr] gap-4">
      <Skeleton className="h-16 rounded-xl" tone="contrast" />
      <Skeleton className="h-4 w-2/3 rounded-md" />
    </div>
  );
}

Props

PropTypeDefaultDescription
variant"text" | "avatar" | "card" | "table" | "custom""custom"Placeholder shape. custom takes its size from your own classes.
tone"neutral" | "soft" | "contrast""neutral"Contrast of the placeholder against its surface.
rowsnumber3Number of lines, for the text and table variants.
animatebooleantrueRuns the shimmer. Set false for static placeholders.