Componentfeedback0.28 KB gzipZero dependencies

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

Open in StackBlitz

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

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

Usage guidance

Use Skeleton when a ticket stub surface needs Dashed placeholder box with gentle pulse animation. Keep props minimal and prefer composition with sibling stubs.

Avoid Skeleton for long form flows or dense data grids where a dedicated layout block fits better.

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}
    />
  );
}

Props

Prop	Type	Description
className?	string