Feedback

Skeleton

Shimmer placeholder that respects reduced motion. Offset each piece with delay so a card moves as one wave. For grids of hundreds, use the .skeleton-sweep class instead.

view .md

Preview

Installation

terminal

bash

npx @entrepta/cli@latest add skeleton

Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

skeleton.tsx

tsx

import { Skeleton, SkeletonText } from "@/components/entrepta/skeleton"

// Avatar + text row
<div className="flex items-center gap-3">
  <Skeleton variant="circle" className="w-10 h-10 shrink-0" />
  <SkeletonText lines={2} className="flex-1" />
</div>

// Image card
<Skeleton variant="rect" className="w-full h-40" />

Props

Prop	Type	Default	Description
variant	"line" \| "circle" \| "rect"	"rect"	Shape preset
delay	number	0	Seconds to offset the shimmer, so a grid of pieces moves as one wave
lines	number	3	Number of text lines (SkeletonText only)