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;
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

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

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

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 flag
    Country:
    United States
    Visits:
    2500
    Bounce:
    30%
  • Country flag
    Country:
    Germany
    Visits:
    2500
    Bounce:
    30%
  • Country flag
    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.