kagadmodyaa

Skeleton

AvatarSeparator

A placeholder shown while content is loading.

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

export default function SkeletonDemo() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton className="size-12 rounded-full" />
      <div className="grid gap-2">
        <Skeleton className="h-4 w-[200px]" />
        <Skeleton className="h-4 w-[150px]" />
      </div>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/skeleton.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Skeleton imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

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

<div className="flex items-center gap-4">
  <Skeleton className="size-12 rounded-full" />
  <Skeleton className="h-4 w-[200px]" />
</div>

API Reference

NameTypeDefaultDescription
classNamestring—Sets the size and shape — Skeleton has no default dimensions of its own.