Skip to content
Cuelark UI
Feedback

Skeleton

Loading placeholders with a slow light sweep.

Skeletons hold the shape of content while it loads, which reduces layout shift and perceived wait. The sweep is CSS-only, so it runs before JavaScript hydrates.

Preview

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/skeleton.json

The CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/skeleton.

Usage

import { Skeleton, SkeletonText } from "@/components/ui/skeleton";

<Skeleton className="size-10 rounded-full" />
<SkeletonText lines={3} />

API reference

Skeleton

A div; size it with classes.

SkeletonText

PropTypeDefaultDescription
linesnumber3Line count; the last is shorter.

Accessibility

  • Skeletons are aria-hidden; set aria-busy on the region that is loading.
  • The sweep is removed for reduced motion.

FAQ

Also searched as: react skeleton · skeleton loader · loading placeholder · shimmer effect · shadcn skeleton