Data display

Skeleton

A placeholder while content loads: a fine pixel texture with a soft light gliding across it. CSS only; the glide is a GPU transform that starts mid-sweep, so it never looks frozen. Hidden from screen readers; announce loading elsewhere (for example aria-busy on the region).

demos/skeleton.tsx

import { Skeleton } from "pixelbits/skeleton";

export default function Demo() {
  return (
    <div
      role="status"
      aria-busy="true"
      aria-label="Loading profile"
      className="flex w-full max-w-sm gap-3"
    >
      <Skeleton shape="square" className="size-12" />
      <div className="grid flex-1 content-start gap-2">
        <Skeleton shape="text" className="w-2/3" />
        <Skeleton shape="text" />
        <Skeleton shape="text" className="w-1/2" />
      </div>
    </div>
  );
}

Installation

npm: import

import { Skeleton } from "pixelbits/skeleton";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/skeleton.json

API

<Skeleton>

Example

<div aria-busy="true" className="flex gap-3">
  <Skeleton shape="square" />
  <div className="grid flex-1 gap-2"><Skeleton shape="text" className="w-2/3" /><Skeleton shape="text" /></div>
</div>

Prop	Type	Default	Description
shape	"text" \| "block" \| "square"	"block"	Shape preset. `"text"` is a line at the current font size, `"block"` fills the size you give it (use classes like `h-24 w-full`), `"square"` is an avatar-sized square.

Also accepts every prop of HTMLAttributes<HTMLDivElement>.