---
title: List
description: "Striped, selectable rows from the Collection Log and World Switcher, and rich rows from the Skill Guide."
---

<Component path="list/playground" />

## Installation

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

## Usage

```tsx
<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.

<Component path="list/rich" />

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