Skeleton

A set of loading placeholder components that mimic content shapes while data is being fetched.

Installation

npx @obi/ui add skeleton

Preview

Examples

Skeleton

The base block. Compose it freely with width, height, and className to match any shape.

SkeletonCard

Mimics a card with a title bar and a configurable number of body lines.

SkeletonInput

Mimics a labelled form input. Pass label to include the label placeholder.

SkeletonForm

Stacks multiple labelled SkeletonInput fields — useful while a form section loads.

SkeletonTableRow

A row of equal-width columns — stack several to simulate a full table body.

Usage

import {
  Skeleton,
  SkeletonCard,
  SkeletonInput,
  SkeletonTableRow,
} from '@/src/components/Skeleton/Skeleton';

export default function Example() {
  return (
    <div className="flex flex-col gap-6 max-w-sm">
      {/* Avatar + text row */}
      <div className="flex items-center gap-3">
        <Skeleton width="40px" height="40px" className="rounded-full shrink-0" />
        <div className="flex flex-col gap-2 flex-1">
          <Skeleton height="14px" className="w-2/5" />
          <Skeleton height="12px" className="w-3/5" />
        </div>
      </div>

      {/* Card */}
      <SkeletonCard lines={3} />

      {/* Input */}
      <SkeletonInput label />

      {/* Table rows */}
      <div className="flex flex-col gap-2">
        <SkeletonTableRow columns={3} />
        <SkeletonTableRow columns={3} />
        <SkeletonTableRow columns={3} />
      </div>
    </div>
  );
}

Props

Name	Type	Default	Description
width	string	—	CSS width applied inline on the base Skeleton block.
height	string	—	CSS height applied inline on the base Skeleton block.
className	string	""	Additional classes for sizing and shaping (all variants).
lines	number	3	SkeletonCard — number of body text lines to render.
label	boolean	false	SkeletonInput — whether to show a label placeholder above the input.
fields	number	3	SkeletonForm — number of labelled input fields to render.
columns	number	4	SkeletonTableRow — number of equal-width column blocks per row.