Github

Skeleton

PreviousNext

Use to show a placeholder while content is loading.

import { Skeleton } from "@/components/ui/skeleton";
export function SkeletonDemo() {	return (		<div className="flex items-center gap-4">			<Skeleton className="size-12 rounded-full" />			<div className="space-y-2">				<Skeleton className="h-4 w-[250px]" />				<Skeleton className="h-4 w-[200px]" />			</div>		</div>	);}

Installation

pnpm dlx shadcn@latest add @herocn/skeleton

Usage

import { Skeleton } from "@/components/ui/skeleton"
<Skeleton className="h-[20px] w-[100px] rounded-full" />

Examples

Animation types

Shimmer

Pulse

None

import { Skeleton } from "@/components/ui/skeleton";
export function SkeletonAnimationTypes() {	return (		<div className="grid w-full max-w-xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">			<div className="space-y-2">				<p className="truncate text-muted-foreground text-xs">Shimmer</p>				<div className="space-y-3 rounded-lg bg-transparent p-4 shadow-panel">					<Skeleton animationType="shimmer" className="h-20 rounded-lg" />					<Skeleton animationType="shimmer" className="h-3 w-3/5 rounded-lg" />					<Skeleton animationType="shimmer" className="h-3 w-4/5 rounded-lg" />				</div>			</div>
			<div className="space-y-2">				<p className="truncate text-muted-foreground text-xs">Pulse</p>				<div className="space-y-3 rounded-lg bg-transparent p-4 shadow-panel">					<Skeleton animationType="pulse" className="h-20 rounded-lg" />					<Skeleton animationType="pulse" className="h-3 w-3/5 rounded-lg" />					<Skeleton animationType="pulse" className="h-3 w-4/5 rounded-lg" />				</div>			</div>
			<div className="space-y-2">				<p className="truncate text-muted-foreground text-xs">None</p>				<div className="space-y-3 rounded-lg bg-transparent p-4 shadow-panel">					<Skeleton animationType="none" className="h-20 rounded-lg" />					<Skeleton animationType="none" className="h-3 w-3/5 rounded-lg" />					<Skeleton animationType="none" className="h-3 w-4/5 rounded-lg" />				</div>			</div>		</div>	);}

Avatar

import { Skeleton } from "@/components/ui/skeleton";
export function SkeletonAvatar() {	return (		<div className="flex w-fit items-center gap-4">			<Skeleton className="size-10 shrink-0 rounded-full" />			<div className="grid gap-2">				<Skeleton className="h-4 w-[150px]" />				<Skeleton className="h-4 w-[100px]" />			</div>		</div>	);}

Card

import { Card, CardContent, CardHeader } from "@/components/ui/card";import { Skeleton } from "@/components/ui/skeleton";
export function SkeletonCard() {	return (		<Card className="w-full max-w-xs">			<CardHeader>				<Skeleton className="h-4 w-2/3" />				<Skeleton className="h-4 w-1/2" />			</CardHeader>			<CardContent>				<Skeleton className="aspect-video w-full" />			</CardContent>		</Card>	);}

Text

import { Skeleton } from "@/components/ui/skeleton";
export function SkeletonText() {	return (		<div className="flex w-full max-w-xs flex-col gap-2">			<Skeleton className="h-4 w-full" />			<Skeleton className="h-4 w-full" />			<Skeleton className="h-4 w-3/4" />		</div>	);}

Form

import { Skeleton } from "@/components/ui/skeleton";
export function SkeletonForm() {	return (		<div className="flex w-full max-w-xs flex-col gap-7">			<div className="flex flex-col gap-3">				<Skeleton className="h-4 w-20" />				<Skeleton className="h-8 w-full" />			</div>			<div className="flex flex-col gap-3">				<Skeleton className="h-4 w-24" />				<Skeleton className="h-8 w-full" />			</div>			<Skeleton className="h-8 w-24" />		</div>	);}

Table

import { Skeleton } from "@/components/ui/skeleton";
export function SkeletonTable() {	return (		<div className="flex w-full max-w-sm flex-col gap-2">			{Array.from({ length: 5 }).map((_, index) => (				<div className="flex gap-4" key={index}>					<Skeleton className="h-4 flex-1" />					<Skeleton className="h-4 w-24" />					<Skeleton className="h-4 w-20" />				</div>			))}		</div>	);}

Single shimmer

import { Skeleton } from "@/components/ui/skeleton";
export function SingleShimmer() {	return (		<div className="skeleton--shimmer relative grid w-full max-w-xl grid-cols-3 gap-4 overflow-hidden rounded-xl">			<Skeleton animationType="none" className="h-24 rounded-xl" />			<Skeleton animationType="none" className="h-24 rounded-xl" />			<Skeleton animationType="none" className="h-24 rounded-xl" />		</div>	);}

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client";
import {	type Translations,	useTranslation,} from "@/components/language-selector";import { Skeleton } from "@/components/ui/skeleton";
const translations: Translations = {	en: {		dir: "ltr",		values: {},	},	ar: {		dir: "rtl",		values: {},	},	he: {		dir: "rtl",		values: {},	},};
export function SkeletonRtl() {	const { dir, language } = useTranslation(translations, "ar");
	return (		<div className="flex items-center gap-4" dir={dir} lang={language}>			<Skeleton className="size-12 rounded-full" />			<div className="space-y-2">				<Skeleton className="h-4 w-[250px]" />				<Skeleton className="h-4 w-[200px]" />			</div>		</div>	);}

API Reference

Skeleton

PropTypeDefault