coder · jakehwll · Aug 3, 2026 · Aug 3, 2026 · Aug 3, 2026 · Aug 3, 2026
diff --git a/site/package.json b/site/package.json
@@ -56,7 +56,6 @@
 		"@lexical/utils": "0.48.0",
 		"@monaco-editor/react": "4.7.0",
 		"@mui/material": "5.18.0",
-		"@mui/system": "5.18.0",
 		"@novnc/novnc": "^1.5.0",
 		"@pierre/diffs": "1.2.7",
 		"@pierre/trees": "1.0.0-beta.4",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
@@ -1,9 +1,9 @@
-import Link from "@mui/material/Link";
 import type { FC, HTMLAttributes } from "react";
 import { Link as RouterLink } from "react-router";
 import type { TemplateExample } from "#/api/typesGenerated";
 import { Button } from "#/components/Button/Button";
 import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
+import { Link } from "#/components/Link/Link";
 import { Pill } from "#/components/Pill/Pill";
 import { cn } from "#/utils/cn";
 
@@ -53,11 +53,13 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 				<span className="block text-[13px] leading-[1.6] text-content-secondary">
 					{example.description}{" "}
 					<Link
-						component={RouterLink}
-						to={`/starter-templates/${example.id}`}
-						className="inline-block text-[13px] mt-1"
+						className="inline-block text-[13px] mt-1 p-0"
+						asChild
+						showExternalIcon={false}
 					>
-						Read more
+						<RouterLink to={`/starter-templates/${example.id}`}>
+							Read more
+						</RouterLink>
 					</Link>
 				</span>
 			</div>

diff --git a/site/src/pages/CreateTemplatePage/TemplateUpload.tsx b/site/src/pages/CreateTemplatePage/TemplateUpload.tsx
@@ -1,7 +1,7 @@
-import Link from "@mui/material/Link";
 import type { FC } from "react";
 import { Link as RouterLink } from "react-router";
 import { FileUpload } from "#/components/FileUpload/FileUpload";
