Skeleton

Placeholder shapes for loading content.

import { Skeleton } from 'ui-lab-components/skeleton';
Lines3
import { Skeleton } from 'ui-lab-components/skeleton';
 
export default function Example() {
  return (
    <section aria-busy="true" aria-label="Loading profile" data-skeleton-animate className="flex flex-col gap-4">
      <Skeleton.Image w="100%" ratio="16/9" />
      <Skeleton.Text lines={3} />
      <Skeleton w={96} h={28} />
    </section>
  );
}

skeleton/01-rectangles

The default rectangle alongside an explicit numeric width and height.

Loading interactive preview
import { Skeleton } from 'ui-lab-components/skeleton';
 
export default function Example() {
  return (
    <div className="flex flex-col gap-4">
      <Skeleton />
      <Skeleton w={180} h={20} />
    </div>
  );
}

skeleton/02-paragraph

A four-line body placeholder with a natural shorter final row.

Loading interactive preview
import { Skeleton } from 'ui-lab-components/skeleton';
 
export default function Example() {
  return <Skeleton.Text lines={4} lastLineWidth="70%" w={320} />;
}

skeleton/03-height-derived

Numeric total height deterministically chooses how many complete text rows fit.

Loading interactive preview
import { Skeleton } from 'ui-lab-components/skeleton';
 
export default function Example() {
  return <Skeleton.Text h={200} w={320} />;
}

skeleton/04-semantic-sizes

One-line heading and display placeholders use semantic row geometry.

Loading interactive preview
import { Skeleton } from 'ui-lab-components/skeleton';
 
export default function Example() {
  return (
    <div className="flex flex-col gap-5">
      <Skeleton.Text size="heading" w={150} />
      <Skeleton.Text size="display" w={240} />
      <Skeleton.Text size="heading" scale={1.25} w={180} />
    </div>
  );
}

skeleton/05-image

A media placeholder using width and aspect ratio instead of image semantics.

Loading interactive preview
import { Skeleton } from 'ui-lab-components/skeleton';
 
export default function Example() {
  return <Skeleton.Image w={320} ratio="16/9" />;
}

skeleton/06-article

One accessible, animated region composes image, heading, metadata, and body placeholders.

Loading interactive preview
import { Skeleton } from 'ui-lab-components/skeleton';
 
export default function Example() {
  return (
    <article className="flex w-full max-w-md flex-col gap-5" >
      <Skeleton.Image w="100%" ratio="16/9" />
      <div className="flex items-center gap-3">
        <Skeleton w={36} h={36} className="rounded-full" />
        <Skeleton.Text lines={2} w={140} scale={0.75} />
      </div>
      <Skeleton.Text size="heading" w="82%" />
      <Skeleton.Text lines={4} />
    </article>
  );
}