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
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
Argon Dashboard Launch
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
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:
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 .