Skeleton

A pulsing placeholder shown while content loads.

Skeleton has no width or height of its own — it is animate-pulse rounded-md bg-slate-200 and nothing else. Every instance needs sizing via className.

Usage

skeleton-demo.tsx

import { Skeleton } from 'trivela-ui';

export function Example() {
  return <Skeleton className="h-4 w-48" />;
}

Examples

Shapes

Size and round each placeholder with className to match the content it stands in for.

Text lines

Vary the width of the last line so the block reads like a paragraph rather than a table.

Card placeholder

Mirror the real layout so the page does not jump when the content arrives.

Announcing the wait

A pulsing box means nothing to a screen reader — mark the region busy and label it.

API Reference

Prop	Type	Default	Description
className	string	—	Merged with the generated classes via cn().
...props	HTMLAttributes<HTMLDivElement>	—	All native attributes are forwarded to the root element.