# Skeleton

- Page: <https://kznlabs.github.io/labsUI/components/skeleton>

## Skeleton (`skeleton`, component)

Server-safe loading placeholders that pulse (static under reduced motion). SkeletonGroup announces one "Loading" to screen readers.

- Install: `npx @kznlabs/labsui add skeleton`
- Docs: <https://kznlabs.github.io/labsUI/components/skeleton>
- Brings: utils
- npm: clsx@^2.1.1, tailwind-merge@^3.7.0

### API

- `<Skeleton>` (+ <div> props): Placeholder block. Size it with classes: `<Skeleton className="h-4 w-32" />`.
- `<SkeletonGroup>` (+ <div> props): Wrap skeletons in this so screen readers hear one "Loading" instead of nothing.
  - `label?: string` = `"Loading"`: Announced to screen readers while it is shown.

### Usage

```tsx
<SkeletonGroup><Skeleton className="size-10 rounded-full" /><Skeleton className="h-4 w-32" /></SkeletonGroup>
```

### Example: profile-skeleton.tsx

```tsx
import { Skeleton, SkeletonGroup } from "@/components/ui/skeleton";

export function ProfileSkeleton() {
  return (
    <SkeletonGroup label="Loading profile" className="flex items-center gap-3">
      <Skeleton className="size-10 rounded-full" />
      <div className="grid gap-2">
        <Skeleton className="h-4 w-32" />
        <Skeleton className="h-3 w-20" />
      </div>
    </SkeletonGroup>
  );
}
```