Skeleton

A scribble-fill placeholder. Pulse reseeds the hatch on an interval so the doodle redraws instead of shimmering.

Roughness1.5Lock seedVariantPulse

<Skeleton variant="rect" pulse={true} roughness={1.5} />

CLI install

npx doodleui-react add skeleton

import { Skeleton } from "doodleui-react";

<Skeleton variant="rect" height={72} />
<Skeleton variant="text" />
<Skeleton variant="circle" />

Marked aria-hidden. Pair it with Progress or Stepper while real content loads.

Prop	Type	Default	Notes
variant	"text" \| "rect" \| "circle"	"rect"	Placeholder shape.
pulse	boolean	true	Reseeds the hatch on an interval so the scribble redraws.
width / height	number \| string	varies by variant	Box size. Circle defaults to 40×40.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.