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 function ListDefault() {
  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 function ListWithAvatar() {
  return (
    <Card className="w-96">
      <List>
        <ListItem>
          <ListItemPrefix>
            <Avatar variant="circular" alt="candice" src="https://docs.material-tailwind.com/img/face-1.jpg" />
          </ListItemPrefix>
          <div>
            <Typography variant="h6" color="blue-gray">
              Tania Andrew
            </Typography>
            <Typography variant="small" color="gray" className="font-normal">
              Software Engineer @ Material Tailwind
            </Typography>
          </div>
        </ListItem>
        <ListItem>
          <ListItemPrefix>
            <Avatar variant="circular" alt="alexander" src="https://docs.material-tailwind.com/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="https://docs.material-tailwind.com/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";
 
function TrashIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      className="h-5 w-5"
    >
      <path
        fillRule="evenodd"
        d="M16.5 4.478v.227a48.816 48.816 0 013.878.512.75.75 0 11-.256 1.478l-.209-.035-1.005 13.07a3 3 0 01-2.991 2.77H8.084a3 3 0 01-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 01-.256-1.478A48.567 48.567 0 017.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 013.369 0c1.603.051 2.815 1.387 2.815 2.951zm-6.136-1.452a51.196 51.196 0 013.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 00-6 0v-.113c0-.794.609-1.428 1.364-1.452zm-.355 5.945a.75.75 0 10-1.5.058l.347 9a.75.75 0 101.499-.058l-.346-9zm5.48.058a.75.75 0 10-1.498-.058l-.347 9a.75.75 0 001.5.058l.345-9z"
        clipRule="evenodd"
      />
    </svg>
  );
}
 
export function ListWithIcon() {
  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 />
            </IconButton>
          </ListItemSuffix>
        </ListItem>
        <ListItem ripple={false} className="py-1 pr-1 pl-4">
          Item Two
          <ListItemSuffix>
            <IconButton variant="text" color="blue-gray">
              <TrashIcon />
            </IconButton>
          </ListItemSuffix>
        </ListItem>
        <ListItem ripple={false} className="py-1 pr-1 pl-4">
          Item Three
          <ListItemSuffix>
            <IconButton variant="text" color="blue-gray">
              <TrashIcon />
            </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 function ListWithSelectedItem() {
  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 function ListWithDisabledItem() {
  return (
    <Card className="w-96">
      <List>
        <ListItem disabled={true}>Inbox</ListItem>
        <ListItem>Trash</ListItem>
        <ListItem>Settings</ListItem>
      </List>
    </Card>
  );
}

List With Link

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 function ListWithLink() {
  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 Badge

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 function ListWithBadge() {
  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>
  );
}

List Custom Styles

You can use the className prop to add custom styles to the List, ListItem, ListItemPrefix and ListItemSuffix components.

import {
  List,
  ListItem,
  ListItemPrefix,
  ListItemSuffix,
  Chip,
  Card,
} from "@material-tailwind/react";
 
export function ListCustomStyles() {
  return (
    <Card className="w-96 overflow-hidden rounded-md">
      <List className="my-2 p-0">
        <ListItem className="group rounded-none py-1.5 px-3 text-sm font-normal text-blue-gray-700 hover:bg-blue-500 hover:text-white focus:bg-blue-500 focus:text-white">
          <ListItemPrefix>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
              stroke="currentColor"
              className="h-4 w-4"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859M12 3v8.25m0 0l-3-3m3 3l3-3"
              />
            </svg>
          </ListItemPrefix>
          Inbox
          <ListItemSuffix>
            <Chip
              value="+99"
              variant="ghost"
              size="sm"
              className="rounded-full px-2 py-1 text-xs group-hover:bg-white/20 group-hover:text-white"
            />
          </ListItemSuffix>
        </ListItem>
        <ListItem className="rounded-none py-1.5 px-3 text-sm font-normal text-blue-gray-700 hover:bg-blue-500 hover:text-white focus:bg-blue-500 focus:text-white">
          <ListItemPrefix>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
              stroke="currentColor"
              className="h-4 w-4"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
              />
            </svg>
          </ListItemPrefix>
          Trash
        </ListItem>
        <ListItem className="rounded-none py-1.5 px-3 text-sm font-normal text-blue-gray-700 hover:bg-blue-500 hover:text-white focus:bg-blue-500 focus:text-white">
          <ListItemPrefix>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
              stroke="currentColor"
              className="h-4 w-4"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
              />
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
              />
            </svg>
          </ListItemPrefix>
          Settings
        </ListItem>
      </List>
    </Card>
  );
}

List Props

The following props are available for list component. These are the custom props that we've added for the list component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
classNamestringAdd custom className for list''
childrennodeAdd content for listNo default value it's a required prop.


For TypeScript Only

import type { ListProps } from "@material-tailwind/react";

List Item Props

The following props are available for list item component. These are the custom props that we've added for the list item component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
ripplebooleanAdd ripple effect for list itemtrue
selectedbooleanMakes the list item selected by defaultfalse
disabledbooleanMakes the list item disabledfalse
classNamestringAdd custom className for list item''
childrennodeAdd content for list itemNo default value it's a required prop.


For TypeScript Only

import type { ListItemProps } from "@material-tailwind/react";

List Item Prefix Props

The following props are available for list item prefix component. These are the custom props that we've added for the list item prefix component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
classNamestringAdd custom className for list item prefix''
childrennodeAdd content for list item prefixNo default value it's a required prop.


For TypeScript Only

import type { ListItemPrefixProps } from "@material-tailwind/react";

List Item Suffix Props

The following props are available for list item suffix component. These are the custom props that we've added for the list item suffix component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
classNamestringAdd custom className for list item suffix''
childrennodeAdd content for list item suffixNo default value it's a required prop.


For TypeScript Only

import type { ListItemSuffixProps } from "@material-tailwind/react";

List Theme

Learn how to customize the theme and styles for list component, the theme object for list component has two main objects:

A. The defaultProps object for setting up the default value for props of list component.
B. The styles object for customizing the theme and styles of list component.

You can customize the theme and styles of list component by adding Tailwind CSS classes as key paired values for objects.



List Theme Object Type

interface ListStylesType {
  defaultProps: {
    ripple: boolean;
    className: string;
  };
  styles: {
    base: {
      list: object;
      item: {
        initial: object;
        selected: object;
        disabled: object;
      };
      itemPrefix: object;
      itemSuffix: object;
    };
  };
}


For TypeScript Only

import { ListStylesType } from "@material-tailwind/react";

List Theme Customization

const theme = {
  list: {
    defaultProps: {
      ripple: true,
      className: "",
    },
    styles: {
      base: {
        list: {
          display: "flex",
          flexDirection: "flex-col",
          gap: "gap-1",
          minWidth: "min-w-[240px]",
          p: "p-2",
          fontFamily: "font-sans",
          fontSize: "text-base",
          fontWeight: "font-normal",
          color: "text-blue-gray-700",
        },
        item: {
          initial: {
            display: "flex",
            alignItems: "items-center",
            width: "w-full",
            padding: "p-3",
            borderRadius: "rounded-lg",
            textAlign: "text-start",
            lightHeight: "leading-tight",
            transition: "transition-all",
            bg: "hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80",
            color: "hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900",
            outline: "outline-none",
          },
          selected: {
            bg: "bg-blue-gray-50/50",
            color: "text-blue-gray-700",
          },
          disabled: {
            opacity: "opacity-50",
            cursor: "cursor-not-allowed",
            pointerEvents: "pointer-events-none",
            userSelect: "select-none",
            bg: "hover:bg-transparent focus:bg-transparent active:bg-transparent",
            color: "hover:text-blue-gray-500 focus:text-blue-gray-500 active:text-blue-gray-500",
          },
        },
        itemPrefix: {
          display: "grid",
          placeItems: "place-items-center",
          marginRight: "mr-4",
        },
        itemSuffix: {
          display: "grid",
          placeItems: "place-items-center",
          marginRight: "ml-auto justify-self-end",
        },
      },
    },
  },
};