# Skeleton set (goodtabs UI)

Placeholder blocks shaped like a card, a list row, text and an article.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/skeleton-set.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/skeleton-set`

## Usage

```tsx
import { SkeletonGroup, SkeletonCard } from "@/components/ui/skeleton-set"

<SkeletonGroup label="Loading resources">
  <SkeletonCard />
</SkeletonGroup>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| Skeleton | `div props` |  | One block. Set its size and radius with className. |
| SkeletonGroup label | `string` | `"Loading"` | Text read once by screen readers for the whole group. |
| SkeletonText lines | `number` | `3` | How many lines. The last one is two thirds wide. |

## When to use

- Loads longer than a moment, where the final layout is known
- Lists and cards that should not jump when the data arrives

## When not to use

- Short waits under 300 milliseconds: show nothing
- Actions in progress: use a spinner on the button

## Notes for agents

- Match the real content's size so nothing shifts when it replaces the skeleton
- Skeleton is aria-hidden; wrap a group in SkeletonGroup so one status is announced
- The pulse uses motion-safe, so under reduced motion the blocks sit still and visible
- Server component, no JavaScript

Docs: https://ui.goodtabs.co/components/skeleton-set