Thrive Design System

Components

Skeleton

A placeholder loading animation that mimics the shape of content while data is being fetched.

Installation

npm install @thrivecart/ui
yarn add @thrivecart/ui
pnpm add @thrivecart/ui
bun add @thrivecart/ui

Usage

import { Skeleton } from '@thrivecart/ui';

Examples

Basic Skeleton

Default

Simple skeleton shapes

<div className="flex flex-col gap-3">
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" />
<Skeleton className="h-4 w-5/6" />
</div>

Card Skeleton

Card Loading State

Skeleton mimicking a card layout

<div className="border rounded-lg p-4 space-y-3">
<Skeleton className="h-6 w-1/3" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-4/5" />
<div className="flex gap-2 pt-2">
  <Skeleton className="h-8 w-20 rounded" />
  <Skeleton className="h-8 w-20 rounded" />
</div>
</div>

Avatar Skeleton

Avatar with Text

Skeleton for a user profile row

<div className="flex items-center gap-3">
<Skeleton className="h-10 w-10 rounded-full" />
<div className="flex flex-col gap-1.5">
  <Skeleton className="h-4 w-32" />
  <Skeleton className="h-3 w-24" />
</div>
</div>

Best Practices

✓

Match content layout

Skeletons should closely match the shape and size of the final content.

✓

Use for predictable layouts

Skeleton works best when you know the structure of the incoming content.

✗

Don't show for fast loads

If content loads in under 300ms, skip the skeleton to avoid flickering.

✗

Don't animate too aggressively

The pulse animation should be subtle and calming, not distracting.

Props

Props

Accessibility

  • Skeleton elements have aria-hidden="true" as they are purely decorative.
  • Provide an aria-busy="true" on the container element while loading.
  • Announce loading state to screen readers with aria-live regions.