Tailwind CSS List - React

Use our responsive Tailwind CSS vertical List anywhere on your web app!

A List displays a list of items containing images, icons, and text that represents a specific action.

See below our List example that you can use in your Tailwind CSS and React project. The examples comes in different styles, so you can adapt them easily to your needs.

import { List, ListItem, Card } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Card className="w-96">
      <List>
        <ListItem>Inbox</ListItem>
        <ListItem>Trash</ListItem>
        <ListItem>Settings</ListItem>
      </List>
    </Card>
  );
}

List With Avatar

You can use the <ListItemPrefix /> component to put images or icons before the list item content.

import {
  List,
  ListItem,
  ListItemPrefix,
  Avatar,
  Card,
  Typography,
} from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Card className="w-96">
      <List>
        <ListItem>
          <ListItemPrefix>
            <Avatar variant="circular" alt="candice" src="/img/face-1.jpg" />
          </ListItemPrefix>
          <div>
            <Typography variant="h6" color="blue-gray">
              Candice Wu
            </Typography>
            <Typography variant="small" color="gray" className="font-normal">
              Software Engineer @ Material Tailwind
            </Typography>
          </div>
        </ListItem>
        <ListItem>
          <ListItemPrefix>
            <Avatar variant="circular" alt="alexander" src="/img/face-2.jpg" />
          </ListItemPrefix>
          <div>
            <Typography variant="h6" color="blue-gray">
              Alexander
            </Typography>
            <Typography variant="small" color="gray" className="font-normal">
              Backend Developer @ Material Tailwind
            </Typography>
          </div>
        </ListItem>
        <ListItem>
          <ListItemPrefix>
            <Avatar variant="circular" alt="emma" src="/img/face-3.jpg" />
          </ListItemPrefix>
          <div>
            <Typography variant="h6" color="blue-gray">
              Emma Willever
            </Typography>
            <Typography variant="small" color="gray" className="font-normal">
              UI/UX Designer @ Material Tailwind
            </Typography>
          </div>
        </ListItem>
      </List>
    </Card>
  );
}

List With Icon

You can use the <ListItemSuffix /> component to put images or icons after the list item content.

import {
  List,
  ListItem,
  ListItemSuffix,
  Card,
  IconButton,
} from "@material-tailwind/react";
import { TrashIcon } from "@heroicons/react/24/solid";
 
export default function Example() {
  return (
    <Card className="w-96">
      <List>
        <ListItem ripple={false} className="py-1 pr-1 pl-4">
          Item One
          <ListItemSuffix>
            <IconButton variant="text" color="blue-gray">
              <TrashIcon className="h-5 w-5" />
            </IconButton>
          </ListItemSuffix>
        </ListItem>
        <ListItem ripple={false} className="py-1 pr-1 pl-4">
          Item Two
          <ListItemSuffix>
            <IconButton variant="text" color="blue-gray">
              <TrashIcon className="h-5 w-5" />
            </IconButton>
          </ListItemSuffix>
        </ListItem>
        <ListItem ripple={false} className="py-1 pr-1 pl-4">
          Item Three
          <ListItemSuffix>
            <IconButton variant="text" color="blue-gray">
              <TrashIcon className="h-5 w-5" />
            </IconButton>
          </ListItemSuffix>
        </ListItem>
      </List>
    </Card>
  );
}

List With Selected Item

You can make a list item selected by default using the selected prop for the <ListItem /> component.

import React from "react";
import { List, ListItem, Card } from "@material-tailwind/react";
 
export default function Example() {
  const [selected, setSelected] = React.useState(1);
  const setSelectedItem = (value) => setSelected(value);
 
  return (
    <Card className="w-96">
      <List>
        <ListItem selected={selected === 1} onClick={() => setSelectedItem(1)}>
          Inbox
        </ListItem>
        <ListItem selected={selected === 2} onClick={() => setSelectedItem(2)}>
          Trash
        </ListItem>
        <ListItem selected={selected === 3} onClick={() => setSelectedItem(3)}>
          Settings
        </ListItem>
      </List>
    </Card>
  );
}

List With Disabled Item

You can make a list item disabled using the disabled prop for the <ListItem /> component.

import { List, ListItem, Card } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Card className="w-96">
      <List>
        <ListItem disabled={true}>Inbox</ListItem>
        <ListItem>Trash</ListItem>
        <ListItem>Settings</ListItem>
      </List>
    </Card>
  );
}

List With Links

Display a collection of options that are clickable and lead to different pages with our simple and versatile list example.

import { List, ListItem, Card } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Card className="w-96">
      <List>
        <a href="#" className="text-initial">
          <ListItem>Inbox</ListItem>
        </a>
        <a href="#" className="text-initial">
          <ListItem>Trash</ListItem>
        </a>
        <a href="#" className="text-initial">
          <ListItem>Settings</ListItem>
        </a>
      </List>
    </Card>
  );
}

List With Badges

This example is similar to the previous list component, but it also includes badges to present more information about the options (for example, the quantity).

import {
  List,
  ListItem,
  ListItemSuffix,
  Chip,
  Card
} from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Card className="w-96">
      <List>
        <ListItem>
          Inbox
          <ListItemSuffix>
            <Chip value="14" variant="ghost" size="sm" className="rounded-full" />
          </ListItemSuffix>
        </ListItem>
        <ListItem>
          Spam
          <ListItemSuffix>
            <Chip value="2" variant="ghost" size="sm" className="rounded-full" />
          </ListItemSuffix>
        </ListItem>
        <ListItem>
          Trash
          <ListItemSuffix>
            <Chip value="40" variant="ghost" size="sm" className="rounded-full" />
          </ListItemSuffix>
        </ListItem>
      </List>
    </Card>
  );
}

Props

Learn more about props definition and types of list components.

Theme

Learn how to customize the theme and styles for list components.

form

Edit this page on Github