Material-UI List Group

Pro Component

List groups are a flexible and powerful component for displaying a series of content. With Material-ui list group you can modify and extend them to support just about any content within.

Examples

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";

// core components
const styles = (theme) => ({
  listItemRoot: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    border: "1px solid " + theme.palette.gray[200],
    "&:first-child": {
      borderRadius: ".375rem",
      borderBottomLeftRadius: "0",
      borderBottomRightRadius: "0",
      borderBottom: "0!important",
    },
    "&:last-child": {
      borderRadius: ".375rem",
      borderTopLeftRadius: "0",
      borderTopRightRadius: "0",
      borderTop: "0!important",
    },
  },
});

const useStyles = makeStyles(styles);

function CardTeamMembers() {
  const classes = { ...useStyles() };
  return (
    <>
      <List disablePadding>
        <ListItem className={classes.listItemRoot}>Cras justo odio</ListItem>
        <ListItem className={classes.listItemRoot}>
          Dapibus ac facilisis in
        </ListItem>
        <ListItem className={classes.listItemRoot}>Morbi leo risus</ListItem>
        <ListItem className={classes.listItemRoot}>
          Porta ac consectetur ac
        </ListItem>
        <ListItem className={classes.listItemRoot}>Vestibulum at eros</ListItem>
      </List>
    </>
  );
}

export default CardTeamMembers;

Active items

Add .active to a .list-group-item to indicate the current active selection.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";

// core components
const styles = (theme) => ({
  listItemRoot: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    border: "1px solid " + theme.palette.gray[200],
    "&:first-child": {
      borderRadius: ".375rem",
      borderBottomLeftRadius: "0",
      borderBottomRightRadius: "0",
      borderBottom: "0!important",
      backgroundColor: theme.palette.primary.main,
      color: theme.palette.white.main,
    },
    "&:last-child": {
      borderRadius: ".375rem",
      borderTopLeftRadius: "0",
      borderTopRightRadius: "0",
      borderTop: "0!important",
    },
  },
});

const useStyles = makeStyles(styles);

function CardTeamMembers() {
  const classes = { ...useStyles() };
  return (
    <>
      <List disablePadding>
        <ListItem className={classes.listItemRoot}>Cras justo odio</ListItem>
        <ListItem className={classes.listItemRoot}>
          Dapibus ac facilisis in
        </ListItem>
        <ListItem className={classes.listItemRoot}>Morbi leo risus</ListItem>
        <ListItem className={classes.listItemRoot}>
          Porta ac consectetur ac
        </ListItem>
        <ListItem className={classes.listItemRoot}>Vestibulum at eros</ListItem>
      </List>
    </>
  );
}

export default CardTeamMembers;

Links

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";

// core components
const styles = (theme) => ({
  listItemRoot: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    border: "1px solid " + theme.palette.gray[200],
    "&:first-child": {
      borderRadius: ".375rem",
      borderBottomLeftRadius: "0",
      borderBottomRightRadius: "0",
      borderBottom: "0!important",
      backgroundColor: theme.palette.primary.main,
      color: theme.palette.white.main,
    },
    "&:last-child": {
      borderRadius: ".375rem",
      borderTopLeftRadius: "0",
      borderTopRightRadius: "0",
      borderTop: "0!important",
      color: theme.palette.gray[600],
    },
  },
});

const useStyles = makeStyles(styles);

function CardTeamMembers() {
  const classes = { ...useStyles() };
  return (
    <>
      <List disablePadding>
        <ListItem className={classes.listItemRoot}>Cras justo odio</ListItem>
        <ListItem className={classes.listItemRoot}>
          Dapibus ac facilisis in
        </ListItem>
        <ListItem className={classes.listItemRoot}>Morbi leo risus</ListItem>
        <ListItem className={classes.listItemRoot}>
          Porta ac consectetur ac
        </ListItem>
        <ListItem className={classes.listItemRoot}>Vestibulum at eros</ListItem>
      </List>
    </>
  );
}

export default CardTeamMembers;

With badges

Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Badge from "@material-ui/core/Badge";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";

