caliper uidocs
DemoSign inGet Pro

Skeleton

Free

A placeholder with the shape of the content it stands in for.

Installs components/ui/skeleton.tsxDepends on none beyond ReactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/skeleton.json

Mara Chen

Leads the copy team. Joined in March.

When to use #

Use it for

  • Content loads in a known layout, such as a profile card or a list row.
  • You want to avoid layout shift when the real content arrives.

Skip it when

  • The wait is short and unpredictable; a spinner is calmer.
  • Progress can be measured; use a progress bar.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/skeleton.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"

export function ProfileLoading() {
  const [ready, setReady] = useState(false);
  return (
    <div className="grid w-full max-w-sm gap-3">
      <Skeleton label="Loading profile" avatar lines={2} loading={!ready}>
        <div className="grid gap-1 rounded-lg border border-border p-4">
          <p className="font-medium">Mara Chen</p>
          <p className="text-sm text-muted-foreground">Leads the copy team. Joined in March.</p>
        </div>
      </Skeleton>
      <Button variant="secondary" size="sm" className="justify-self-start" onClick={() => setReady((value) => !value)}>
        {ready ? "Show loading" : "Finish loading"}
      </Button>
    </div>
  );
}

API reference #

Skeleton

component

Also accepts the native props of its root element and a ref.

PropTypeDefault
labelstring"Loading content"
linesnumber3
avatarbooleanfalse
loadingbooleantrue
childrenReactNode—

Accessibility #

It exposes status semantics, with aria-busy and aria-label kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.