Component

Skeleton

Reserve loading space with rectangle, pill, circle, and text placeholder variants.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Skeleton } from "@chitrank2050/monoline-ui/skeleton"

Basic usage

<Skeleton variant="rect" className="h-6 w-32" />
<Skeleton variant="pill" className="h-4 w-48" />
<Skeleton variant="circle" className="size-12" />

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Skeleton holds the final layout steady while content with known dimensions loads.

Avoid when

The wait needs real progress information, or the placeholder cannot match the final content's dimensions.

Accessibility

Skeleton is always aria-hidden, so loading state and completion must be communicated by the surrounding region rather than the placeholder itself.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

variantrect | pill | circleVisual style / shape of the skeleton

Design tokens

Theme variables this component reads for color, spacing, and motion.

animate-shimmer / @keyframes shimmerCSS varLoading animation styling

Implementation

The source used by the example above, including any state it needs.

import { Skeleton } from "@chitrank2050/monoline-ui/skeleton"

export function SkeletonDemo() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton variant="circle" className="size-12" />
      <div className="flex flex-col gap-2">
        <Skeleton variant="rect" className="h-4 w-28" />
        <Skeleton variant="pill" className="h-3 w-40" />
      </div>
    </div>
  )
}

Compare related components or review the package and theme setup.

01ComponentProgressComponent · ReferenceReference→02ComponentCardComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview