Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Skeleton, SkeletonText, SkeletonCircle, SkeletonCard, SkeletonAvatar, SkeletonList, SkeletonTable } from "@hua-labs/hua";

&

variant"text" | "circular" | "rectangular" | "rounded""text"docs:components.skeleton.props.variant
widthstring | number-docs:components.skeleton.props.width
heightstring | number-docs:components.skeleton.props.height
animation"pulse" | "wave" | "shimmer""pulse"docs:components.skeleton.props.animation
classNamestring-docs:components.skeleton.props.className

docs:common.basicUsagetsx
import { Skeleton } from '@hua-labs/hua';

// Basic text skeleton
<Skeleton />

// With custom width
<Skeleton width="50%" />

// Custom size
<Skeleton width={200} height={20} />
docs:components.skeleton.demo.variantstsx
// Text (default)
<Skeleton variant="text" />

// Circular (for avatars)
<Skeleton variant="circular" width={48} height={48} />

// Rectangular
<Skeleton variant="rectangular" height={120} />

// Rounded corners
<Skeleton variant="rounded" height={120} />
docs:components.skeleton.demo.compositetsx
import {
  SkeletonCard,
  SkeletonAvatar,
  SkeletonList,
  SkeletonTable
} from '@hua-labs/hua';

// Pre-built card skeleton
<SkeletonCard />

// Avatar with text
<SkeletonAvatar />

// List items
<SkeletonList />

// Table structure
<SkeletonTable />

  • •aria-hidden: docs:components.skeleton.accessibility.ariaHidden
  • •aria-label: docs:components.skeleton.accessibility.ariaLabel
  • •docs:common.accessibility.reducedMotion: docs:components.skeleton.accessibility.reducedMotion
CommandProgress