VirtualList

A List that renders only what is on screen, for thousands of results such as a file search. Give it a height; items are measured, so wrapped text and the compact density still fit.

VirtualList

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, VirtualList

Dark theme, VirtualList

High contrast theme, VirtualList

UsageLink to the section Usage

tsx

import { VirtualList } from '@skribly/ui/data'

tsx

<VirtualList aria-label="Files" items={files} className="h-72">
  {(file) => <ListItem id={file.id} title={file.name} meta={file.size} truncate />}
</VirtualList>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Behaves like List: arrow keys, Home, End, Page Up and Page Down reach items that are not rendered yet, and the grid reports the full count with aria-rowcount and each item its position.

This demo runs through axe in all three themes on every test run. See what the tests check.