Feedback

Skeleton

Animated shimmer placeholder that respects prefers-reduced-motion. Use SkeletonText for multi-line text blocks.

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
lines	number	3	Number of text lines (SkeletonText only)