Skeleton

An animated placeholder for loading states.

Installation

npx shadcn@latest add https://ui.mattdowney.com/r/skeleton.json

Usage

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

Examples

Default

Placeholder blocks in the shape of what is loading. Size each one with className, and match the real layout: that is what stops the page jumping when the content lands.

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

// @use-when a placeholder block held in position while real content loads.
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      className={cn("bg-neutral-200 dark:bg-neutral-800 animate-pulse motion-reduce:animate-none rounded-md", className)}
      {...props}
    />
  )
}

export { Skeleton }

Site Header Slider