shadcn index

Skeleton

PreviousNext

Use to show a placeholder while content is loading.

Docs
opticscomponent

Preview

Loading preview…
registry/optics/skeleton.jsx
import { cn } from "@/lib/utils"

function Skeleton({
  className = "",
  ...props
}) {
  return (
    <div
      data-slot="skeleton"
      className={cn("bg-muted rounded-md animate-pulse", className)}
      {...props} />
  );
}

export { Skeleton }

Installation

npx shadcn@latest add @optics/skeleton

Usage

import { Skeleton } from "@/components/skeleton"
<Skeleton />