{"id":23174585,"url":"https://github.com/vscodeshift/mui-snippets","last_synced_at":"2025-08-18T10:31:00.852Z","repository":{"id":40698869,"uuid":"411538682","full_name":"vscodeshift/mui-snippets","owner":"vscodeshift","description":"Code snippets for MUI","archived":false,"fork":false,"pushed_at":"2022-07-24T08:37:12.000Z","size":2317,"stargazers_count":25,"open_issues_count":9,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-03-06T12:17:14.518Z","etag":null,"topics":["material-ui","snippets","vscode"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vscodeshift.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-29T05:13:11.000Z","updated_at":"2023-02-06T23:13:52.000Z","dependencies_parsed_at":"2022-08-10T00:40:58.090Z","dependency_job_id":null,"html_url":"https://github.com/vscodeshift/mui-snippets","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fmui-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fmui-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fmui-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fmui-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vscodeshift","download_url":"https://codeload.github.com/vscodeshift/mui-snippets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230223257,"owners_count":18192730,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["material-ui","snippets","vscode"],"created_at":"2024-12-18T05:30:17.374Z","updated_at":"2024-12-18T05:30:37.499Z","avatar_url":"https://github.com/vscodeshift.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Snippets for MUI\n\n![demo](/docs/snippet.gif?raw=true)\n\n[![CircleCI](https://circleci.com/gh/vscodeshift/mui-snippets.svg?style=svg)](https://circleci.com/gh/vscodeshift/mui-snippets)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/vscodeshift.mui-snippets)](https://marketplace.visualstudio.com/items?itemName=vscodeshift.mui-snippets)\n\n**Note:** There are two ways to insert these:\n\n- **Trigger Suggest** (\u003ckbd\u003e⌃\u003c/kbd\u003e\u003ckbd\u003eSpace\u003c/kbd\u003e on macOS) and then type in the name; or you can\n  enable the **Editor: Tab Completion** setting, then type the name of the\n  snippet and press \u003ckbd\u003eTab\u003c/kbd\u003e.\n- Execute the corresponding **editor commands** like `MUI: insert \u003cButton\u003e` (or even better, make keybindings for them!).\n\n**Performance Warning:** Currently, the suggestions can cause performance issues due to VSCode API limitations.\nAfter the API is improved in an upcoming release I can fix these performance issues. Until then, the workaround\nis to either disable adding automatic imports for snippets (**Settings \u0026gt; Extensions \u0026gt; MUI Snippets \u0026gt; Add Completion Imports**)\nor use the commands to insert snippets instead of suggestions.\n\n# Features\n\n- Works in JS/X and TSX\n- Automatically adds missing imports when a snippet is inserted (as long as it succeeds in parsing the entire file)\n- You can configure whether to use controlled or uncontrolled form controls in the extension settings.\n\n# Using Material-UI v4?\n\nFor Material-UI v4 you'll need [`material-ui-snippets`](https://github.com/vscodeshift/material-ui-snippets) instead. This extension is for MUI v5.\n\n# Settings\n\n## Form Control Mode\n\n- controlled - inserts `value` and `onChange` properties\n- uncontrolled - inserts `defaultValue` property\n\n## Import Paths\n\n- auto - uses top level if other top level imports are found, second level otherwise\n- top level - `import { Button } from '@mui/material'`\n- second level - `import Button from '@mui/material/Button'`\n\n# Snippets\n\n\u003c!-- snippets --\u003e\n\n- [`muiAccordion`: MUI \u0026lt;Accordion\u0026gt;](#muiaccordion-mui-accordion)\n- [`muiAccordionControlled`: MUI controlled \u0026lt;Accordion\u0026gt;](#muiaccordioncontrolled-mui-controlled-accordion)\n- [`muiAppBar`: MUI \u0026lt;AppBar\u0026gt;](#muiappbar-mui-appbar)\n- [`muiAppBarMenu`: MUI \u0026lt;AppBar\u0026gt; with menu icon](#muiappbarmenu-mui-appbar-with-menu-icon)\n- [`muiBottomNavigation`: MUI \u0026lt;BottomNavigation\u0026gt;](#muibottomnavigation-mui-bottomnavigation)\n- [`muiBottomNavigationAction`: MUI \u0026lt;BottomNavigationAction\u0026gt;](#muibottomnavigationaction-mui-bottomnavigationaction)\n- [`muiButton`: MUI \u0026lt;Button\u0026gt;](#muibutton-mui-button)\n- [`muiButtonGroup`: MUI \u0026lt;ButtonGroup\u0026gt;](#muibuttongroup-mui-buttongroup)\n- [`muiButtonGroupSize`: MUI \u0026lt;ButtonGroup\u0026gt; with size](#muibuttongroupsize-mui-buttongroup-with-size)\n- [`muiButtonGroupVertical`: MUI vertical \u0026lt;ButtonGroup\u0026gt;](#muibuttongroupvertical-mui-vertical-buttongroup)\n- [`muiButtonSize`: MUI \u0026lt;Button\u0026gt; with size](#muibuttonsize-mui-button-with-size)\n- [`muiButtonText`: MUI text \u0026lt;Button\u0026gt;](#muibuttontext-mui-text-button)\n- [`muiButtonWithIcon`: MUI \u0026lt;Button\u0026gt; with icon and label](#muibuttonwithicon-mui-button-with-icon-and-label)\n- [`muiCardHeader`: MUI \u0026lt;CardHeader\u0026gt;](#muicardheader-mui-cardheader)\n- [`muiCardMedia`: MUI \u0026lt;CardMedia\u0026gt;](#muicardmedia-mui-cardmedia)\n- [`muiCheckboxLabel`: MUI \u0026lt;Checkbox\u0026gt; with \u0026lt;FormControlLabel\u0026gt;](#muicheckboxlabel-mui-checkbox-with-formcontrollabel)\n- [`muiCheckboxLabelPlacement`: MUI \u0026lt;Checkbox\u0026gt; with \u0026lt;FormControlLabel\u0026gt;](#muicheckboxlabelplacement-mui-checkbox-with-formcontrollabel)\n- [`muiContainer`: MUI \u0026lt;Container\u0026gt;](#muicontainer-mui-container)\n- [`muiDialog`: MUI \u0026lt;Dialog\u0026gt;](#muidialog-mui-dialog)\n- [`muiDialogSimple`: MUI \u0026lt;Dialog\u0026gt;](#muidialogsimple-mui-dialog)\n- [`muiDrawerPermanent`: MUI permanent \u0026lt;Drawer\u0026gt;](#muidrawerpermanent-mui-permanent-drawer)\n- [`muiDrawerPersistent`: MUI persistent \u0026lt;Drawer\u0026gt;](#muidrawerpersistent-mui-persistent-drawer)\n- [`muiDrawerTemporary`: MUI temporary \u0026lt;Drawer\u0026gt;](#muidrawertemporary-mui-temporary-drawer)\n- [`muiEndAdornment`: MUI end \u0026lt;InputAdornment\u0026gt;](#muiendadornment-mui-end-inputadornment)\n- [`muiFab`: MUI \u0026lt;Fab\u0026gt;](#muifab-mui-fab)\n- [`muiFabExtended`: MUI \u0026lt;Fab variant=\"extended\"\u0026gt;](#muifabextended-mui-fab-variantextended)\n- [`muiFormControl`: MUI \u0026lt;FormControl\u0026gt;](#muiformcontrol-mui-formcontrol)\n- [`muiFormControlGroup`: MUI \u0026lt;FormControl\u0026gt; with \u0026lt;FormGroup\u0026gt;](#muiformcontrolgroup-mui-formcontrol-with-formgroup)\n- [`muiGridContainer`: MUI \u0026lt;Grid container\u0026gt;](#muigridcontainer-mui-grid-container)\n- [`muiGridContainerCenter`: MUI \u0026lt;Grid container\u0026gt; with centering](#muigridcontainercenter-mui-grid-container-with-centering)\n- [`muiGridContainerFull`: MUI \u0026lt;Grid container\u0026gt; with all props](#muigridcontainerfull-mui-grid-container-with-all-props)\n- [`muiIconButton`: MUI \u0026lt;IconButton\u0026gt;](#muiiconbutton-mui-iconbutton)\n- [`muiImageListSubheader`: MUI \u0026lt;ImageList\u0026gt; subheader](#muiimagelistsubheader-mui-imagelist-subheader)\n- [`muiImageListTilebar`: MUI \u0026lt;ImageListTileBar\u0026gt;](#muiimagelisttilebar-mui-imagelisttilebar)\n- [`muiMenu`: MUI \u0026lt;Menu\u0026gt;](#muimenu-mui-menu)\n- [`muiMenuItem`: MUI \u0026lt;MenuItem\u0026gt;](#muimenuitem-mui-menuitem)\n- [`muiMenuPopupState`: MUI \u0026lt;Menu\u0026gt; for material-ui-popup-state](#muimenupopupstate-mui-menu-for-material-ui-popup-state)\n- [`muiRadioGroup`: MUI \u0026lt;FormControl\u0026gt; with \u0026lt;RadioGroup\u0026gt;](#muiradiogroup-mui-formcontrol-with-radiogroup)\n- [`muiRadioLabel`: MUI \u0026lt;Radio\u0026gt; with \u0026lt;FormControlLabel\u0026gt;](#muiradiolabel-mui-radio-with-formcontrollabel)\n- [`muiRadioLabelPlacement`: MUI \u0026lt;Radio\u0026gt; with \u0026lt;FormControlLabel\u0026gt; with labelPlacement](#muiradiolabelplacement-mui-radio-with-formcontrollabel-with-labelplacement)\n- [`muiSelectItem`: MUI \u0026lt;MenuItem\u0026gt; inside \u0026lt;Select\u0026gt;](#muiselectitem-mui-menuitem-inside-select)\n- [`muiSliderContinuous`: MUI \u0026lt;Slider\u0026gt; with continuous values](#muislidercontinuous-mui-slider-with-continuous-values)\n- [`muiSliderDiscrete`: MUI \u0026lt;Slider\u0026gt; with discrete values](#muisliderdiscrete-mui-slider-with-discrete-values)\n- [`muiSnackbar`: MUI \u0026lt;Snackbar\u0026gt;](#muisnackbar-mui-snackbar)\n- [`muiSnackbarContent`: MUI \u0026lt;SnackbarContent\u0026gt;](#muisnackbarcontent-mui-snackbarcontent)\n- [`muiStartAdornment`: MUI start \u0026lt;InputAdornment\u0026gt;](#muistartadornment-mui-start-inputadornment)\n- [`muiStep`: MUI \u0026lt;Step\u0026gt;](#muistep-mui-step)\n- [`muiStepContent`: MUI \u0026lt;Step\u0026gt; with \u0026lt;StepContent\u0026gt;](#muistepcontent-mui-step-with-stepcontent)\n- [`muiStepOptional`: MUI optional \u0026lt;Step\u0026gt;](#muistepoptional-mui-optional-step)\n- [`muiStepper`: MUI \u0026lt;Stepper\u0026gt;](#muistepper-mui-stepper)\n- [`muiSwipeableViews`: MUI \u0026lt;SwipeableViews\u0026gt;](#muiswipeableviews-mui-swipeableviews)\n- [`muiSwitch`: MUI \u0026lt;Switch\u0026gt;](#muiswitch-mui-switch)\n- [`muiSwitchLabel`: MUI \u0026lt;Switch\u0026gt; with \u0026lt;FormControlLabel\u0026gt;](#muiswitchlabel-mui-switch-with-formcontrollabel)\n- [`muiSwitchLabelPlacement`: MUI \u0026lt;Switch\u0026gt; with \u0026lt;FormControlLabel\u0026gt; with labelPlacement](#muiswitchlabelplacement-mui-switch-with-formcontrollabel-with-labelplacement)\n- [`muiTabPanel`: MUI \u0026lt;TabPanel\u0026gt;](#muitabpanel-mui-tabpanel)\n- [`muiTabs`: MUI \u0026lt;Tabs\u0026gt;](#muitabs-mui-tabs)\n- [`muiTabsScrollable`: MUI scrollable \u0026lt;Tabs\u0026gt;](#muitabsscrollable-mui-scrollable-tabs)\n- [`muiTextField`: MUI \u0026lt;TextField\u0026gt;](#muitextfield-mui-textfield)\n- [`muiTextFieldMore`: MUI \u0026lt;TextField\u0026gt; with more props](#muitextfieldmore-mui-textfield-with-more-props)\n- [`muiTextFieldSelect`: MUI \u0026lt;TextField select\u0026gt;](#muitextfieldselect-mui-textfield-select)\n- [`muiTextFieldVariant`: MUI \u0026lt;TextField\u0026gt; with variant](#muitextfieldvariant-mui-textfield-with-variant)\n- [`muiTooltip`: MUI \u0026lt;Tooltip\u0026gt;](#muitooltip-mui-tooltip)\n- [`muiTypography`: MUI \u0026lt;Typography\u0026gt;](#muitypography-mui-typography)\n\n### `muiAccordion`: MUI \u0026lt;Accordion\u0026gt;\n\n```\n\u003cAccordion\u003e\n  \u003cAccordionSummary\n    expandIcon={\u003cExpandMoreIcon /\u003e}\n    aria-label=\"${1:Expand}\"\n    aria-controls=\"$2-content\"\n    id=\"$2-header\"\n  \u003e\n    \u003cTypography$3\u003e$4\u003c/Typography\u003e\n  \u003c/AccordionSummary\u003e\n  \u003cAccordionDetails\u003e$5\u003c/AccordionDetails\u003e\n\u003c/Accordion\u003e\n```\n\n### `muiAccordionControlled`: MUI controlled \u0026lt;Accordion\u0026gt;\n\n```\n\u003cAccordion expanded={$1} onChange={$2}\u003e\n  \u003cAccordionSummary\n    expandIcon={\u003cExpandMore /\u003e}\n    aria-label=\"${3:Expand}\"\n    aria-controls=\"$4-content\"\n    id=\"$4-header\"\n  \u003e\n    \u003cTypography$5\u003e$6\u003c/Typography\u003e\n  \u003c/AccordionSummary\u003e\n  \u003cAccordionDetails\u003e$7\u003c/AccordionDetails\u003e\n\u003c/Accordion\u003e\n```\n\n### `muiAppBar`: MUI \u0026lt;AppBar\u0026gt;\n\n```\n\u003cAppBar position=\"${1|fixed,absolute,relative,static,sticky|}\" color=\"${2|primary,default,inherit,secondary,transparent|}\"\u003e\n  \u003cToolbar$3\u003e\n    \u003cTypography variant=\"h6\"$4\u003e\n      $5\n    \u003c/Typography\u003e\n  \u003c/Toolbar\u003e\n\u003c/AppBar\u003e\n```\n\n### `muiAppBarMenu`: MUI \u0026lt;AppBar\u0026gt; with menu icon\n\n```\n\u003cAppBar position=\"${1|fixed,absolute,relative,static,sticky|}\" color=\"${2|primary,default,inherit,secondary,transparent|}\"\u003e\n  \u003cToolbar$3\u003e\n    \u003cIconButton edge=\"start\" color=\"inherit\" aria-label=\"menu\"\u003e\n      \u003cMenu /\u003e\n    \u003c/IconButton\u003e\n    \u003cTypography variant=\"h6\"$4\u003e\n      $5\n    \u003c/Typography\u003e\n  \u003c/Toolbar\u003e\n\u003c/AppBar\u003e\n```\n\n### `muiBottomNavigation`: MUI \u0026lt;BottomNavigation\u0026gt;\n\n```\n\u003cBottomNavigation value={$1} onChange={$2}$3\u003e\n  $4\n\u003c/BottomNavigation\u003e\n```\n\n### `muiBottomNavigationAction`: MUI \u0026lt;BottomNavigationAction\u0026gt;\n\n```\n\u003cBottomNavigationAction label=\"$1\" value={$2} icon={$3}$4 /\u003e\n```\n\n### `muiButton`: MUI \u0026lt;Button\u0026gt;\n\n```\n\u003cButton variant=\"${1|text,contained,outlined|}\" color=\"${2|primary,secondary,inherit,success,error,info,warning|}\"$3\u003e\n  $4\n\u003c/Button\u003e\n```\n\n### `muiButtonGroup`: MUI \u0026lt;ButtonGroup\u0026gt;\n\n```\n\u003cButtonGroup variant=\"${1|text,contained,outlined|}\" color=\"${2|primary,secondary,inherit,success,error,info,warning|}\" aria-label=\"$3\"$4\u003e\n  \u003cButton\u003e$5\u003c/Button\u003e\n  \u003cButton\u003e$6\u003c/Button\u003e\n  $7\n\u003c/ButtonGroup\u003e\n```\n\n### `muiButtonGroupSize`: MUI \u0026lt;ButtonGroup\u0026gt; with size\n\n```\n\u003cButtonGroup variant=\"${1|text,contained,outlined|}\" color=\"${2|primary,secondary,inherit,success,error,info,warning|}\" size=\"${3|small,medium,large|}\" aria-label=\"$4\"$5\u003e\n  \u003cButton\u003e$6\u003c/Button\u003e\n  \u003cButton\u003e$7\u003c/Button\u003e\n  $8\n\u003c/ButtonGroup\u003e\n```\n\n### `muiButtonGroupVertical`: MUI vertical \u0026lt;ButtonGroup\u0026gt;\n\n```\n\u003cButtonGroup orientation=\"vertical\" variant=\"${1|text,contained,outlined|}\" color=\"${2|primary,secondary,inherit,success,error,info,warning|}\" aria-label=\"$3\"$4\u003e\n  \u003cButton\u003e$5\u003c/Button\u003e\n  \u003cButton\u003e$6\u003c/Button\u003e\n  $7\n\u003c/ButtonGroup\u003e\n```\n\n### `muiButtonSize`: MUI \u0026lt;Button\u0026gt; with size\n\n```\n\u003cButton\n  variant=\"${1|text,contained,outlined|}\"\n  color=\"${2|primary,secondary,inherit,success,error,info,warning|}\"\n  size=\"${3|small,medium,large|}\"\n  $4\n\u003e\n  $5\n\u003c/Button\u003e\n```\n\n### `muiButtonText`: MUI text \u0026lt;Button\u0026gt;\n\n```\n\u003cButton\n  color=\"${1|primary,secondary,inherit,success,error,info,warning|}\"\n  $2\n\u003e\n  $3\n\u003c/Button\u003e\n```\n\n### `muiButtonWithIcon`: MUI \u0026lt;Button\u0026gt; with icon and label\n\n```\n\u003cButton\n  variant=\"${1|text,contained,outlined|}\"\n  color=\"${2|primary,secondary,inherit,success,error,info,warning|}\"\n  startIcon={$3}\n  $4\n\u003e\n  $5\n\u003c/Button\u003e\n```\n\n### `muiCardHeader`: MUI \u0026lt;CardHeader\u0026gt;\n\n```\n\u003cCardHeader${1:\n  avatar={\n    \u003cAvatar aria-label=\"$2\"$3\u003e\n      $4\n    \u003c/Avatar\u003e\n  \\}}${5:\n  action={\n    \u003cIconButton aria-label=\"$6\"$7\u003e\n      $8\n    \u003c/IconButton\u003e\n  \\}}${9:\n  title=\"$10\"}${11:\n  subheader=\"$12\"}\n  $13\n/\u003e\n```\n\n### `muiCardMedia`: MUI \u0026lt;CardMedia\u0026gt;\n\n```\n\u003cCardMedia title=\"$1\" image=\"$2\" /\u003e\n```\n\n### `muiCheckboxLabel`: MUI \u0026lt;Checkbox\u0026gt; with \u0026lt;FormControlLabel\u0026gt;\n\n#### Controlled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  control={\n    \u003cCheckbox\n      value=\"$2\"\n      checked={$3}\n      onChange={$4}\n      color=\"${5:primary}\"\n    /\u003e\n  }\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  control={\n    \u003cCheckbox\n      value=\"$2\"\n      defaultChecked={$3}\n      color=\"${4:primary}\"\n    /\u003e\n  }\n/\u003e\n```\n\n### `muiCheckboxLabelPlacement`: MUI \u0026lt;Checkbox\u0026gt; with \u0026lt;FormControlLabel\u0026gt;\n\n#### Controlled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  labelPlacement=\"${2|end,start,top,bottom|}\"\n  control={\n    \u003cCheckbox\n      value=\"$3\"\n      checked={$4}\n      onChange={$5}\n      color=\"${6:primary}\"\n    /\u003e\n  }\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  labelPlacement=\"${2|end,start,top,bottom|}\"\n  control={\n    \u003cCheckbox\n      value=\"$3\"\n      defaultChecked={$4}\n      color=\"${5:primary}\"\n    /\u003e\n  }\n/\u003e\n```\n\n### `muiContainer`: MUI \u0026lt;Container\u0026gt;\n\n```\n\u003cContainer maxWidth=\"${1|lg,xs,sm,md,xl|}\"$2\u003e\n  $3\n\u003c/Container\u003e\n```\n\n### `muiDialog`: MUI \u0026lt;Dialog\u0026gt;\n\n```\n\u003cDialog open={$1} onClose={$2} aria-labelledby={$3}\u003e${4:\n  \u003cDialogTitle id={$3\\}\u003e\n    $5\n  \u003c/DialogTitle\u003e}${6:\n  \u003cDialogContent\u003e${7:\n    \u003cDialogContentText\u003e\n      $8\n    \u003c/DialogContentText\u003e}\n  \u003c/DialogContent\u003e}${9:\n  \u003cDialogActions\u003e\n    \u003cButton\n      onClick={$10\\}\n      color=\"${11|primary,secondary,inherit,success,error,info,warning|}\"\n    \u003e${12:\n      Cancel}\n    \u003c/Button\u003e\n  \u003c/DialogActions\u003e}\n\u003c/Dialog\u003e\n```\n\n### `muiDialogSimple`: MUI \u0026lt;Dialog\u0026gt;\n\n```\n\u003cDialog open={$1} onClose={$2} aria-labelledby=\"$3\"\u003e\n  $4\n\u003c/Dialog\u003e\n```\n\n### `muiDrawerPermanent`: MUI permanent \u0026lt;Drawer\u0026gt;\n\n```\n\u003cDrawer variant=\"permanent\" anchor=\"${1|left,right,top,bottom|}\"$2\u003e\n  $3\n\u003c/Drawer\u003e\n```\n\n### `muiDrawerPersistent`: MUI persistent \u0026lt;Drawer\u0026gt;\n\n```\n\u003cDrawer\n  variant=\"persistent\"\n  anchor=\"${1|left,right,top,bottom|}\"\n  open={$2}\n  $3\n\u003e\n  $4\n\u003c/Drawer\u003e\n```\n\n### `muiDrawerTemporary`: MUI temporary \u0026lt;Drawer\u0026gt;\n\n```\n\u003cDrawer\n  variant=\"temporary\"\n  anchor=\"${1|left,right,top,bottom|}\"\n  open={$2}\n  onClose={$3}\n  $4\n\u003e\n  $5\n\u003c/Drawer\u003e\n```\n\n### `muiEndAdornment`: MUI end \u0026lt;InputAdornment\u0026gt;\n\n```\n\nendAdornment={\n  \u003cInputAdornment position=\"end\"\u003e\n    $0\n  \u003c/InputAdornment\u003e\n}\n\n```\n\n### `muiFab`: MUI \u0026lt;Fab\u0026gt;\n\n```\n\u003cFab\n  color=\"${1|primary,secondary,inherit,success,error,info,warning|}\"\n  aria-label=\"$2\"\n  $3\n\u003e\n  \u003c$4Icon /\u003e\n\u003c/Fab\u003e\n```\n\n### `muiFabExtended`: MUI \u0026lt;Fab variant=\"extended\"\u0026gt;\n\n```\n\u003cFab variant=\"${1|circular,extended|}\" color=\"${2|default,inherit,primary,secondary|}\" size=\"${3|large,medium,small|}\" aria-label=\"$4\"$5\u003e\n  \u003cBox marginRight={1}\u003e\u003c$6Icon /\u003e\u003c/Box\u003e\n  $7\n\u003c/Fab\u003e\n```\n\n### `muiFormControl`: MUI \u0026lt;FormControl\u0026gt;\n\n```\n\u003cFormControl$1\u003e\n  \u003cFormLabel\u003e$2\u003c/FormLabel\u003e\n  $0\n  \u003cFormHelperText\u003e$3\u003c/FormHelperText\u003e\n\u003c/FormControl\u003e\n```\n\n### `muiFormControlGroup`: MUI \u0026lt;FormControl\u0026gt; with \u0026lt;FormGroup\u0026gt;\n\n```\n\u003cFormControl component=${1:\"fieldset\"}$2\u003e\n  \u003cFormLabel component=${3:\"legend\"}\u003e$4\u003c/FormLabel\u003e\n  \u003cFormGroup\u003e\n    $0\n  \u003c/FormGroup\u003e\n  \u003cFormHelperText\u003e$5\u003c/FormHelperText\u003e\n\u003c/FormControl\u003e\n```\n\n### `muiGridContainer`: MUI \u0026lt;Grid container\u0026gt;\n\n```\n\u003cGrid container spacing={${1:0}}$2\u003e\n  $3\n\u003c/Grid\u003e\n```\n\n### `muiGridContainerCenter`: MUI \u0026lt;Grid container\u0026gt; with centering\n\n```\n\u003cGrid\n  container\n  spacing={${1:1}}${2:\n  direction=\"${3|row,row-reverse,column,column-reverse|}\"}\n  justifyContent=\"${4:center}\"\n  alignItems=\"${5:center}\"\n  alignContent=\"${6:center}\"${7:\n  wrap=\"${8|wrap,nowrap,wrap-reverse|}\"}\n  $9\n\u003e\n  $10\n\u003c/Grid\u003e\n```\n\n### `muiGridContainerFull`: MUI \u0026lt;Grid container\u0026gt; with all props\n\n```\n\u003cGrid\n  container${1:\n  spacing={${2:1}\\}}${3:\n  direction=\"${4|row,row-reverse,column,column-reverse|}\"}${5:\n  justifyContent=\"${6|flex-start,center,flex-end,space-between,space-around,space-evenly|}\"}${7:\n  alignItems=\"${8|flex-start,center,flex-end,stretch,baseline|}\"}${9:\n  alignContent=\"${10|stretch,center,flex-start,flex-end,space-between,space-around|}\"}${11:\n  wrap=\"${12|wrap,nowrap,wrap-reverse|}\"}\n  $13\n\u003e\n  $14\n\u003c/Grid\u003e\n```\n\n### `muiIconButton`: MUI \u0026lt;IconButton\u0026gt;\n\n```\n\u003cIconButton aria-label=\"$1\" onClick={$2}$3\u003e\n  $4\n\u003c/IconButton\u003e\n```\n\n### `muiImageListSubheader`: MUI \u0026lt;ImageList\u0026gt; subheader\n\n```\n\u003cImageListTile cols={${1:2}} style={{ height: 'auto' }}\u003e\n  \u003cListSubheader component=\"div\"\u003e$2\u003c/ListSubheader\u003e\n\u003c/ImageListTile\u003e\n```\n\n### `muiImageListTilebar`: MUI \u0026lt;ImageListTileBar\u0026gt;\n\n```\n\u003cImageListTileBar${1:\n  title=\"$2\"}${3:\n  subtitle=\"$4\"}${5:\n  actionIcon={\n    \u003cIconButton aria-label=\"$6\"$7\u003e\n      $8\n    \u003c/IconButton\u003e\n  \\}}\n/\u003e\n```\n\n### `muiMenu`: MUI \u0026lt;Menu\u0026gt;\n\n```\n\u003cMenu id=\"$1\" anchorEl={$2} keepMounted open={Boolean($2)} onClose={$3}$4\u003e\n  $5\n\u003c/Menu\u003e\n```\n\n### `muiMenuItem`: MUI \u0026lt;MenuItem\u0026gt;\n\n```\n\u003cMenuItem onClick={$1}$2\u003e$3\u003c/MenuItem\u003e\n```\n\n### `muiMenuPopupState`: MUI \u0026lt;Menu\u0026gt; for material-ui-popup-state\n\n```\n\u003cMenu\n  id=\"$1\"\n  keepMounted\n  {...bindMenu(${2:popupState})}\n  $3\n\u003e\n  $4\n\u003c/Menu\u003e\n```\n\n### `muiRadioGroup`: MUI \u0026lt;FormControl\u0026gt; with \u0026lt;RadioGroup\u0026gt;\n\n```\n\u003cFormControl component=${1:\"fieldset\"}$2\u003e\n  \u003cFormLabel component=${3:\"legend\"}\u003e$4\u003c/FormLabel\u003e\n  \u003cRadioGroup aria-label=\"$5\" name=\"$6\" value={$7} onChange={$8}\u003e$0\u003c/RadioGroup\u003e\n  \u003cFormHelperText\u003e$9\u003c/FormHelperText\u003e\n\u003c/FormControl\u003e\n```\n\n### `muiRadioLabel`: MUI \u0026lt;Radio\u0026gt; with \u0026lt;FormControlLabel\u0026gt;\n\n```\n\u003cFormControlLabel value=\"$1\" label=\"$2\" control={\u003cRadio$3 /\u003e} /\u003e\n```\n\n### `muiRadioLabelPlacement`: MUI \u0026lt;Radio\u0026gt; with \u0026lt;FormControlLabel\u0026gt; with labelPlacement\n\n```\n\u003cFormControlLabel\n  value=\"$1\"\n  label=\"$2\"\n  labelPlacement=\"${3|end,start,top,bottom|}\"\n  control={\u003cRadio$4 /\u003e}\n/\u003e\n```\n\n### `muiSelectItem`: MUI \u0026lt;MenuItem\u0026gt; inside \u0026lt;Select\u0026gt;\n\n```\n\u003cMenuItem value={$1}$2\u003e$3\u003c/MenuItem\u003e\n```\n\n### `muiSliderContinuous`: MUI \u0026lt;Slider\u0026gt; with continuous values\n\n#### Controlled\n\n```\n\u003cSlider\n  value={$1}\n  onChange={$2}\n  aria-labelledby=\"$3\"\n  min={${4:0}}\n  max={${5:100}}\n  $6\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cSlider\n  defaultValue={$1}\n  aria-labelledby=\"$2\"\n  min={${3:0}}\n  max={${4:100}}\n  $5\n/\u003e\n```\n\n### `muiSliderDiscrete`: MUI \u0026lt;Slider\u0026gt; with discrete values\n\n#### Controlled\n\n```\n\u003cSlider\n  value={$1}\n  onChange={$2}\n  aria-labelledby=\"$3\"\n  step={${4:1}}\n  marks\n  min={${5:0}}\n  max={${6:100}}\n  $7\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cSlider\n  defaultValue={$1}\n  aria-labelledby=\"$2\"\n  step={${3:1}}\n  marks\n  min={${4:0}}\n  max={${5:100}}\n  $6\n/\u003e\n```\n\n### `muiSnackbar`: MUI \u0026lt;Snackbar\u0026gt;\n\n```\n\u003cSnackbar\n  anchorOrigin={{ vertical: ${1|bottom,top|}, horizontal: ${2|left,center,right|} }}\n  open={$3}\n  onClose={$4}\n  message=\"$5\"${6:\n  action={\n    \u003cIconButton size=\"small\" aria-label=\"close\" color=\"inherit\" onClick={$4\\}\u003e\n      \u003cClose fontSize=\"small\" /\u003e\n    \u003c/IconButton\u003e\n  \\}}\n/\u003e\n```\n\n### `muiSnackbarContent`: MUI \u0026lt;SnackbarContent\u0026gt;\n\n```\n\u003cSnackbarContent message=\"$1\" action={$2} /\u003e\n```\n\n### `muiStartAdornment`: MUI start \u0026lt;InputAdornment\u0026gt;\n\n```\n\nstartAdornment={\n  \u003cInputAdornment position=\"start\"\u003e\n    $0\n  \u003c/InputAdornment\u003e\n}\n\n```\n\n### `muiStep`: MUI \u0026lt;Step\u0026gt;\n\n```\n\u003cStep key={$1} completed={$2}$3\u003e\n  \u003cStepLabel\u003e$4\u003c/StepLabel\u003e\n\u003c/Step\u003e\n```\n\n### `muiStepContent`: MUI \u0026lt;Step\u0026gt; with \u0026lt;StepContent\u0026gt;\n\n```\n\u003cStep key={$1} completed={$2}$3\u003e\n  \u003cStepLabel\u003e$4\u003c/StepLabel\u003e\n  \u003cStepContent\u003e\n    $5\n  \u003c/StepContent\u003e\n\u003c/Step\u003e\n```\n\n### `muiStepOptional`: MUI optional \u0026lt;Step\u0026gt;\n\n```\n\u003cStep key={$1} completed={$2}$3\u003e\n  \u003cStepLabel\n    optional={\u003cTypography variant=\"caption\"\u003e${4:Optional}\u003c/Typography\u003e}\n  \u003e\n    $5\n  \u003c/StepLabel\u003e\n\u003c/Step\u003e\n```\n\n### `muiStepper`: MUI \u0026lt;Stepper\u0026gt;\n\n```\n\u003cStepper activeStep={$1}\u003e\n  $2\n\u003c/Stepper\u003e\n```\n\n### `muiSwipeableViews`: MUI \u0026lt;SwipeableViews\u0026gt;\n\n```\n\u003cSwipeableViews\n  axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}\n  index={$1}\n  onChangeIndex={$2}\n  $3\n\u003e\n  $0\n\u003c/SwipeableViews\u003e\n```\n\n### `muiSwitch`: MUI \u0026lt;Switch\u0026gt;\n\n#### Controlled\n\n```\n\u003cSwitch\n  value=\"$1\"\n  checked={$2}\n  onChange={$3}\n  inputProps={{ \"aria-label\": '$4' }}\n  $5\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cSwitch\n  value=\"$1\"\n  defaultChecked={$2}\n  inputProps={{ \"aria-label\": '$3' }}\n  $4\n/\u003e\n```\n\n### `muiSwitchLabel`: MUI \u0026lt;Switch\u0026gt; with \u0026lt;FormControlLabel\u0026gt;\n\n#### Controlled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  control={\n    \u003cSwitch\n      value=\"$2\"\n      checked={$3}\n      onChange={$4}\n      $5\n    /\u003e\n  }\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  control={\n    \u003cSwitch\n      value=\"$2\"\n      defaultChecked={$3}\n      $4\n    /\u003e\n  }\n/\u003e\n```\n\n### `muiSwitchLabelPlacement`: MUI \u0026lt;Switch\u0026gt; with \u0026lt;FormControlLabel\u0026gt; with labelPlacement\n\n#### Controlled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  labelPlacement=\"${2|end,start,top,bottom|}\"\n  control={\n    \u003cSwitch\n      value=\"$3\"\n      checked={$4}\n      onChange={$5}\n      $6\n    /\u003e\n  }\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  labelPlacement=\"${2|end,start,top,bottom|}\"\n  control={\n    \u003cSwitch\n      value=\"$3\"\n      defaultChecked={$4}\n      $5\n    /\u003e\n  }\n/\u003e\n```\n\n### `muiTabPanel`: MUI \u0026lt;TabPanel\u0026gt;\n\n```\n\u003cTabPanel value={$1} index={$2} ${3:dir={theme.direction\\}}$4\u003e\n  $5\n\u003c/TabPanel\u003e\n```\n\n### `muiTabs`: MUI \u0026lt;Tabs\u0026gt;\n\n```\n\u003cAppBar position=\"static\" color=\"${1|primary,default,inherit,secondary,transparent|}\"$2\u003e\n  \u003cTabs value={$3} onChange={$4} aria-label=\"$5\"$6\u003e\n    $7\n  \u003c/Tabs\u003e\n\u003c/AppBar\u003e\n```\n\n### `muiTabsScrollable`: MUI scrollable \u0026lt;Tabs\u0026gt;\n\n```\n\u003cAppBar position=\"static\" color=\"${1|primary,default,inherit,secondary,transparent|}\"$2\u003e\n  \u003cTabs\n    value={$3}\n    onChange={$4}\n    aria-label=\"$5\"\n    variant=\"scrollable\"\n    scrollButtons=\"${6:auto}\"\n    $7\n  \u003e\n    $8\n  \u003c/Tabs\u003e\n\u003c/AppBar\u003e\n```\n\n### `muiTextField`: MUI \u0026lt;TextField\u0026gt;\n\n#### Controlled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"\n  value={$3}\n  onChange={$4}\n  $5\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"\n  defaultValue={$3}\n  $4\n/\u003e\n```\n\n### `muiTextFieldMore`: MUI \u0026lt;TextField\u0026gt; with more props\n\n#### Controlled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"${3:\n  variant=\"${4|outlined,filled,standard|}\"}${5:\n  color=\"${6|primary,secondary|}\"}${7:\n  margin=\"${8|none,dense,normal|}\"}${9:\n  sizes=\"${10|small,medium|}\"}\n  value={$11}\n  onChange={$12}\n  $13\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"${3:\n  variant=\"${4|outlined,filled,standard|}\"}${5:\n  color=\"${6|primary,secondary|}\"}${7:\n  margin=\"${8|none,dense,normal|}\"}${9:\n  sizes=\"${10|small,medium|}\"}\n  defaultValue={$11}\n  $12\n/\u003e\n```\n\n### `muiTextFieldSelect`: MUI \u0026lt;TextField select\u0026gt;\n\n#### Controlled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"\n  select\n  value={$3}\n  onChange={$4}\n  $5\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"\n  select\n  defaultValue={$3}\n  $4\n/\u003e\n```\n\n### `muiTextFieldVariant`: MUI \u0026lt;TextField\u0026gt; with variant\n\n#### Controlled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"\n  variant=\"${3|outlined,filled,standard|}\"\n  value={$4}\n  onChange={$5}\n  $6\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"\n  variant=\"${3|outlined,filled,standard|}\"\n  defaultValue={$4}\n  $5\n/\u003e\n```\n\n### `muiTooltip`: MUI \u0026lt;Tooltip\u0026gt;\n\n```\n\u003cTooltip title=\"$1\"$2\u003e\n  $TM_SELECTED_TEXT$0\n\u003c/Tooltip\u003e\n```\n\n### `muiTypography`: MUI \u0026lt;Typography\u0026gt;\n\n```\n\u003cTypography 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\u003e$TM_SELECTED_TEXT$0\u003c/Typography\u003e\n```\n\n\u003c!-- snippetsend --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvscodeshift%2Fmui-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvscodeshift%2Fmui-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvscodeshift%2Fmui-snippets/lists"}