Components / feedback
Skeleton
Shimmer Loading Placeholder - Text And Block Bars
01 Preview
02 Usage
Shimmer loading placeholder - warm-black bars with a hairline and a sweeping highlight; text variant stacks lines, block variant is one taller bar.
<Skeleton lines={3} />
<Skeleton variant="block" style={{ height: 200 }} />Variants: text | block. Text renders lines bars with a short last line; block is a single bar sized by the caller. The root announces as role="status" aria-busy while content loads; swap it for the real content once ready. Motion is reduced-motion-guarded via the shared .ddk-sweep utility.
03 Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | never |
— | — |
Also accepts every attribute of React.HTMLAttributes<HTMLDivElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.
04 Import
import { Skeleton } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';