# Shadcn Card Grid

> Skeleton loader for a card grid

- Type: example, free and open source (MIT)
- Component: [Skeleton](https://reui.io/components/skeleton.md)
- Page: https://reui.io/components/skeleton/c-skeleton-8
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/skeleton.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/skeleton.md
- MCP: `get_example("c-skeleton-8")`
- Registry item: https://reui.io/r/styles/base-nova/c-skeleton-8.json
- Uses: Card, Skeleton

## Best for

A card led by a 16:9 media block, then a heading bar and 2 copy lines over a footer with a wide and a square button bar

## Agent notes

- Only one `Card` renders despite the card grid title; repeat it inside your own grid wrapper for as many cards as a page holds

## When not to use

- A card whose title bars sit above the image, with no footer: use [Card](https://reui.io/components/skeleton/c-skeleton-2.md) (`get_example("c-skeleton-2")`)

## Install

```bash
npx shadcn@latest add @reui/c-skeleton-8
```

## About Shadcn Skeleton

### When to use

- Placeholders for avatars and user info, text paragraphs, forms and media cards while data loads
- Loading states for data tables, dashboard stats, lists with row actions, profile pages and chat threads

### When not to use

- Sortable record tables that draw their own placeholder rows during a fetch: use [Data Grid](https://reui.io/components/data-grid.md) (`get_component("data-grid")`)
- Menu links in an app navigation rail that are still being fetched: use [Sidebar](https://reui.io/components/sidebar.md) (`get_component("sidebar")`)
- A wait whose result has no known shape, such as a file being processed: use [Spinner](https://reui.io/components/spinner.md) (`get_component("spinner")`)

### Agent notes

- `Skeleton` has no size of its own, so every placeholder here sets its height and width by class; size yours to the content it stands in for
- `Skeleton` is a bare div with no role or text, so screen readers hear nothing; set aria-busy on the region it fills while loading
- The default radius of `Skeleton` follows the style, square in lyra and sera and rounded-2xl in luma and rhea; circles need rounded-full

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.