Fast, Flexible UXVirtual Grid

This project provides code examples of how to implement a virtualized grid using @tanstack/virtual and how to implement virtualization while maintaining the aspect ratio of grid items.

Framework Agnostic & Feature Rich

TanStack Virtual is a powerful virtualization solution that combines both efficient performance and flexibility, unlike traditional react-window and react-virtualized. It efficiently handles large scrollable lists of elements at 60 FPS, virtualizes only the visible DOM nodes, while maintaining 100% control over markup and styling. We chose TanStack Virtual because it's also very lightweight and is currently the best library available.

Designed for zero design

Headless Virtualization means you're always in control of your markup, styles and components. Go design and implement the most beautiful UI you can dream up and let us take care of the hard parts.

Big Power, Small Package

Don't be fooled by the small bundle size. TanStack Virtual uses every byte to deliver powerful performance. After all, 60FPS is table stakes these days and we refuse to sacrifice anything for that 🧈-y smooth UX.

Maximum Composability

With a single function/hook, you'll get limitless virtualization for vertical, horizontal, and grid-style layouts. The API is tiny (literally 1 function), but its composability is not.

Tanstack Virtual Grid Sample

This output was created using TanStack Virtual. It maintains a 16:9 aspect ratio on screens wider than 640px and switches to a 1:1 aspect ratio on screens 640px or narrower.