// core components
import componentStyles from "assets/theme/components/badge.js";
const useStylesBadges = makeStyles(componentStyles);
const styles = (theme) => ({
  listItemRoot: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    border: "1px solid " + theme.palette.gray[200],
    "&:first-child": {
      borderRadius: ".375rem",
      borderBottomLeftRadius: "0",
      borderBottomRightRadius: "0",
      borderBottom: "0!important",
    },
    "&:last-child": {
      borderRadius: ".375rem",
      borderTopLeftRadius: "0",
      borderTopRightRadius: "0",
      borderTop: "0!important",
    },
  },
});

const useStyles = makeStyles(styles);

function CardTeamMembers() {
  const classes = { ...useStyles(), ...useStylesBadges() };
  const primaryBadgeClasses = {
    badge: classes.badgePositionRelative,
  };
  return (
    <>
      <List disablePadding>
        <ListItem className={classes.listItemRoot}>
          Cras justo odio{" "}
          <Badge
            badgeContent={14}
            color="primary"
            classes={primaryBadgeClasses}
          ></Badge>
        </ListItem>
        <ListItem className={classes.listItemRoot}>
          Dapibus ac facilisis in
          <Badge
            badgeContent={2}
            color="primary"
            classes={primaryBadgeClasses}
          ></Badge>
        </ListItem>
        <ListItem className={classes.listItemRoot}>
          Morbi leo risus
          <Badge
            badgeContent={1}
            color="primary"
            classes={primaryBadgeClasses}
          ></Badge>
        </ListItem>
      </List>
    </>
  );
}

export default CardTeamMembers;

Advanced Examples

Here are some more advanced custom examples we’ve made in order to bring more functionality with some really cool list group examples.

Members

John Michael
● Online
Alex Smith
● In a meeting
Samantha Ivy
● Offline
John Michael
● Online
John Snow
● Online

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import { useTheme } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";

// core components
import componentStyles from "assets/theme/components/cards/dashboard/card-team-members.js";

const useStyles = makeStyles(componentStyles);

const members = [
  {
    image: require("assets/img/theme/team-1.jpg").default,
    name: "John Michael",
    status: "Online",
    color: "success",
  },
  {
    image: require("assets/img/theme/team-2.jpg").default,
    name: "Alex Smith",
    status: "In a meeting",
    color: "warning",
  },
  {
    image: require("assets/img/theme/team-3.jpg").default,
    name: "Samantha Ivy",
    status: "Offline",
    color: "error",
  },
  {
    image: require("assets/img/theme/team-4.jpg").default,
    name: "John Michelle",
    status: "Online",
    color: "success",
  },
];

function CardTeamMembers() {
  const classes = useStyles();
  const theme = useTheme();
  return (
    <>
      <List disablePadding>
        {members.map((prop, key) => {
          return (
            <ListItem key={key} className={classes.listItemRoot}>
              <Grid container component={Box} alignItems="center">
                <Grid item xs="auto">
                  <Avatar alt="..." src={prop.image} />
                </Grid>
                <Grid item className={classes.gridItemRoot}>
                  <Typography
                    variant="h4"
                    component="h4"
                    className={classes.mb0}
                  >
                    {prop.name}
                  </Typography>
                  <Box
                    color={theme.palette[prop.color].main}
                    component="span"
                    marginRight=".25rem"
                  >
                    ●
                  </Box>
                  <Box fontSize="80%" fontWeight="400" component="small">
                    {prop.status}
                  </Box>
                </Grid>
                <Grid item xs="auto">
                  <Button size="small" variant="contained" color="primary">
                    Add
                  </Button>
                </Grid>
              </Grid>
            </ListItem>
          );
        })}
      </List>
    </>
  );
}

export default CardTeamMembers;

Checklist

Call with Dave
10:30 AM
Lunch meeting
10:30 AM
Argon Dashboard Launch
10:30 AM
Winter Hackaton
10:30 AM
Dinner with Family
10:30 AM

import React from "react";
import clsx from "clsx";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
// import Button from "@material-ui/core/Button";
import Checkbox from "@material-ui/core/Checkbox";
import Grid from "@material-ui/core/Grid";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";

