Skeleton

Copy Markdown

Displays a loading state.

PreviewCode

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/skeleton

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

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

Rectangular skeleton placeholder.

PreviewCode

Circular skeleton placeholder.

PreviewCode

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

PreviewCode

PreviewCode

Rectangular loading placeholder.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

Circular loading placeholder.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

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

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

[

Signature Pad ](/docs/components/signature-pad)[

Skip Nav ](/docs/components/skip-nav)

On This Page