Skeleton

Shimmer placeholder while content loads.

Installation

npx @noarka/cli add skeleton

Usage

tsx

import { Skeleton } from "@noarka/ui";

tsx

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

Examples

Profile

Circle avatar with text lines.

Table rows

Stacked bars for list content.

Article text

Heading bar with paragraph lines.

API reference

Skeleton

Prop	Type	Default
`children` Rarely used. Skeletons are empty shimmer blocks sized by className.	`ReactNode`	`-`
`className` Sets the shape. Combine width, height, and radius utilities.	`string`	`-`