Components / Skeleton

Skeleton

<Skeleton />Stable

Loading placeholder. Pulses on --muted. Size and shape it with utility classes — match the layout of the real content that will replace it.

import { Skeleton } from "@/components/upnext";

Playground

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Preview

Code

import { Skeleton } from "@/components/upnext";


<Skeleton />

Shapes

<Skeleton className="h-4 w-[200px]" />

Composition

<div className="flex items-center gap-3">
  <Skeleton className="size-10 rounded-full" />
  <div className="flex flex-col gap-2">
    <Skeleton className="h-4 w-[150px]" />
    <Skeleton className="h-3 w-[100px]" />
  </div>
</div>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.