labsUI

Skeleton

Server-safe loading placeholders that pulse (static under reduced motion). SkeletonGroup announces one "Loading" to screen readers.

npx @kznlabs/labsui add skeleton
Loading profile
import { Skeleton, SkeletonGroup } from "@/components/ui/skeleton";export function ProfileSkeleton() {  return (    <SkeletonGroup label="Loading profile" className="flex items-center gap-3">      <Skeleton className="size-10 rounded-full" />      <div className="grid gap-2">        <Skeleton className="h-4 w-32" />        <Skeleton className="h-3 w-20" />      </div>    </SkeletonGroup>  );}

<Skeleton>

Placeholder block. Size it with classes: <Skeleton className="h-4 w-32" />.

Also accepts every <div> prop (none of its own).

<SkeletonGroup>

Wrap skeletons in this so screen readers hear one "Loading" instead of nothing.

  • labeldefault "Loading"
    string

    Announced to screen readers while it is shown.

PropTypeDefault
label

Announced to screen readers while it is shown.

string"Loading"

Also accepts every <div> prop.

* required. Every component also takes className.