← Inventory
Skeleton
Skeleton loader component for showing loading states. Displays animated placeholder with a shimmer gradient sweep.
Usage
import { Skeleton, SkeletonRow, SkeletonText } from "@desk/ui/components/skeleton";Best practices
Prefer
Skeletonover 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-*); usevariant="light"on white /bg-backgroundsurfaces where the default gray is too dark.
Props
Skeleton
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | SkeletonVariant | Visual variant - use "light" on white/background surfaces |
SkeletonRow
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | number | Number of text lines to render alongside the media placeholder. Defaults to 2. | |
| media | SkeletonRowMedia | Media placeholder shape: a round avatar or a rounded-square tile. Omit for text-only rows. |
SkeletonText
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | number | Number of placeholder lines to render. Defaults to 1. | |
| size | "base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | Line height, from the shared |
Composition
Builds on
Used by