Skip to content
LuoForge/Tungsten
Components/SkeletonGroup·

SkeletonGroup

since v4.2.0

Collapses AT announcements for a cluster of <Skeleton> placeholders into a

single polite live region. Without a group, every skeleton renders its own

role="status" (see Skeleton); inside a group the skeletons are silent and

the group container does the single announcement.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten
pnpm add @hey-mike/tungsten
import { SkeletonGroup } from '@hey-mike/tungsten';
import { SkeletonGroup } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/skeleton-group/page.tsx

import { Skeleton, SkeletonGroup } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function SkeletonGroupSnapshot() {
  return (
    <VariantGrid
      title="SkeletonGroup"
      variants={[
        {
          label: 'count-3',
          node: (
            <div className="w-48">
              <SkeletonGroup aria-label="Loading 3 rows" className="flex flex-col gap-2">
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-4/5" />
                <Skeleton className="h-4 w-full" />
              </SkeletonGroup>
            </div>
          ),
        },
        {
          label: 'count-5',
          node: (
            <div className="w-48">
              <SkeletonGroup aria-label="Loading 5 rows" className="flex flex-col gap-2">
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-4/5" />
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-2/3" />
                <Skeleton className="h-4 w-full" />
              </SkeletonGroup>
            </div>
          ),
        },
        {
          label: 'custom-children',
          node: (
            <div className="w-48">
              <SkeletonGroup>
                <Skeleton className="h-10 w-10 rounded-full" />
                <div className="flex flex-col gap-1.5">
                  <Skeleton className="h-3 w-32" />
                  <Skeleton className="h-3 w-24" />
                </div>
              </SkeletonGroup>
            </div>
          ),
        },
      ]}
    />
  );
}

import { Skeleton, SkeletonGroup } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function SkeletonGroupSnapshot() {
  return (
    <VariantGrid
      title="SkeletonGroup"
      variants={[
        {
          label: 'count-3',
          node: (
            <div className="w-48">
              <SkeletonGroup aria-label="Loading 3 rows" className="flex flex-col gap-2">
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-4/5" />
                <Skeleton className="h-4 w-full" />
              </SkeletonGroup>
            </div>
          ),
        },
        {
          label: 'count-5',
          node: (
            <div className="w-48">
              <SkeletonGroup aria-label="Loading 5 rows" className="flex flex-col gap-2">
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-4/5" />
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-2/3" />
                <Skeleton className="h-4 w-full" />
              </SkeletonGroup>
            </div>
          ),
        },
        {
          label: 'custom-children',
          node: (
            <div className="w-48">
              <SkeletonGroup>
                <Skeleton className="h-10 w-10 rounded-full" />
                <div className="flex flex-col gap-1.5">
                  <Skeleton className="h-3 w-32" />
                  <Skeleton className="h-3 w-24" />
                </div>
              </SkeletonGroup>
            </div>
          ),
        },
      ]}
    />
  );
}

Props

Surface specific to <SkeletonGroup />.

PropTypeDefaultDescription
childrenReactNode—Skeletons (or other content) inside the group. Each nested <Skeleton> automatically becomes decorative via context.
countnumber—Convenience for the common "N placeholder rows" pattern. Renders N decorative Skeletons inside the group when no children are provided.
aria-labelstringLoading…Override the default "Loading…" announcement on the group container.

Source