Skeleton

Decorative placeholder (a fade, so it stays under reduced motion).

<div aria-busy="true" className="flex w-56 flex-col gap-2">
  <Skeleton className="w-3/4" />
  <Skeleton />
  <Skeleton className="w-1/2" />
</div>

Installation

npx shadcn@latest add https://sproutboat.com/ikada/r/skeleton.json

The CLI writes components/ikada/skeleton.tsx and merges the ikada theme into your CSS. Or take it from the package: import { Skeleton } from "@sproutboat/ikada";

Usage

import { Skeleton } from "@/components/ikada/skeleton";

<div aria-busy="true" className="flex w-56 flex-col gap-2">
  <Skeleton className="w-3/4" />
  <Skeleton />
  <Skeleton className="w-1/2" />
</div>

Examples

Lines

Siblings start 120ms apart, so a block of lines swells top to bottom. Decorative: mark the region aria-busy.

<div aria-busy="true" className="flex w-56 flex-col gap-2">
  <Skeleton className="w-3/4" />
  <Skeleton />
  <Skeleton className="w-1/2" />
</div>

Kinds

Line is the default; block stands in for a chart or image, circle for an avatar.

<Skeleton variant="line" />
<Skeleton variant="block" />
<Skeleton variant="circle" />

Sprout row

Keep the layout of the loaded row so nothing jumps when the data arrives.

<div aria-busy="true" className="flex items-center gap-3">
  <Skeleton variant="circle" />
  <div className="flex flex-1 flex-col gap-2">
    <Skeleton className="w-24" />
    <Skeleton className="w-40" />
  </div>
</div>

Props

SkeletonProps
Prop	Type	Description
kind	`"circle" \| "line" \| "block"`	@deprecated Use `variant`; removed in 0.3.0.
variant	`"circle" \| "line" \| "block" \| null`	—

Also takes every prop of Omit<ComponentProps<"span">, "children">, VariantProps<typeof skeletonStyles>.

Source: src/components/skeleton.tsx