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 Links

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


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

Edit this page on Github