diff --git a/app/layouts/helpers.tsx b/app/layouts/helpers.tsx
index e47e505d7b..7624ac9616 100644
--- a/app/layouts/helpers.tsx
+++ b/app/layouts/helpers.tsx
@@ -1,5 +1,5 @@
 import './helpers.css'
-import { classed } from '@oxide/ui'
+import { classed } from '@oxide/util'
 
 export const PageContainer = classed.div`ox-page-container`
 export const Sidebar = classed.div`ox-sidebar`
diff --git a/app/pages/ToastTestPage.tsx b/app/pages/ToastTestPage.tsx
index 9aa366b3e2..99cad82311 100644
--- a/app/pages/ToastTestPage.tsx
+++ b/app/pages/ToastTestPage.tsx
@@ -1,6 +1,7 @@
-import { Button, classed, Comment16Icon, Success16Icon } from '@oxide/ui'
+import { Button, Comment16Icon, Success16Icon } from '@oxide/ui'
 import React, { useState } from 'react'
 import { useToast } from '../hooks'
+import { classed } from '@oxide/util'
 
 const useCounter = (initialValue: number): [number, () => void] => {
   const [value, setValue] = useState(initialValue)
diff --git a/app/pages/project/instances/create/InstancesCreatePage.tsx b/app/pages/project/instances/create/InstancesCreatePage.tsx
index 6188c7bdcd..c48bc6fcae 100644
--- a/app/pages/project/instances/create/InstancesCreatePage.tsx
+++ b/app/pages/project/instances/create/InstancesCreatePage.tsx
@@ -4,7 +4,6 @@ import cn from 'classnames'
 import { Formik, Form } from 'formik'
 
 import {
-  classed,
   Button,
   PageHeader,
   PageTitle,
@@ -19,6 +18,7 @@ import {
   FieldTitle,
   Badge,
 } from '@oxide/ui'
+import { classed } from '@oxide/util'
 import { useApiMutation } from '@oxide/api'
 import { getServerError } from '../../../../util/errors'
 import { INSTANCE_SIZES } from './instance-types'
diff --git a/libs/ui/index.ts b/libs/ui/index.ts
index 60f78a635e..23a8479298 100644
--- a/libs/ui/index.ts
+++ b/libs/ui/index.ts
@@ -22,5 +22,3 @@ export * from './lib/tabs/Tabs'
 export * from './lib/table/Table'
 export * from './lib/tooltip/Tooltip'
 export * from './lib/toast/Toast'
-
-export * from './util/classed'
diff --git a/libs/ui/lib/PageHeader.tsx b/libs/ui/lib/PageHeader.tsx
index 12615226f4..32ac158a2f 100644
--- a/libs/ui/lib/PageHeader.tsx
+++ b/libs/ui/lib/PageHeader.tsx
@@ -2,7 +2,7 @@ import type { ReactElement } from 'react'
 import { cloneElement } from 'react'
 import React from 'react'
 
-import { classed } from '../util/classed'
+import { classed } from '@oxide/util'
 
 export const PageHeader = classed.header`flex items-center justify-between mb-16 mt-4`
 
diff --git a/libs/ui/lib/checkbox/Checkbox.tsx b/libs/ui/lib/checkbox/Checkbox.tsx
index 902bf9ffd8..df492f2f16 100644
--- a/libs/ui/lib/checkbox/Checkbox.tsx
+++ b/libs/ui/lib/checkbox/Checkbox.tsx
@@ -1,7 +1,7 @@
 import { Checkmark12Icon } from '@oxide/ui'
 import React from 'react'
 
-import { classed } from '../../util/classed'
+import { classed } from '@oxide/util'
 
 const Check = () => (
   <Checkmark12Icon className="absolute w-3 h-2.5 left-0.5 top-0.5 fill-current text-green-500" />
diff --git a/libs/ui/lib/radio-group/RadioGroup.tsx b/libs/ui/lib/radio-group/RadioGroup.tsx
index fbdddce48e..53273e6df2 100644
--- a/libs/ui/lib/radio-group/RadioGroup.tsx
+++ b/libs/ui/lib/radio-group/RadioGroup.tsx
@@ -43,7 +43,7 @@
 import React from 'react'
 import cn from 'classnames'
 
-import { classed } from '../../util/classed'
+import { classed } from '@oxide/util'
 
 export const RadioGroupHint = classed.p`text-base text-gray-100 font-sans font-light max-w-3xl`
 
diff --git a/libs/ui/lib/side-modal/SideModal.tsx b/libs/ui/lib/side-modal/SideModal.tsx
index 5d1d2f822b..bcbeec231c 100644
--- a/libs/ui/lib/side-modal/SideModal.tsx
+++ b/libs/ui/lib/side-modal/SideModal.tsx
@@ -5,7 +5,7 @@ import { Button } from '../button/Button'
 import { pluckFirstOfType } from '@oxide/util'
 import type { ChildrenProp } from '@oxide/util'
 import { Close12Icon } from '../icons'
-import cn from 'classnames'
+import { classed } from '@oxide/util'
 
 export interface SideModalProps extends DialogProps, ChildrenProp {
   id: string
@@ -52,17 +52,7 @@ export function SideModal({
   )
 }
 
-SideModal.Section = ({
-  children,
-  className,
-}: {
-  children: React.ReactNode
-  className?: string
-}) => (
-  <div className={cn('p-8 space-y-6 border-gray-400', className)}>
-    {children}
-  </div>
-)
+SideModal.Section = classed.div`p-8 space-y-6 border-gray-400`
 
 SideModal.Docs = ({ children }: ChildrenProp) => (
   <SideModal.Section>
diff --git a/libs/ui/util/classed.ts b/libs/util/classed.ts
similarity index 100%
rename from libs/ui/util/classed.ts
rename to libs/util/classed.ts
diff --git a/libs/util/index.ts b/libs/util/index.ts
index 985449f486..a937e615f8 100644
--- a/libs/util/index.ts
+++ b/libs/util/index.ts
@@ -1,3 +1,4 @@
+export * from './classed'
 export * from './str'
 export * from './invariant'
 export * from './object'