Skeleton

A placeholder shape for content that has not arrived. The pulse animates opacity only, so it stays inside the kit motion rule, and stops under prefers-reduced-motion.

src/components/ui/skeleton.tsx

About

From the component's own source, where it was written.

A placeholder shape for content that has not arrived.

A band of light crossing the shape, rather than the whole shape pulsing. Both read as *loading*, but a sweep has a direction, so a column of twelve of them scans as one surface waking up instead of twelve boxes blinking out of step.

The band is a pseudo-element that translates, so the animation is composited and the box itself never repaints. Under prefers-reduced-motion the sweep is dropped entirely and the plain tinted shape is left standing — a placeholder still has to look like a placeholder when it cannot move.

Install

npx astralyx-ui add skeleton

Usage

import { Skeleton } from '@/components/ui/skeleton'

<Skeleton className="h-8 w-40" />
<Skeleton shape="text" lines={3} />

Composer

Change the props and the source below follows.

Props

shape

lines

className

tsx

<Skeleton className="h-8 w-48" />

Examples

Shapes

tsx

<Skeleton className="h-8 w-48" />
<Skeleton shape="text" className="w-64" />
<Skeleton shape="circle" className="size-10" />

Paragraph

tsx

<Skeleton shape="text" lines={4} />

Composed into a card layout

tsx

<div className="flex gap-3">
  <Skeleton shape="circle" className="size-10" />
  <Skeleton shape="text" lines={2} />
</div>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Skeleton`

A placeholder shape for content that has not arrived.

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
shape	'circle' \| 'text' \| 'block'	'block'	Corner treatment: control radius, a text line, or a circle.
lines	number	—	Render this many stacked lines. The last one is short, so it reads as a paragraph rather than a block.
className	string	—	Where the size comes from — a skeleton has no intrinsic dimensions.

Functions

Function	Signature	Description
skeletonVariants	(props?: { shape?: 'circle' \| 'text' \| 'block' }) => string	A placeholder shape for content that has not arrived.