feat: remove `css` from various `components/` elements #21263

jakehwll · 2025-12-14T12:33:11Z

This attempts to remove all of the MUI/@emotion based css props. We've begun by doing this specifically in the components/ folder. This should serve to align ourselves better with Tailwind/shadcn and our goal to remove mui from the database.

I've made attempts to ensure the line-height is consistent, however this isn't always in best-practice with Tailwind in some cases. Minor pixel shifts may happen. There are around 9 or so components living in components/ I haven't updated yet as the logic was scarier to migrate away from MUI.

Note

This pull-request is a fork-out of #21154 as I found it was getting too big to merge and hard to understand. Alongside this various components were being misrepresented in Chromatic (despite rendering fine in Storybook). I felt it better to make this a set of PRs.

Chromatic Link / Chromatic Tests

Position	Pull-request
✅	feat: remove `css` from various `components/` elements
	feat: remove `css` from various `pages/Template.*` pages

site/src/components/Badges/Badges.stories.tsx

jakehwll · 2025-12-14T12:34:53Z

site/src/components/Badges/Badges.tsx

- color: theme.roles.warning.text,
- }),
-} satisfies Record<string, Interpolation<Theme>>;
+const badgeClasses = {


Not sure if we want to do this as apart of this PR but this probably a good candidate for class-variance-authority.

we already have a dependency on it, go ahead

site/src/components/PageHeader/FullWidthPageHeader.stories.tsx

site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx

jaaydenh · 2025-12-15T20:57:43Z

site/src/components/Alert/Alert.tsx

 return (
 <span
- css={(theme) => ({ color: theme.palette.text.secondary, fontSize: 13 })}
+ className={"text-[13px] text-content-secondary"}


why set this to 13px instead of using a utility class?

text-xs is 12px and text-sm is 14px. Neither really seemed to fit the vibe this was going for, YOMV tho. I might revert this as you're redoing Alert.tsx in another PR 🙂

site/src/components/Alert/Alert.tsx

jaaydenh · 2025-12-15T21:03:17Z

site/src/components/Avatar/AvatarCard.tsx

- { color: theme.palette.text.secondary },
- ]}
- >
+ <div className="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">


we could just update the colors now by looking up the component in Figma, https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=711-383&t=WnARy2Vp9NARG6V0-1

So no need to set a dark variant as that will be handled by the Tailwind color

jaaydenh · 2025-12-15T21:03:41Z

site/src/components/Avatar/AvatarCard.tsx

