List

Vertical indexes to display data and text, such as rankings.

Roger Federer10,550
Rafel Nadal9,205
Novak Djokovic8,310
Andy Murray7,030

import { List, ListItem } from '@tremor/react';
export function ListHero() {  return (    <div className="mx-auto max-w-md">      <List>        <ListItem>          <span>Roger Federer</span>          <span>10,550</span>        </ListItem>        <ListItem>          <span>Rafel Nadal</span>          <span>9,205</span>        </ListItem>        <ListItem>          <span>Novak Djokovic</span>          <span>8,310</span>        </ListItem>        <ListItem>          <span>Andy Murray</span>          <span>7,030</span>        </ListItem>      </List>    </div>  );}

Import List components

Tremor exports two components for Lists.

List: Parent component containing all list items.
ListItem: Child component displaying entries with a flex logic of filling the space.

import { List, ListItem } from '@tremor/react';

Usage example

The example below shows a composition of a list combining Card, List, and ListItem components.

Tremor’s Hometowns

Athens2 open PR
Lucerne1 open PR
Zurich0 open PR
Vienna1 open PR
Lissbon0 open PR

import { Card, List, ListItem, Title } from '@tremor/react';
export function ListUsageExample() {  const cities = [    {      city: 'Athens',      rating: '2 open PR',    },    {      city: 'Lucerne',      rating: '1 open PR',    },    {      city: 'Zurich',      rating: '0 open PR',    },    {      city: 'Vienna',      rating: '1 open PR',    },    {      city: 'Lissbon',      rating: '0 open PR',    },  ];  return (    <Card className="mx-auto max-w-md">      <h3 className="text-tremor-content-strong dark:text-dark-tremor-content-strong font-medium">Tremor's Hometowns</h3>      <List className="mt-2">        {cities.map((item) => (          <ListItem key={item.city}>            <span>{item.city}</span>            <span>{item.rating}</span>          </ListItem>        ))}      </List>    </Card>  );}

API Reference: List

This component does not have any Tremor-specific properties.

API Reference: ListItem

This component does not have any Tremor-specific properties.

Theming

List

Element	Theme Token
Divider color colorstremor-border-DEFAULT	colorstremor-border-DEFAULT
Text color colorstremor-content-DEFAULT	colorstremor-content-DEFAULT

ListItem

Element	Theme Token
Font size fontSizetremor-default	fontSizetremor-default