List

Striped, selectable rows from the Collection Log and World Switcher, and rich rows from the Skill Guide.

Installation

npx shadcn@latest add https://osrsui.com/r/list.json

Usage

<List>
  <ListItem selected onClick={…}>Abyssal Sire</ListItem>
  <ListItem tone="green" selected>World 339</ListItem>
</List>

Rich rows

The Skill Guide’s rows: item media, a title, and labelled description lines. The parts follow shadcn/ui’s Item naming.

<ListItem>
  <ListItemMedia><Item id="gold-bar" /></ListItemMedia>
  <ListItemContent>
    <ListItemTitle>Gold bar</ListItemTitle>
    <ListItemDescription label="Requires">Level 40 Smithing</ListItemDescription>
  </ListItemContent>
</ListItem>