# Skeleton

> Placeholder shapes that hold the layout while content loads.

Category: Feedback · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/skeleton

Skeletons reduce layout shift and make loading feel shorter by previewing the shape of what is coming. Match their shapes to the real content. Skeletons are invisible to screen readers, so mark the loading container aria-busy and add a short status message.

## Import

```tsx
import { Skeleton } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import { Skeleton } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div aria-busy="true" style={{ display: 'grid', gap: 8, maxWidth: 420 }}>
      <span className="st-sr-only" role="status">
        Loading contract details…
      </span>
      <Skeleton width="40%" height={20} />
      <Skeleton lines={3} />
    </div>
  );
}
```

### List row

```tsx
import { Skeleton } from '@bindshq/stance-react';

export function ListRow() {
  return (
    <div aria-busy="true" style={{ display: 'grid', gap: 16, maxWidth: 420 }}>
      <span className="st-sr-only" role="status">
        Loading members…
      </span>
      {[0, 1, 2].map((i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Skeleton variant="circle" width={36} />
          <div style={{ flex: 1 }}>
            <Skeleton width="50%" />
            <Skeleton width="30%" height={10} />
          </div>
        </div>
      ))}
    </div>
  );
}
```

### Card placeholder

```tsx
import { Skeleton } from '@bindshq/stance-react';

export function CardPlaceholder() {
  return (
    <div aria-busy="true" style={{ width: 300, display: 'grid', gap: 12 }}>
      <span className="st-sr-only" role="status">
        Loading template preview…
      </span>
      <Skeleton variant="rect" height={140} />
      <Skeleton width="60%" height={18} />
      <Skeleton lines={2} />
    </div>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Skeleton | `variant` | `'text' \| 'circle' \| 'rect'` | `'text'` | Shape. |
| Skeleton | `width` | `number \| string` | None | Width (number = px). |
| Skeleton | `height` | `number \| string` | None | Height (number = px). |
| Skeleton | `lines` | `number` | `1` | Number of text lines; the last is shorter. |
| Skeleton | `static` | `boolean` | `false` | Disable the shimmer. |

## Accessibility

- Skeletons are always aria-hidden.
- Set aria-busy="true" on the region being loaded and include a visually hidden status, e.g. "Loading templates…".
- The shimmer is disabled for people who prefer reduced motion.

## Guidelines

**Do**

- Mirror the real layout closely.

**Don’t**

- Show skeletons for operations shorter than about 300ms.

## Related

- https://stanceui.com/components/spinner
- https://stanceui.com/components/progress
- https://stanceui.com/components/loading-overlay