Display

Skeleton

A placeholder preview of content before the data loads, reducing layout shift. Pure Tailwind, no dependencies.

Preview

Source

Copy this file to components/ui/skeleton.tsx

tsx

'use client'

import { cn } from "@/lib/utils"

function Skeleton({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />
  )
}

export { Skeleton }

Props

Prop	Type	Default	Description
className	string	—	Sizing and shape classes (width, height, rounding)