5Sponsor

Virtual List

Virtualized list for 10k+ items

Terminal
virtual-list-demo
No opentui live preview is registered for this example yet.

Installation

pnpm dlx shadcn@latest add @termcn/virtual-list

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