Skip to main content
Skeleton renders lightweight gray blocks that mimic the shape of content while data loads.
  • Location: sabo/src/components/ui/skeleton.tsx

​
When to use

  • Reserve vertical space and reduce layout shift while waiting for data.
  • Prefer Spinner for small inline tasks; Skeleton for structured blocks.

​
Usage

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

export function Example() {
  return (
    <div className="w-64 space-y-2">
      <Skeleton className="h-5 w-40" />
      <Skeleton className="h-3 w-64" />
      <Skeleton className="h-3 w-56" />
    </div>
  );
}

​
Key props

​
className
string
Set width/height and rounding (h-4 w-32 rounded-md) to match final content shape.

​
Styling tip

  • Keep colors subtle. Avoid using Skeleton for long periods—swap to content as soon as possible.

​
Accessibility

  • Skeletons are decorative; ensure a live region or status conveys overall loading state elsewhere.