Component reference

Skeleton

Decorative placeholder; the caller owns loading text and aria-busy on the content region.

Preview

Preserve content structure

The placeholder itself is not announced. The container expresses the loading state and keeps a text description; the button simulates the local load finishing.

packages/meowtail/stories/skeleton.stories.tsxline 15tsx

render: () => {
  const loading = signal(true);
  return (
    <Measure width="content">
      <Stack>
        <section aria-label="Project summary" aria-busy={loading}>
          {mapSignal(loading, (value) =>
            value ? (
              <Stack>
                <p>Reading the project summary…</p>
                <Skeleton shape="circle" />
                <Skeleton style={{ width: "70%" }} />
                <Skeleton />
                <Skeleton shape="block" />
              </Stack>
            ) : (
              <div>
                <h3>Website redesign</h3>
                <p>The design drafts are organized; next, check the narrow-screen layout.</p>
              </div>
            ),
          )}
        </section>
        <div>
          <Button
            variant="outline"
            onClick={() => {
              loading.value = !loading.value;
            }}
          >
            {mapSignal(loading, (value) =>
              value ? "Simulate load completion" : "Replay loading",
            )}
          </Button>
        </div>
      </Stack>
    </Measure>
  );
}

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Skeleton } from "meowtail";

<Skeleton shape="circle" />

API reference

Props

Prop	Type	Default
`shape`	`"line" \| "circle" \| "block"`	`"line"`

Also takes className, children and the attributes and events of its root element.

DOM parts

root

Registry

The component is registered as skeleton in the meowtail component registry.