Skeleton

A loading placeholder component that mimics the shape of content while it loads. Supports text, circular, rectangular, and rounded variants with a smooth pulse animation.

Live Preview

Interact with the skeleton component in real time. Adjust variant, dimensions, and animation to see changes instantly.

Live Code
tsx
<AidashSkeleton
variant="text"
height={16}
/>

Installation

Install the Aidash Components package using your preferred package manager.

$ pnpm add @aidash/components

Import

Import the AidashSkeleton component into your file.

tsx
import { AidashSkeleton } from '@/components/aidash/skeleton';

Basic Usage

A simple skeleton text placeholder with default settings.

Basic Usage
tsx
<AidashSkeleton variant="text" lines={2} />

Variants

Skeleton supports four shape variants to match different content types.

text
circular
rectangular
rounded
tsx
1{/* Text skeleton */}2<AidashSkeleton variant="text" lines={3} width={120} />3 4{/* Circular skeleton */}5<AidashSkeleton variant="circular" width={56} />6 7{/* Rectangular skeleton */}8<AidashSkeleton variant="rectangular" width={120} height={64} />9 10{/* Rounded skeleton */}11<AidashSkeleton variant="rounded" width={120} height={64} />

Text Lines

The text variant supports multiple lines with the last line rendered shorter for a natural paragraph look.

1 line
3 lines
5 lines
tsx
1<AidashSkeleton variant="text" lines={1} />2<AidashSkeleton variant="text" lines={3} />3<AidashSkeleton variant="text" lines={5} />

Card Skeleton

Compose multiple skeletons to create a card loading pattern with image, title, and description placeholders.

tsx
1<div className="max-w-xs rounded-xl border overflow-hidden">2{/* Image placeholder */}3<AidashSkeleton variant="rectangular" height={160} />4<div className="p-4 space-y-3">5  {/* Title */}6  <AidashSkeleton variant="rounded" height={20} width="70%" />7  {/* Description */}8  <AidashSkeleton variant="text" lines={2} height={12} />9</div>10</div>

List Skeleton

Create list item loading states with avatar and text line skeletons.

tsx
1{[0, 1, 2].map((i) => (2<div key={i} className="flex items-center gap-4">3  <AidashSkeleton variant="circular" width={40} />4  <div className="flex-1 space-y-2">5    <AidashSkeleton variant="rounded" height={14} width="50%" />6    <AidashSkeleton variant="rounded" height={12} width="80%" />7  </div>8</div>9))}

Profile Skeleton

A full profile loading state combining avatar, name, bio, and action placeholders.

tsx
1<div className="flex flex-col items-center gap-4">2<AidashSkeleton variant="circular" width={80} />3<AidashSkeleton variant="rounded" height={18} width={160} />4<AidashSkeleton variant="rounded" height={14} width={220} />5<div className="flex gap-3 mt-2">6  <AidashSkeleton variant="rounded" height={36} width={100} />7  <AidashSkeleton variant="rounded" height={36} width={100} />8</div>9</div>

Animation Toggle

Compare skeletons with and without the pulse animation.

animate=true
animate=false
tsx
1{/* With animation (default) */}2<AidashSkeleton variant="rounded" height={48} animate={true} />3 4{/* Without animation */}5<AidashSkeleton variant="rounded" height={48} animate={false} />

Props API

Complete reference of all available props for the AidashSkeleton component.

PropTypeDefaultDescription
variant'text' | 'circular' | 'rectangular' | 'rounded''text'Shape variant of the skeleton
widthstring | number—Width of the skeleton element
heightstring | number—Height of the skeleton element
linesnumber3Number of lines for the text variant
animatebooleantrueEnable or disable the pulse animation
classNamestring''Additional CSS classes

Accessibility

AidashSkeleton includes built-in accessibility attributes for screen readers.

  • 1
    role="status"- Identifies the element as a live region for status updates.
  • 2
    aria-busy="true"- Signals that the content area is loading and will be updated.
  • 3
    aria-label="Loading content"- Provides a descriptive label for assistive technologies.
Accessibility Example
tsx
{/* Skeleton already includes aria attributes */}
<AidashSkeleton variant="text" lines={3} />

{/* Wrap in a container with aria-busy for full sections */}
<div aria-busy="true" aria-label="Loading user profile">
<AidashSkeleton variant="circular" width={64} />
<AidashSkeleton variant="text" lines={2} />
</div>

Related

Components that work well alongside AidashSkeleton.

Progress

Show determinate loading progress

Card

Container component for content

Avatar

User avatar with fallback support