Skeleton

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/skeleton.json

Usage

import { 
  Skeleton,
  SkeletonCircle,
  SkeletonText,
} from "@/components/ui/skeleton";

<SkeletonCircle />
<SkeletonText />
<Skeleton />

Examples

Skeleton

Rectangular skeleton placeholder.

Circle

Circular skeleton placeholder.

Text

Use the lines prop to control the number of placeholder lines; the last line is shorter by default.

Loading cards

API Reference

Skeleton

Rectangular loading placeholder.

SkeletonCircle

Circular loading placeholder (e.g. for avatars).

SkeletonText

Multi-line text placeholder. Last line is shorter by default to mimic text.

For a complete list of props, see the Ark UI documentation.