Components

Skeleton

Neutral shimmering block for loading states. Sized with Tailwind width/height utilities. Don't animate motion beyond the built-in pulse.

When to usewhile data is loading and you can predict the shape of what's about to arrive — table rows, card headers, avatar clusters.

Import

import { Skeleton } from "@ravnhq/efni/skeleton"

Sizes

<Skeleton className="h-4 w-2/3" />
<Skeleton className="h-6 w-full" />
<Skeleton className="h-24 w-full" />

Loading card

<div className="flex items-center gap-3">
  <Skeleton className="size-9 rounded-full" />
  <div className="flex-1 space-y-2">
    <Skeleton className="h-3.5 w-1/2" />
    <Skeleton className="h-3 w-1/3" />
  </div>
</div>

Loading table rows

ID	Operator	Status	ETA

Props

Prop	Type	Default	Description
`…props`	`React.ComponentProps<"div">`	—	Everything Skeleton passes to the element it renders.
`className`	`string`	—	Height/width utilities live here — the component is a sized <div> with a pulse animation.