chore: move to using radix-ui over @radix-ui/react-* (#23911)

jakehwll · web-flow · commit ba0a64d483ad · 2026-04-02T18:49:33.000+11:00
This pull-request moves using to using the plain `radix-ui` package over
`@radix-ui/react-*` packages. Put simply, now we're not going to run
into issues with inconsistent radix dependencies. This will have no
effect to how the code is built, but will give us a single place to
import from.
diff --git a/.github/dependabot.yaml b/.github/dependabot.yaml
@@ -82,9 +82,6 @@ updates:
       mui:
         patterns:
           - "@mui*"
-      radix:
-        patterns:
-          - "@radix-ui/*"
       react:
         patterns:
           - "react"
diff --git a/site/package.json b/site/package.json
@@ -63,22 +63,6 @@
 		"@mui/x-tree-view": "7.29.10",
 		"@novnc/novnc": "^1.5.0",
 		"@pierre/diffs": "1.1.0-beta.19",
-		"@radix-ui/react-avatar": "1.1.11",
-		"@radix-ui/react-checkbox": "1.3.3",
-		"@radix-ui/react-collapsible": "1.1.12",
-		"@radix-ui/react-dialog": "1.1.15",
-		"@radix-ui/react-dropdown-menu": "2.1.16",
-		"@radix-ui/react-label": "2.1.8",
-		"@radix-ui/react-popover": "1.1.15",
-		"@radix-ui/react-radio-group": "1.3.8",
-		"@radix-ui/react-scroll-area": "1.2.10",
-		"@radix-ui/react-select": "2.2.6",
-		"@radix-ui/react-separator": "1.1.8",
-		"@radix-ui/react-slider": "1.3.6",
-		"@radix-ui/react-slot": "1.2.4",
-		"@radix-ui/react-switch": "1.2.6",
-		"@radix-ui/react-tabs": "1.1.13",
-		"@radix-ui/react-tooltip": "1.2.8",
 		"@tanstack/react-query-devtools": "5.77.0",
 		"@xterm/addon-canvas": "0.7.0",
 		"@xterm/addon-fit": "0.10.0",
@@ -109,6 +93,7 @@
 		"monaco-editor": "0.55.1",
 		"motion": "12.34.1",
 		"pretty-bytes": "6.1.1",
+		"radix-ui": "1.4.3",
 		"react": "19.2.2",
 		"react-color": "2.19.3",
 		"react-confetti": "6.4.0",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -9,10 +9,9 @@
  * It was also simplified to make usage easier and reduce boilerplate.
  * @see {@link https://github.com/coder/coder/pull/15930#issuecomment-2552292440}
  */
-
 import { useTheme } from "@emotion/react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Avatar as AvatarPrimitive } from "radix-ui";
 import { getExternalImageStylesFromUrl } from "#/theme/externalImages";
 import { cn } from "#/utils/cn";
 
diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx
@@ -2,8 +2,8 @@
  * Copied from shadc/ui on 11/13/2024
  * @see {@link https://ui.shadcn.com/docs/components/badge}
  */
-import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
 import { cn } from "#/utils/cn";
 
 const badgeVariants = cva(
@@ -78,7 +78,7 @@ export const Badge: React.FC<BadgeProps> = ({
 	asChild = false,
 	...props
 }) => {
-	const Comp = asChild ? Slot : "div";
+	const Comp = asChild ? Slot.Root : "div";
 
 	return (
 		<Comp
diff --git a/site/src/components/Breadcrumb/Breadcrumb.tsx b/site/src/components/Breadcrumb/Breadcrumb.tsx
@@ -2,8 +2,8 @@
  * Copied from shadc/ui on 12/13/2024
  * @see {@link https://ui.shadcn.com/docs/components/breadcrumb}
  */
-import { Slot } from "@radix-ui/react-slot";
 import { MoreHorizontal } from "lucide-react";
+import { Slot } from "radix-ui";
 import { cn } from "#/utils/cn";
 
 type BreadcrumbProps = React.ComponentPropsWithRef<"nav"> & {
@@ -53,7 +53,7 @@ export const BreadcrumbLink: React.FC<BreadcrumbLinkProps> = ({
 	className,
 	...props
 }) => {
-	const Comp = asChild ? Slot : "a";
+	const Comp = asChild ? Slot.Root : "a";
 
 	return (
 		<Comp
diff --git a/site/src/components/Button/Button.tsx b/site/src/components/Button/Button.tsx
@@ -2,8 +2,8 @@
  * Copied from shadc/ui on 11/06/2024
  * @see {@link https://ui.shadcn.com/docs/components/button}
  */
-import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
 import { cn } from "#/utils/cn";
 
 // Be careful when changing the child styles from the button such as images
@@ -69,7 +69,7 @@ export const Button: React.FC<ButtonProps> = ({
 	asChild = false,
 	...props
 }) => {
-	const Comp = asChild ? Slot : "button";
+	const Comp = asChild ? Slot.Root : "button";
 
 	// We want `type` to default to `"button"` when the component is not being
 	// used as a `Slot`. The default behavior of any given `<button>` element is
diff --git a/site/src/components/Checkbox/Checkbox.tsx b/site/src/components/Checkbox/Checkbox.tsx
@@ -2,8 +2,8 @@
  * Copied from shadc/ui on 04/03/2025
  * @see {@link https://ui.shadcn.com/docs/components/checkbox}
  */
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check, Minus } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import { cn } from "#/utils/cn";
 
 /**
diff --git a/site/src/components/Collapsible/Collapsible.tsx b/site/src/components/Collapsible/Collapsible.tsx
@@ -2,8 +2,7 @@
  * Copied from shadc/ui on 12/26/2024
  * @see {@link https://ui.shadcn.com/docs/components/collapsible}
  */
-
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
 
 const Collapsible = CollapsiblePrimitive.Root;
 
diff --git a/site/src/components/Dialog/Dialog.tsx b/site/src/components/Dialog/Dialog.tsx
@@ -2,8 +2,8 @@
  * Copied from shadc/ui on 11/13/2024
  * @see {@link https://ui.shadcn.com/docs/components/dialog}
  */
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Dialog as DialogPrimitive } from "radix-ui";
 import { cn } from "#/utils/cn";
 
 export const Dialog = DialogPrimitive.Root;
diff --git a/site/src/components/DropdownMenu/DropdownMenu.tsx b/site/src/components/DropdownMenu/DropdownMenu.tsx
@@ -5,9 +5,8 @@
  * This component was updated to match the styles from the Figma design:
  * @see {@link https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=656-2354&t=CiGt5le3yJEwMH4M-0}
  */
-
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { cn } from "#/utils/cn";
 
 export const DropdownMenu = DropdownMenuPrimitive.Root;
diff --git a/site/src/components/Label/Label.tsx b/site/src/components/Label/Label.tsx
@@ -2,8 +2,8 @@
  * Copied from shadc/ui on 11/13/2024
  * @see {@link https://ui.shadcn.com/docs/components/label}
  */
-import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Label as LabelPrimitive } from "radix-ui";
 import { cn } from "#/utils/cn";
 
 const labelVariants = cva(
diff --git a/site/src/components/Link/Link.tsx b/site/src/components/Link/Link.tsx
@@ -1,6 +1,6 @@
-import { Slot, Slottable } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { SquareArrowOutUpRightIcon } from "lucide-react";
+import { Slot } from "radix-ui";
 import { cn } from "#/utils/cn";
 
 const linkVariants = cva(
@@ -37,10 +37,10 @@ export const Link: React.FC<LinkProps> = ({
 	showExternalIcon = true,
 	...props
 }) => {
-	const Comp = asChild ? Slot : "a";
+	const Comp = asChild ? Slot.Root : "a";
 	return (
 		<Comp className={cn(linkVariants({ size }), className)} {...props}>
-			<Slottable>{children}</Slottable>
+			<Slot.Slottable>{children}</Slot.Slottable>
 			{showExternalIcon && <SquareArrowOutUpRightIcon />}
 		</Comp>
 	);
diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
@@ -2,7 +2,7 @@
  * Copied from shadcn/ui and modified on 12/13/2024
  * @see {@link https://ui.shadcn.com/docs/components/popover}
  */
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import { cn } from "#/utils/cn";
 
 export type PopoverContentProps = React.ComponentPropsWithRef<
diff --git a/site/src/components/RadioGroup/RadioGroup.tsx b/site/src/components/RadioGroup/RadioGroup.tsx
@@ -2,8 +2,8 @@
  * Copied from shadc/ui on 04/04/2025
  * @see {@link https://ui.shadcn.com/docs/components/radio-group}
  */
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Circle } from "lucide-react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
 import { cn } from "#/utils/cn";
 
 export const RadioGroup: React.FC<
diff --git a/site/src/components/ScrollArea/ScrollArea.tsx b/site/src/components/ScrollArea/ScrollArea.tsx
@@ -2,7 +2,7 @@
  * Copied from shadc/ui on 03/05/2025
  * @see {@link https://ui.shadcn.com/docs/components/scroll-area}
  */
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
 import { useCallback, useRef } from "react";
 import { cn } from "#/utils/cn";
 
diff --git a/site/src/components/Select/Select.tsx b/site/src/components/Select/Select.tsx
@@ -2,12 +2,12 @@
  * Copied from shadc/ui on 13/01/2025
  * @see {@link https://ui.shadcn.com/docs/components/select}
  */
-import * as SelectPrimitive from "@radix-ui/react-select";
 import {
 	Check,
 	ChevronUp,
 	ChevronDown as LucideChevronDown,
 } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
 import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
 import { cn } from "#/utils/cn";
 
diff --git a/site/src/components/Separator/Separator.tsx b/site/src/components/Separator/Separator.tsx
@@ -1,8 +1,8 @@
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
 /**
  * Copied from shadc/ui on 06/20/2025
  * @see {@link https://ui.shadcn.com/docs/components/separator}
  */
+import { Separator as SeparatorPrimitive } from "radix-ui";
 import type * as React from "react";
 import { cn } from "#/utils/cn";
 
diff --git a/site/src/components/Slider/Slider.tsx b/site/src/components/Slider/Slider.tsx
@@ -2,7 +2,7 @@
  * Copied from shadc/ui on 04/16/2025
  * @see {@link https://ui.shadcn.com/docs/components/slider}
  */
-import * as SliderPrimitive from "@radix-ui/react-slider";
+import { Slider as SliderPrimitive } from "radix-ui";
 import { cn } from "#/utils/cn";
 
 export const Slider: React.FC<
diff --git a/site/src/components/Switch/Switch.tsx b/site/src/components/Switch/Switch.tsx
@@ -2,8 +2,8 @@
  * Copied from shadc/ui on 11/13/2024
  * @see {@link https://ui.shadcn.com/docs/components/switch}
  */
-import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Switch as SwitchPrimitives } from "radix-ui";
 import { cn } from "#/utils/cn";
 
 const switchVariants = cva(
diff --git a/site/src/components/Tabs/Tabs.tsx b/site/src/components/Tabs/Tabs.tsx
@@ -1,5 +1,5 @@
-import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
 import {
 	type ComponentProps,
 	createContext,
diff --git a/site/src/components/Tooltip/Tooltip.tsx b/site/src/components/Tooltip/Tooltip.tsx
@@ -2,7 +2,7 @@
  * Copied from shadc/ui on 02/05/2025
  * @see {@link https://ui.shadcn.com/docs/components/tooltip}
  */
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 import { cn } from "#/utils/cn";
 
 export const TooltipProvider = TooltipPrimitive.Provider;
diff --git a/site/src/pages/CreateUserPage/CreateUserForm.tsx b/site/src/pages/CreateUserPage/CreateUserForm.tsx
@@ -1,6 +1,6 @@
-import * as SelectPrimitive from "@radix-ui/react-select";
 import { useFormik } from "formik";
 import { Check } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
 import type { FC } from "react";
 import * as Yup from "yup";
 import { hasApiFieldErrors, isApiError } from "#/api/errors";
diff --git a/site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx b/site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx
@@ -1,6 +1,5 @@
-import { Label } from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
 import { TriangleAlert } from "lucide-react";
+import { Label, Slot } from "radix-ui";
 import {
 	type FC,
 	type ForwardedRef,
@@ -201,14 +200,14 @@ const RunningWorkspacesWarning: FC<RunningWorkspacesWarningProps> = ({
 				<li>Any unsaved data will be lost.</li>
 			</ul>
 
-			<Label className="flex flex-row gap-3 items-center leading-tight pt-6">
+			<Label.Root className="flex flex-row gap-3 items-center leading-tight pt-6">
 				<Checkbox
 					ref={checkboxRef}
 					checked={acceptedRisks}
 					onCheckedChange={onAcceptedRisksChange}
 				/>
 				I acknowledge these risks.
-			</Label>
+			</Label.Root>
 		</div>
 	);
 };
@@ -219,7 +218,7 @@ type ContainerProps = Readonly<{
 }>;
 
 const Container: FC<ContainerProps> = ({ children, asChild = false }) => {
-	const Wrapper = asChild ? Slot : "div";
+	const Wrapper = asChild ? Slot.Root : "div";
 	return (
 		<Wrapper className="max-h-[80vh] flex flex-col flex-nowrap">
 			{children}
