Skeleton

Loaders

A content-placeholder loader with a soft pure-CSS shimmer sweep — rect, text, circle, and card variants plus Skeleton.Text/Avatar/Card presets, currentColor theming, and an aria-busy opt-in; collapses to a static muted block under reduced motion.

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/skeleton.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/skeleton.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="flex w-full max-w-[380px] flex-col gap-5 rounded-2xl bg-[#0f0f10] p-6 text-zinc-100 ring-1 ring-white/10">
    <div className="flex items-center gap-3">
      <Skeleton.Avatar width={44} />
      <div className="min-w-0 flex-1">
        <Skeleton.Text lines={2} />
      </div>
    </div>
    <Skeleton variant="rect" height={132} radius={16} />
    <Skeleton.Text lines={3} />
  </div>

Props

SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">

Prop	Type	Default	Description
variant	SkeletonVariant	"rect"	Which placeholder shape to render. Defaults to `"rect"`.
width	number \| string	—	Block width. Number → px, string passes through (e.g. `"60%"`).
height	number \| string	—	Block height. Number → px, string passes through.
radius	number \| string	—	Corner radius. Number → px, string passes through.
lines	number	3	For `variant="text"`: how many lines to render (clamped 1–16).
label	string	—	When set, the placeholder becomes an accessible busy region (`role="status" aria-busy`) announcing this label to assistive tech. Omitted, the whole placeholder is `aria-hidden` — purely decorative.