Neutral placeholder that mirrors the shape of content while it loads. Use it where the layout is predictable, to reduce perceived latency.
Default usage you can copy and adapt.
A single text line placeholder that fills its container.
Circle variant for avatars and icon placeholders.
Block variant for cards, images, thumbnails, and hero regions.
Use width / height for CSS lengths or pixel values, or Tailwind width utilities via class.
A realistic list-row pattern: avatar beside two lines of text.
Drop-in placeholder for feed cards, blog previews, and product tiles.
The props you are most likely to need, with types and defaults.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| variant | 'text' | 'circle' | 'block' | No | 'text' | Shape preset. text is a short rounded bar for lines of copy, circle is a square with full rounding for avatars and icon placeholders, block is a taller rectangle for media, cards, and hero regions. |
| width | string | number | No | fills parent (circle: 2.5rem) | Explicit width as a CSS length (e.g. '50%', '12rem') or pixel number. Omit to fill the parent, or pass a fixed Tailwind width via class (e.g. w-64). |
| height | string | number | No | preset per variant | Explicit height as a CSS length or pixel number. Defaults: text ≈ 0.75rem, circle matches width, block ≈ 8rem. |
| class | string | No | '' | Extra classes forwarded to the root element. Useful for fixed Tailwind widths, rounding overrides, or margins. |
| aria-label | string | No | 'Loading…' | Label announced by assistive tech. Keep the default for generic loading, or set to something more specific (e.g. 'Loading profile') when the skeleton stands in for a named region. |