Logo
DocsSkeleton

Skeleton

Use to show a placeholder while content is loading.

Implementation

1

Copy and paste the following code into your project.

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 }
2

Update the import paths to match your project setup.

Usage

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

Examples

Default

Card Example

API Reference

Skeleton

Displays a placeholder preview of your content before the data gets loaded to reduce load-time frustration.

Properties

PropertyTypeDefaultDescription
classNamestring""Additional CSS classes to apply to the skeleton