Skeleton

Placeholder bars that indicate content is loading.

Default

tsx

import { Skeleton } from "@hummingbirdui/react";

export default function SkeletonDefault() {
  return (
    <Skeleton.Group className="mx-auto max-w-sm space-y-2">
      <Skeleton className="w-full" />
      <Skeleton className="size-14 rounded-full" />
      <Skeleton className="w-full h-14" />
      <Skeleton className="w-full h-20" />
    </Skeleton.Group>
  );
}

Sizes

The size prop offers four heights: xs, sm, md (default), and lg.

tsx

import { Skeleton } from "@hummingbirdui/react";

export default function SkeletonSizes() {
  return (
    <Skeleton.Group className="mx-auto flex max-w-sm flex-col gap-2">
      <Skeleton size="xs" className="col-12" />
      <Skeleton size="sm" className="col-12" />
      <Skeleton className="col-12" />
      <Skeleton size="lg" className="col-12" />
    </Skeleton.Group>
  );
}

Colors

tsx

import { Skeleton } from "@hummingbirdui/react";

export default function SkeletonColors() {
  return (
    <Skeleton.Group className="mx-auto flex max-w-sm flex-col gap-2">
      <Skeleton className="col-12" />
      <Skeleton className="col-12 text-primary" />
      <Skeleton className="col-12 text-success" />
      <Skeleton className="col-12 text-danger" />
      <Skeleton className="col-12 text-warning" />
      <Skeleton className="col-12 text-info" />
    </Skeleton.Group>
  );
}

Wave

Setting animation="wave" on Skeleton.Group sweeps a highlight across the bars instead of pulsing them.

tsx

import { Skeleton } from "@hummingbirdui/react";

export default function SkeletonWave() {
  return (
    <Skeleton.Group animation="wave" className="mx-auto max-w-sm space-y-2">
      <Skeleton className="w-full" />
      <Skeleton className="size-14 rounded-full" />
      <Skeleton className="w-full h-14" />
      <Skeleton className="w-full h-20" />
    </Skeleton.Group>
  );
}

Card

tsx

import { Button, Card, Skeleton } from "@hummingbirdui/react";

export default function SkeletonCard() {
  return (
    <Card className="mx-auto max-w-xs">
      <Skeleton className="h-36 w-full rounded-t-(--card-border-radius)" />
      <Card.Body>
        <Skeleton.Group>
          <Card.Title>
            <Skeleton className="col-6" />
          </Card.Title>
          <Card.Text>
            <Skeleton className="col-7" /> <Skeleton className="col-4" />{" "}
            <Skeleton className="col-4" /> <Skeleton className="col-6" />
          </Card.Text>
          <Button
            disabled
            aria-hidden="true"
            className="placeholder col-6 text-primary"
          />
        </Skeleton.Group>
      </Card.Body>
    </Card>
  );
}

API Reference

Skeleton

Prop	Type	Default
`size`	`enum`	`"md"`
`className`	`string`	—

Skeleton.Group

Prop	Type	Default
`animation`	`enum`	`"glow"`
`className`	`string`	—

Styling

Hummingbird React skeleton is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available placeholder classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousScroll Area NextSonner