// core components
import componentStyles from "assets/theme/components/cards/dashboard/card-to-do-list.js";

const useStyles = makeStyles(componentStyles);

function CardToDoList() {
  const classes = useStyles();
  const [state, setState] = React.useState([
    {
      name: "Call with Dave",
      time: "10:30 AM",
      checked: true,
      color: "success",
    },
    {
      name: "Launch meeting",
      time: "10:30 AM",
      checked: false,
      color: "warning",
    },
    {
      name: "Argon Dashboard Launch",
      time: "10:30 AM",
      checked: false,
      color: "info",
    },
    {
      name: "Winter Hackathon",
      time: "10:30 AM",
      checked: true,
      color: "error",
    },
  ]);
  return (
    <>
      <List disablePadding>
        {state.map((prop, key) => {
          const checkboxClasses = { checked: classes[prop.color + "Checkbox"] };
          return (
            <ListItem key={key} className={classes.listItemRoot}>
              <Grid container component={Box} alignItems="center">
                <Grid
                  item
                  className={clsx(
                    classes.gridItemRoot,
                    classes[prop.color + "GridItemRoot"]
                  )}
                >
                  <Typography
                    variant="h5"
                    component="h5"
                    className={clsx(classes.mb0, {
                      [classes.lineThrough]: prop.checked,
                    })}
                  >
                    {prop.name}
                  </Typography>
                  <Box
                    fontSize="80%"
                    fontWeight="400"
                    component="small"
                    className={clsx({
                      [classes.lineThrough]: prop.checked,
                    })}
                  >
                    {prop.time}
                  </Box>
                </Grid>
                <Grid item xs="auto">
                  <Checkbox
                    checked={prop.checked}
                    onChange={() => {
                      let newState = state.map((stateProp, stateKey) => {
                        if (key === stateKey) {
                          return {
                            key: stateKey,
                            ...stateProp,
                            checked: !prop.checked,
                          };
                        }
                        return stateProp;
                      });
                      setState(newState);
                    }}
                    classes={checkboxClasses}
                  />
                </Grid>
              </Grid>
            </ListItem>
          );
        })}
      </List>
    </>
  );
}

export default CardToDoList;

Progress

Argon Design System
Angular Now UI Kit PRO
Black Dashboard
React Material Dashboard
Vue Paper UI Kit PRO

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Box from "@material-ui/core/Box";
import Grid from "@material-ui/core/Grid";
import LinearProgress from "@material-ui/core/LinearProgress";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";

// core components
import componentStyles from "assets/theme/components/cards/alternative/card-progress-track-alternative.js";

const useStyles = makeStyles(componentStyles);

const items = [
  {
    image: require("assets/img/theme/bootstrap.jpg").default,
    name: "Argon Design System",
    color: "warning",
    value: 60,
  },
  {
    image: require("assets/img/theme/angular.jpg").default,
    name: "Angular Now UI Kit PRO",
    color: "success",
    value: 100,
  },
  {
    image: require("assets/img/theme/sketch.jpg").default,
    name: "Black Dashboard",
    color: "error",
    value: 72,
  },
  {
    image: require("assets/img/theme/react.jpg").default,
    name: "Material Dashboard React",
    color: "info",
    value: 90,
  },
  {
    image: require("assets/img/theme/vue.jpg").default,
    name: "Vue Paper UI Kit PRO",
    color: "success",
    value: 100,
  },
];

function CardProgressTrack() {
  const classes = useStyles();
  return (
    <>
      <List disablePadding>
        {items.map((prop, key) => {
          const progressClasses = {
            root: classes.linearProgressRoot,
            bar: classes[prop.color + "LinearProgress"],
          };
          return (
            <ListItem key={key} className={classes.listItemRoot}>
              <Grid container component={Box} alignItems="center">
                <Grid item xs="auto">
                  <Avatar alt="..." src={prop.image} />
                </Grid>
                <Grid item className={classes.gridItemRoot}>
                  <Typography variant="h5" component="h5">
                    {prop.name}
                  </Typography>
                  <Box width="100%">
                    <LinearProgress
                      variant="determinate"
                      value={prop.value}
                      classes={progressClasses}
                    />
                  </Box>
                </Grid>
              </Grid>
            </ListItem>
          );
        })}
      </List>
    </>
  );
}

