Skeleton

Use to show a placeholder while content is loading. Size and shape come from your className.

Compose circles and bars to hint at loading content.

Installation

CLI

npx @sonojs/ui@latest add skeleton

structure

Skeleton

skeleton.tsx

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

export function Example() {
  return <Skeleton className="h-4 w-[100px]" />
}

Prop	Type	Default	Description
className	string	—	Set height, width, and radius (e.g. `h-4 w-full rounded-full`).
…div props	React.ComponentProps<"div">	—	Native attributes pass through to the element.