Components

List

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

   

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, ListItem, and Title components.

import { Card, List, ListItem, Title } from "@tremor/react";

const cities = [
  {
    city: "Athens",
    rating: "2 open PR",
  },
  {
    city: "Luzern",
    rating: "1 open PR",
  },
  {
    city: "Zürich",
    rating: "0 open PR",
  },
  {
    city: "Vienna",
    rating: "1 open PR",
  },
  {
    city: "Ermatingen",
    rating: "0 open PR",
  },
  {
    city: "Lisbon",
    rating: "0 open PR",
  },
];

export default () => (
  <Card className="max-w-xs">
    <Title>Tremor's Hometowns</Title>
    <List>
      {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.