Base
Skeleton
Skeleton renders an animated placeholder block. Mark the surrounding region with `aria-busy="true"` while content loads.
Installation
npx shadcn add https://rck.vibeboxph.com//r/skeleton.jsonLive preview & controls
Controls
<div aria-busy="true" className="flex flex-col gap-2">
<Skeleton className="h-4 w-2/3" />
<Skeleton className="h-4 w-full" />
</div>Anatomy
SkeletonThe animated placeholder element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Controls width, height, and shape via Tailwind utilities. |
Accessibility
- The skeleton itself is `aria-hidden` — it is decorative and should not be announced.
- Set `aria-busy="true"` on the loading container and remove it once real content mounts.
- Prefer skeletons that mirror the final layout so the page doesn't shift jarringly when content appears.
Source
registry/rck/ui/skeleton.tsx
import * as React from "react";
import { cn } from "@/lib/utils";
export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
/** Placeholder shimmer used while content is loading. Pair with `aria-busy` on the parent region. */
export function Skeleton({ className, ...props }: SkeletonProps) {
return (
<div
data-slot="skeleton"
aria-hidden="true"
className={cn("bg-muted animate-pulse rounded-md", className)}
{...props}
/>
);
}