# Skeleton

Placeholder shape shown while content loads.

Docs: https://corsairui.vercel.app/docs/skeleton

## Install

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

Also adds: `utils`.
npm: `clsx`, `tailwind-merge`.

## Styling

Restyle it in the project that installs it: `className` on each part, the theme variables, and these attributes with arbitrary variants (`[&_[data-slot=…]]:…`, `data-[state=…]:…`).

data-slot: `skeleton`

## 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.

## Examples

On the docs page: Profile, List. The usage examples in the source comments below are the reference.

## Source

What `shadcn add` writes into the project:

### skeleton.tsx

```tsx
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 };
```