Skeleton

Skeleton is a low-detail placeholder for content that has not loaded yet. Shape each block to match the layout it will replace so the page stays stable while data, images, or user details are still resolving.

import { Skeleton } from "@/components/loading-ui/skeleton";

export function SkeletonDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/skeleton
Copy

Usage

Copyimport { Skeleton } from "@/components/loading-ui/skeleton";

Copy<Skeleton className="h-5 w-[160px]" />

Customization

Use width, height, radius, and layout utilities to mirror the content that will replace each skeleton. The pulse speed is controlled with --duration.

Duration

Set --duration on each skeleton, or on a parent wrapper, when a surface needs a faster or calmer pulse.

import { Skeleton } from "@/components/loading-ui/skeleton";

export function SkeletonDuration() {

Examples

These examples follow common loading layouts where skeletons work best: user rows, content cards, paragraph copy, forms, and tabular data.

Avatar

Use a circular skeleton beside text lines for user, account, or comment rows.

import { Skeleton } from "@/components/loading-ui/skeleton";

export function SkeletonAvatar() {

Card

Cards can reserve media, title, metadata, and author space while the full content is fetched.

import { Card, CardContent, CardHeader } from "@/components/ui/card";

import { Skeleton } from "@/components/loading-ui/skeleton";

Text

Stack line skeletons with varied widths to suggest headings and body copy.

import { Skeleton } from "@/components/loading-ui/skeleton";

export function SkeletonText() {

Form

Form skeletons should preserve label, input, and action spacing so the final fields do not shift into place.

import { Skeleton } from "@/components/loading-ui/skeleton";

export function SkeletonForm() {

Table

Use repeated rows to hold dense layouts steady while records load.

import { Skeleton } from "@/components/loading-ui/skeleton";

export function SkeletonTable() {