+import { Link } from "#/components/Link/Link";
 
 export interface TemplateUploadProps {
 	isUploading: boolean;
@@ -20,14 +20,15 @@ export const TemplateUpload: FC<TemplateUploadProps> = ({
 		<>
 			The template has to be a .tar or .zip file. You can also use our{" "}
 			<Link
-				component={RouterLink}
-				to="/starter-templates"
 				// Prevent trigger the upload
 				onClick={(e) => {
 					e.stopPropagation();
 				}}
+				asChild
+				showExternalIcon={false}
+				className="p-0"
 			>
-				starter templates
+				<RouterLink to="/starter-templates">starter templates</RouterLink>
 			</Link>{" "}
 			to get started with Coder.
 		</>

diff --git a/site/src/pages/CreateTemplatePage/VariableInput.tsx b/site/src/pages/CreateTemplatePage/VariableInput.tsx
@@ -1,9 +1,8 @@
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Radio from "@mui/material/Radio";
-import RadioGroup from "@mui/material/RadioGroup";
-import TextField from "@mui/material/TextField";
 import type { FC } from "react";
 import type { TemplateVersionVariable } from "#/api/typesGenerated";
+import { Input } from "#/components/Input/Input";
+import { Label } from "#/components/Label/Label";
+import { RadioGroup, RadioGroupItem } from "#/components/RadioGroup/RadioGroup";
 
 const isBoolean = (variable: TemplateVersionVariable) => {
 	return variable.type === "bool";
@@ -62,35 +61,36 @@ const VariableField: FC<VariableInputProps> = ({
 	defaultValue,
 }) => {
 	if (isBoolean(variable)) {
+		const trueId = `${variable.name}-true`;
+		const falseId = `${variable.name}-false`;
+
 		return (
 			<RadioGroup
 				id={variable.name}
 				defaultValue={variable.default_value}
-				onChange={(event) => {
-					onChange(event.target.value);
-				}}
+				disabled={disabled}
+				onValueChange={onChange}
 			>
-				<FormControlLabel
-					disabled={disabled}
-					value="true"
-					control={<Radio size="small" />}
-					label="True"
-				/>
-				<FormControlLabel
-					disabled={disabled}
-					value="false"
-					control={<Radio size="small" />}
-					label="False"
-				/>
+				<div className="flex items-center gap-2">
+					<RadioGroupItem id={trueId} value="true" />
+					<Label htmlFor={trueId} className="font-normal cursor-pointer">
+						True
+					</Label>
+				</div>
+				<div className="flex items-center gap-2">
+					<RadioGroupItem id={falseId} value="false" />
+					<Label htmlFor={falseId} className="font-normal cursor-pointer">
+						False
+					</Label>
+				</div>
 			</RadioGroup>
 		);
 	}
 
 	return (
-		<TextField
+		<Input
 			autoComplete="off"
 			id={variable.name}
-			size="small"
 			disabled={disabled}
 			placeholder={variable.sensitive ? "" : variable.default_value}
 			required={variable.required}
@@ -105,7 +105,7 @@ const VariableField: FC<VariableInputProps> = ({
 					? "number"
 					: variable.sensitive
 						? "password"
-						: "string"
+						: "text"
 			}
 		/>
 	);

diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx
@@ -1,4 +1,3 @@
-import FormHelperText from "@mui/material/FormHelperText";
 import type { FC } from "react";
 import { Button } from "#/components/Button/Button";
 import {
@@ -54,9 +53,9 @@ export const TemplateScheduleAutostart: FC<TemplateScheduleAutostartProps> = ({
 					</Button>
 				))}
 			</div>
-			<FormHelperText>
+			<div className="text-xs text-content-secondary">
 				<AutostartHelperText allowed={enabled} days={value} />
-			</FormHelperText>
+			</div>
 		</div>
 	);
 };

diff --git a/site/src/pages/TemplateVersionEditorPage/FileDialog.tsx b/site/src/pages/TemplateVersionEditorPage/FileDialog.tsx
@@ -1,6 +1,6 @@
-import TextField from "@mui/material/TextField";
 import { type ChangeEvent, type FC, useState } from "react";
 import { ConfirmDialog } from "#/components/Dialog/ConfirmDialog/ConfirmDialog";
+import { FormField } from "#/components/FormField/FormField";
 import { type FileTree, isFolder, validatePath } from "#/utils/filetree";
 
 interface CreateFileDialogProps {
@@ -63,22 +63,25 @@ export const CreateFileDialog: FC<CreateFileDialogProps> = ({
 						Specify the path to a file to be created. This path can contain
 						slashes too.
 					</p>
-					<TextField
+					<FormField
 						autoFocus
 						onKeyDown={(event) => {
 							if (event.key === "Enter") {
 								handleConfirm();
 							}
 						}}
-						error={Boolean(error)}
-						helperText={error}
-						name="file-path"
+						field={{
+							name: "file-path",
+							id: "file-path",
+							value: pathValue,
+							onChange: handleChange,
+							onBlur: () => {},
+							error: Boolean(error),
+							helperText: error,
+						}}
+						label="File Path"
 						autoComplete="off"
-						id="file-path"
 						placeholder="example.tf"
-						value={pathValue}
-						onChange={handleChange}
-						label="File Path"
 					/>
 				</div>
 			}
@@ -184,22 +187,25 @@ export const RenameFileDialog: FC<RenameFileDialogProps> = ({
 						Rename <strong>{filename}</strong> to something else. This path can
 						contain slashes too!
 					</p>
-					<TextField
+					<FormField
 						autoFocus
 						onKeyDown={(event) => {
 							if (event.key === "Enter") {
 								handleConfirm();
 							}
 						}}
-						error={Boolean(error)}
-						helperText={error}
-						name="file-path"
+						field={{
+							name: "file-path",
+							id: "file-path",
+							value: pathValue,
+							onChange: handleChange,
+							onBlur: () => {},
+							error: Boolean(error),
+							helperText: error,
+						}}
+						label="File Path"
 						autoComplete="off"
-						id="file-path"
 						placeholder={filename}
-						value={pathValue}
-						onChange={handleChange}
-						label="File Path"
 					/>
 				</div>
 			}

diff --git a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
@@ -1,10 +1,9 @@
-import Link from "@mui/material/Link";
-import useTheme from "@mui/system/useTheme";
 import type { FC } from "react";
 import type { ProvisionerDaemon } from "#/api/typesGenerated";
 import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
 import { FormSection, VerticalForm } from "#/components/Form/Form";
 import { TopbarButton } from "#/components/FullPageLayout/Topbar";
+import { Link } from "#/components/Link/Link";
 import {
 	Popover,
 	PopoverContent,
@@ -22,8 +21,6 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
 	tags,
 	onTagsChange,
 }) => {
-	const theme = useTheme();
-
 	return (
 		<Popover>
 			<PopoverTrigger asChild>
@@ -36,13 +33,7 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
 				align="end"
 				className="w-[300px] bg-surface-secondary border-surface-quaternary"
 			>
-				<div
-					css={{
-						color: theme.palette.text.secondary,
-						padding: 20,
-						borderBottom: `1px solid ${theme.palette.divider}`,
-					}}
-				>
+				<div className="text-content-secondary p-5">
 					<VerticalForm>
 						<FormSection
 							classes={{
@@ -60,6 +51,8 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
 										href={docs("/admin/provisioners")}
 										target="_blank"
 										rel="noreferrer"
+										className="p-0"
+										showExternalIcon={false}
 									>
 										Learn more...
 									</Link>