# Shadcn Stats Row

> Skeleton loader for a dashboard stats row

- Type: example, free and open source (MIT)
- Component: [Skeleton](https://reui.io/components/skeleton.md)
- Page: https://reui.io/components/skeleton/c-skeleton-6
- 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-6")`
- Registry item: https://reui.io/r/styles/base-nova/c-skeleton-6.json
- Uses: Card, Skeleton

## Best for

A row of 3 metric cards, each a small label bar over a tall value bar and a caption line

## Agent notes

- `grid-cols-3` has no breakpoint, so the 3 cards stay in one row on a phone, where their `w-24` value bars can overflow and clip

## Install

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

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