Lightweight windowed list renderer for fixed-height rows in long product surfaces.
VirtualList renders only the rows that fit the visible viewport (plus a small overscan), making lists with thousands of fixed-height rows fast to scroll. It has no external dependencies — just plain scroll math.
Renders only the rows that fit the visible viewport.
<VirtualList
aria-label="Workspace items"
height={180}
itemHeight={40}
items={Array.from({ length: 200 }, (_, index) => `Item ${index + 1}`)}
/>A custom row renderer is supported via renderItem:
<VirtualList
aria-label="Workspace items"
height={180}
itemHeight={40}
items={data}
renderItem={(item) => <span>{item.label}</span>}
/>import { VirtualList } from "@froggdesign/enter-ui-react";VirtualList renders the wrapper as role="list" by default and each rendered row as role="listitem", with aria-posinset reporting each row’s position and aria-setsize reporting the full item count on each list item. Pass role={null} for a non-list region.
items: readonly source array.itemHeight: fixed pixel height per row.height: viewport pixel height.renderItem(item, index): row renderer.getItemKey(item, index): optional stable key resolver.overscan: rows rendered above and below the viewport (default 4).Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.