diff --git a/.changeset/cloudinary-vanilla-extract.md b/.changeset/cloudinary-vanilla-extract.md
new file mode 100644
index 0000000000..0bb954b389
--- /dev/null
+++ b/.changeset/cloudinary-vanilla-extract.md
@@ -0,0 +1,5 @@
+---
+"sanity-plugin-cloudinary": patch
+---
+
+Migrate styling from styled-components to vanilla-extract (zero-runtime CSS)
diff --git a/plugins/sanity-plugin-cloudinary/package.json b/plugins/sanity-plugin-cloudinary/package.json
index e4ca0db93a..12ad952c46 100644
--- a/plugins/sanity-plugin-cloudinary/package.json
+++ b/plugins/sanity-plugin-cloudinary/package.json
@@ -24,11 +24,25 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./src/index.ts",
+    "./bundle.css": {
+      "types": "./dist/bundle-css.d.ts",
+      "browser": "./dist/bundle.css",
+      "style": "./dist/bundle.css",
+      "node": "./dist/bundle-css.js",
+      "default": "./dist/bundle-css.js"
+    },
     "./package.json": "./package.json"
   },
   "publishConfig": {
     "exports": {
       ".": "./dist/index.js",
+      "./bundle.css": {
+        "types": "./dist/bundle-css.d.ts",
+        "browser": "./dist/bundle.css",
+        "style": "./dist/bundle.css",
+        "node": "./dist/bundle-css.js",
+        "default": "./dist/bundle-css.js"
+      },
       "./package.json": "./package.json"
     }
   },
@@ -41,13 +55,16 @@
     "@sanity/icons": "catalog:",
     "@sanity/studio-secrets": "workspace:^",
     "@sanity/ui": "catalog:",
+    "clsx": "catalog:",
     "nanoid": "catalog:"
   },
   "devDependencies": {
     "@sanity/tsconfig": "catalog:",
     "@sanity/tsdown-config": "catalog:",
+    "@sanity/vanilla-extract-vite-plugin": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
+    "@vanilla-extract/css": "catalog:",
     "babel-plugin-react-compiler": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
@@ -58,8 +75,7 @@
   "peerDependencies": {
     "react": "catalog:peer",
     "react-dom": "catalog:peer",
-    "sanity": "catalog:peer",
-    "styled-components": "catalog:peer"
+    "sanity": "catalog:peer"
   },
   "engines": {
     "node": ">=20.19 <22 || >=22.12"
diff --git a/plugins/sanity-plugin-cloudinary/src/components/AssetDiff.css.ts b/plugins/sanity-plugin-cloudinary/src/components/AssetDiff.css.ts
new file mode 100644
index 0000000000..d9a3d9d8c7
--- /dev/null
+++ b/plugins/sanity-plugin-cloudinary/src/components/AssetDiff.css.ts
@@ -0,0 +1,12 @@
+import {style} from '@vanilla-extract/css'
+
+export const videoDiff = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'space-between',
+})
+
+export const previewImage = style({
+  maxWidth: '100%',
+  height: 'auto',
+})
diff --git a/plugins/sanity-plugin-cloudinary/src/components/AssetDiff.tsx b/plugins/sanity-plugin-cloudinary/src/components/AssetDiff.tsx
index e5f00ce495..8078b6a5f1 100644
--- a/plugins/sanity-plugin-cloudinary/src/components/AssetDiff.tsx
+++ b/plugins/sanity-plugin-cloudinary/src/components/AssetDiff.tsx
@@ -6,6 +6,8 @@ import {assetUrl} from '../utils'
 import {namespace, type Secrets} from './SecretsConfigView'
 import VideoPlayer from './VideoPlayer'
 
+import {previewImage, videoDiff} from './AssetDiff.css'
+
 type Props = {
   value: CloudinaryAsset | undefined
 }
@@ -22,19 +24,13 @@ const CloudinaryDiffPreview = ({value}: Props) => {
 
   if (value.resource_type === 'video' && url) {
     return (
-      <section
-        style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          justifyContent: 'space-between',
-        }}
-      >
+      <section className={videoDiff}>
         <VideoPlayer src={url} kind="diff" />
       </section>
     )
   }
 
