### Install MUI Core

Source: https://mui.com/docs/material-ui

Installs the necessary packages for MUI Core, including the Material UI components and styling solutions like Emotion.

```bash
npm install @mui/material @emotion/react @emotion/styled
```

--------------------------------

### MUI Core Button Examples

Source: https://mui.com/docs/material-ui

Demonstrates the usage of MUI Core's Button component with different variants (text, contained, outlined) and including an icon.

```jsx
<Button variant="text" startIcon={<ShoppingCartRounded />}>
  Add item
</Button>
<Button variant="contained" startIcon={<ShoppingCartRounded />}>
  Add item
</Button>
<Button variant="outlined" startIcon={<ShoppingCartRounded />}>
  Add item
</Button>
```

--------------------------------

### MUI Core Theming and Card Component Example

Source: https://mui.com/docs/material-ui

Illustrates the use of MUI Core's Card component with custom styling and theming capabilities. It includes a media element, typography, and interactive controls.

```jsx
<Card
  variant="outlined"
  sx={{  p: 2,
    width: { xs: '100%', sm: 'auto' },
    display: 'flex',
    flexDirection: { xs: 'column', sm: 'row' },
    alignItems: 'center',
    gap: 2,
  }}
>
  <CardMedia
    component="img"
    width="100"
    height="100"
    alt="Contemplative Reptile album cover"
    src="/images/contemplative-reptile.jpg"
    sx={{    width: { xs: '100%', sm: 100 },
    }}
  />
  <Stack direction="column" alignItems="center" spacing={1} useFlexGap>
    <div>
      <Typography color="text.primary" fontWeight="semiBold">
        Contemplative Reptile
      </Typography>
      <Typography
        variant="caption"
        color="text.secondary"
        fontWeight="medium"
        textAlign="center"
        sx={{ width: '100%' }}
      >
        Sounds of Nature
      </Typography>
    </div>
    <Stack direction="row" alignItems="center" spacing={1} useFlexGap>
      <IconButton aria-label="Shuffle" disabled size="small">
        <ShuffleRoundedIcon fontSize="small" />
      </IconButton>
      <IconButton aria-label="Fast rewind" disabled size="small">
        <FastRewindRounded fontSize="small" />
      </IconButton>
      <IconButton
        aria-label={paused ? 'Play music' : 'Pause music'}
        onClick={() => setPaused((val) => !val)}
        sx={{ mx: 1 }}
      >
        {paused ? <PlayArrowRounded /> : <PauseRounded />}
      </IconButton>
      <IconButton aria-label="Fast forward" disabled size="small">
        <FastForwardRounded fontSize="small" />
      </IconButton>
      <IconButton aria-label="Loop music" disabled size="small">
        <LoopRoundedIcon fontSize="small" />
      </IconButton>
    </Stack>
  </Stack>
</Card>
```

--------------------------------

### Styling a Card Component with MUI SX Prop

Source: https://mui.com/docs/material-ui

Demonstrates how to use the `sx` prop in Material UI to style a `Card` component, including nested elements like `CardMedia`, `Box`, `Typography`, and `Chip`. It shows the integration of theme tokens and responsive styles for layout and appearance. This example leverages MUI's styling system for a consistent and flexible UI.

```jsx
<Card
  variant="outlined"
  sx={{ p: 2, display: 'flex', flexWrap: 'wrap', zIndex: 1 }}
>
  <CardMedia
    component="img"
    width="100"
    height="100"
    alt="123 Main St, Phoenix, AZ cover"
    src="/images/real-estate.png"
    sx={{
      borderRadius: '6px',
      width: { xs: '100%', sm: 100 },
    }}
  />
  <Box sx={{ alignSelf: 'center', ml: 2 }}>
    <Typography variant="body2" color="text.secondary" fontWeight="regular">
      123 Main St, Phoenix, AZ, USA
    </Typography>
    <Typography fontWeight="bold" noWrap gutterBottom>
      $280k - $310k
    </Typography>
    <Chip
      size="small"
      variant="outlined"
      icon={<InfoRounded />}
      label="Confidence score: 85%"
      sx={(theme) => ({
        '.MuiChip-icon': { fontSize: 16, ml: '4px', color: 'success.500' },
        bgcolor: 'success.50',
        borderColor: 'success.100',
        color: 'success.900',
        ...theme.applyDarkStyles({
          bgcolor: 'primaryDark.700',
          color: 'success.200',
          borderColor: 'success.900',
        }),
      })}
    />
  </Box>
</Card>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.