Skeleton

A placeholder shown while content is loading.

Overview

Skeleton is a decorative placeholder. Size it with className. It does not fetch data or track loading state.

A soft pulse runs unless the person prefers reduced motion. The pulse is visual only.

Preview

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add skeleton

Usage

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

export function LoadingTitle() {
  return <Skeleton className="h-4 w-64" />;
}

Examples

Text

A short bar stands in for a line of text.

Content

A larger block stands in for a paragraph or media area.

In practice

A profile card keeps its layout while content loads. Avatar, title, media, copy, and actions all use Skeleton shapes.

API

Other attributes for the underlying element are passed through.

NameTypeDefaultDescription
classNamestring—Sets the size and shape, then merges with cn.

Accessibility

Each skeleton is aria-hidden. A loading region should get its accessible name from real text, such as a status message, not from the placeholder shapes.

  • Do not put meaningful text inside a skeleton.
  • motion-reduce:animate-none stops the pulse when prefers-reduced-motion is set.