Component

Skeleton

Placeholder loading state that previews content shape while data loads.

Usage

Use skeleton loaders for content that loads asynchronously. Match the shape of the content it replaces.

Playground

Preview

Configure

Variant

Code

<div className="space-y-2">
  <Skeleton className="h-4 w-[280px]" />
  <Skeleton className="h-4 w-[240px]" />
  <Skeleton className="h-4 w-[200px]" />
</div>