Skeleton

Use to show a placeholder while content is loading.

tsx

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

export function SkeletonDemo() {
  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>
  )
}

Installation

CLI

bash

npx fivui add skeleton

Manual

Copy and paste the following code into your project.

tsx

import * as React from "react"
import { cn } from "@/lib/utils"

function Skeleton({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn("animate-pulse rounded-md bg-muted", className)}
      {...props}
    />
  )
}

export { Skeleton }

Usage

tsx

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

tsx

<Skeleton className="h-[20px] w-[100px] rounded-full" />

Examples

Card

A card skeleton with image and text placeholders.

Card Skeleton

Skeleton placeholder for card content

tsx

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

export function SkeletonCard() {
  return (
    <div className="flex flex-col space-y-3">
      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

List

A list skeleton with avatar and text placeholders.

List Skeleton

Skeleton placeholder for list items

tsx

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

export function SkeletonList() {
  return (
    <div className="space-y-4">
      {Array.from({ length: 5 }).map((_, i) => (
        <div key={i} className="flex items-center space-x-4">
          <Skeleton className="h-10 w-10 rounded-full" />
          <div className="space-y-2 flex-1">
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-3/4" />
          </div>
        </div>
      ))}
    </div>
  )
}

API Reference

Skeleton

Prop	Type	Default	Description
className	string	-	Additional CSS classes

Extends all HTMLDivElement props.

External Documentation

This component is a simple animated placeholder that uses CSS animations.