FEEDBACK

Skeleton

Shimmering placeholder block to keep layout stable while async content loads. Mark up the skeleton with the same dimensions as the eventual content to avoid layout shift on swap-in.

Import

import { Skeleton } from 'damo-ui'

Basic shapes

1<Skeleton className="h-4 w-48" />
2<Skeleton className="h-4 w-64" />
3<Skeleton className="h-4 w-32" />

Composite — avatar + lines

1<div className="flex items-center gap-3">
2  <Skeleton className="h-10 w-10 rounded-full" />
3  <div className="flex-1 space-y-2">
4    <Skeleton className="h-4 w-1/2" />
5    <Skeleton className="h-3 w-3/4" />
6  </div>
7</div>

Props

Skeleton props
PropTypeDefaultDescription
classNamestring—Required: shape the skeleton with width / height / radius utilities. The base Skeleton ships only the shimmer animation and muted background.

Accessibility

  • Skeleton sets aria-hidden="true" — it is purely visual and skipped by screen readers.
  • When the content arrives, swap the skeleton out atomically. Long-running loads should surface progress via role="status" (use Spinner or a hidden status text) so the change is announced.
← SpinnerBadge →