Thanks to visit codestin.com
Credit goes to github.com

Skip to content

refactor: remove MUI and Emotion #27821

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jakehwll merged 15 commits into from
Aug 17, 2026
Merged

refactor: remove MUI and Emotion #27821

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
05c54d6
refactor(site): arrivederci mui
jakehwll Aug 4, 2026
0e360be
Merge branch 'main' into jakehwll/demui
jakehwll Aug 6, 2026
18c6c4f
feat: remove mui deconfiguration
jakehwll Aug 11, 2026
f810f0a
fix: remove mui mock jank
jakehwll Aug 11, 2026
598d3af
🤖 Merge branch 'main' into jakehwll/demui
jakehwll Aug 11, 2026
c138661
🤖 Merge remote-tracking branch 'origin/main' into jakehwll/demui
jakehwll Aug 12, 2026
47a89af
🤖 chore(site/src/components/Tabs): restore preflight border reset com…
jakehwll Aug 13, 2026
5c9a565
🤖 fix(site/src/components/Slider): use prefixed key for slider thumbs
jakehwll Aug 13, 2026
6709aa0
🤖 docs(docs/about/contributing): replace Emotion styling guidance wit…
jakehwll Aug 13, 2026
0415ad8
🤖 Merge branch 'main' into jakehwll/demui
jakehwll Aug 17, 2026
7df35dc
fix: attempt to restore `p { margin-block: 1em; }` basis
jakehwll Aug 17, 2026
f051926
fix: resolve `<CheckIcon />` centreing
jakehwll Aug 17, 2026
5d3876b
fix: restore `h2 { font-size: 1.5em; font-weight: bold; }`
jakehwll Aug 17, 2026
83fafdc
fix: resolve `h3` and `h4` `{ margin-block: x }`
jakehwll Aug 17, 2026
0372907
chore: resolve format
jakehwll Aug 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .github/dependabot.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,6 @@ updates:
xterm:
patterns:
- "@xterm*"
mui:
patterns:
- "@mui*"
react:
patterns:
- "react"
Expand Down
4 changes: 0 additions & 4 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,6 @@
// We discourage people from various older libraries that
// are no longer recommended/being migrated from.
"typescript.preferences.autoImportSpecifierExcludeRegexes": [
// discourage people from using MUI components
"^@mui(?:/.*)?$",
// discourage people from using Emotion CSS
"^@emotion(?:/.*)?$",
// we prefer people use `lodash/foo` over `lodash`
"^lodash$"
]
Expand Down
64 changes: 0 additions & 64 deletions biome.jsonc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,70 +61,6 @@
"parseDiffFromFile"
]
},
"@mui/material/Alert": "Use components/Alert/Alert instead.",
"@mui/material/AlertTitle": "Use components/Alert/Alert instead.",
// "@mui/material/Autocomplete": "Use shadcn/ui Combobox instead.",
"@mui/material/Avatar": "Use components/Avatar/Avatar instead.",
"@mui/material/Box": "Use a <div> with Tailwind classes instead.",
"@mui/material/Button": "Use components/Button/Button instead.",
// "@mui/material/Card": "Use shadcn/ui Card component instead.",
// "@mui/material/CardActionArea": "Use shadcn/ui Card component instead.",
// "@mui/material/CardContent": "Use shadcn/ui Card component instead.",
// "@mui/material/Checkbox": "Use shadcn/ui Checkbox component instead.",
"@mui/material/Chip": "Use components/Badge or Tailwind styles instead.",
// "@mui/material/CircularProgress": "Use components/Spinner/Spinner instead.",
// "@mui/material/Collapse": "Use shadcn/ui Collapsible instead.",
// "@mui/material/CssBaseline": "Use Tailwind CSS base styles instead.",
// "@mui/material/Dialog": "Use shadcn/ui Dialog component instead.",
// "@mui/material/DialogActions": "Use shadcn/ui Dialog component instead.",
// "@mui/material/DialogContent": "Use shadcn/ui Dialog component instead.",
// "@mui/material/DialogContentText": "Use shadcn/ui Dialog component instead.",
// "@mui/material/DialogTitle": "Use shadcn/ui Dialog component instead.",
// "@mui/material/Divider": "Use shadcn/ui Separator or <hr> with Tailwind instead.",
// "@mui/material/Drawer": "Use shadcn/ui Sheet component instead.",
// "@mui/material/FormControl": "Use native form elements with Tailwind instead.",
// "@mui/material/FormControlLabel": "Use shadcn/ui Label with form components instead.",
"@mui/material/FormGroup": "Use a <div> with Tailwind classes instead.",
// "@mui/material/FormHelperText": "Use a <p> with Tailwind classes instead.",
"@mui/material/FormLabel": "Use shadcn/ui Label component instead.",
"@mui/material/Grid": "Use Tailwind grid utilities instead.",
"@mui/material/IconButton": "Use components/Button/Button with variant='icon' instead.",
// "@mui/material/InputAdornment": "Use Tailwind positioning in input wrapper instead.",
// "@mui/material/InputBase": "Use shadcn/ui Input component instead.",
"@mui/material/LinearProgress": "Use a progress bar with Tailwind instead.",
// "@mui/material/Link": "Use React Router Link or native <a> tags instead.",
// "@mui/material/List": "Use native <ul> with Tailwind instead.",
// "@mui/material/ListItem": "Use native <li> with Tailwind instead.",
"@mui/material/ListItemIcon": "Use lucide-react icons in list items instead.",
// "@mui/material/ListItemText": "Use native elements with Tailwind instead.",
// "@mui/material/Menu": "Use shadcn/ui DropdownMenu instead.",
// "@mui/material/MenuItem": "Use shadcn/ui DropdownMenu components instead.",
// "@mui/material/MenuList": "Use shadcn/ui DropdownMenu components instead.",
"@mui/material/Paper": "Use a <div> with Tailwind shadow/border classes instead.",
"@mui/material/Popover": "Use components/Popover/Popover instead.",
// "@mui/material/Radio": "Use shadcn/ui RadioGroup instead.",
// "@mui/material/RadioGroup": "Use shadcn/ui RadioGroup instead.",
// "@mui/material/Select": "Use shadcn/ui Select component instead.",
"@mui/material/Skeleton": "Use shadcn/ui Skeleton component instead.",
// "@mui/material/Snackbar": "Use components/GlobalSnackbar instead.",
// "@mui/material/Stack": "Use Tailwind flex utilities instead (e.g., <div className='flex flex-col gap-4'>).",
// "@mui/material/styles": "Use Tailwind CSS instead.",
"@mui/material/SvgIcon": "Use lucide-react icons instead.",
"@mui/material/Switch": "Use shadcn/ui Switch component instead.",
"@mui/material/Table": "Import from components/Table/Table instead.",
"@mui/material/TableRow": "Import from components/Table/Table instead.",
// "@mui/material/TextField": "Use shadcn/ui Input component instead.",
// "@mui/material/ToggleButton": "Use shadcn/ui Toggle or custom component instead.",
// "@mui/material/ToggleButtonGroup": "Use shadcn/ui Toggle or custom component instead.",
"@mui/material/Tooltip": "Use components/Tooltip/Tooltip instead.",
"@mui/material/Typography": "Use native HTML elements instead. Eg: <span>, <p>, <h1>, etc.",
"@mui/material/useMediaQuery": "Use Tailwind responsive classes or custom hook instead.",
// "@mui/system": "Use Tailwind CSS instead.",
"@mui/utils": "Use native alternatives or utility libraries instead.",
// "@emotion/css": "Use Tailwind CSS instead.",
// "@emotion/react": "Use Tailwind CSS instead.",
"@emotion/styled": "Use Tailwind CSS instead.",
// "@emotion/cache": "Use Tailwind CSS instead.",
// "#/components/Stack/Stack": "Use Tailwind flex utilities instead (e.g., <div className='flex flex-col gap-4'>).",
"lodash": "Use lodash/<name> instead."
}
Expand Down
13 changes: 4 additions & 9 deletions docs/about/contributing/frontend.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
[Discord server](https://discord.com/invite/coder), and we’ll be happy to assist
you.

## Running the UI

Check warning on line 11 in docs/about/contributing/frontend.md

View workflow job for this annotation

GitHub Actions / lint-docs

Coder.GerundHeading 

Heading starts with an -ing word ('Running'); prefer the imperative ('Install') or the noun ('Installation'). See capitalization-and-punctuation.md#no-gerund-leading-headings.

You can run the UI and access the Coder dashboard in two ways:

Expand Down Expand Up @@ -88,7 +88,7 @@
If code within a page becomes reusable across other parts of the app,
consider moving it to `src/utils`, `hooks`, `components`, or `modules`.

### Handling States

Check warning on line 91 in docs/about/contributing/frontend.md

View workflow job for this annotation

GitHub Actions / lint-docs

Coder.GerundHeading 

Heading starts with an -ing word ('Handling'); prefer the imperative ('Install') or the noun ('Installation'). See capitalization-and-punctuation.md#no-gerund-leading-headings.

A page typically has three states: **loading**, **ready**/**success**, and
**error**. Ensure you manage these states when developing pages. Use visual
Expand Down Expand Up @@ -182,14 +182,6 @@
similar to components except that they can be more complex and can contain
business logic specific to the product.

### MUI

The codebase is currently using MUI v5. Please see the
[official documentation](https://mui.com/material-ui/getting-started/). In
general, favor building a custom component via MUI instead of plain React/HTML,
as MUI's suite of components is thoroughly battle-tested and accessible right
out of the box.

### Structure
Comment thread
jakehwll marked this conversation as resolved.

Each component and module gets its own folder. Module folders may group multiple
Expand Down Expand Up @@ -246,14 +238,17 @@

## Styling

We use [Emotion](https://emotion.sh/) to handle CSS styles.
We use [Tailwind CSS](https://tailwindcss.com/) to handle CSS styles. Reusable UI
primitives come from [shadcn/ui](https://ui.shadcn.com/) components in
`site/src/components`. Use the `cn` helper from `#/utils/cn` to compose and
conditionally apply classes.

## Forms

We use [Formik](https://formik.org/docs) for forms along with
[Yup](https://github.com/jquense/yup) for schema definition and validation.

## Testing

Check warning on line 251 in docs/about/contributing/frontend.md

View workflow job for this annotation

GitHub Actions / lint-docs

Coder.GerundHeading 

Heading starts with an -ing word ('Testing'); prefer the imperative ('Install') or the noun ('Installation'). See capitalization-and-punctuation.md#no-gerund-leading-headings.

We use three types of testing in our app: **End-to-end (E2E)**, **Integration/Unit**
and **Visual Testing**.
Expand Down Expand Up @@ -311,7 +306,7 @@
time-consuming. Sometimes it is because the test itself is complex and sometimes
it is because of how the test is querying elements.

#### Using `ByRole` queries

Check warning on line 309 in docs/about/contributing/frontend.md

View workflow job for this annotation

GitHub Actions / lint-docs

Coder.GerundHeading 

Heading starts with an -ing word ('Using'); prefer the imperative ('Install') or the noun ('Installation'). See capitalization-and-punctuation.md#no-gerund-leading-headings.

One thing we figured out that was slowing down our tests was the use of `ByRole`
queries because of how it calculates the role attribute for every element on the
Expand Down
30 changes: 10 additions & 20 deletions site/.storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
import "../src/index.css";
import "../src/theme/globalFonts";
import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
import CssBaseline from "@mui/material/CssBaseline";
import {
ThemeProvider as MuiThemeProvider,
StyledEngineProvider,
} from "@mui/material/styles";
import { DecoratorHelpers } from "@storybook/addon-themes";
import type { Decorator, Parameters } from "@storybook/react-vite";
import { StrictMode } from "react";
Expand All @@ -14,6 +8,7 @@ import { withRouter } from "storybook-addon-remix-react-router";
import { TooltipProvider } from "../src/components/Tooltip/Tooltip";
import themes, { baseModeFor, isConcreteThemeName } from "../src/theme";
import { AppearanceProvider } from "../src/theme/appearance";
import { ThemeContextProvider } from "../src/theme/context";

DecoratorHelpers.initializeThemeState(Object.keys(themes), "dark");

Expand Down Expand Up @@ -112,20 +107,15 @@ const withTheme: Decorator = (Story, context) => {

return (
<StrictMode>
<StyledEngineProvider injectFirst>
<MuiThemeProvider theme={themes[concreteName]}>
<EmotionThemeProvider theme={themes[concreteName]}>
<AppearanceProvider
externalImages={themes[concreteName].externalImages}
>
<TooltipProvider delayDuration={100}>
<CssBaseline />
<Story />
</TooltipProvider>
</AppearanceProvider>
</EmotionThemeProvider>
</MuiThemeProvider>
</StyledEngineProvider>
<ThemeContextProvider theme={themes[concreteName]}>
<AppearanceProvider
externalImages={themes[concreteName].externalImages}
>
<TooltipProvider delayDuration={100}>
<Story />
</TooltipProvider>
</AppearanceProvider>
</ThemeContextProvider>
</StrictMode>
);
};
Expand Down
21 changes: 1 addition & 20 deletions site/AGENTS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ Debug logs and pprof dumps use the same job name and commit SHA convention.

## Components

- MUI components are deprecated - migrate away from these when encountered
- Use shadcn/ui components first - check `site/src/components` for existing implementations.
- Do not use shadcn CLI - manually add components to maintain consistency
- The modules folder should contain components with business logic specific to the codebase.
Expand All @@ -103,9 +102,8 @@ Debug logs and pprof dumps use the same job name and commit SHA convention.

## Styling

- Emotion CSS is deprecated. Use Tailwind CSS instead.
- Use Tailwind CSS for styling.
- Use custom Tailwind classes in tailwind.config.js.
- Tailwind CSS reset is currently not used to maintain compatibility with MUI
- Responsive design - use Tailwind's responsive prefixes (sm:, md:, lg:, xl:)
- Do not use `dark:` prefix for dark mode

Expand Down Expand Up @@ -279,23 +277,6 @@ Debug logs and pprof dumps use the same job name and commit SHA convention.
audit the diff against FE1 to FE10 and fix every FAIL before creating
the PR

## Migration (MUI → shadcn) (Emotion → Tailwind)

### Migration Strategy

- Identify MUI components in current feature
- Find shadcn equivalent in existing components
- Create wrapper if needed for missing functionality
- Update tests to reflect new component structure
- Remove MUI imports once migration complete

### Migration Guidelines

- Use Tailwind classes for all new styling
- Replace Emotion `css` prop with Tailwind classes
- Leverage custom color tokens: `content-primary`, `surface-secondary`, etc.
- Use `className` with `clsx` for conditional styling

## React Rules

### 1. Purity & Immutability
Expand Down
4 changes: 0 additions & 4 deletions site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,6 @@
"@dnd-kit/utilities": "3.2.2",
"@emoji-mart/data": "1.2.1",
"@emoji-mart/react": "1.1.1",
"@emotion/cache": "11.14.0",
"@emotion/react": "11.14.0",
"@emotion/styled": "11.14.1",
"@fontsource-variable/geist": "5.3.0",
"@fontsource-variable/geist-mono": "5.2.7",
"@fontsource/fira-code": "5.2.7",
Expand All @@ -54,7 +51,6 @@
"@lexical/react": "0.44.0",
"@lexical/utils": "0.48.0",
"@monaco-editor/react": "4.7.0",
"@mui/material": "5.18.0",
"@novnc/novnc": "^1.5.0",
"@pierre/diffs": "1.3.3",
"@pierre/trees": "1.0.0-beta.4",
Expand Down
Loading
Loading