`<vaadin-virtual-list>`

`<vaadin-virtual-list>` is a Web Component for displaying a virtual/infinite list of items.

Category: Data
Built with: Lit
Library: Vaadin
Author: Vaadin
Package: @vaadin/virtual-list
Component size: 8.1 kB JS (minified + gzipped, JS includes dependencies beyond the library)
Library size: 19.9 kB JS (shared by every Vaadin component, loaded once per page)
Popular: 3 out of 5
Downloads: 59,270/week · jsDelivr 2,109 hits/month (whole @vaadin/virtual-list package)
Latest stable version: 25.3.2
Last published: Oct 2, 2026
Component last changed: Sep 22, 2026 (in 25.3.0)
License: Apache-2.0

<vaadin-virtual-list> is a Web Component for displaying a virtual/infinite list of items.

<vaadin-virtual-list></vaadin-virtual-list>

const list = document.querySelector('vaadin-virtual-list');
list.items = items; // An array of data items
list.renderer = (root, list, {item, index}) => {
  root.textContent = `#${index}: ${item.name}`
}

Styling

The following state attributes are available for styling:

Attribute	Description
`overflow`	Set to `top`, `bottom`, both, or none.

Built-in Theme Variants

<vaadin-virtual-list> supports the following theme variants:

Theme variant	Description
`theme="overflow-indicators"`	Shows visual indicators at the top and bottom when the content is scrolled
`theme="overflow-indicator-top"`	Shows the visual indicator at the top when the content is scrolled
`theme="overflow-indicator-top-bottom"`	Shows the visual indicator at the bottom when the content is scrolled

Custom CSS Properties

The following custom CSS properties are available for styling:

Custom CSS property
`--vaadin-virtual-list-overflow-indicator-color`
`--vaadin-virtual-list-overflow-indicator-height`
`--vaadin-virtual-list-padding-block`
`--vaadin-virtual-list-padding-inline`

See Styling Components documentation.

Attributes

item-accessible-name-generator
renderer
theme