1Sponsor

Virtual List

Virtualized list for 10k+ items

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/virtual-list.json

Usage

import { VirtualList } from "@/components/ui/virtual-list";
<VirtualList
  items={Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`)}
  height={10}
  renderItem={(item, index, isActive) => <Text bold={isActive}>{item}</Text>}
/>

API Reference

VirtualList

PropTypeDefault
itemsT[]required
renderItem(item: T, index: number, isActive: boolean) => ReactNoderequired
heightnumberrequired
onSelect(item: T, index: number) => voidundefined
cursorstringundefined
overscannumber2