Skeleton

Variants

Block sizing

A block bar fills the width of its container. A width makes it narrower; it never makes it wider than its container, so a placeholder sized for a wide layout still fits a narrow one.

A placeholder has no width of its own: put it in a block, a card or a flex column, or give it a width. In a shrink-wrapped box with nothing else in it, a bar with no width has nothing to fill.

Text lines

Props

Text lines round down, with a minimum of one; non-finite counts become three. The last line is shortened.

PROP	TYPE	DEFAULT	REQUIRED
`variant`	`enum` block \| text	`"block"`	no
`width` Caller dimension applied via style on the block bar (string or number). It is clamped to the container: it can ask for less, never more.	`string \| number`	—	no
`height` Caller dimension applied via style on the block bar (string or number).	`string \| number`	—	no
`lines` Number of stacked bars in the text variant, rounded down with a minimum of 1. Non-finite values fall back to 3.	`number`	`3`	no

Accessibility

Named “Loading” status with aria-busy="true".
Bars are aria-hidden, so the placeholder is announced once.
Pulses stop with reduced motion.
In forced-colors (high contrast) mode the bars are drawn in a system color, so a loading area is not an empty one.

Manifest entry

<Skeleton variant="text" lines={3} />

View agent manifest

{
  "description": "Loading placeholder. block renders one pulsing bar; text stacks `lines` bars with a shortened last line. Bars fill their container and never widen it, whatever width the caller asks for, and are drawn in a system color in forced-colors mode.",
  "props": {
    "variant": {
      "type": "enum",
      "values": [
        "block",
        "text"
      ],
      "default": "block"
    },
    "width": {
      "type": "union",
      "types": [
        "string",
        "number"
      ],
      "description": "Caller dimension applied via style on the block bar (string or number). It is clamped to the container: it can ask for less, never more."
    },
    "height": {
      "type": "union",
      "types": [
        "string",
        "number"
      ],
      "description": "Caller dimension applied via style on the block bar (string or number)."
    },
    "lines": {
      "type": "number",
      "default": 3,
      "description": "Number of stacked bars in the text variant, rounded down with a minimum of 1. Non-finite values fall back to 3."
    }
  },
  "composable_with": [
    "Card",
    "DataTable"
  ],
  "never_inside": [
    "Button",
    "Badge"
  ],
  "example": "<Skeleton variant=\"text\" lines={3} />"
}