Skeleton
Where the words will be: their baselines, the guides a letterer rules for them, or their rhythm. Still until something is loading, and still when motion is off.
Report an issue with SkeletonExample
baseline
metrics
words
Baseline, at rest
Metrics, at rest
Words, at rest
Loading
Loading
Loading
Ring
Install
Run it in a project that has the shadcn CLI set up. It brings the 0nlyType base along.
npx shadcn@latest add https://Usage
import { Skeleton, SkeletonLine, SkeletonRing, type SkeletonProps } from "@/components/ui/skeleton"// A headline and a paragraph that ends short, as a real one does.const lines = (variant?: SkeletonProps["variant"]) => (<Skeleton variant={variant}><SkeletonLine width="38%" height="2.8em" index={0} /><SkeletonLine width="94%" index={1} /><SkeletonLine width="88%" index={2} /><SkeletonLine width="56%" index={3} /></Skeleton>)const variants = ["baseline", "metrics", "words"] as constexport default function Example() {return (<div aria-busy="true" className="grid w-[min(36rem,100%)] gap-(--ot-space-8)">{variants.map((v) => (<div key={v} className="grid gap-4"><span className="ot-label">{v}</span>{lines(v)}</div>))}</div>)}Contract
- Underneath: native.
- Anatomy:
<div class="ot-skeleton" data-variant="baseline | metrics | words" aria-hidden="true">of empty lines, with an optional.ot-skeleton-ringfor an avatar. Setaria-busy="true"on the region it stands in for; nothing moves until it is true, and nothing moves under reduced motion. baseline(default): baselines where the words will be, at the length they'll run. A pencil stroke reads along each line in turn (ot-read), the way an eye would.metrics: from Paul Rand's construction grid. Before a letter is drawn, the letterer rules its guides: the baseline in a hairline and, one real x-height of the voice above it (1ex, so it changes with the pair), a dotted line. Each line takes the font size its height implies (a body line is 1.7em of leading), so a headline's guides are a headline's. While loading, the dotted line is ruled out from the start of each line in turn and passes off the far end (from the right, right to left).words: a layout dummy's greeking. Each line is broken at word spaces by two runs of gaps (every 5em and every 7em) that intersect into words of one to five ems and repeat only after 35; each line starts the pattern elsewhere, so no two lines share a rhythm. The reading stroke now reads word by word.- Forced colours: the skeleton keeps drawing its own lines, in GrayText, so it doesn't vanish.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
Skeleton | div | The stack of lines. Hidden from assistive technology; put aria-busy on the region being loaded, and a pencil stroke reads along each line in turn while it is true. With reduced motion the lines stay still. | |
Skeleton.variant | "baseline" | "metrics" | "words" | "baseline" | baseline: the hairline each line of words will stand on; while loading a pencil stroke reads along each in turn. metrics: the letterer's guides, a baseline and a dotted line one real x-height of the voice above it; while loading the dotted line is ruled out along each line in turn. words: each line broken at word spaces, as a layout dummy greeks its text; while loading the pencil stroke reads word by word. |
SkeletonLine | i | One line of words to come. | |
SkeletonLine.width | string | "100%" | Any CSS width. |
SkeletonLine.height | string | "1.7em" | Any CSS height; a headline is about 2.8em. |
SkeletonLine.index | number | 0 | Position in the stack, so the stroke reads down the lines in turn. |
SkeletonRing | span | Where an avatar or a mark will be. Set size for anything other than 2.75rem. | |
SkeletonRing size | string | "2.75rem" | Any CSS length for both the width and height of the ring. |
Craft
Where its move comes from
| Component | Reference | Move |
|---|---|---|
| Skeleton | "Less is more." rules | Baselines where the words will be |
| Metrics skeleton | Paul Rand construction grid | The letterer's guides: baseline and a dotted x-height |
| Words skeleton | A layout dummy's greeking | Lines broken at word spaces |
How it moves
| Component | Articulation | What moves |
|---|---|---|
| Skeleton | Reading | A pencil stroke reads along each line in turn |
| Metrics skeleton | Ruling | The dotted x-height is ruled out along each line in turn and passes off the end |
| Words skeleton | Reading | The pencil stroke reads along each line word by word |