5Sponsor

List

Navigable list with optional filtering

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

Installation

pnpm dlx shadcn@latest add @termcn/list

Usage

import { List } from "@/components/ui/list";
<List
  items={[
    { key: "ts", label: "TypeScript", description: "Typed JavaScript" },
    { key: "rs", label: "Rust", description: "Systems language" },
    { key: "go", label: "Go", description: "Cloud-native language" },
  ]}
  onSelect={(item) => console.log(item.key)}
/>

API Reference

List

PropTypeDefault
itemsListItem[]required
onSelect(item: ListItem) => voidundefined
filterablebooleanfalse
heightnumber10
cursorstring"›"

ListItem

PropTypeDefault
keystringrequired
labelstringrequired
descriptionstringundefined
colorstringundefined