source

Skeleton

Placeholder loading animations that mimic content layout to reduce perceived loading time.

Variant

Animation

Count

Size

Width

Height

Loading syntax highlighting...

01 Examples

Text Placeholder

Multi-line text loading state via the `count` prop — the most common pattern for paragraphs and copy blocks.

Loading syntax highlighting...

Profile Card

Avatar + text combo with a trailing action button — a complete loading state for user cards.

Loading syntax highlighting...

Table Rows

Repeat a row of skeletons to mirror tabular content while data is fetched.

Loading syntax highlighting...

Content Feed

List-item placeholder for article previews, search results, or any vertical feed.

Loading syntax highlighting...

02 Customization

Slot Overrides

Use slotClasses to restyle the base element and the wrapper between multi-line items.

Loading syntax highlighting...

Fully Custom (unstyled)

Drop all defaults and build unique placeholder shapes — e.g. for dark, branded surfaces.

Loading syntax highlighting...

03 Accessibility

Screen Reader

Uses role="status" with aria-label="Loading". A visually hidden "Loading…" text ensures screen readers announce the placeholder's purpose. When count > 1, individual items are marked aria-hidden="true" so only the wrapper is announced.

Reduced Motion

Both pulse and wave animations respect prefers-reduced-motion: reduce via Tailwind's motion-reduce: variant. The skeleton still renders as a static colored block to indicate loading.

Semantic Role

The role="status" attribute identifies the skeleton as a live region, allowing assistive technology to announce when loading completes and content replaces the placeholder.

04 API Reference

13 props

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...

llm.txt