PlumUI

Skeleton

Placeholder shapes with a soft shimmer, shown while content loads.

Feedback

Playground

Tweak the props, the preview and the code follow.

Props
3
<div className="flex gap-3">
  <Skeleton className="size-10 rounded-full" />
  <div className="flex-1 space-y-2">
    <Skeleton className="h-3 w-full" />
    <Skeleton className="h-3 w-full" />
    <Skeleton className="h-3 w-full" />
  </div>
</div>

Installation

npx @plumsydev/plum-ui add skeleton

Usage

import { Skeleton } from "@/components/ui/skeleton"
<Skeleton className="h-4 w-48" />

Examples

Card

Loading → content

Crossfade to real data with a staggered blur-in.

API Reference

Skeleton

A div — size and shape it with utility classes.

PropTypeDefault
className

Width, height and radius of the placeholder.

string—

Notes

  • Uses the animate-shimmer token from the theme. Under reduced motion the shimmer stops and a flat surface remains.
PreviousSheetNextSlider