Skeleton

A loading placeholder in the shape of the thing that is coming.

<div className="flex items-center gap-3"><Skeleton className="size-8 rounded-full" /><div className="flex-1">  <Skeleton lines={2} /></div></div>

Skeleton is a quiet rectangle that stands in for content while it loads. It is deliberately cheap to render and deliberately undramatic: a placeholder is ambient, and a dense dashboard full of animated blocks competes with the one thing the reader is waiting for.

Usage

tsx

import { Skeleton } from "@heyo-sh/heyo-ui";<Skeleton className="h-8 w-40" />;

A skeleton has no size of its own — it takes the shape you give it, which is the point: it should be the shape of the thing that is coming.

Lines

lines renders stacked lines with a shortened last one, the way a paragraph actually ends.

<Skeleton lines={3} /><Skeleton lines={1} className="h-6 w-48" />

A loading card

Match the layout you are waiting for. A skeleton that does not resemble the content it replaces produces a visible jump when the data lands.

<Card><CardHeader>  <Skeleton className="h-4 w-32" />  <Skeleton className="h-5 w-16 rounded-full" /></CardHeader><CardBody>  <Skeleton lines={3} /></CardBody></Card>

Tables already do this

DataTable draws its own skeleton rows from loading and loadingRows — you do not have to build the loading table yourself.

Properties

linesnumberoptional

Renders N stacked lines with a shortened last one, like real text.

classNamestringoptional

The size and shape — h-8 w-40, size-8 rounded-full.

There is nothing else to configure. A skeleton is a shape and a fill — anything more is a spinner wearing a different hat, and heyo-ui already has Spinner.

Loading documentation…