Skeleton

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/skeleton

UsageCopy Anchor Link

Set the size and shape with classes. Match the layout of the content that's loading.

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

<Skeleton className="size-10 rounded-full" />;

AccessibilityCopy Anchor Link

Skeletons are visual only. Set aria-busy on the region that's loading and add text for screen readers. Use aria-live so the content is announced when it arrives.

API referenceCopy Anchor Link

Skeleton is a <div> and accepts all of its attributes.