Feedback · astro-ui · Skeleton

Skeleton

Pulsing placeholder blocks for loading layouts.

Skeleton reserves layout space with a pulsing neutral block while content loads — text lines, circles, rectangles — so the final content swaps in without reflow.

← All components

Features

Variants: text, circle, rectangle
Pulse animation with reduced-motion off switch
Static mode via animated=false
Size entirely consumer-driven (width/height styles)

Usage

---
import { Skeleton } from "astro-ui";
---

<Skeleton style="width:100%;height:1rem" />
<Skeleton variant="circle" style="width:3rem;height:3rem" />

Demos

Basic

<Skeleton variant="text" width="60%" />
<Skeleton variant="text" width="90%" />
<Skeleton variant="circle" width="3rem" height="3rem" />

Card layout

<div style="display:grid;gap:0.75rem">
  <Skeleton height="8rem" />
  <Skeleton variant="text" width="80%" />
</div>

Compose a layout

<div style="display:flex;gap:1rem;align-items:flex-start">
  <Skeleton variant="circle" />
  <div style="flex:1;display:grid;gap:0.5rem">
    <Skeleton variant="text" width="40%" />
    <Skeleton variant="text" />
    <Skeleton variant="rect" height="4rem" />
  </div>
</div>

API

Props

Prop	Type	Default	Description
`variant`	`"text" \| "rect" \| "circle"`	`"rect"`	Placeholder shape.
`width / height`	`string`	`—`	Explicit box dimensions (any CSS length).
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"md"`	Preset scale.
`animated`	`boolean`	`true`	Pulse animation; false for a static block.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

How do I announce loading?

Skeletons are aria-hidden decoration. Put aria-busy=true on the loading region and swap it out when content arrives.

Changelog

Version history mentioning Skeleton.

v0.1.0 — 2026-11-11

added

Feedback (6): Alert, Spinner, Skeleton, Toast, Banner, NotificationCenter.