Skeleton

Placeholder shape while content loads.

Installation

pnpm dlx shadcn@latest add @paneui/skeleton

Usage

Examples

Card

Accessibility

Skeletons are aria-hidden. Mark the loading region with aria-busy and a label. The pulse stops under reduced motion.

API Reference

Skeleton

Size comes from className. Also accepts every prop of div.

shape= "default"
"default" | "circle" | "card"
Corner shape; round suits avatars and rounded-xl suits media.
PropTypeDefaultDescription
shape"default" | "circle" | "card""default"Corner shape; round suits avatars and rounded-xl suits media.