export default CardProgressTrack;

Messages

Tim

2 hrs ago

New order for Argon Dashboard

Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Mike

1 day ago

● Your theme has been updated

Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Tim

2 hrs ago

New order for Argon Dashboard

Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Box from "@material-ui/core/Box";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";

// core components
import componentStyles from "assets/theme/components/cards/widgets/card-latest-messages.js";

const useStyles = makeStyles(componentStyles);

const members = [
  {
    image: require("assets/img/theme/team-1.jpg").default,
    name: "Tim",
    title: "New order for Argon Dashboard",
    description:
      "Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.",
    time: "2 hrs ago",
  },
  {
    image: require("assets/img/theme/team-2.jpg").default,
    name: "Mike",
    title: "Your theme has been updated",
    description:
      "Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.",
    time: "1 day ago",
  },
];

function CardLatestMessages() {
  const classes = useStyles();
  const avatarClasses = {
    root: classes.avatarRoot,
    img: classes.avatarImg,
  };
  return (
    <>
      <List disablePadding>
        {members.map((prop, key) => {
          return (
            <ListItem key={key} className={classes.listItemRoot}>
              <Box display="flex" justifyContent="space-between">
                <Box display="flex" alignItems="center">
                  <Avatar
                    alt="..."
                    src={prop.image}
                    classes={avatarClasses}
                  />
                  <Typography
                    variant="h5"
                    component="h5"
                    className={classes.typographyH5}
                  >
                    {prop.name}
                  </Typography>
                </Box>
                <Box fontSize="80%" fontWeight="400">
                  {prop.time}
                </Box>
              </Box>
              <Typography
                variant="h4"
                component="h4"
                className={classes.typographyH4}
              >
                {prop.title}
              </Typography>
              <Box
                component="p"
                marginBottom="0"
                fontWeight="300"
                lineHeight="1.7"
                fontSize=".875rem"
                marginTop="0"
              >
                {prop.description}
              </Box>
            </ListItem>
          );
        })}
      </List>
    </>
  );
}

export default CardLatestMessages;

Notifications

John Snow

2 hrs ago

Let's meet at Starbucks at 11:30. Wdyt?

John Snow

3 hrs ago

A new issue has been reported for Argon.

John Snow

5 hrs ago

Your posts have been liked a lot.

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import { useTheme } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Box from "@material-ui/core/Box";
import Grid from "@material-ui/core/Grid";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/dropdowns/notifications-dropdown-alternative.js";

const useStyles = makeStyles(componentStyles);

const items = [
  {
    image: require("assets/img/theme/team-1-800x800.jpg").default,
    name: "John Snow",
    description: "Let's meet at Starbucks at 11:30. Wdyt?",
    time: "2 hrs ago",
  },
  {
    image: require("assets/img/theme/team-2-800x800.jpg").default,
    name: "John Snow",
    description: "A new issue has been reported for Argon.",
    time: "3 hrs ago",
  },
  {
    image: require("assets/img/theme/team-3-800x800.jpg").default,
    name: "John Snow",
    description: "Your posts have been liked a lot.",
    time: "4 hrs ago",
  },
];

export default function NotificationsDropdown() {
  const classes = useStyles();
  const theme = useTheme();
  const avatarClasses = {
    root: classes.avatarRoot,
  };
  return (
    <>
      <List disablePadding>
        {items.map((prop, key) => {
          return (
            <ListItem key={key} className={classes.listItemRoot} component="a">
              <Grid container alignItems="center">
                <Box
                  flex="0 0 auto"
                  width="auto"
                  maxWidth="100%"
                  position="relative"
                  paddingRight="15px"
                  paddingLeft="15px"
                  minHeight="1px"
                >
                  <Avatar
                    alt="..."
                    src={prop.image}
                    classes={avatarClasses}
                  />
                </Box>
                <Box
                  flexBasis="0"
                  flexGrow="1"
                  width="100%;"
                  maxWidth="100%"
                  position="relative"
                  paddingRight="15px"
                  paddingLeft="15px"
                  minHeight="1px"
                >
                  <Box
                    display="flex"
                    alignItems="center"
                    justifyContent="space-between"
                  >
                    <div>
                      <Typography
                        variant="h4"
                        component="h4"
                        className={classes.typographyH4}
                      >
                        {prop.name}
                      </Typography>
                    </div>
                    <Box
                      textAlign="right"
                      color={theme.palette.gray[600]}
                      fontSize="80%"
                    >
                      {prop.time}
                    </Box>
                  </Box>
                  <Box
                    component="p"
                    fontSize=".875rem"
                    fontWeight="300"
                    lineHeight="1.7"
                    margin="0"
                  >
                    {prop.description}
                  </Box>
                </Box>
              </Grid>
            </ListItem>
          );
        })}
      </List>
    </>
  );
}

