Carbon and Material UI

1. Create a Vite project and install Carbon

   Copy

   npm create vite@latest carbon-try -- --template react-ts --no-interactive
   cd carbon-try
   npm install
   npm install @carbon/react
   npm install -D sass@1.105.2

   We pin Sass to 1.105.2 because 1.106.0 fails to build Carbon's styles (see Dependencies). If a newer Sass works for you, great. Try it without the version first if you're curious.

2. Load Carbon's styles

   Create src/index.scss. Then delete src/App.css and src/index.css, and in src/main.tsx replace import './index.css' with import './index.scss'.

   src/index.scss

   Copy

   @use '@carbon/react';

3. Use the components

   Replace all of App.tsx. The second row is wrapped in a Gray 100 theme.

   src/App.tsx

   Copy

   import { Button, Theme } from '@carbon/react'
   
   export default function App() {
     return (
       <main style={{ padding: 32, display: 'grid', gap: 24 }}>
         <div style={{ display: 'flex', gap: 16 }}>
           <Button>Submit application</Button>
           <Button kind="secondary">Cancel</Button>
           <Button kind="danger">Delete</Button>
         </div>
         <Theme theme="g100">
           <div style={{ padding: 24, display: 'flex', gap: 16 }}>
             <Button>Submit application</Button>
             <Button kind="tertiary">Cancel</Button>
           </div>
         </Theme>
       </main>
     )
   }

4. Run it and inspect

   Copy

   npm run dev

   You should see: three buttons on white, and a dark strip with two more. In DevTools, the buttons have class="cds--btn cds--btn--primary", and the dark strip is a <div class="cds--g100 cds--layer-one">. Click it and look at all the --cds- variables it sets.

5. Override a token

   Add this to the end of src/index.scss:

   src/index.scss

   Copy

   :root {
     --cds-button-primary: #7c3aed;
   }

   You should see: the top primary button turns purple, but the one in the dark strip stays blue. The cds--g100 div sets its own --cds-button-primary, and the closest definition wins. To change both, add the same line inside a .cds--g100 { } rule as well.

6. Measure modularity

   Run npm run build and note the size of the CSS file in dist/assets. Then replace the first line of index.scss with these three, and build again:

   src/index.scss

   Copy

   @use '@carbon/react/scss/reset';
   @use '@carbon/react/scss/zone';
   @use '@carbon/react/scss/components/button';

   You should see the CSS shrink from about 1.2 MB to about 130 KB, with the page looking the same.

1. Create a Vite project and install MUI

   Copy

   npm create vite@latest mui-try -- --template react-ts --no-interactive
   cd mui-try
   npm install
   npm install @mui/material @emotion/react @emotion/styled

   Delete src/App.css and src/index.css, and remove the import './index.css' line from src/main.tsx.

2. Create a theme and use the components

   src/App.tsx

   Copy

   import { Button, Stack } from '@mui/material'
   import { createTheme, ThemeProvider } from '@mui/material/styles'
   
   const theme = createTheme({
     palette: {
       primary: { main: '#1976d2' },
     },
   })
   
   export default function App() {
     return (
       <ThemeProvider theme={theme}>
         <Stack direction="row" spacing={2} sx={{ p: 4 }}>
           <Button variant="contained">Submit application</Button>
           <Button variant="outlined">Cancel</Button>
           <Button variant="contained" color="error">Delete</Button>
         </Stack>
       </ThemeProvider>
     )
   }

3. Run it and inspect

   Copy

   npm run dev

   You should see a blue, an outlined and a red button. In DevTools, a button has readable classes like MuiButton-root MuiButton-contained and one generated class like css-4lmre4-MuiButtonBase-root-MuiButton-root. Look in <head> for <style data-emotion="css">. That's where Emotion writes the CSS.

4. Change the theme

   Set main: '#7c3aed' and save. The page updates, and if you inspect the button again, the generated class has a new name. Emotion made a new CSS rule for the new colour.

5. Look for the CSS file

   Copy

   npm run build
   ls dist/assets

   You should see only a .js file and no .css file. All of MUI's CSS is created in the browser when the page runs.

6. Turn on CSS variables

   Add cssVariables: true, as the first line inside createTheme({ … }), run npm run dev again and inspect the <html> element.

   You should see variables like --mui-palette-primary-main: #1976d2. The button now reads its colour from var(--mui-palette-primary-main), the same pattern as Carbon and Hanna.

You've now seen four systems: Hanna, Ísland.is, Carbon and Material UI. Here are some questions to think about, on your own or with your group. There are no right answers.

1. Which two systems are most alike in how they deliver CSS? Which two are most alike in how they're used from React?
2. Ísland.is can't be installed outside its own repo, and Polaris React was retired. What do these two stories tell you about depending on someone else's components?
3. Your next group project needs a dark mode. Which system makes that easiest, and why?
4. An AI assistant writes your components. Which of the four would make its output look most like your product, and what would you have to tell it first?
5. Would you use one of these libraries for your project, or build your own small set of components? List three reasons for your choice.