Creative Tim UICreative Tim UI

Shadcn Skeleton

PreviousNext

A loading placeholder component that displays a shimmering animation while content is being loaded, providing visual feedback during data fetching operations.

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonText() {
  return (
    <div className="space-y-2">
      <Skeleton className="h-4 w-[250px]" />
      <Skeleton className="h-4 w-[200px]" />
    </div>
  )
}

Installation

pnpm dlx @creative-tim/ui@latest add skeleton

Usage

import { Skeleton } from "@/components/ui/skeleton"
<Skeleton className="h-4 w-[250px]" />

Examples

Text Skeleton

A skeleton component displaying multiple lines of text placeholders, perfect for loading states of paragraphs, descriptions, or multi-line content areas.

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonText() {
  return (
    <div className="space-y-2">
      <Skeleton className="h-4 w-[250px]" />
      <Skeleton className="h-4 w-[200px]" />
    </div>
  )
}

Avatar Skeleton

A skeleton component combining a circular avatar placeholder with text lines, ideal for loading user profiles, comments, or any content that includes both an avatar and text.

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonAvatar() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

Block Skeleton

A skeleton component featuring a large rectangular block with text lines below, suitable for loading card content, article previews, or any layout with an image and accompanying text.

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonBlock() {
  return (
    <div className="w-full max-w-md space-y-4">
      <Skeleton className="h-[125px] w-full rounded-xl" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-3/4" />
      </div>
    </div>
  )
}

Pill Skeleton

A skeleton component displaying multiple rounded pill-shaped placeholders, perfect for loading tags, badges, or filter chips in a horizontal layout.

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonPill() {
  return (
    <div className="flex items-center space-x-2">
      <Skeleton className="h-6 w-16 rounded-full" />
      <Skeleton className="h-6 w-20 rounded-full" />
      <Skeleton className="h-6 w-24 rounded-full" />
      <Skeleton className="h-6 w-18 rounded-full" />
    </div>
  )
}

Chart Skeleton

A skeleton component designed for loading chart and graph visualizations, featuring a header section, legend items, and bar chart placeholders with varying heights to simulate data visualization loading states.

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonChart() {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <Skeleton className="h-4 w-[200px]" />
        <Skeleton className="h-4 w-[150px]" />
      </div>
      <div className="space-y-3">
        <div className="flex items-center space-x-4">
          <Skeleton className="h-4 w-12" />
          <Skeleton className="h-4 flex-1" />
        </div>
        <div className="flex items-center space-x-4">
          <Skeleton className="h-4 w-12" />
          <Skeleton className="h-4 flex-1" />
        </div>
        <div className="flex items-center space-x-4">
          <Skeleton className="h-4 w-12" />
          <Skeleton className="h-4 flex-1" />
        </div>
        <div className="flex items-center space-x-4">
          <Skeleton className="h-4 w-12" />
          <Skeleton className="h-4 flex-1" />
        </div>
        <div className="flex items-center space-x-4">
          <Skeleton className="h-4 w-12" />
          <Skeleton className="h-4 flex-1" />
        </div>
      </div>
      <div className="flex h-[200px] items-end justify-between space-x-2">
        <Skeleton className="h-32 w-12" />
        <Skeleton className="h-40 w-12" />
        <Skeleton className="h-24 w-12" />
        <Skeleton className="h-36 w-12" />
        <Skeleton className="h-28 w-12" />
        <Skeleton className="h-44 w-12" />
        <Skeleton className="h-20 w-12" />
      </div>
    </div>
  )
}

Table Skeleton

A skeleton component structured like a data table with header row and multiple data rows, perfect for loading table content, data grids, or any tabular data display.

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonTable() {
  return (
    <div className="w-full space-y-4">
      <div className="space-y-2">
        <Skeleton className="h-8 w-[200px]" />
        <Skeleton className="h-4 w-[300px]" />
      </div>
      <div className="rounded-md border">
        <div className="border-b p-4">
          <div className="flex items-center justify-between space-x-4">
            <Skeleton className="h-4 w-24" />
            <Skeleton className="h-4 w-24" />
            <Skeleton className="h-4 w-24" />
            <Skeleton className="h-4 w-24" />
          </div>
        </div>
        {Array.from({ length: 5 }).map((_, i) => (
          <div key={i} className="border-b p-4 last:border-0">
            <div className="flex items-center justify-between space-x-4">
              <Skeleton className="h-4 w-32" />
              <Skeleton className="h-4 w-24" />
              <Skeleton className="h-4 w-20" />
              <Skeleton className="h-4 w-16" />
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

Props

The skeleton component accepts standard HTML div props and the following:

PropTypeDefaultDescription
classNamestring-Additional CSS classes to apply to the skeleton
childrenReactNode-Optional content to display inside the skeleton

Best Practices

  • Use skeletons to provide visual feedback during data loading operations
  • Match skeleton dimensions to the actual content that will be loaded
  • Use appropriate skeleton variants based on the content type (text, avatar, block, pill, chart, table)
  • Combine multiple skeleton components to create realistic loading states
  • Ensure skeletons are replaced with actual content once data is loaded
  • Use consistent spacing and sizing to match your design system
  • Consider using skeletons for initial page loads and lazy-loaded content
  • Use chart skeleton for dashboard visualizations and analytics pages
  • Use table skeleton for data-heavy interfaces and admin panels

The skeleton component provides a smooth, animated loading experience that improves perceived performance and user experience. It's ideal for content-heavy applications, dashboards, social media feeds, and any interface where data fetching may take time.