+ className={cn(
+ "flex flex-row flex-nowrap items-center gap-4",
+ "p-4 rounded-lg cursor-default",
+ "border border-solid border-zinc-200 dark:border-zinc-700",


Colors can be found in figma, https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=711-383&t=WnARy2Vp9NARG6V0-1

jaaydenh · 2025-12-15T21:12:22Z

site/src/components/Badges/Badges.tsx

+ "px-3 rounded-full flex items-center w-fit whitespace-nowrap",
+ "border border-solid leading-none",
+ ],
+ enabled: ["border-green-500 bg-green-950 text-green-50"],


If we update these colors from the theme colors but don't use colors from tailwind.config.js, we may forget to do it later. If you feel like the proper colors don't yet exist in tailwind.config, we should atleast have an issue created to cleanup

jaaydenh · 2025-12-15T21:20:06Z

site/src/components/Paywall/Paywall.tsx

+const classNames = {
+ root: [
+ "flex flex-row justify-center items-center min-h-[280px] p-6 rounded-lg gap-8",
+ "bg-[linear-gradient(160deg,_transparent,_rgb(46,_16,_101))]",
+ "border border-solid border-violet-400",
+ ].join(" "),
+ feature: "flex items-center p-[3px] gap-2",
+};


Any reason why this is necessary? with Tailwind its generally best practice to inline the classes even if there is duplication.

Honestly I wanted to rely harder on the JIT translation but as we're on Tailwind v3 right now some things are being done manually. I can either document here that this is an opportunity to update after an upgrade to v4 or inline, thoughts?

I don't think it makes a difference for JIT translation if the tailwind is supplied inline or a separate variable, it just matters if it is constructed dynamically. I would still prefer to keep everything inline and use proper methods for dynamic classnames, css variables, etc.

jaaydenh · 2025-12-15T21:26:29Z

site/src/components/Markdown/Markdown.tsx

- })}
+ className={cn(
+ "py-[1px] px-1 rounded-sm text-sm leading-none text-content-primary",
+ "bg-surface-tertiary dark:bg-surface-quaternary",


We shouldn't ever have to set dark when using colors from tailwind.config, either the colors should change or we are missing colors

jaaydenh · 2025-12-15T21:26:53Z

site/src/components/Markdown/Markdown.tsx

 {...props}
+ className={cn([
+ "py-[1px] px-1 rounded-sm text-sm leading-none",
+ "bg-surface-tertiary dark:bg-surface-quaternary",


We shouldn't ever have to set dark when using colors from tailwind.config, either the colors should change or we are missing colors

aslilac · 2025-12-15T21:34:36Z

site/src/components/Badges/Badges.tsx

- color: theme.roles.warning.text,
- }),
-} satisfies Record<string, Interpolation<Theme>>;
+const badgeClasses = {


we already have a dependency on it, go ahead

site/src/components/CustomLogo/CustomLogo.tsx

site/src/components/Form/Form.tsx

site/src/components/InfoTooltip/InfoTooltip.tsx

aslilac · 2025-12-15T21:44:59Z

site/src/components/InfoTooltip/InfoTooltip.tsx

- <HelpTooltipIcon css={{ color: iconColor }} />
+ <HelpTooltipIconTrigger
+ size="small"
+ className="opacity-100 hover:opacity-100"


Suggested change

className="opacity-100 hover:opacity-100"

className="opacity-100"

site/src/components/PageHeader/PageHeader.tsx

site/src/pages/GroupsPage/GroupSettingsPageView.tsx

aslilac · 2025-12-15T21:54:10Z

site/src/pages/WorkspacePage/WorkspaceTopbar.tsx


 return (
- <Topbar css={{ gridArea: "topbar" }}>
+ <Topbar className="flex" style={{ gridArea: "topbar" }}>


where's this flex coming from?

site/src/components/OverflowY/OverflowY.tsx

site/src/components/OverflowY/OverflowY.stories.tsx

Co-authored-by: ケイラ <mckayla@hey.com>

site/src/components/FullPageLayout/Sidebar.tsx

site/src/components/HelpTooltip/HelpTooltip.tsx

site/src/components/GlobalSnackbar/GlobalSnackbar.tsx

site/src/components/GitDeviceAuth/GitDeviceAuth.tsx

feat: remove css from various components/ elements

0167853

github-actions bot assigned jakehwll Dec 14, 2025

jakehwll commented Dec 14, 2025

View reviewed changes

site/src/components/Badges/Badges.stories.tsx Show resolved Hide resolved

jakehwll commented Dec 14, 2025

View reviewed changes

site/src/components/Badges/Badges.stories.tsx Show resolved Hide resolved

jakehwll commented Dec 14, 2025

View reviewed changes

site/src/components/PageHeader/FullWidthPageHeader.stories.tsx Show resolved Hide resolved

jakehwll added 11 commits December 14, 2025 12:54

fix: resolve <Form /> gaps

24bf782

fix: resolve horizontal direction in <Form />

9db0ffa

chore: resolve lint

ea90a74

fix: resolve <Paywall /> gradient

01a440a

fix: resolve odd padding issues due to css

1cf0fd3

feat: mess with <PageHeader /> breakpoints

91321c7

fix: actually use the css grid

51a7ddb

fix: resolve more pt-0 requirements

aeb0867

fix: resolve layout shift issues

6cee3b2

fix: resolve layout shifts (again)

ed88793

fix: even more layout shift fixing + colors

0848c5d

jakehwll commented Dec 14, 2025

View reviewed changes

site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx Show resolved Hide resolved

jakehwll requested review from aslilac and jaaydenh December 14, 2025 15:34

jakehwll marked this pull request as ready for review December 14, 2025 15:35

Merge branch 'main' into jakehwll/mui-cssnuke-components

d68bc5f

jakehwll mentioned this pull request Dec 15, 2025

feat: remove css from various pages/Template.* pages #21267

Draft

jaaydenh reviewed Dec 15, 2025

View reviewed changes

site/src/components/Alert/Alert.tsx Show resolved Hide resolved

jaaydenh reviewed Dec 15, 2025

View reviewed changes

aslilac reviewed Dec 15, 2025

View reviewed changes

jakehwll and others added 5 commits December 16, 2025 11:07

Update site/src/components/InfoTooltip/InfoTooltip.tsx

83a1d08

Co-authored-by: ケイラ <mckayla@hey.com>

Update site/src/pages/GroupsPage/GroupSettingsPageView.tsx

c5a9270

Co-authored-by: ケイラ <mckayla@hey.com>

Update site/src/components/Markdown/Markdown.tsx

b631c1e

Co-authored-by: ケイラ <mckayla@hey.com>

Update site/src/components/Markdown/Markdown.tsx

676d614

Co-authored-by: ケイラ <mckayla@hey.com>

feat: resolve inline styles

abf4632

jaaydenh reviewed Dec 17, 2025

View reviewed changes

site/src/components/FullPageLayout/Sidebar.tsx Outdated Show resolved Hide resolved

jaaydenh reviewed Dec 17, 2025

View reviewed changes

site/src/components/HelpTooltip/HelpTooltip.tsx Outdated Show resolved Hide resolved

jaaydenh reviewed Dec 17, 2025

View reviewed changes

site/src/components/GlobalSnackbar/GlobalSnackbar.tsx Show resolved Hide resolved

jaaydenh reviewed Dec 17, 2025

View reviewed changes

site/src/components/GitDeviceAuth/GitDeviceAuth.tsx Outdated Show resolved Hide resolved

jakehwll added 4 commits December 17, 2025 11:06

fix: inline className's

b398098

chore: revert styles for <LogLine />

bdac8b9

Merge branch 'main' into jakehwll/mui-cssnuke-components

0923805

Merge branch 'main' into jakehwll/mui-cssnuke-components

4d24a2f

	className="opacity-100 hover:opacity-100"
	className="opacity-100"

feat: remove css from various components/ elements #21263

Are you sure you want to change the base?

feat: remove css from various components/ elements #21263

Conversation

jakehwll commented Dec 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jakehwll Dec 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat: remove `css` from various `components/` elements #21263

feat: remove `css` from various `components/` elements #21263

jakehwll commented Dec 14, 2025 •

edited

Loading

jakehwll Dec 14, 2025 •

edited

Loading