Skeleton

Use to show a placeholder while content is loading.

Installation

npx shadcn@latest add skeleton

Usage

Import and use the skeleton component in your project.

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

export default function MyComponent() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

Examples

Default

A basic skeleton loading state.

Card Skeleton

Skeleton loading state for a card component.

With Avatar

Skeleton for a component with avatar and text.

List Skeleton

Multiple skeleton items for a list.

API Reference

Props available for the Skeleton component.

Prop	Type	Default	Description
className	string	-	Additional CSS classes to apply (use for sizing and shape).