Skeleton

Use to show a placeholder while content is loading.

The Skeleton component displays a placeholder shape while content is loading. It provides visual feedback to users that content is being fetched or processed. Built from scratch using React and native HTML elements. No dependencies on any UI library.

Code

TypeScript: Copy this code into components/ui/skeleton.tsx:

tsx
"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}

const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
  ({ className, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          "animate-pulse rounded-md border-2 border-foreground bg-muted",
          className
        )}
        {...props}
      />
    )
  }
)
Skeleton.displayName = "Skeleton"

export { Skeleton }

JavaScript: Copy this code into components/ui/skeleton.jsx:

jsx
"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

const Skeleton = React.forwardRef(
  ({ className, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          "animate-pulse rounded-md border-2 border-foreground bg-muted",
          className
        )}
        {...props}
      />
    )
  }
)
Skeleton.displayName = "Skeleton"

export { Skeleton }

Usage

TypeScript:

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

function MyComponent() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

JavaScript:

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

function MyComponent() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

Make sure you also have the lib/utils.ts file with the cn helper function.

Examples

Default

Card Skeleton

Loading State Example