Skeleton

Placeholders while content loads

Skeletons indicate where content will appear, reducing perceived wait time. Available as text lines, circles, or rectangles to match the shape of the content being loaded.

Text

Circular

Rectangular

Card placeholder

tsx
// From the npm package
import { Skeleton } from 'rift-ds/components/Skeleton/Skeleton';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/skeleton.json