3

Skeleton

Used to show a placeholder while content is loading.

Last updated August 8, 2026

CreditsUnchangedPublished

Copied from shadcn/ui.

Overview

import { Skeleton } from "@/components/ui/skeleton"
 
export function SkeletonDemoExample() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton className="size-12 rounded-full" />
      <div className="flex flex-col gap-2">
        <Skeleton className="h-4 w-40" />
        <Skeleton className="h-4 w-28" />
      </div>
    </div>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/skeleton.json

Usage

import { Skeleton } from "@/components/ui/skeleton"
 
export function Example() {
  return <Skeleton className="h-4 w-40" />
}

Card

import { Skeleton } from "@/components/ui/skeleton"
 
export function SkeletonCardExample() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Skeleton className="h-32 w-full rounded-xl" />
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-4 w-1/2" />
    </div>
  )
}

RTL

import { Skeleton } from "@/components/ui/skeleton"
 
export function SkeletonRtlExample() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton className="size-12 rounded-full" />
      <div className="flex flex-col gap-2">
        <Skeleton className="h-4 w-40" />
        <Skeleton className="h-4 w-28" />
      </div>
    </div>
  )
}

API Reference

Skeleton

Edit this page on GitHub
PreviousSheetNextSwitch