Skeleton

A theme-aware loading placeholder with an animation that stops when reduced motion is requested.

import { Skeleton } from "@/components/ballmac/skeleton"
export default function SkeletonDemo() {
  return (
    <div
      role="status"
      aria-label="Loading project summary"
      className="w-full max-w-sm rounded-xl border bg-card p-5 shadow-sm"
    >
      <div className="flex items-center gap-3">
        <Skeleton className="size-10 rounded-full" />
        <div className="flex flex-1 flex-col gap-2">
          <Skeleton className="h-3 w-2/3" />
          <Skeleton className="h-2.5 w-1/2" />
        </div>
      </div>
      <Skeleton className="mt-6 h-24 w-full rounded-lg" />
      <span className="sr-only">Loading project summary</span>
    </div>
  )
}

Installation

$ pnpm dlx shadcn@latest add @ballmac/skeleton

Copy the source into your project.

components/ballmac/skeleton.tsx

// Ballmac UI: Skeleton. https://ui.ballmac.com/components/skeleton
// Based on shadcn/ui Skeleton (MIT, Copyright (c) 2023 shadcn), adding a reduced-motion-safe shimmer option.
import * as React from "react"
import { cn } from "@/lib/utils"

type SkeletonProps = React.ComponentProps<"div"> & {
  /** Animate the placeholder while data is loading. */
  animated?: boolean
}
function Skeleton({ className, animated = true, ...props }: SkeletonProps) {
  return (
    <div
      data-slot="skeleton"
      aria-hidden="true"
      className={cn(
        "bg-muted rounded-md",
        animated && "motion-safe:animate-pulse",
        className,
      )}
      {...props}
    />
  )
}
export { Skeleton, type SkeletonProps }

Update the import paths to match your project setup.

Usage

import { Skeleton } from "@/components/ballmac/skeleton"

The full example is in the Code tab above.

Examples

States and variants

Open in

import { Skeleton } from "@/components/ballmac/skeleton"
export default function SkeletonStates() {
  return (
    <div
      role="status"
      aria-label="Loading list"
      className="flex w-full max-w-sm flex-col gap-3"
    >
      {[0, 1, 2].map((item) => (
        <div
          key={item}
          className="flex items-center gap-3 rounded-lg border p-3"
        >
          <Skeleton className="size-8 rounded-full" />
          <Skeleton className="h-3 flex-1" />
        </div>
      ))}
      <span className="sr-only">Loading list</span>
    </div>
  )
}

API reference

Prop	Type	Default
`animated` Animate the placeholder while data is loading.	boolean	true

Also accepts the standard attributes of its root element.

Use with AI

A theme-aware loading placeholder with an animation that stops when reduced motion is requested. With the shadcn MCP server set up (guide), ask your agent:

Add the Ballmac UI Skeleton (@ballmac/skeleton) to this project with the shadcn MCP, then use it where it fits.

Use it for

Reserve content space while data loads
Preview the shape of a card or list

Not for

Use a spinner for a single short operation

Registry JSON: https://ui.ballmac.com/r/skeleton.json

Credits

Based on shadcn/ui Skeleton, adapted by Ballmac. Free to use in personal and commercial projects.

npm: None
Registry: shadcn/utils

Card

A composable content surface with compact spacing, an action slot, and optional interactive feedback.

Alert Dialog

Focus-managed confirmation for consequential actions, with a clear cancel path, optional media, and a token-based destructive action.

Alert

A semantic callout with five theme-aware tones, clear icon placement, an action row, and opt-in urgent announcements.

Banner

A page-wide announcement with semantic tones, optional action, and controlled or local dismissal.