Installation
npx shadcn@latest add @iconiq/skeletonProps
ShimmerSkeleton
4 props
Lightweight loading placeholder that renders a muted block with an optional shimmer pass layered above it.
rounded
"none" | "sm" | "md" | "lg" | "full"Default
mdChooses the corner radius utility applied to the placeholder surface.
animate
booleanDefault
trueControls whether the shimmer overlay is rendered. Set it to false when you want a static loading block.
className
stringMerged onto the root div so you can control width, height, spacing, colors, and any extra local styling.
HTML div props
HTMLAttributes<HTMLDivElement>Standard div attributes such as style, data-*, aria-*, id, and event handlers are forwarded to the root element.
Notes
The component always renders role='status' and aria-label='Loading' on the root placeholder.
The shimmer uses a local keyframes definition and a gradient overlay span, so there are no runtime dependencies beyond React.
Use rounded='full' for avatar placeholders and the default rounded='md' or rounded='lg' for cards and text blocks.