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.


List With Avatar

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

List With Icon

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

List With Selected Item

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

List With Disabled Item

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

List With Link

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

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).

List Custom Styles

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

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",
        },
      },
    },
  },
};

form

menu

Edit this page on Github