# Data Virtual List

Virtualized list with sticky group headers and infinite loading for long feeds.

- id: `data-virtual-list`
- Page: https://agentic-ui-kit.com/components/data-virtual-list
- Live preview: https://agentic-ui-kit.com/live/component/data-virtual-list?piece=data-virtual-list

## Install

```bash
agentic-ui add data-virtual-list
npx shadcn@4.17.0 add @agentic-ui/data-virtual-list
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** windowed-rendering, sticky-group-headers, infinite-scroll, load-sentinel, load-error-retry, keyboard-navigation, item-select, reduced-motion, dark-mode
- **Intents:** manage-collection, track-status, monitor-live
- **Suits domains:** saas, devtools, support, operations, social, analytics
- **Interaction:** scroll, keyboard-focus, click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** virtualized list with sticky group headers and infinite loading for long feeds, windowed activity feed that loads more when you scroll to the end, infinite scroll list of thousands of items with date group headings, keyboard navigation, react-virtual list with a load more sentinel and retry on error
- **Avoid when:** under a few hundred rows: a plain list is simpler and fully searchable by the browser, a data grid with columns (use a table with row virtualization), page-numbered results (use nav-pagination-bar)
- **Preserve when adapting:** initial-rect-for-ssr, pinned-header-extractor, retry-state
- **Replace when adapting:** items, groups, load-more, row-heights
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react, @tanstack/react-virtual
- **npm dependencies (registry):** @tanstack/react-virtual@^3.13.12, lucide-react@0.577.0
- **Registry dependencies:** lib-primitives