A collection of beautifully designed, accessible, and customizable terminal UI components. Built on Ink and OpenTUI. Works with shadcn/ui.

How do I publish components with termcn?

Add or edit components under registry/bases/ink/ or registry/bases/opentui/, register them in registry.json, run pnpm registry:build (which refreshes public/r/), then deploy. Consumers install with npx shadcn@latest add against your published registry URL.

Is termcn open source?

Yes. The source is on GitHub and released under the MIT License.

Virtual List

Virtualized list for 10k+ items

Ink OpenTUI

Terminal

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

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`

Tree Feedback

On This Page

Installation Usage API Reference VirtualList

Edit this page Follow @shadcnlabs Join community