Skeleton

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/skeleton.json

npx shadcn@latest add https://prototyper-ui.com/r/skeleton.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/skeleton.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/skeleton.json

This will add the following files to your project:

• components/ui/skeleton.tsx

Usage

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

<Skeleton className="h-4 w-[200px]" />;

Examples

Card

Styling

Data Slots

Use data-slot attributes to target the skeleton in CSS:

Customization Examples

/* Change animation to a shimmer */
[data-slot="skeleton"] {
  @apply animate-shimmer;
}

{
  /* Size and shape via className */
}
<Skeleton className="size-12 rounded-full" />;

API Reference

Skeleton

An animated loading placeholder.

Extends React.ComponentProps<"div">. All standard div props are forwarded via ...props.

Accessibility

Keyboard Interactions

Skeleton is a non-interactive presentational element and does not have keyboard interactions.

ARIA Attributes

• Skeleton renders as a plain <div> with no implicit ARIA role.
• For screen readers, use aria-busy="true" on the parent container while loading, and replace skeletons with actual content when loaded.

Related