revido kit
Start building
← All components
feedback / stable

Skeleton

Layout-shaped pulsing placeholder for loading content; still under reduced motion.

LIVE PREVIEW
Loading preview…

When to use

  • Page, panel and list loading — shape it like the content that will appear.

Consider an alternative

  • Inside buttons — Button `loading` shows a spinner.
  • Errors or empty results — show the error or empty state.

Import

import { Skeleton } from '@revido-llc/kit';

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

columnsnumber4Number of equally sized cells for the table preset.
rowsnumber3Number of placeholder rows for list/table presets.
variant"block" | "list" | "table" | "card" | "stat""block"Shape matching the loaded content.
childrenReactNode—
classNamestring—

Examples

List rows

Match the row height (36px) and the avatar/title layout of the real list.

<div role="status" aria-label="Loading tasks">
  <Skeleton variant="list" rows={3} />
</div>

Card

<Skeleton variant="card" />

Table rows

A shared header and four cells per row. DataTable loading retains the real column geometry.

<Skeleton variant="table" rows={3} columns={4} />

Stat

<Skeleton variant="stat" />

Related components