Skeleton

A placeholder for loading content.

List Skeletons

Installation


$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/skeleton.json"

Usage

After you add the component with the CLI, import it from your UI folder:

import { Skeleton } from "@/components/ui/skeleton"
 
export function MyComponent() {
  return (
    <div className="flex flex-col w-full max-w-sm gap-6 p-6 border border-border/50">
      <div className="flex items-center space-x-4">
        <Skeleton className="h-12 w-12 rounded-full shrink-0" />
        <div className="space-y-2 w-full">
          <Skeleton className="h-4 w-3/4" />
          <Skeleton className="h-4 w-1/2" />
        </div>
      </div>
      <Skeleton className="h-40 w-full" />
      <div className="space-y-2">
        <Skeleton className="h-3 w-full" />
        <Skeleton className="h-3 w-full" />
        <Skeleton className="h-3 w-4/5" />
      </div>
    </div>
  )
}

API Reference

The Skeleton component extends standard HTML div attributes.

Prop	Type	Default	Description
`className`	`string`	-	CSS classes to apply to the skeleton placeholder. Use Tailwind sizing classes (e.g., `h-4 w-[200px]`) and border radius classes (e.g., `rounded-full`) to shape it.

Sidebar Slider

On This Page

List Skeletons Installation Usage API Reference