Virtual List

Component

About

A viewport-virtualized scrolling list that only mounts the rows currently on screen, so a list of thousands of fixed-height rows costs the DOM a small window instead of the whole dataset.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Virtual List to your project and fits it to your theme.

Code

How Virtual List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { VirtualList } from "@/components/ui/virtual-list";

/** Ten thousand rows on stage: the DOM holds only the window the
 * viewport can see — scroll, and the window slides. */
const MANY = Array.from({ length: 10000 }, (_, index) => `Row ${index + 1}`);

export default function VirtualListDemo() {
  return (
    <div
      style={{
        background: "var(--bs-color-surface-0, var(--background))",
        padding: "1rem",
      }}
    >
      <VirtualList
        items={MANY}
        itemHeight={36}
        height={288}
        renderItem={(item, index) => (
          <div
            style={{
              display: "flex",
              alignItems: "center",
              blockSize: "100%",
              paddingInline: "var(--bs-padding-md)",
              borderBottom: "1px solid var(--bs-color-border)",
              fontSize: "var(--bs-font-size-sm)",
              color:
                index % 2
                  ? "var(--bs-color-text-secondary)"
                  : "var(--bs-color-text-primary)",
            }}
          >
            {String(item)}
          </div>
        )}
      />
    </div>
  );
}