Note: There are two ways to insert these:
- Trigger Suggest (⌃Space on macOS) and then type in the name; or you can enable the Editor: Tab Completion setting, then type the name of the snippet and press Tab.
- Execute the corresponding editor commands like
MUI: insert <Button>(or even better, make keybindings for them!).
Performance Warning: Currently, the suggestions can cause performance issues due to VSCode API limitations. After the API is improved in an upcoming release I can fix these performance issues. Until then, the workaround is to either disable adding automatic imports for snippets (Settings > Extensions > MUI Snippets > Add Completion Imports) or use the commands to insert snippets instead of suggestions.
- Works in JS/X and TSX
- Automatically adds missing imports when a snippet is inserted (as long as it succeeds in parsing the entire file)
- You can configure whether to use controlled or uncontrolled form controls in the extension settings.
For Material-UI v4 you'll need material-ui-snippets instead. This extension is for MUI v5.
- controlled - inserts
valueandonChangeproperties - uncontrolled - inserts
defaultValueproperty
- auto - uses top level if other top level imports are found, second level otherwise
- top level -
import { Button } from '@mui/material' - second level -
import Button from '@mui/material/Button'
muiAccordion: MUI <Accordion>muiAccordionControlled: MUI controlled <Accordion>muiAppBar: MUI <AppBar>muiAppBarMenu: MUI <AppBar> with menu iconmuiBottomNavigation: MUI <BottomNavigation>muiBottomNavigationAction: MUI <BottomNavigationAction>muiButton: MUI <Button>muiButtonGroup: MUI <ButtonGroup>muiButtonGroupSize: MUI <ButtonGroup> with sizemuiButtonGroupVertical: MUI vertical <ButtonGroup>muiButtonSize: MUI <Button> with sizemuiButtonText: MUI text <Button>muiButtonWithIcon: MUI <Button> with icon and labelmuiCardHeader: MUI <CardHeader>muiCardMedia: MUI <CardMedia>muiCheckboxLabel: MUI <Checkbox> with <FormControlLabel>muiCheckboxLabelPlacement: MUI <Checkbox> with <FormControlLabel>muiContainer: MUI <Container>muiDialog: MUI <Dialog>muiDialogSimple: MUI <Dialog>muiDrawerPermanent: MUI permanent <Drawer>muiDrawerPersistent: MUI persistent <Drawer>muiDrawerTemporary: MUI temporary <Drawer>muiEndAdornment: MUI end <InputAdornment>muiFab: MUI <Fab>muiFabExtended: MUI <Fab variant="extended">muiFormControl: MUI <FormControl>muiFormControlGroup: MUI <FormControl> with <FormGroup>muiGridContainer: MUI <Grid container>muiGridContainerCenter: MUI <Grid container> with centeringmuiGridContainerFull: MUI <Grid container> with all propsmuiIconButton: MUI <IconButton>muiImageListSubheader: MUI <ImageList> subheadermuiImageListTilebar: MUI <ImageListTileBar>muiMenu: MUI <Menu>muiMenuItem: MUI <MenuItem>muiMenuPopupState: MUI <Menu> for material-ui-popup-statemuiRadioGroup: MUI <FormControl> with <RadioGroup>muiRadioLabel: MUI <Radio> with <FormControlLabel>muiRadioLabelPlacement: MUI <Radio> with <FormControlLabel> with labelPlacementmuiSelectItem: MUI <MenuItem> inside <Select>muiSliderContinuous: MUI <Slider> with continuous valuesmuiSliderDiscrete: MUI <Slider> with discrete valuesmuiSnackbar: MUI <Snackbar>muiSnackbarContent: MUI <SnackbarContent>muiStartAdornment: MUI start <InputAdornment>muiStep: MUI <Step>muiStepContent: MUI <Step> with <StepContent>muiStepOptional: MUI optional <Step>muiStepper: MUI <Stepper>muiSwipeableViews: MUI <SwipeableViews>muiSwitch: MUI <Switch>muiSwitchLabel: MUI <Switch> with <FormControlLabel>muiSwitchLabelPlacement: MUI <Switch> with <FormControlLabel> with labelPlacementmuiTabPanel: MUI <TabPanel>muiTabs: MUI <Tabs>muiTabsScrollable: MUI scrollable <Tabs>muiTextField: MUI <TextField>muiTextFieldMore: MUI <TextField> with more propsmuiTextFieldSelect: MUI <TextField select>muiTextFieldVariant: MUI <TextField> with variantmuiTooltip: MUI <Tooltip>muiTypography: MUI <Typography>
<Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-label="${1:Expand}" aria-controls="$2-content" id="$2-header" > <Typography$3>$4</Typography> </AccordionSummary> <AccordionDetails>$5</AccordionDetails> </Accordion> <Accordion expanded={$1} onChange={$2}> <AccordionSummary expandIcon={<ExpandMore />} aria-label="${3:Expand}" aria-controls="$4-content" id="$4-header" > <Typography$5>$6</Typography> </AccordionSummary> <AccordionDetails>$7</AccordionDetails> </Accordion> <AppBar position="${1|fixed,absolute,relative,static,sticky|}" color="${2|primary,default,inherit,secondary,transparent|}"> <Toolbar$3> <Typography variant="h6"$4> $5 </Typography> </Toolbar> </AppBar> <AppBar position="${1|fixed,absolute,relative,static,sticky|}" color="${2|primary,default,inherit,secondary,transparent|}"> <Toolbar$3> <IconButton edge="start" color="inherit" aria-label="menu"> <Menu /> </IconButton> <Typography variant="h6"$4> $5 </Typography> </Toolbar> </AppBar> <BottomNavigation value={$1} onChange={$2}$3> $4 </BottomNavigation> <BottomNavigationAction label="$1" value={$2} icon={$3}$4 /> <Button variant="${1|text,contained,outlined|}" color="${2|primary,secondary,inherit,success,error,info,warning|}"$3> $4 </Button> <ButtonGroup variant="${1|text,contained,outlined|}" color="${2|primary,secondary,inherit,success,error,info,warning|}" aria-label="$3"$4> <Button>$5</Button> <Button>$6</Button> $7 </ButtonGroup> <ButtonGroup variant="${1|text,contained,outlined|}" color="${2|primary,secondary,inherit,success,error,info,warning|}" size="${3|small,medium,large|}" aria-label="$4"$5> <Button>$6</Button> <Button>$7</Button> $8 </ButtonGroup> <ButtonGroup orientation="vertical" variant="${1|text,contained,outlined|}" color="${2|primary,secondary,inherit,success,error,info,warning|}" aria-label="$3"$4> <Button>$5</Button> <Button>$6</Button> $7 </ButtonGroup> <Button variant="${1|text,contained,outlined|}" color="${2|primary,secondary,inherit,success,error,info,warning|}" size="${3|small,medium,large|}" $4 > $5 </Button> <Button color="${1|primary,secondary,inherit,success,error,info,warning|}" $2 > $3 </Button> <Button variant="${1|text,contained,outlined|}" color="${2|primary,secondary,inherit,success,error,info,warning|}" startIcon={$3} $4 > $5 </Button> <CardHeader${1: avatar={ <Avatar aria-label="$2"$3> $4 </Avatar> \}}${5: action={ <IconButton aria-label="$6"$7> $8 </IconButton> \}}${9: title="$10"}${11: subheader="$12"} $13 /> <CardMedia title="$1" image="$2" /> <FormControlLabel label="$1" control={ <Checkbox value="$2" checked={$3} onChange={$4} color="${5:primary}" /> } /> <FormControlLabel label="$1" control={ <Checkbox value="$2" defaultChecked={$3} color="${4:primary}" /> } /> <FormControlLabel label="$1" labelPlacement="${2|end,start,top,bottom|}" control={ <Checkbox value="$3" checked={$4} onChange={$5} color="${6:primary}" /> } /> <FormControlLabel label="$1" labelPlacement="${2|end,start,top,bottom|}" control={ <Checkbox value="$3" defaultChecked={$4} color="${5:primary}" /> } /> <Container maxWidth="${1|lg,xs,sm,md,xl|}"$2> $3 </Container> <Dialog open={$1} onClose={$2} aria-labelledby={$3}>${4: <DialogTitle id={$3\}> $5 </DialogTitle>}${6: <DialogContent>${7: <DialogContentText> $8 </DialogContentText>} </DialogContent>}${9: <DialogActions> <Button onClick={$10\} color="${11|primary,secondary,inherit,success,error,info,warning|}" >${12: Cancel} </Button> </DialogActions>} </Dialog> <Dialog open={$1} onClose={$2} aria-labelledby="$3"> $4 </Dialog> <Drawer variant="permanent" anchor="${1|left,right,top,bottom|}"$2> $3 </Drawer> <Drawer variant="persistent" anchor="${1|left,right,top,bottom|}" open={$2} $3 > $4 </Drawer> <Drawer variant="temporary" anchor="${1|left,right,top,bottom|}" open={$2} onClose={$3} $4 > $5 </Drawer> endAdornment={ <InputAdornment position="end"> $0 </InputAdornment> } <Fab color="${1|primary,secondary,inherit,success,error,info,warning|}" aria-label="$2" $3 > <$4Icon /> </Fab> <Fab variant="${1|circular,extended|}" color="${2|default,inherit,primary,secondary|}" size="${3|large,medium,small|}" aria-label="$4"$5> <Box marginRight={1}><$6Icon /></Box> $7 </Fab> <FormControl$1> <FormLabel>$2</FormLabel> $0 <FormHelperText>$3</FormHelperText> </FormControl> <FormControl component=${1:"fieldset"}$2> <FormLabel component=${3:"legend"}>$4</FormLabel> <FormGroup> $0 </FormGroup> <FormHelperText>$5</FormHelperText> </FormControl> <Grid container spacing={${1:0}}$2> $3 </Grid> <Grid container spacing={${1:1}}${2: direction="${3|row,row-reverse,column,column-reverse|}"} justifyContent="${4:center}" alignItems="${5:center}" alignContent="${6:center}"${7: wrap="${8|wrap,nowrap,wrap-reverse|}"} $9 > $10 </Grid> <Grid container${1: spacing={${2:1}\}}${3: direction="${4|row,row-reverse,column,column-reverse|}"}${5: justifyContent="${6|flex-start,center,flex-end,space-between,space-around,space-evenly|}"}${7: alignItems="${8|flex-start,center,flex-end,stretch,baseline|}"}${9: alignContent="${10|stretch,center,flex-start,flex-end,space-between,space-around|}"}${11: wrap="${12|wrap,nowrap,wrap-reverse|}"} $13 > $14 </Grid> <IconButton aria-label="$1" onClick={$2}$3> $4 </IconButton> <ImageListTile cols={${1:2}} style={{ height: 'auto' }}> <ListSubheader component="div">$2</ListSubheader> </ImageListTile> <ImageListTileBar${1: title="$2"}${3: subtitle="$4"}${5: actionIcon={ <IconButton aria-label="$6"$7> $8 </IconButton> \}} /> <Menu id="$1" anchorEl={$2} keepMounted open={Boolean($2)} onClose={$3}$4> $5 </Menu> <MenuItem onClick={$1}$2>$3</MenuItem> <Menu id="$1" keepMounted {...bindMenu(${2:popupState})} $3 > $4 </Menu> <FormControl component=${1:"fieldset"}$2> <FormLabel component=${3:"legend"}>$4</FormLabel> <RadioGroup aria-label="$5" name="$6" value={$7} onChange={$8}>$0</RadioGroup> <FormHelperText>$9</FormHelperText> </FormControl> <FormControlLabel value="$1" label="$2" control={<Radio$3 />} /> <FormControlLabel value="$1" label="$2" labelPlacement="${3|end,start,top,bottom|}" control={<Radio$4 />} /> <MenuItem value={$1}$2>$3</MenuItem> <Slider value={$1} onChange={$2} aria-labelledby="$3" min={${4:0}} max={${5:100}} $6 /> <Slider defaultValue={$1} aria-labelledby="$2" min={${3:0}} max={${4:100}} $5 /> <Slider value={$1} onChange={$2} aria-labelledby="$3" step={${4:1}} marks min={${5:0}} max={${6:100}} $7 /> <Slider defaultValue={$1} aria-labelledby="$2" step={${3:1}} marks min={${4:0}} max={${5:100}} $6 /> <Snackbar anchorOrigin={{ vertical: ${1|bottom,top|}, horizontal: ${2|left,center,right|} }} open={$3} onClose={$4} message="$5"${6: action={ <IconButton size="small" aria-label="close" color="inherit" onClick={$4\}> <Close fontSize="small" /> </IconButton> \}} /> <SnackbarContent message="$1" action={$2} /> startAdornment={ <InputAdornment position="start"> $0 </InputAdornment> } <Step key={$1} completed={$2}$3> <StepLabel>$4</StepLabel> </Step> <Step key={$1} completed={$2}$3> <StepLabel>$4</StepLabel> <StepContent> $5 </StepContent> </Step> <Step key={$1} completed={$2}$3> <StepLabel optional={<Typography variant="caption">${4:Optional}</Typography>} > $5 </StepLabel> </Step> <Stepper activeStep={$1}> $2 </Stepper> <SwipeableViews axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'} index={$1} onChangeIndex={$2} $3 > $0 </SwipeableViews> <Switch value="$1" checked={$2} onChange={$3} inputProps={{ "aria-label": '$4' }} $5 /> <Switch value="$1" defaultChecked={$2} inputProps={{ "aria-label": '$3' }} $4 /> <FormControlLabel label="$1" control={ <Switch value="$2" checked={$3} onChange={$4} $5 /> } /> <FormControlLabel label="$1" control={ <Switch value="$2" defaultChecked={$3} $4 /> } /> <FormControlLabel label="$1" labelPlacement="${2|end,start,top,bottom|}" control={ <Switch value="$3" checked={$4} onChange={$5} $6 /> } /> <FormControlLabel label="$1" labelPlacement="${2|end,start,top,bottom|}" control={ <Switch value="$3" defaultChecked={$4} $5 /> } /> <TabPanel value={$1} index={$2} ${3:dir={theme.direction\}}$4> $5 </TabPanel> <AppBar position="static" color="${1|primary,default,inherit,secondary,transparent|}"$2> <Tabs value={$3} onChange={$4} aria-label="$5"$6> $7 </Tabs> </AppBar> <AppBar position="static" color="${1|primary,default,inherit,secondary,transparent|}"$2> <Tabs value={$3} onChange={$4} aria-label="$5" variant="scrollable" scrollButtons="${6:auto}" $7 > $8 </Tabs> </AppBar> <TextField id="$1" label="$2" value={$3} onChange={$4} $5 /> <TextField id="$1" label="$2" defaultValue={$3} $4 /> <TextField id="$1" label="$2"${3: variant="${4|outlined,filled,standard|}"}${5: color="${6|primary,secondary|}"}${7: margin="${8|none,dense,normal|}"}${9: sizes="${10|small,medium|}"} value={$11} onChange={$12} $13 /> <TextField id="$1" label="$2"${3: variant="${4|outlined,filled,standard|}"}${5: color="${6|primary,secondary|}"}${7: margin="${8|none,dense,normal|}"}${9: sizes="${10|small,medium|}"} defaultValue={$11} $12 /> <TextField id="$1" label="$2" select value={$3} onChange={$4} $5 /> <TextField id="$1" label="$2" select defaultValue={$3} $4 /> <TextField id="$1" label="$2" variant="${3|outlined,filled,standard|}" value={$4} onChange={$5} $6 /> <TextField id="$1" label="$2" variant="${3|outlined,filled,standard|}" defaultValue={$4} $5 /> <Tooltip title="$1"$2> $TM_SELECTED_TEXT$0 </Tooltip> <Typography variant="${1|body1,body2,button,caption,h1,h2,h3,h4,h5,h6,inherit,overline,subtitle1,subtitle2|}" ${2:color="${3|initial,inherit,primary,secondary,textPrimary,textSecondary,error|}"}$4>$TM_SELECTED_TEXT$0</Typography>