Skeleton

Reserves space while content loads. Divider-tone pulse that respects reduced motion.

Preview

In action

Wait

The sheet is coming

Ink occupies the cell before the words arrive.

When to use

Use it for

Holding the shape of content that is about to arrive.
One line per line of text, at the text's height.

Not for

Waits longer than a few seconds; show a message.
Small controls; use Spinner.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Skeleton } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/skeleton.

2. Vendor the source

npx @noorddev/vlak-cli add skeleton

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/skeleton.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Skeleton } from "@noorddev/vlak-react";

<Skeleton width="60%" />
<Skeleton width={240} height={14} />

Props

Skeleton

Prop	Type	Default	Description
`width`	`string \| number`
`height`	`string \| number`	`14`

Also accepts HTMLAttributes<HTMLSpanElement>.

Accessibility

aria-hidden; it says nothing. Set aria-busy on the region and announce the load elsewhere.
The pulse stops under prefers-reduced-motion.

Markup

<span class="rs-skeleton" style="width:180px;height:14px"></span>

Classes

.rs-skeleton