Build · New

Skeleton

Shows the shape of content while it loads, so the page doesn't jump when the real content arrives.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/skeleton

Usage

import { Skeleton, SkeletonRegion } from "@/components/ui/skeleton";

<SkeletonRegion loading={isLoading}>
  {isLoading ? <Skeleton className="h-12 w-full" /> : <Contacts />}
</SkeletonRegion>

Examples

Wave, then the content

animation="wave" is a band that sweeps in the reading direction (from the right in Arabic). When the content arrives, the region stops being aria-busy and the layout doesn't jump.

API reference

Skeleton

Prop	Type	Default	Description
`animation`	`"pulse" \| "wave" \| "none"`	`"pulse"`	Figma's Animation.
`className`	`string`		Size and shape: `h-12 w-full` for a line, `size-40 rounded-full` for an avatar.

SkeletonRegion

Prop	Type	Default	Description
`loading`	`boolean`	`true`	`aria-busy` and the hidden label while loading.
`label`	`ReactNode`	`“Loading…”`	What's read while loading.

Accessibility

ARIA

The region is aria-busy="true" while loading, with a hidden label; the shapes are hidden from screen readers.
The animation stops when reduced motion is on.
Don't keep skeletons when loading fails; show an error.

Arabic and RTL notes

Mirrors

Shapes follow the content's layout: the circle at the inline start (the right).
The wave runs from the inline start to the end: right to left in Arabic.

Does not mirror

The pulse has no direction.

Numerals: No numbers.
Arabic typography: Size skeleton lines close to the taller Arabic line height.

All components ›