Skip to content
Components

Skeleton

Skeleton loader component for showing loading states. Displays animated placeholder with a shimmer gradient sweep.

Usage

import { Skeleton, SkeletonRow, SkeletonText } from "@instruments/materia-ui/components/skeleton";

Best practices

  • Prefer Skeleton over a spinner for content areas - a layout-stable placeholder that mirrors the final shape avoids reflow when data lands.

  • Size it with className (h-* / w-*); use variant="light" on white / bg-background surfaces where the default grey is too dark.

Props

Skeleton

PropTypeDefaultDescription
variantSkeletonVariant

Visual variant - use "light" on white/background surfaces

SkeletonRow

PropTypeDefaultDescription
linesnumber

Number of text lines to render alongside the media placeholder. Defaults to 2.

mediaSkeletonRowMedia

Media placeholder shape: a round avatar or a rounded-square tile. Omit for text-only rows.

SkeletonText

PropTypeDefaultDescription
linesnumber

Number of placeholder lines to render. Defaults to 1.

size"base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl"

Line height, from the shared ComponentSize scale. Defaults to "sm".

Composition

Builds on

Stack

Used by

DataGridPagination, ProductCard, Sidebar