Countries

Country:
United States

Visits:
2500

Bounce:
30%
Country:
Germany

Visits:
2500

Bounce:
30%
Country:
Great Britain

Visits:
2500

Bounce:
30%

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Grid from "@material-ui/core/Grid";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";

// core components
import componentStyles from "assets/theme/components/cards/alternative/card-real-time.js";

const useStyles = makeStyles(componentStyles);

const items = [
  {
    image: require("assets/img/icons/flags/US.png").default,
    country: "United States",
    visits: "2500",
    bounce: "30%",
  },
  {
    image: require("assets/img/icons/flags/DE.png").default,
    country: "Germany",
    visits: "2500",
    bounce: "30%",
  },
  {
    image: require("assets/img/icons/flags/GB.png").default,
    country: "Great Britain",
    visits: "2500",
    bounce: "30%",
  },
];

function CardRealTime() {
  const classes = useStyles();
  return (
    <>
      <List disablePadding>
        {items.map((prop, key) => {
          return (
            <ListItem key={key} className={classes.listItemRoot}>
              <Grid container component={Box} alignItems="center">
                <Grid item xs="auto">
                  <img alt="..." className={classes.img} src={prop.image} />
                </Grid>
                <Grid
                  item
                  component={Box}
                  maxWidth="100%!important"
                  flexBasis="0!important"
                  flexGrow="1!important"
                >
                  <Box component="small" fontSize="80%" fontWeight="400">
                    Country
                  </Box>
                  <Typography
                    component="h5"
                    variant="h5"
                    className={classes.mb0}
                  >
                    {prop.country}
                  </Typography>
                </Grid>
                <Grid
                  item
                  component={Box}
                  maxWidth="100%!important"
                  flexBasis="0!important"
                  flexGrow="1!important"
                >
                  <Box component="small" fontSize="80%" fontWeight="600">
                    Visits
                  </Box>
                  <Typography
                    component="h5"
                    variant="h5"
                    className={classes.mb0}
                  >
                    {prop.visits}
                  </Typography>
                </Grid>
                <Grid
                  item
                  component={Box}
                  maxWidth="100%!important"
                  flexBasis="0!important"
                  flexGrow="1!important"
                >
                  <Box component="small" fontSize="80%" fontWeight="600">
                    Bounce
                  </Box>
                  <Typography
                    component="h5"
                    variant="h5"
                    className={classes.mb0}
                  >
                    {prop.bounce}
                  </Typography>
                </Grid>
              </Grid>
            </ListItem>
          );
        })}
      </List>
    </>
  );
}

export default CardRealTime;

Props

If you want to see more examples and properties please check the official Material-UI Documentation.

Material-UI List Group

Examples

Active items

Links

With badges

Advanced Examples

Members

John Michael

Alex Smith

Samantha Ivy

John Michael

John Snow

Checklist

Call with Dave

Lunch meeting

Argon Dashboard Launch

Winter Hackaton

Dinner with Family

Progress

Argon Design System

Angular Now UI Kit PRO

Black Dashboard

React Material Dashboard

Vue Paper UI Kit PRO

Messages

Tim

New order for Argon Dashboard

Mike

● Your theme has been updated

Tim

New order for Argon Dashboard

Notifications

John Snow

John Snow

John Snow

Countries

United States

2500

30%

Germany

2500

30%

Great Britain

2500

30%

Props