Skeleton

"use client"

import { Skeleton } from "@/registry/warren/skeleton/skeleton"

export default function SkeletonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {[0, 1, 2].map((i) => (
        <div key={i} className="flex w-40 flex-col gap-1.5">
          <Skeleton className="h-2.5 w-24" />
          <Skeleton className="h-6 w-32" />
        </div>
      ))}
    </div>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/skeleton.json

Usage

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

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

Skeleton is a plain div (role="status", with sr-only "Loading" text) — every dimension and shape comes from className, so it can stand in for any element in a layout. It renders as a static track-tone block: it never animates, so loading structure reads as placeholder geometry, never as a live signal.

Panel placeholder

Skeleton bars read best when they mirror the finished layout. The demo above shapes two bars into a Stat row — a small label bar over a larger value bar — repeated across a panel. Size bars to the text they replace and group them with the same gaps as the real content.

API Reference

This component has no custom props. It forwards native <div> attributes; TypeScript types are derived from React.ComponentProps<"div">. All native attributes are supported; sizing comes from className.