All components
Data Display
stable

Skeleton

Skeleton: Loading placeholder blocks for content still in flight.

Preview
skeleton

Import

tsx
import { Skeleton } from "@/components/ui/skeleton";
bash
npx sui add skeleton

Source

From components/ui/skeleton.tsx

tsx
import type { HTMLAttributes } from "react";

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

function Skeleton({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn("animate-pulse rounded-md bg-muted", className)}
      {...props}
    />
  )
}

export { Skeleton }