Foundation

Skeleton

Pulsing placeholder block for loading states. Use one per discrete piece of pending content.

Examples

Avatar + lines

<div style="display:flex; gap:var(--uin-s-3); align-items:center;">
  <Skeleton variant="circle" />
  <div style="flex:1; display:flex; flex-direction:column; gap:6px;">
    <Skeleton variant="text" width="60%" />
    <Skeleton variant="text" width="40%" />
  </div>
</div>

Block

<Skeleton height="120px" />

Props

Prop	Type	Default	Description
`variant`	`'rect' \| 'text' \| 'circle'`	`'rect'`	Default shape; text is a pill, circle is 1:1.
`width`	`string`	`—`	Explicit width (any CSS length).
`height`	`string`	`—`	Explicit height (any CSS length).
`class`	`string`	`—`	Extra classes; merged via cn().

Install

CLI

npx @a3tai/mittsu add skeleton