Skeleton

A loading placeholder that mimics content layout while data is being fetched.

Import

tsx

import { Skeleton } from '@tac-ui/web';

Playground

Interactively configure the Skeleton props below.

Variant

Animation

tsx

<Skeleton variant="rectangular" animation="shimmer" width="100%" height={80} />

Text

Multiple stacked lines simulating a text block.

tsx

<Skeleton variant="text" lines={3} />

Rectangular

Rectangle placeholder for images, cards, or blocks.

tsx

<Skeleton variant="rectangular" width="100%" height={120} />

Circular

Circle placeholder typically used for avatars or icons.

tsx

<Skeleton variant="circular" width={40} height={40} />
<Skeleton variant="circular" width={56} height={56} />
<Skeleton variant="circular" width={72} height={72} />

Animation

Choose between a sweeping shimmer highlight or a subtle pulse fade.

shimmer

pulse

tsx

<Skeleton animation="shimmer" width="100%" height={48} />
<Skeleton animation="pulse" width="100%" height={48} />

Card Composition

Combine skeletons to simulate a card with an avatar and text.

tsx

<HStack gap="md" align="start">
  <Skeleton variant="circular" width={48} height={48} />
  <div className="flex flex-col gap-2 flex-1">
    <Skeleton variant="rectangular" width="40%" height={14} />
    <Skeleton variant="text" lines={2} />
  </div>
</HStack>

API Reference

Prop	Type	Default	Description
variant	"rectangular" \| "circular" \| "text"	"rectangular"	Shape of the skeleton placeholder.
animation	"shimmer" \| "pulse"	"shimmer"	Animation style. Shimmer sweeps a highlight, pulse fades opacity.
width	string \| number	-	Width of the skeleton. Accepts CSS string or pixel number.
height	string \| number	-	Height of the skeleton. Accepts CSS string or pixel number.
lines	number	3	Number of lines rendered when variant is "text".
className	string	-	Additional CSS class names.