Skeleton

Animated placeholder for loading states. Renders as a rectangle, circle, or multi-line text block with a pulse animation.

import { Skeleton } from 'phoundry-ui';

Rectangle

Show code

<Skeleton width="200px" height="40px" />
<Skeleton width="100%" height="20px" />

Circle

Show code

<Skeleton variant="circle" width="48px" />
<Skeleton variant="circle" width="32px" />

Text Lines

Single line title shimmer

Show code

<Skeleton variant="text" lines={3} />
<Skeleton variant="text" lines={5} width="300px" />
<Skeleton variant="text" lines={1} width="120px" />

Card Composition

Show code

<div class="flex gap-3 p-4 rounded-lg border border-border-muted">
  <Skeleton variant="circle" width="40px" />
  <div class="flex-1 space-y-2">
    <Skeleton width="60%" height="14px" />
    <Skeleton variant="text" lines={2} />
  </div>
</div>

Props

Prop	Type	Default	Description
variant	'rect' \| 'circle' \| 'text'	'rect'	Shape of the placeholder.
width	string	—	CSS width value. Defaults to 100% for rect/text, 40px for circle.
height	string	—	CSS height value. Defaults to 20px for rect, matches width for circle.
lines	number	3	Number of text lines (only for variant="text").
class	string	—	Additional CSS classes.

Usage tips

Compose multiple skeletons to mirror the layout of the content being loaded.
The last line in variant="text" is automatically shorter (75%) for a natural look.
Use fixed width/height to prevent layout shift when content loads.
Add utility classes via class (e.g. rounded corners) to mirror cards or avatar stacks.
Animation follows global motion preferences via the theme stylesheet — no extra props required.