Feedback

Skeleton

Loading placeholder with subtle shimmer. Match the rough size of incoming content.

Preview

import { Skeleton } from '@brika/clay/components/skeleton';

/** Single line skeleton, match width to expected text content. */
export default function SkeletonDefaultDemo() {
  return <Skeleton className="h-4 w-48" />;
}

01 Installation

Install

Pull Skeleton from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Skeleton } from "@brika/clay";

tsxGranular1 line

import { Skeleton } from "@brika/clay/components/skeleton";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxSkeleton.tsx6 lines

import { Skeleton } from '@brika/clay/components/skeleton';

/** Single line skeleton, match width to expected text content. */
export default function SkeletonDefaultDemo() {
  return <Skeleton className="h-4 w-48" />;
}

03 Examples

Skeleton, every way

Article

Article or blog post skeleton, heading plus body lines.

GitHub

import { Skeleton } from '@brika/clay/components/skeleton';

/** Article or blog post skeleton, heading plus body lines. */
export default function SkeletonArticleDemo() {
  return (
    <div className="flex flex-col gap-3 w-full max-w-sm">
      <Skeleton className="h-6 w-3/4" />
      <div className="flex flex-col gap-2">
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-2/3" />
      </div>
    </div>
  );
}

Card

Avatar + text skeleton for a user row or comment thread.

GitHub

import { Skeleton } from '@brika/clay/components/skeleton';

/** Avatar + text skeleton for a user row or comment thread. */
export default function SkeletonCardDemo() {
  return (
    <div className="flex items-center gap-3">
      <Skeleton className="size-10 rounded-full" />
      <div className="flex flex-col gap-2">
        <Skeleton className="h-4 w-32" />
        <Skeleton className="h-3 w-24" />
      </div>
    </div>
  );
}

Table

Table row skeleton with columns of varying widths.

GitHub

import { Skeleton } from '@brika/clay/components/skeleton';

/** Table row skeleton with columns of varying widths. */
export default function SkeletonTableDemo() {
  return (
    <div className="flex flex-col gap-2 w-full max-w-md">
      {['row-a', 'row-b', 'row-c'].map((row) => (
        <div key={row} className="flex items-center gap-4">
          <Skeleton className="h-4 w-28" />
          <Skeleton className="h-4 w-40" />
          <Skeleton className="h-4 w-16" />
          <Skeleton className="h-4 w-12" />
        </div>
      ))}
    </div>
  );
}

04 Accessibility

Accessibility

Mark skeleton containers with aria-hidden="true" and aria-busy="true" on the parent.
When content loads, remove the busy state and announce the result via a live region.
Do not use Skeleton inside elements that carry interactive roles.

05 Tokens 1 theme-overridable

Theme tokens

Every CSS variable Skeleton reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Skeleton without touching component code.

Skeleton tokens

1 token

ColorFill, border, and text colors.1

--skeleton-pulse-colorcolorvar(--accent)
components.skeleton.pulseColor
Background color of the skeleton placeholder block. The Tailwind `animate-pulse` keyframes fade this fill in and out to read as loading.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.skeleton, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "skeleton": {
      "pulseColor": "var(--accent)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-skeleton-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Skeleton. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

No wrapper-specific props, all attributes pass through to the underlying primitive.