Utility
Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/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
| Prop | Type | Default |
|---|---|---|
items | T[] | required |
renderItem | (item: T, index: number, isActive: boolean) => ReactNode | required |
height | number | required |
onSelect | (item: T, index: number) => void | - |
cursor | string | - |
overscan | number | 2 |
Notes
Accessibility
termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.
- Keyboard: Arrow keys move the current item or viewport;
Home/Endmove to the boundaries;PageUp/PageDownmove by a page;Enter/Spaceselect or expand when supported;Tab/Shift+Tableave the composite. - Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
- Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.