Componentfeedback

Skeleton

Dashed placeholder box with gentle pulse animation.

Preview

Live Preview

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add skeleton

Or install the full npm package:

npm install bigbullui

Usage

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

<Skeleton className="h-4 w-48" />

Source code

skeleton.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

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

export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
}

export function Skeleton({ className, ...props }: SkeletonProps) {
  return (
    <div
      aria-hidden="true"
      className={cn(
        "animate-pulse rounded-md border border-dashed border-border bg-secondary/80",
        className
      )}
      {...props}
    />
  );
}