# Source: https://mui.com/material-ui/getting-started/supported-components.md

# Supported components

The following is a list of Material Design components & features.

While we strive to follow the Material Design guidelines where practical (applying
common sense where guidelines contradict - a more common occurrence than
one might expect), we do not expect to support every component, nor every
feature of every component, but rather to provide the building blocks to
allow developers to create compelling user interfaces and experiences.

If you wish to add support for a component or feature not highlighted
here, please search for the relevant [GitHub Issue](https://github.com/mui/material-ui/issues?q=is%3Aopen+is%3Aclosed), or create a new one
to discuss the approach before submitting a pull request.

```jsx
import Table from '@mui/material/Table';
import TableHead from '@mui/material/TableHead';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import { Link } from '@mui/docs/Link';

const components = [
  {
    name: 'Accordion',
    materialUI: '/material-ui/react-accordion/',
    materialDesign: 'https://m1.material.io/components/expansion-panels.html',
  },
  { name: 'Alert', materialUI: '/material-ui/react-alert' },
  {
    name: 'App Bar: top',
    materialUI: '/material-ui/react-app-bar/',
    materialDesign: 'https://m2.material.io/components/app-bars-top',
  },
  {
    name: 'App Bar: bottom',
    materialUI: '/material-ui/react-app-bar#bottom-app-bar',
    materialDesign: 'https://m2.material.io/components/app-bars-bottom',
  },
  { name: 'Autocomplete', materialUI: '/material-ui/react-autocomplete' },
  {
    name: 'Banner',
    materialUI: 'Composable',
    materialDesign: 'https://m2.material.io/components/banners',
  },
  { name: 'Avatar', materialUI: '/material-ui/react-avatar' },
  { name: 'Badge', materialUI: '/material-ui/react-badge' },
  {
    name: 'Bottom Navigation',
    materialUI: '/material-ui/react-bottom-navigation/',
    materialDesign: 'https://m2.material.io/components/bottom-navigation',
  },
  { name: 'Breadcrumbs', materialUI: '/material-ui/react-breadcrumbs' },
  {
    name: 'Button',
    materialUI: '/material-ui/react-button/',
    materialDesign: 'https://m2.material.io/components/buttons',
  },
  {
    name: 'Floating Action Button',
    materialDesign:
      'https://m2.material.io/components/buttons-floating-action-button',
    materialUI: '/material-ui/react-floating-action-button',
  },
  { name: 'Button Group', materialUI: '/material-ui/react-button-group' },
  {
    name: 'Card',
    materialUI: '/material-ui/react-card/',
    materialDesign: 'https://m2.material.io/components/cards',
  },
  {
    name: 'Checkbox',
    materialUI: '/material-ui/react-checkbox/',
    materialDesign: 'https://m2.material.io/components/checkboxes',
  },
  {
    name: 'Chip',
    materialUI: '/material-ui/react-chip/',
    materialDesign: 'https://m2.material.io/components/chips',
  },
  {
    name: 'Data Grid',
    materialUI: '/x/react-data-grid/',
    materialDesign: 'https://m2.material.io/components/data-tables',
  },
  {
    name: 'Date Pickers',
    materialUI: '/x/react-date-pickers/',
    materialDesign: 'https://m2.material.io/components/date-pickers',
  },
  {
    name: 'Dialog',
    materialUI: '/material-ui/react-dialog/',
    materialDesign: 'https://m2.material.io/components/dialogs',
  },
  {
    name: 'Divider',
    materialUI: '/material-ui/react-divider/',
    materialDesign: 'https://m2.material.io/components/dividers',
  },
  {
    name: 'Drawer',
    materialUI: '/material-ui/react-drawer/',
    materialDesign: 'https://m2.material.io/components/navigation-drawer',
  },
  {
    name: 'Icons',
    materialUI: '/material-ui/icons/',
    materialDesign: 'https://m2.material.io/design/iconography/system-icons.html',
  },
  {
    name: 'Image List',
    materialUI: '/material-ui/react-image-list/',
    materialDesign: 'https://m2.material.io/components/image-lists',
  },
  { name: 'Link', materialUI: '/material-ui/react-link/' },
  {
    name: 'List',
    materialUI: '/material-ui/react-list/',
    materialDesign: 'https://m2.material.io/components/lists',
  },
  { name: 'Masonry', materialUI: '/material-ui/react-masonry/' },
  {
    name: 'Material Icons',
    materialUI: '/material-ui/material-icons/',
    materialDesign: 'https://fonts.google.com/icons',
  },
  {
    name: 'Menu',
    materialUI: '/material-ui/react-menu/',
    materialDesign: 'https://m2.material.io/components/menus',
  },
  {
    name: 'Modal',
    materialUI: '/material-ui/react-modal/',
    materialDesign: 'https://m2.material.io/components/dialogs',
  },
  {
    name: 'Navigation Rail',
    materialDesign: 'https://m2.material.io/components/navigation-rail',
  },
  {
    name: 'Number Field',
    materialUI: '/material-ui/react-number-field/',
    baseUI: 'https://base-ui.com/react/components/number-field',
  },
  { name: 'Pagination', materialUI: '/material-ui/react-pagination/' },
  {
    name: 'Paper',
    materialUI: '/material-ui/react-paper/',
    materialDesign: 'https://m2.material.io/design/environment/elevation.html',
  },
  {
    name: 'Progress',
    materialUI: '/material-ui/react-progress/',
    materialDesign: 'https://m2.material.io/components/progress-indicators',
  },
  {
    name: 'Radio Group',
    materialUI: '/material-ui/react-radio-button/',
    materialDesign: 'https://m2.material.io/components/radio-buttons',
  },
  { name: 'Rating', materialUI: '/material-ui/react-rating/' },
  {
    name: 'Select',
    materialUI: '/material-ui/react-select/',
    materialDesign: 'https://m2.material.io/components/menus#exposed-dropdown-menu',
  },
  { name: 'Skeleton', materialUI: '/material-ui/react-skeleton/' },
  {
    name: 'Slider',
    materialUI: '/material-ui/react-slider/',
    materialDesign: 'https://m2.material.io/components/sliders',
  },
  {
    name: 'Snackbar',
    materialUI: '/material-ui/react-snackbar/',
    materialDesign: 'https://m2.material.io/components/snackbars',
  },
  { name: 'Speed Dial', materialUI: '/material-ui/react-speed-dial' },
  {
    name: 'Stepper',
    materialUI: '/material-ui/react-stepper/',
    materialDesign: 'https://m1.material.io/components/steppers.html',
  },
  {
    name: 'Switch',
    materialUI: '/material-ui/react-switch/',
    materialDesign: 'https://m2.material.io/components/switches',
  },
  {
    name: 'Table',
    materialUI: '/material-ui/react-table/',
    materialDesign: 'https://m2.material.io/components/data-tables',
  },
  {
    name: 'Tabs',
    materialUI: '/material-ui/react-tabs/',
    materialDesign: 'https://m2.material.io/components/tabs',
  },
  {
    name: 'Text Field',
    materialUI: '/material-ui/react-text-field/',
    materialDesign: 'https://m2.material.io/components/text-fields',
  },
  { name: 'Timeline', materialUI: '/material-ui/react-timeline/' },
  { name: 'Toggle Button', materialUI: '/material-ui/react-toggle-button/' },
  {
    name: 'Tooltip',
    materialUI: '/material-ui/react-tooltip/',
    materialDesign: 'https://m2.material.io/components/tooltips',
  },
  { name: 'Transfer List', materialUI: '/material-ui/react-transfer-list/' },
  { name: 'Tree View', materialUI: '/x/react-tree-view/' },
  {
    name: 'Typography',
    materialUI: '/material-ui/react-typography/',
    materialDesign: 'https://m2.material.io/design/typography/the-type-system.html',
  },
];

export default function MaterialUIComponents() {
  return (
    <Paper sx={{ width: '100%' }}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Components</TableCell>
            <TableCell>Material Design</TableCell>
            <TableCell>Material UI</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {components.map((component) => (
            <TableRow key={component.name}>
              <TableCell>
                <Typography variant="body2">{component.name}</Typography>
              </TableCell>
              <TableCell>
                {component.materialDesign ? (
                  <Link
                    variant="body2"
                    data-no-markdown-link="true"
                    href={component.materialDesign}
                  >
                    {component.materialDesign.substring(8, 10) === 'm1'
                      ? 'MD 1 (legacy)'
                      : 'MD 2'}
                  </Link>
                ) : (
                  'No guidelines'
                )}
              </TableCell>
              <TableCell>
                {component.materialUI &&
                component.materialUI.startsWith('/material-ui') &&
                !component.baseUI ? (
                  <Link
                    variant="body2"
                    data-no-markdown-link="true"
                    href={component.materialUI}
                  >
                    Native support
                  </Link>
                ) : null}
                {component.baseUI ? (
                  <Link
                    variant="body2"
                    data-no-markdown-link="true"
                    href={component.baseUI}
                  >
                    Composed with Base UI
                  </Link>
                ) : null}
                {component.materialUI && component.materialUI.startsWith('/x') ? (
                  <Link
                    variant="body2"
                    data-no-markdown-link="true"
                    href={component.materialUI}
                  >
                    Support in MUI X
                  </Link>
                ) : null}
                {component.materialUI === 'Composable' ? 'Composable' : null}
                {component.materialUI == null ? '❌ No support' : null}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}

```