Skeleton

A placeholder shown while content is loading.

$ pnpm dlx shadcn@latest add https://dashral.com/r/skeleton.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/skeleton.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/skeleton

Usage

example.tsx

1import { Skeleton } from "@/components/dashral/skeleton"
2
3<div aria-busy="true" className="space-y-2">
4  <Skeleton className="h-4 w-48" />
5  <Skeleton className="h-4 w-32" />
6</div>

Examples

Card

Loading a widget

The skeleton has the content's shape, so the rows fade in where the placeholders were and nothing jumps.

Recent sales

Loading…

Paginated table

Rows turn to skeletons while the next page loads; the table keeps its size.

Order	Status	Amount
#1050	Paid	$70.00
#1049	Refunded	$33.00
#1048	Pending	$396.00
#1047	Paid	$359.00
#1046	Paid	$322.00

API reference

Skeleton

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`className`	`string` Extra classes, merged with cn() so yours win.	—

Accessibility

Hidden shapes, not content: mark the loading region aria-busy="true" and announce when it's ready.

Motion

Pulses softly while loading.