Skip to content
EMBOSS
Docs menu

Skeleton

A debossed empty pocket awaiting content, with a slow light sheen sweeping across it.

@emboss/skeleton

Installation

pnpm dlx shadcn@latest add @emboss/skeleton

Usage

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

export function Example() {
  return <Skeleton className="h-4 w-40" />;
}

API reference

Skeleton

Extends the native div element; size it with width and height classes.

Source

View source — skeleton.tsx
skeleton.tsx
import { cn } from "@/lib/utils";

/**
 * A debossed empty pocket awaiting content, with a slow sheen sweeping
 * across it. Under reduced motion the sheen freezes and the recessed shape
 * alone reads as a placeholder.
 *
 * @example
 * <Skeleton className="h-4 w-40" />
 */
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      className={cn(
        "relative overflow-hidden rounded-md bg-well shadow-deboss-1 after:absolute after:inset-0 after:animate-sheen after:bg-gradient-to-r after:from-transparent after:via-(--well-glint) after:to-transparent",
        className,
      )}
      {...props}
    />
  );
}

export { Skeleton };

Related

AvatarA portrait set into a machined bezel — the image sits debossed inside the ring and the fallback engraves mono initials.CardA surface for grouped content with three seatings: raised off the page, flush with it, or recessed into a well.