Base

Skeleton

Gray pulsing placeholder blocks that preserve layout stability while data is loading.

Installation

bash

npx polyui add skeleton

Basic

Control width and height via className to match the shape of your target content.

tsx

import { Skeleton } from "@polyui/react/skeleton"
export function SkeletonBasic() {
  return (
    <div className="space-y-2">
      <Skeleton className="h-4 w-64" />
      <Skeleton className="h-4 w-48" />
      <Skeleton className="h-4 w-56" />
    </div>
  )
}

Card

Compose multiple Skeleton elements to mirror the layout of a real card.

tsx

import { Skeleton } from "@polyui/react/skeleton"
export function SkeletonCard() {
  return (
    <div className="flex items-center space-x-4 p-4 border rounded-lg">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-40" />
        <Skeleton className="h-4 w-28" />
      </div>
    </div>
  )
}

Profile

tsx

import { Skeleton } from "@polyui/react/skeleton"
export function SkeletonProfile() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-40" />
        <Skeleton className="h-4 w-28" />
        <Skeleton className="h-4 w-32" />
      </div>
    </div>
  )
}

Props

属性	类型	默认值	说明
`className`	`string`	`—`	Controls dimensions and border-radius, e.g. h-4 w-32 rounded-full.