components / feedback
Skeleton
Reserve space for content while it loads.
234 B gzip runs on the server · 0 JS
skeleton-default.tsx
import { Skeleton } from "@/components/ui/skeleton";
export default function SkeletonDefault() {
return (
<div className="flex w-full max-w-xs items-center gap-3">
<Skeleton className="size-11 rounded-xl" />
<div className="flex flex-1 flex-col gap-2">
<Skeleton className="h-3.5 w-3/4" />
<Skeleton className="h-3.5 w-1/2" />
</div>
</div>
);
}Installation
$ npx shadcn@latest add https://cd-ui.vercel.app/r/skeleton.jsonfirst time? set up components.json and the theme first: see installation.
Usage
import { Skeleton } from "@/components/ui/skeleton"
<Skeleton className="h-4 w-40" />API
Skeleton
Block with a slow pulse. Set the size with classes. Server component.
| prop | type | default |
|---|---|---|
classNameExtra classes, merged with | string | - |
Accessibility
- It is
aria-hidden: announce the loading somewhere else (e.g.aria-busyon the container).