Skeleton

Basic

Skeleton is a placeholder component that displays a loading state while your content loads. It's a great way to keep your layout looking fresh and prevent users from getting stuck on a blank page.

Installation

npx shadcn@latest add @intentui/skeleton

Manual installation

Anatomy

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardAction } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

<Card className="p-4">
  <div className="flex gap-2">
    <Skeleton className="size-8" />
    <div className="space-y-1">
      <Skeleton className="h-4 w-56" />
      <Skeleton className="h-4 w-16" />
      <Skeleton className="h-4 w-24" />
      <Skeleton className="h-4 w-32" />
    </div>
  </div>
</Card>

Soft

The soft prop makes the skeleton slightly darker. By default, it is set to false.

Shape

Sometimes, you may need a skeleton with a specific shape. For example, if you want all skeletons to be circular, you can simply add rounded-full to the skeleton component. This example demonstrates how to achieve that by styling the skeleton from its parent.