1Sponsor

Skeleton

Shimmer loading placeholder

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/skeleton.json

Usage

import { Skeleton } from "@/components/ui/skeleton";
<Skeleton width={30} height={3} />

Examples

Static (No Animation)

Terminal
import { Skeleton } from "@/registry/ui/skeleton";

export default function SkeletonStatic() {
  return <Skeleton width={20} height={2} animated={false} />;
}

API Reference

Skeleton

PropTypeDefault
widthnumber20
heightnumber1
animatedbooleantrue