Ravox KitBasics
Skeleton
The placeholder for content while it loads: loose blocks in any size you want and ready-made paragraph, card and list shapes. The shimmer passes slowly and turns off with reduced motion.
Settings
Examples
Built with blocks
Carregando perfil
Metric cards
Carregando métricas
List without avatar
Card without image
Installation
The command creates components/ui/skeleton.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add skeletonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| shape | "block" | "text" | "circle" | "block" | Text has the height of one line; circle is the place of an avatar. The size comes from className. |
| animation | "shimmer" | "pulse" | "none" | "shimmer" | Shimmer that sweeps across, pulsing opacity, or still. All stop with reduced motion. |
| SkeletonText lines | number | 3 | Lines of the paragraph; the last one is 60% wide. |
| SkeletonCard media | boolean | true | 16:9 image area at the top of the card. |
| SkeletonList items / avatar | number / boolean | 3 / true | How many rows, and whether each has the avatar circle. |
| label | string | "Loading" | On the ready-made shapes: what the screen reader announces (role="status"). The blocks are hidden from it. |