Skeleton

Loading placeholders. Free, MIT · Basics › Loading

Installation

npx valyro-cli@latest add skeleton

npx shadcn@latest add https://valyro.xyz/r/skeleton.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Skeleton } from 'valyro-ui';

Prop	Type	Default
`width`	`CSSProperties['width']`		CSS width; a number is px. When omitted, fills the container, or equals `height` for a circle.
`height`	`CSSProperties['height']`		CSS height; a number is px. When omitted, 16px; with children, the children's own height.
`circle`	`boolean`		Fully round (avatars).
`radius`	`CSSProperties['borderRadius']`		Corner radius; a number is px. When omitted, the theme's small radius. Ignored with `circle`.
`animation`	`'shimmer' \| 'pulse' \| 'none'`	`'shimmer'`	`shimmer`: a sheen sweeps across (default). `pulse`: the placeholder breathes in place. `none`: static.
`loaded`	`boolean`	`false`	With children: the placeholder takes the children's size while they are hidden, and `loaded` reveals them with a short fade instead of swapping the layout.