Skeleton

A placeholder that shimmers while content loads, with the system's shimmer.

Installation

$ pnpm dlx shadcn@latest add @ssntl/skeleton

Usage

tsx

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

<div aria-busy="true">
  <span className="sr-only">Loading profile</span>
  <Skeleton className="size-12 rounded-full" />
  <Skeleton className="h-4 w-2/5" />
</div>

Needs the shimmer utility imported in your global CSS (it installs with the component).
It is decorative: the loading region carries aria-busy and text for screen readers.
Copy the shape of the real content (avatar, lines, image) so nothing jumps on load.
With reduced motion the beam disappears and the placeholder stays still.

Code

components/ui/skeleton.tsx

import * as React from "react"

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

// A placeholder that shimmers while content loads. It is decorative: put
// aria-busy on the region that is loading and say "Cargando" in text.
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      aria-hidden
      className={cn("shimmer rounded-xs", className)}
      {...props}
    />
  )
}

export { Skeleton }