104Get started
HextaUI

Skeleton: Many rows

Skeletons that mount together start their animation together, so a long list reads as one loading area.

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonManyRows() {
  return (
    <div className="flex max-h-64 w-full max-w-sm flex-col gap-3 overflow-y-auto">
      {Array.from({ length: 50 }, (_, index) => (
        <div key={index} className="flex items-center gap-3">
          <Skeleton className="size-8 rounded-full" />
          <Skeleton className="h-3 w-1/2" />
        </div>
      ))}
    </div>
  )
}

Add this example

This adds the example as components/examples/skeleton/many-rows.tsx, together with the Skeleton component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/skeleton-many-rows.json

To add only the component, follow the Skeleton installation.

More Skeleton examples

See them all, with keyboard support and accessibility notes, on the Skeleton page.

Related components