# Skeleton: Many rows

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

Example: https://hextaui.com/docs/skeleton/examples/many-rows
Component docs: https://hextaui.com/docs/skeleton.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/skeleton-many-rows.json
```

This adds `components/examples/skeleton/many-rows.tsx` with the Skeleton component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/skeleton/many-rows.tsx"
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>
  )
}
```

## More Skeleton examples

- [Shapes](https://hextaui.com/docs/skeleton/examples/shapes.md)
- [Animations](https://hextaui.com/docs/skeleton/examples/animations.md)
- [Text](https://hextaui.com/docs/skeleton/examples/text.md)
- [Wrap real content](https://hextaui.com/docs/skeleton/examples/wrap-content.md)
- [Inline](https://hextaui.com/docs/skeleton/examples/inline.md)
- [Fast load](https://hextaui.com/docs/skeleton/examples/fast-load.md)
- [Right to left](https://hextaui.com/docs/skeleton/examples/rtl.md)