Source: https://monarchui.dev/components/skeleton/

Components · Status and feedback

# Skeleton

Loading placeholder shapes.

@rookcom/monarch-react

Component

## Shapes

## Usage examples

The example at the top of the page is the only one for this component.

## Purpose

A placeholder shape that holds the layout while content loads.

### Use when

- Building a custom loading layout that mirrors the final content.

### Avoid when

- A standard list, card grid or detail view: use LoadingState, which also announces loading.

## Design principles

- Hidden from assistive technology: mark the loading region `aria-busy="true"` and announce completion separately.

## API reference

```tsx
import { Skeleton } from '@rookcom/monarch-react';
```

| Export | Kind | Rendering | Root class |
| --- | --- | --- | --- |
| `Skeleton` | component | server-safe | `.mn-skeleton` |

`width` and `height` are merged into `style`.

Generated from the TypeScript declarations of `packages/react/src/components/feedback/skeleton`.

## Properties

### `Skeleton`

Loading placeholder. Hidden from assistive technology: mark the loading region with aria-busy="true" and announce completion separately.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `height` | `import("/home/runner/work/monarch/monarch/node_modules/csstype/index").Property.Height<string \| number>` |  |
| `id` | `string` |  |
| `shape` | `"circle" \| "rect" \| "text"` |  |
| `width` | `import("/home/runner/work/monarch/monarch/node_modules/csstype/index").Property.Width<string \| number>` |  |

## Variants

| Prop | Values | Description |
| --- | --- | --- |
| `shape` | `'rect'``'text'``'circle'` | Default `rect`. `text` is 0.75em high; `circle` is fully rounded. Exposed as `data-shape`. |

## States

| State | Exposed as | Behaviour |
| --- | --- | --- |
| Animating | – | A shimmer animation runs; it is turned off with reduced motion. |

## Interaction behaviour

- None.

## Keyboard support

Not interactive, so there is no keyboard behaviour.

## Accessibility

Role

none (aria-hidden)

Accessible name

–

- Always `aria-hidden`.
- `prefers-reduced-motion: reduce` stops the shimmer.

## Responsive behaviour

- Sizes come from `width` and `height`; percentages follow the container.

## Theme support

- Fill is `--mn-color-bg-muted`, so it adapts to every theme.

## Do and don't

### Do

- Match the skeleton to the shape of the content that will replace it.

### Don't

- Do not rely on Skeleton to tell screen-reader users that content is loading.

## Related components

- [LoadingState](https://monarchui.dev/components/loading-state/): Ready-made skeleton layouts with an announcement.
- [Spinner](https://monarchui.dev/components/spinner/): Indeterminate progress in a small space.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | None |
| Monarch components | None |

## Testing coverage

- Is hidden from assistive technology.

| Check | Covered |
| --- | --- |
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines: /__gallery |

Tests: `packages/react/src/components/feedback/skeleton`

## All example code

### Shapes

```tsx
import { Skeleton } from '@rookcom/monarch-react';

<Skeleton shape="circle" width="2.5rem" height="2.5rem" />
<Skeleton shape="text" width="12rem" />
<Skeleton width="8rem" height="2rem" />
```