ComponentsNo. 50 of 109

Skeleton

Placeholder shape shown while content loads.

Installation

pnpm dlx shadcn@latest add @corsair-ui/skeleton

No setup needed: the CLI finds @corsair-ui in the shadcn registry directory. The files land in your project as source: edit them like your own code. More in Installation.

Also adds: utils
npm: clsxtailwind-merge

Examples

Profile

List

Accessibility

Hidden from screen readers; mark the region that is loading with aria-busy="true".
With prefers-reduced-motion it holds still and shows the finished state.

Compatibility

Tailwind CSS: 3.4 and 4, both checked in CI
React: 19
Rendering: Works in server components

Source

1 file, installed as source you own

skeleton.tsxView on GitHub

import type { ComponentProps } from "react";

import { cn } from "@/registry/default/lib/utils";

/**
 * Placeholder shape while content loads. It is hidden from assistive tech;
 * mark the loading region with `aria-busy` so the wait is announced there.
 */
function Skeleton({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      aria-hidden="true"
      data-slot="skeleton"
      className={cn("bg-accent animate-pulse rounded-md motion-reduce:animate-none", className)}
      {...props}
    />
  );
}

export { Skeleton };