Skeleton

A grey placeholder that pulses while content loads.

@cupertinoui/skeletonRegistry JSON

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

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

Installation

pnpm dlx shadcn@latest add @cupertinoui/skeleton

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<Skeleton className="h-3 w-40" />

API Reference

Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.

Skeleton

Prop	Type	Description
`className`	`string`	Extra classes, merged with the component's own.