Skeleton

A placeholder preview of content before data loads. Uses a shimmer animation effect.

Installation

pnpm dlx shadcn@latest add https://dga-registry.vercel.app/r/skeleton.json

Basic Usage

Simple skeleton lines for text content.

Card Skeleton

Skeleton layout for cards with image and text.

Profile Skeleton

Avatar with name and details skeleton.

Table Skeleton

Loading placeholder for tabular data.

Form Skeleton

Loading placeholder for form inputs.

Props

Styling

The skeleton uses a shimmer animation with a gradient background. Customize dimensions using utility classes:

<Skeleton className="h-4 w-[200px]" />        // Line
<Skeleton className="h-12 w-12 rounded-full" /> // Circle
<Skeleton className="h-[125px] rounded-xl" />  // Card image