-  return <img alt="preview" src={url} style={{maxWidth: '100%', height: 'auto'}} />
+  return <img alt="preview" src={url} className={previewImage} />
 }
 
 type DiffProps = {
diff --git a/plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.css.ts b/plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.css.ts
new file mode 100644
index 0000000000..7438a092b7
--- /dev/null
+++ b/plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.css.ts
@@ -0,0 +1,10 @@
+import {style} from '@vanilla-extract/css'
+
+export const fullWidthButton = style({
+  selectors: {
+    // Match the previous inline `width: 100%` against Button's own width rules.
+    '&&': {
+      width: '100%',
+    },
+  },
+})
diff --git a/plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.tsx b/plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.tsx
index 102253457b..6cd644a554 100644
--- a/plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.tsx
+++ b/plugins/sanity-plugin-cloudinary/src/components/AssetListFunctions.tsx
@@ -1,7 +1,8 @@
 import {PlugIcon} from '@sanity/icons/Plug'
 import {useSecrets} from '@sanity/studio-secrets'
 import {Box, Button, Flex} from '@sanity/ui'
-import {useCallback, useState} from 'react'
+import {clsx} from 'clsx/lite'
+import {type ComponentProps, useCallback, useState} from 'react'
 import {
   type ArrayInputFunctionsProps,
   ArrayOfObjectsFunctions,
@@ -17,6 +18,12 @@ import type {InsertHandlerParams} from '../types'
 import {openMediaSelector} from '../utils'
 import SecretsConfigView, {namespace} from './SecretsConfigView'
 
+import {fullWidthButton} from './AssetListFunctions.css'
+
+function FullWidthButton({className, ...props}: ComponentProps<typeof Button>) {
+  return <Button {...props} className={clsx(fullWidthButton, className)} />
+}
+
 interface ApiConfig {
   cloudName: string
   apiKey: string
@@ -82,8 +89,7 @@ export const AssetListFunctions = (
       {cloudinaryType && (
         <>
           <Box flex={1}>
-            <Button
-              style={{width: '100%'}}
+            <FullWidthButton
               disabled={props.readOnly || loading}
               mode="bleed"
               text="Add multiple"
diff --git a/plugins/sanity-plugin-cloudinary/src/components/AssetPreview.css.ts b/plugins/sanity-plugin-cloudinary/src/components/AssetPreview.css.ts
new file mode 100644
index 0000000000..d73148d0d1
--- /dev/null
+++ b/plugins/sanity-plugin-cloudinary/src/components/AssetPreview.css.ts
@@ -0,0 +1,34 @@
+import {style, styleVariants} from '@vanilla-extract/css'
+
+export const videoPreview = styleVariants({
+  default: {
+    maxWidth: '80px',
+  },
+  block: {
+    maxWidth: '100%',
+  },
+})
+
+export const rawFileLabel = style({
+  marginLeft: '0.5em',
+})
+
+export const thumbnailFlex = style({
+  width: '100%',
+})
+
+export const thumbnailImage = style({
+  maxWidth: '80px',
+  height: 'auto',
+  display: 'block',
+})
+
+export const fullWidthPreview = style({
+  width: '100%',
+})
+
+export const fullWidthImage = style({
+  width: '100%',
+  height: 'auto',
+  display: 'block',
+})
diff --git a/plugins/sanity-plugin-cloudinary/src/components/AssetPreview.tsx b/plugins/sanity-plugin-cloudinary/src/components/AssetPreview.tsx
index 0d0c8d2600..25168c4dde 100644
--- a/plugins/sanity-plugin-cloudinary/src/components/AssetPreview.tsx
+++ b/plugins/sanity-plugin-cloudinary/src/components/AssetPreview.tsx
@@ -1,18 +1,50 @@
 import {DocumentIcon} from '@sanity/icons/Document'
 import {useSecrets} from '@sanity/studio-secrets'
 import {Flex, Text} from '@sanity/ui'
+import {clsx} from 'clsx/lite'
+import type {ComponentProps} from 'react'
 
 import type {CloudinaryAsset} from '../types'
 import {assetUrl} from '../utils'
 import {namespace, type Secrets} from './SecretsConfigView'
 import VideoPlayer from './VideoPlayer'
 
-interface ComponentProps {
+import {
+  fullWidthImage,
+  fullWidthPreview,
+  rawFileLabel,
+  thumbnailFlex,
+  thumbnailImage,
+  videoPreview,
+} from './AssetPreview.css'
+
+interface AssetPreviewProps {
   layout?: 'default' | 'block'
   value: CloudinaryAsset | undefined
 }
 
-const AssetPreview = ({value, layout}: ComponentProps) => {
+function VideoPreviewFlex({
+  layout,
+  className,
+  ...props
+}: ComponentProps<typeof Flex> & {layout?: 'default' | 'block'}) {
+  const layoutClass = videoPreview[layout === 'default' ? 'default' : 'block']
+  return <Flex {...props} className={clsx(layoutClass, className)} />
+}
+
+function RawFileLabel({className, ...props}: ComponentProps<typeof Text>) {
+  return <Text {...props} className={clsx(rawFileLabel, className)} />
+}
+
+function ThumbnailFlex({className, ...props}: ComponentProps<typeof Flex>) {
+  return <Flex {...props} className={clsx(thumbnailFlex, className)} />
+}
+
+function FullWidthPreview({className, ...props}: ComponentProps<'div'>) {
+  return <div {...props} className={clsx(fullWidthPreview, className)} />
+}
+
+const AssetPreview = ({value, layout}: AssetPreviewProps) => {
   const {secrets} = useSecrets<Secrets>(namespace)
   const cloudName = secrets?.cloudName
 
@@ -28,22 +60,15 @@ const AssetPreview = ({value, layout}: ComponentProps) => {
   switch (value.resource_type) {
     case 'video':
       return (
-        <Flex
-          align="center"
-          style={{
-            maxWidth: layout === 'default' ? '80px' : '100%',
-          }}
-        >
+        <VideoPreviewFlex align="center" layout={layout}>
           <VideoPlayer src={url} kind="player" />
-        </Flex>
+        </VideoPreviewFlex>
       )
     case 'raw':
       return (
         <Flex align="center">
           <DocumentIcon />
-          <Text size={1} style={{marginLeft: '0.5em'}}>
-            {value.display_name ?? 'Raw file'}
-          </Text>
+          <RawFileLabel size={1}>{value.display_name ?? 'Raw file'}</RawFileLabel>
         </Flex>
       )
     default: {
@@ -59,21 +84,13 @@ const AssetPreview = ({value, layout}: ComponentProps) => {
           : url
 
       return layout === 'default' ? (
-        <Flex align="center" justify="center" style={{width: '100%'}}>
-          <img
-            alt="preview"
-            src={previewSrc}
-            style={{maxWidth: '80px', height: 'auto', display: 'block'}}
-          />
-        </Flex>
+        <ThumbnailFlex align="center" justify="center">
+          <img alt="preview" src={previewSrc} className={thumbnailImage} />
+        </ThumbnailFlex>
       ) : (
-        <div style={{width: '100%'}}>
-          <img
-            alt="preview"
-            src={previewSrc}
-            style={{width: '100%', height: 'auto', display: 'block'}}
-          />
-        </div>
+        <FullWidthPreview>
+          <img alt="preview" src={previewSrc} className={fullWidthImage} />
+        </FullWidthPreview>
       )
     }
   }
diff --git a/plugins/sanity-plugin-cloudinary/src/components/CloudinaryReferenceInput.css.ts b/plugins/sanity-plugin-cloudinary/src/components/CloudinaryReferenceInput.css.ts
new file mode 100644
index 0000000000..b400ffa62a
--- /dev/null
+++ b/plugins/sanity-plugin-cloudinary/src/components/CloudinaryReferenceInput.css.ts
@@ -0,0 +1,10 @@
+import {style} from '@vanilla-extract/css'
+
+export const previewFlex = style({
+  textAlign: 'center',
+  width: '100%',
+})
+
+export const actionGrid = style({
+  gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
+})
diff --git a/plugins/sanity-plugin-cloudinary/src/components/CloudinaryReferenceInput.tsx b/plugins/sanity-plugin-cloudinary/src/components/CloudinaryReferenceInput.tsx
index b3727e47d2..c813b798f4 100644
--- a/plugins/sanity-plugin-cloudinary/src/components/CloudinaryReferenceInput.tsx
+++ b/plugins/sanity-plugin-cloudinary/src/components/CloudinaryReferenceInput.tsx
@@ -1,8 +1,9 @@
 import {PlugIcon} from '@sanity/icons/Plug'
 import {useSecrets} from '@sanity/studio-secrets'
 import {Button, Flex, Grid, Stack} from '@sanity/ui'
+import {clsx} from 'clsx/lite'
 import {nanoid} from 'nanoid'
-import {useCallback, useMemo, useRef, useState} from 'react'
+import {type ComponentProps, useCallback, useMemo, useRef, useState} from 'react'
 import {type ObjectInputProps, getPublishedId, PatchEvent, set, unset, useClient} from 'sanity'
 
 import {cloudinaryAssetSchema} from '../schema/cloudinaryAsset'
@@ -11,6 +12,16 @@ import {normalizeCloudinaryAsset, openMediaSelector} from '../utils'
 import ReferencePreview from './ReferencePreview'
 import SecretsConfigView, {namespace, type Secrets} from './SecretsConfigView'
 
+import {actionGrid, previewFlex} from './CloudinaryReferenceInput.css'
+
+function PreviewFlex({className, ...props}: ComponentProps<typeof Flex>) {
+  return <Flex {...props} className={clsx(previewFlex, className)} />
+}
+
+function ActionGrid({className, ...props}: ComponentProps<typeof Grid>) {
+  return <Grid {...props} className={clsx(actionGrid, className)} />
+}
+
 const API_VERSION = '2023-01-01'
 
 // Fallback so the button doesn't stay disabled if the media library never reports it opened
@@ -228,12 +239,12 @@ const CloudinaryReferenceInput = (props: ObjectInputProps) => {
         />
       </Flex>
 
-      <Flex marginBottom={2} style={{textAlign: 'center', width: '100%'}}>
+      <PreviewFlex marginBottom={2}>
         <ReferencePreview value={reference} revision={previewRevision} />
-      </Flex>
+      </PreviewFlex>
 
       <Stack gap={2}>
-        <Grid gap={1} style={{gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))'}}>
+        <ActionGrid gap={1}>
           <Button
             text={selectButtonText}
             onClick={handleOpenSelector}
@@ -252,7 +263,7 @@ const CloudinaryReferenceInput = (props: ObjectInputProps) => {
               disabled={actionsDisabled}
             />
           ) : null}
-        </Grid>
+        </ActionGrid>
       </Stack>
     </Stack>
   )
diff --git a/plugins/sanity-plugin-cloudinary/src/components/WidgetInput.css.ts b/plugins/sanity-plugin-cloudinary/src/components/WidgetInput.css.ts
new file mode 100644
index 0000000000..b41fe21c03
--- /dev/null
+++ b/plugins/sanity-plugin-cloudinary/src/components/WidgetInput.css.ts
@@ -0,0 +1,17 @@
+import {style} from '@vanilla-extract/css'
+
+export const setupButtonContainer = style({
+  position: 'relative',
+  display: 'block',
+  fontSize: '0.8em',
+  transform: 'translate(0%, -10%)',
+})
+
+export const previewFlex = style({
+  textAlign: 'center',
+  width: '100%',
+})
+
+export const actionGrid = style({
+  gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
+})
diff --git a/plugins/sanity-plugin-cloudinary/src/components/WidgetInput.tsx b/plugins/sanity-plugin-cloudinary/src/components/WidgetInput.tsx
index ce36c3d518..213e24a0da 100644
--- a/plugins/sanity-plugin-cloudinary/src/components/WidgetInput.tsx
+++ b/plugins/sanity-plugin-cloudinary/src/components/WidgetInput.tsx
@@ -1,18 +1,25 @@
 import {PlugIcon} from '@sanity/icons/Plug'
 import {Button, Flex, Grid, Stack} from '@sanity/ui'
-import {useCallback} from 'react'
+import {clsx} from 'clsx/lite'
+import {type ComponentProps, useCallback} from 'react'
 import {type ObjectInputProps, PatchEvent, unset} from 'sanity'
-import {styled} from 'styled-components'
 
 import type {CloudinaryAsset} from '../types'
 import AssetPreview from './AssetPreview'
 
-const SetupButtonContainer = styled.div`
-  position: relative;
-  display: block;
-  font-size: 0.8em;
-  transform: translate(0%, -10%);
-`
+import {actionGrid, previewFlex, setupButtonContainer} from './WidgetInput.css'
+
+function SetupButtonContainer({className, ...props}: ComponentProps<'div'>) {
+  return <div {...props} className={clsx(setupButtonContainer, className)} />
+}
+
+function PreviewFlex({className, ...props}: ComponentProps<typeof Flex>) {
+  return <Flex {...props} className={clsx(previewFlex, className)} />
+}
+
+function ActionGrid({className, ...props}: ComponentProps<typeof Grid>) {
+  return <Grid {...props} className={clsx(actionGrid, className)} />
+}
 
 type WidgetInputProps = ObjectInputProps & {openMediaSelector: () => void; onSetup: () => void}
 
@@ -38,11 +45,11 @@ const WidgetInput = (props: WidgetInputProps) => {
         </Flex>
       </SetupButtonContainer>
 
-      <Flex style={{textAlign: 'center', width: '100%'}} marginBottom={2}>
+      <PreviewFlex marginBottom={2}>
         <AssetPreview value={value as CloudinaryAsset} />
-      </Flex>
+      </PreviewFlex>
 
-      <Grid gap={1} style={{gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))'}}>
+      <ActionGrid gap={1}>
         <Button
           disabled={readOnly}
           mode="ghost"
@@ -59,7 +66,7 @@ const WidgetInput = (props: WidgetInputProps) => {
           text="Remove"
           onClick={removeValue}
         />
-      </Grid>
+      </ActionGrid>
     </Stack>
   )
 }
diff --git a/plugins/sanity-plugin-cloudinary/src/components/asset-source/CloudinaryAssetSource.css.ts b/plugins/sanity-plugin-cloudinary/src/components/asset-source/CloudinaryAssetSource.css.ts
new file mode 100644
index 0000000000..67c46a39fc
--- /dev/null
+++ b/plugins/sanity-plugin-cloudinary/src/components/asset-source/CloudinaryAssetSource.css.ts
@@ -0,0 +1,5 @@
+import {style} from '@vanilla-extract/css'
+
+export const widget = style({
+  height: '70vh',
+})
diff --git a/plugins/sanity-plugin-cloudinary/src/components/asset-source/CloudinaryAssetSource.tsx b/plugins/sanity-plugin-cloudinary/src/components/asset-source/CloudinaryAssetSource.tsx
index 7a0ae5c3fa..4983ec77fc 100644
--- a/plugins/sanity-plugin-cloudinary/src/components/asset-source/CloudinaryAssetSource.tsx
+++ b/plugins/sanity-plugin-cloudinary/src/components/asset-source/CloudinaryAssetSource.tsx
@@ -1,17 +1,19 @@
 import {PlugIcon} from '@sanity/icons/Plug'
 import {useSecrets} from '@sanity/studio-secrets'
 import {Box, Button, Dialog, Flex, Spinner, Stack, Text} from '@sanity/ui'
-import {useCallback, useEffect, useRef, useState} from 'react'
+import {clsx} from 'clsx/lite'
+import {type ComponentProps, useCallback, useEffect, useRef, useState} from 'react'
 import type {AssetSourceComponentProps, ImageAsset} from 'sanity'
-import {styled} from 'styled-components'
 
 import type {CloudinaryMediaLibrary, InsertHandlerParams} from '../../types'
 import {createMediaLibrary, decodeSourceId, encodeFilename, encodeSourceId} from '../../utils'
 import SecretsConfigView, {namespace, type Secrets} from '../SecretsConfigView'
 
-const Widget = styled.div`
-  height: 70vh;
-`
+import {widget} from './CloudinaryAssetSource.css'
+
+function Widget({className, ...props}: ComponentProps<'div'>) {
+  return <div {...props} className={clsx(widget, className)} />
+}
 
 export function CloudinaryAssetSource(props: AssetSourceComponentProps) {
   const {onClose, dialogHeaderTitle} = props
diff --git a/plugins/sanity-plugin-cloudinary/src/index.test.ts b/plugins/sanity-plugin-cloudinary/src/index.test.ts
index 18a8810433..beb64be55f 100644
--- a/plugins/sanity-plugin-cloudinary/src/index.test.ts
+++ b/plugins/sanity-plugin-cloudinary/src/index.test.ts
@@ -23,6 +23,7 @@ test('package exports', {timeout: 30_000}, async () => {
         "cloudinaryReferencePlugin": "function",
         "cloudinarySchemaPlugin": "function",
       },
+      "./bundle.css": {},
     }
   `)
 })
diff --git a/plugins/sanity-plugin-cloudinary/tsdown.config.ts b/plugins/sanity-plugin-cloudinary/tsdown.config.ts
index 757ef5c8f1..95e821b63c 100644
--- a/plugins/sanity-plugin-cloudinary/tsdown.config.ts
+++ b/plugins/sanity-plugin-cloudinary/tsdown.config.ts
@@ -2,6 +2,6 @@ import {defineConfig} from '@sanity/tsdown-config'
 import type {UserConfig} from 'tsdown'
 
 export default defineConfig({
-  styledComponents: true,
   reactCompiler: true,
+  vanillaExtract: true,
 }) satisfies Promise<UserConfig>
diff --git a/plugins/sanity-plugin-cloudinary/vitest.config.ts b/plugins/sanity-plugin-cloudinary/vitest.config.ts
index 8eda73152e..eec31393fd 100644
--- a/plugins/sanity-plugin-cloudinary/vitest.config.ts
+++ b/plugins/sanity-plugin-cloudinary/vitest.config.ts
@@ -1,7 +1,10 @@
+import {vanillaExtractPlugin} from '@sanity/vanilla-extract-vite-plugin'
 import {defineConfig} from 'vitest/config'
 
 export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
   test: {
+    setupFiles: ['@vanilla-extract/css/disableRuntimeStyles'],
     server: {
       deps: {
         inline: ['vitest-package-exports'],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index df0da1262a..83ed52ea70 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -97,6 +97,9 @@ catalogs:
     babel-plugin-react-compiler:
       specifier: ^1.0.0
       version: 1.0.0
+    clsx:
+      specifier: ^2.1.1
+      version: 2.1.1
     date-fns:
       specifier: ^4.4.0
       version: 4.4.0
@@ -2023,6 +2026,9 @@ importers:
       '@sanity/ui':
         specifier: 'catalog:'
         version: 3.5.1(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.8)(react@19.2.8)(styled-components@6.4.4)
+      clsx:
+        specifier: 'catalog:'
+        version: 2.1.1
       nanoid:
         specifier: 'catalog:'
         version: 6.0.0
@@ -2036,12 +2042,18 @@ importers:
       '@sanity/tsdown-config':
         specifier: 'catalog:'
         version: 0.21.3(@babel/runtime@7.29.7)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(rolldown@1.2.1)(tsdown@0.22.14)(typescript@7.0.2)(vite@8.2.0)
+      '@sanity/vanilla-extract-vite-plugin':
+        specifier: 'catalog:'
+        version: 0.2.8(babel-plugin-macros@3.1.0)(vite@8.2.0)
       '@types/react':
         specifier: 'catalog:'
         version: 19.2.18
       '@types/react-dom':
         specifier: 'catalog:'
         version: 19.2.4(@types/react@19.2.18)
+      '@vanilla-extract/css':
+        specifier: 'catalog:'
+        version: 1.21.2(babel-plugin-macros@3.1.0)
       babel-plugin-react-compiler:
         specifier: 'catalog:'
         version: 1.0.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 6516aa75b8..b22ba96cc7 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -49,6 +49,7 @@ catalog:
   '@vis.gl/react-google-maps': ^1.9.0
   '@vitest/coverage-v8': ^4.1.10
   babel-plugin-react-compiler: ^1.0.0
+  clsx: ^2.1.1
   date-fns: ^4.4.0
   groq: ^6.9.0
   jsdom: ^29.1.1