Skeleton

Stable

Placeholder shapes that hold the layout while content loads.

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.

Source Edit docs Report an issue

Overview

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>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Light

Dark

High contrast

Import

tsx

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

Platforms

Skeleton has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

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

Examples

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

Prop	Type	Default	Description
`variant`	`'text' \| 'circle' \| 'rect'`	`'text'`	Shape.
`width`	`number \| string`	None	Width (number = px).
`height`	`number \| string`	None	Height (number = px).
`lines`	`number`	`1`	Number of text lines; the last is shorter.
`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.

Usage guidelines

Do

Mirror the real layout closely.

Don’t

Show skeletons for operations shorter than about 300ms.

Overview

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>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Light

Dark

High contrast

Platforms

Skeleton has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

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

Examples

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>
  );
}

Prop

Type

Default

Description

variant

'text' | 'circle' | 'rect'

'text'

Shape.

width

number | string

None

Width (number = px).

height

number | string

None

Height (number = px).

lines

number

1

Number of text lines; the last is shorter.

static

boolean

false

Disable the shimmer.

Overview

Light, dark and high contrast

Import

Platforms

Examples

List row

Card placeholder

API reference

Accessibility

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Platforms

Examples

List row

Card placeholder

API reference

Accessibility

Usage guidelines

Do

Don’t

Related