Skeleton

A placeholder shape while content loads.

When to use

Use when: Holding the shape of content while it loads, so the layout doesn't jump.
Avoid when: Loading takes a moment and has no layout to hold; use Spinner.

Installation

bunx shelf add skeleton

The source lands in src/components/ui/skeleton.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

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

<Skeleton />

Built on

Packages: @stylexjs/stylex
Shelf items: foundations, utils
Figma: In progress. See Designers and Figma.