Components

Skeleton

Loading placeholders that mimic the shape of content before it loads. Supports text, circular, and rectangular variants with optional animation.

Installation

npm install @trinkui/react

Import

import { Skeleton } from "@trinkui/react";

Text Skeleton

Single-line and multi-line text placeholders. The last line is automatically shorter to look more natural.

Single line

Multi-line (3 lines)

Multi-line (5 lines)

<Skeleton variant="text" width="60%" />
<Skeleton variant="text" lines={3} />
<Skeleton variant="text" lines={5} />

Circular Skeleton

Perfect for avatar or icon placeholders.

32px

48px

64px

80px

<Skeleton variant="circular" width={32} />
<Skeleton variant="circular" width={48} />
<Skeleton variant="circular" width={64} />
<Skeleton variant="circular" width={80} />

Rectangular Skeleton

Use for image or card placeholders with custom dimensions.

<Skeleton variant="rectangular" width="100%" height={80} />
<Skeleton variant="rectangular" width="100%" height={160} />

Animated vs Static

Toggle animation on or off. When animated=false, the skeleton shows a static gray block without pulsing.

{/* Animated (default) */}
<Skeleton variant="circular" width={48} />
<Skeleton variant="text" width="60%" />

{/* Static — no pulse */}
<Skeleton variant="circular" width={48} animated={false} />
<Skeleton variant="text" width="60%" animated={false} />

Card Skeleton Composition

Compose multiple skeletons to create a realistic card loading state. Click the button to toggle between skeleton and content.

{isLoading ? (
  <div className="card">
    <Skeleton variant="rectangular" height={160} />
    <Skeleton variant="text" width="70%" height={18} />
    <Skeleton variant="text" lines={3} />
    <div className="flex items-center gap-3">
      <Skeleton variant="circular" width={36} />
      <div>
        <Skeleton variant="text" width="50%" height={12} />
        <Skeleton variant="text" width="30%" height={10} />
      </div>
    </div>
  </div>
) : (
  <ActualCardContent />
)}

Props

Prop	Type	Default	Description
variant	"text" \| "circular" \| "rectangular"	"text"	Shape of the skeleton element
width	string \| number	"100%"	Width of the skeleton
height	string \| number	varies by variant	Height of the skeleton
lines	number	1	Number of text lines (text variant only)
animated	boolean	true	Enable or disable the pulse animation

Accessibility

Uses role="presentation" and aria-hidden="true" so screen readers skip the placeholder shapes.
Users with the prefers-reduced-motion OS setting can disable animation via the animated prop.
The parent container should use aria-busy="true" while content is loading and aria-busy="false" once loaded.
Animation uses opacity changes only, avoiding layout shifts.

← Select Slider →