Skeleton

Preview

'use client';

import { Skeleton } from '@/registry/san-francisco/ui/skeleton';

export default function SkeletonDemo() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-3">
        <Skeleton className="size-10 rounded-full" />
        <div className="flex flex-col gap-2">
          <Skeleton className="h-4 w-32" />
          <Skeleton className="h-3 w-24" />
        </div>
      </div>
    </div>
  );
}

Installation

bun

bunx shadcn@latest add @sft-ui/skeleton

API Reference

Skeleton

A pulsing placeholder block. Apply width and height via className to match the content it replaces.

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes to apply (use for sizing).

All standard HTML div attributes are supported.