1Sponsor

List

Navigable list with optional filtering

Terminal

Installation

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

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