Component

Skeleton

Placeholder loading state that previews content shape while data loads.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add skeleton

This item delegates to the public shadcn registry. AG-themed variants still require npx shadcn@latest add https://design.ag.org/r/ag-globals.

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>

Variants & States

Supported variants, sizes, and interaction states for this component.

Variants

Text
Avatar
Card