Shadcn Skeleton for React

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/skeleton.json

npx shadcn@latest add https://kit.dev/r/base/skeleton.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/skeleton.json

yarn shadcn@latest add https://kit.dev/r/base/skeleton.json

import type React from "react";
import { cn } from "@/lib/utils";

export const Skeleton = (props: React.ComponentProps<"div">) => {
  const { className, ...rest } = props;

  return (
    <div
      className={cn("cn-skeleton animate-pulse", className)}
      data-slot="skeleton"
      {...rest}
    />
  );
};

Usage

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

<div className="flex items-center gap-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>

Demos

Avatar

Avatar placeholder with name and subtitle lines.

Card

Card layout with title, description, and media placeholders.

Text

Stacked text line placeholders.

Form

Form field and submit button placeholders.

Table

Table row placeholders.

Rtl

Right-to-left skeleton. See the RTL configuration guide for document direction.

API Reference