Skeleton | Arbol UI

Language

Appearance

A list row

import { Skeleton } from '@arbol-ai/ui';

<section aria-busy aria-label="Contacts" className="flex max-w-sm items-center gap-3">
  <Skeleton className="size-8 shrink-0 rounded-full" />
  <div className="flex-1 space-y-2">
    <Skeleton className="h-3.5 w-40" />
    <Skeleton className="h-3 w-24" />
  </div>
</section>

A card

import { Skeleton } from '@arbol-ai/ui';

<section aria-busy aria-label="Campaign summary" className="max-w-sm space-y-3">
  <Skeleton className="rounded-card h-32 w-full" />
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</section>

Source

The examples above are src/components/skeleton/skeleton.examples.tsx, which the library’s tests render too.