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.
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>
);
}