Skeleton

Loading placeholder with a soft shimmer sweep.

FeedbackServer-safe

Install

bash

npx @agents-npm-packages/vibeui add skeleton --dir ./src/components/ui

Import

tsx

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

API

Generated from the component's TypeScript types, so it always matches the source. * marks a required prop.

<Skeleton>

also accepts every HTMLAttributes<HTMLDivElement> attribute

No props of its own: it forwards native attributes to the element.

Source

src/components/ui/skeleton.tsx

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

/** Loading placeholder with a soft shimmer sweep. */
export function Skeleton({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      aria-hidden
      className={cn(
        "animate-shimmer rounded-sm bg-surface-muted bg-[linear-gradient(100deg,transparent_30%,var(--surface-sunken)_50%,transparent_70%)] bg-[length:250%_100%]",
        className,
      )}
      {...props}
    />
  );
}

Exports Skeleton. Peer dependencies: clsx, tailwind-merge.