Docs
Skeleton Card

Skeleton Card

Shimmer-animated skeleton loading placeholders for cards and lists.

List skeleton

Installation

Usage

import { Skeleton, SkeletonCard, SkeletonList } from "@/components/pioneerui/skeleton-card"
 
// Low-level primitive
function Loading() {
  return <Skeleton className="h-4 w-32" />
}
 
// Pre-built card skeleton
function CardLoading() {
  return <SkeletonCard />
}
 
// Pre-built list skeleton
function ListLoading() {
  return <SkeletonList rows={5} />
}

Components

ComponentDescription
SkeletonBase shimmer primitive — use for custom layouts
SkeletonCardFull card skeleton with avatar, image, and text rows
SkeletonListRepeating list rows with avatar and text

Props — SkeletonList

PropTypeDefaultDescription
rowsnumber5Number of list rows