diff --git a/site/components/cart/CartItem/CartItem.tsx b/site/components/cart/CartItem/CartItem.tsx
index a9d143a1c..ecd3e39ae 100644
--- a/site/components/cart/CartItem/CartItem.tsx
+++ b/site/components/cart/CartItem/CartItem.tsx
@@ -1,5 +1,5 @@
 import { ChangeEvent, FocusEventHandler, useEffect, useState } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import Image from 'next/image'
 import Link from 'next/link'
 import s from './CartItem.module.css'
diff --git a/site/components/cart/CartSidebarView/CartSidebarView.tsx b/site/components/cart/CartSidebarView/CartSidebarView.tsx
index 2fa7980f2..327602c0b 100644
--- a/site/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/site/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import Link from 'next/link'
 import { FC } from 'react'
 import s from './CartSidebarView.module.css'
diff --git a/site/components/checkout/PaymentMethodView/PaymentMethodView.tsx b/site/components/checkout/PaymentMethodView/PaymentMethodView.tsx
index 972073756..115619c75 100644
--- a/site/components/checkout/PaymentMethodView/PaymentMethodView.tsx
+++ b/site/components/checkout/PaymentMethodView/PaymentMethodView.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 
 import useAddCard from '@framework/customer/card/use-add-item'
 import { Button, Text } from '@components/ui'
diff --git a/site/components/checkout/ShippingView/ShippingView.tsx b/site/components/checkout/ShippingView/ShippingView.tsx
index 571730ed5..ef7c74325 100644
--- a/site/components/checkout/ShippingView/ShippingView.tsx
+++ b/site/components/checkout/ShippingView/ShippingView.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 
 import Button from '@components/ui/Button'
 import { useUI } from '@components/ui/context'
diff --git a/site/components/checkout/ShippingWidget/ShippingWidget.tsx b/site/components/checkout/ShippingWidget/ShippingWidget.tsx
index 557a69a8b..1418a2b51 100644
--- a/site/components/checkout/ShippingWidget/ShippingWidget.tsx
+++ b/site/components/checkout/ShippingWidget/ShippingWidget.tsx
@@ -1,7 +1,6 @@
 import { FC } from 'react'
 import s from './ShippingWidget.module.css'
 import { ChevronRight, MapPin, Check } from '@components/icons'
-import cn from 'classnames'
 
 interface ComponentProps {
   onClick?: () => any
diff --git a/site/components/common/FeatureBar/FeatureBar.tsx b/site/components/common/FeatureBar/FeatureBar.tsx
index 8923a721e..075528618 100644
--- a/site/components/common/FeatureBar/FeatureBar.tsx
+++ b/site/components/common/FeatureBar/FeatureBar.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './FeatureBar.module.css'
 
 interface FeatureBarProps {
diff --git a/site/components/common/Footer/Footer.tsx b/site/components/common/Footer/Footer.tsx
index 8cfcc9666..18e9b4027 100644
--- a/site/components/common/Footer/Footer.tsx
+++ b/site/components/common/Footer/Footer.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import type { Page } from '@commerce/types/page'
diff --git a/site/components/common/I18nWidget/I18nWidget.tsx b/site/components/common/I18nWidget/I18nWidget.tsx
index 58135f12a..d09dd1d6d 100644
--- a/site/components/common/I18nWidget/I18nWidget.tsx
+++ b/site/components/common/I18nWidget/I18nWidget.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import Link from 'next/link'
 import { FC, useState } from 'react'
 import { useRouter } from 'next/router'
diff --git a/site/components/common/Layout/Layout.tsx b/site/components/common/Layout/Layout.tsx
index adf323f2c..5c936a09f 100644
--- a/site/components/common/Layout/Layout.tsx
+++ b/site/components/common/Layout/Layout.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import React, { FC } from 'react'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
diff --git a/site/components/common/Navbar/NavbarRoot.tsx b/site/components/common/Navbar/NavbarRoot.tsx
index 2eb8c5429..16556e842 100644
--- a/site/components/common/Navbar/NavbarRoot.tsx
+++ b/site/components/common/Navbar/NavbarRoot.tsx
@@ -1,6 +1,6 @@
 import { FC, useState, useEffect } from 'react'
 import throttle from 'lodash.throttle'
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './Navbar.module.css'
 
 const NavbarRoot: FC = ({ children }) => {
diff --git a/site/components/common/Searchbar/Searchbar.tsx b/site/components/common/Searchbar/Searchbar.tsx
index ee20a3ade..0d9c8e807 100644
--- a/site/components/common/Searchbar/Searchbar.tsx
+++ b/site/components/common/Searchbar/Searchbar.tsx
@@ -1,5 +1,5 @@
 import { FC, memo, useEffect } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './Searchbar.module.css'
 import { useRouter } from 'next/router'
 
diff --git a/site/components/common/SidebarLayout/SidebarLayout.tsx b/site/components/common/SidebarLayout/SidebarLayout.tsx
index 025bf20e6..407a938ea 100644
--- a/site/components/common/SidebarLayout/SidebarLayout.tsx
+++ b/site/components/common/SidebarLayout/SidebarLayout.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { Cross, ChevronLeft } from '@components/icons'
 import { UserNav } from '@components/common'
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './SidebarLayout.module.css'
 
 type ComponentProps = { className?: string } & (
diff --git a/site/components/common/UserNav/DropdownMenu.tsx b/site/components/common/UserNav/DropdownMenu.tsx
index f79fd5821..9a73003dc 100644
--- a/site/components/common/UserNav/DropdownMenu.tsx
+++ b/site/components/common/UserNav/DropdownMenu.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import Link from 'next/link'
 import { FC, useRef, useState, useEffect } from 'react'
 import { useTheme } from 'next-themes'
diff --git a/site/components/common/UserNav/UserNav.tsx b/site/components/common/UserNav/UserNav.tsx
index bb2e48915..aef14f49c 100644
--- a/site/components/common/UserNav/UserNav.tsx
+++ b/site/components/common/UserNav/UserNav.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import Link from 'next/link'
-import cn from 'classnames'
+import cn from 'clsx'
 import type { LineItem } from '@commerce/types/cart'
 import useCart from '@framework/cart/use-cart'
 import useCustomer from '@framework/customer/use-customer'
diff --git a/site/components/product/ProductCard/ProductCard.tsx b/site/components/product/ProductCard/ProductCard.tsx
index 96e2382cb..c70461f6c 100644
--- a/site/components/product/ProductCard/ProductCard.tsx
+++ b/site/components/product/ProductCard/ProductCard.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import Link from 'next/link'
 import type { Product } from '@commerce/types/product'
 import s from './ProductCard.module.css'
diff --git a/site/components/product/ProductSlider/ProductSlider.tsx b/site/components/product/ProductSlider/ProductSlider.tsx
index 209256b9d..009d058c8 100644
--- a/site/components/product/ProductSlider/ProductSlider.tsx
+++ b/site/components/product/ProductSlider/ProductSlider.tsx
@@ -6,7 +6,7 @@ import React, {
   useRef,
   useEffect,
 } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import { a } from '@react-spring/web'
 import s from './ProductSlider.module.css'
 import ProductSliderControl from '../ProductSliderControl'
diff --git a/site/components/product/ProductSliderControl/ProductSliderControl.tsx b/site/components/product/ProductSliderControl/ProductSliderControl.tsx
index 5525c58de..29b30b789 100644
--- a/site/components/product/ProductSliderControl/ProductSliderControl.tsx
+++ b/site/components/product/ProductSliderControl/ProductSliderControl.tsx
@@ -1,5 +1,5 @@
 import { FC, MouseEventHandler, memo } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './ProductSliderControl.module.css'
 import { ArrowLeft, ArrowRight } from '@components/icons'
 
diff --git a/site/components/product/ProductTag/ProductTag.tsx b/site/components/product/ProductTag/ProductTag.tsx
index 2bc80b878..0db4866e9 100644
--- a/site/components/product/ProductTag/ProductTag.tsx
+++ b/site/components/product/ProductTag/ProductTag.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import { inherits } from 'util'
 import s from './ProductTag.module.css'
 
diff --git a/site/components/product/ProductView/ProductView.tsx b/site/components/product/ProductView/ProductView.tsx
index 1ddd3990b..b20c85b0a 100644
--- a/site/components/product/ProductView/ProductView.tsx
+++ b/site/components/product/ProductView/ProductView.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import Image from 'next/image'
 import { NextSeo } from 'next-seo'
 import s from './ProductView.module.css'
diff --git a/site/components/product/Swatch/Swatch.tsx b/site/components/product/Swatch/Swatch.tsx
index 710ddbbf2..865f43398 100644
--- a/site/components/product/Swatch/Swatch.tsx
+++ b/site/components/product/Swatch/Swatch.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import React from 'react'
 import s from './Swatch.module.css'
 import { Check } from '@components/icons'
diff --git a/site/components/search.tsx b/site/components/search.tsx
index 0a653c6cd..664085e5b 100644
--- a/site/components/search.tsx
+++ b/site/components/search.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import type { SearchPropsType } from '@lib/search-props'
 import Link from 'next/link'
 import { useState } from 'react'
diff --git a/site/components/ui/Button/Button.tsx b/site/components/ui/Button/Button.tsx
index 89c15987d..47d474f2b 100644
--- a/site/components/ui/Button/Button.tsx
+++ b/site/components/ui/Button/Button.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import React, {
   forwardRef,
   ButtonHTMLAttributes,
diff --git a/site/components/ui/Collapse/Collapse.tsx b/site/components/ui/Collapse/Collapse.tsx
index 9f3016943..8ec71ee5a 100644
--- a/site/components/ui/Collapse/Collapse.tsx
+++ b/site/components/ui/Collapse/Collapse.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import React, { FC, ReactNode, useState } from 'react'
 import s from './Collapse.module.css'
 import { ChevronRight } from '@components/icons'
diff --git a/site/components/ui/Container/Container.tsx b/site/components/ui/Container/Container.tsx
index 538b1cac7..095d4f9d4 100644
--- a/site/components/ui/Container/Container.tsx
+++ b/site/components/ui/Container/Container.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import React, { FC } from 'react'
 
 interface ContainerProps {
diff --git a/site/components/ui/Grid/Grid.tsx b/site/components/ui/Grid/Grid.tsx
index 55ca78277..9b033c0a1 100644
--- a/site/components/ui/Grid/Grid.tsx
+++ b/site/components/ui/Grid/Grid.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import { FC, ReactNode, Component } from 'react'
 import s from './Grid.module.css'
 
diff --git a/site/components/ui/Input/Input.tsx b/site/components/ui/Input/Input.tsx
index e630728b2..8a17588be 100644
--- a/site/components/ui/Input/Input.tsx
+++ b/site/components/ui/Input/Input.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './Input.module.css'
 import React, { InputHTMLAttributes } from 'react'
 
diff --git a/site/components/ui/Marquee/Marquee.tsx b/site/components/ui/Marquee/Marquee.tsx
index ce5ec2338..cf5bd436b 100644
--- a/site/components/ui/Marquee/Marquee.tsx
+++ b/site/components/ui/Marquee/Marquee.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './Marquee.module.css'
 import { FC, ReactNode, Component, Children } from 'react'
 import { default as FastMarquee } from 'react-fast-marquee'
diff --git a/site/components/ui/Quantity/Quantity.tsx b/site/components/ui/Quantity/Quantity.tsx
index abde145aa..7317ddbe6 100644
--- a/site/components/ui/Quantity/Quantity.tsx
+++ b/site/components/ui/Quantity/Quantity.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import s from './Quantity.module.css'
 import { Cross, Plus, Minus } from '@components/icons'
-import cn from 'classnames'
+import cn from 'clsx'
 export interface QuantityProps {
   value: number
   increase: () => any
diff --git a/site/components/ui/Rating/Rating.tsx b/site/components/ui/Rating/Rating.tsx
index e3a9c6d12..efd2ca0d8 100644
--- a/site/components/ui/Rating/Rating.tsx
+++ b/site/components/ui/Rating/Rating.tsx
@@ -1,7 +1,7 @@
 import { FC, memo } from 'react'
 import rangeMap from '@lib/range-map'
 import { Star } from '@components/icons'
-import cn from 'classnames'
+import cn from 'clsx'
 
 export interface RatingProps {
   value: number
diff --git a/site/components/ui/Sidebar/Sidebar.tsx b/site/components/ui/Sidebar/Sidebar.tsx
index 688d9aa58..fd0ce9057 100644
--- a/site/components/ui/Sidebar/Sidebar.tsx
+++ b/site/components/ui/Sidebar/Sidebar.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useRef } from 'react'
 import s from './Sidebar.module.css'
-import cn from 'classnames'
+import cn from 'clsx'
 import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
 
 interface SidebarProps {
diff --git a/site/components/ui/Skeleton/Skeleton.tsx b/site/components/ui/Skeleton/Skeleton.tsx
index 9cef2c1ac..f4ca677e6 100644
--- a/site/components/ui/Skeleton/Skeleton.tsx
+++ b/site/components/ui/Skeleton/Skeleton.tsx
@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import px from '@lib/to-pixels'
 import s from './Skeleton.module.css'
 
diff --git a/site/components/ui/Text/Text.tsx b/site/components/ui/Text/Text.tsx
index 6106c209a..486b77d3d 100644
--- a/site/components/ui/Text/Text.tsx
+++ b/site/components/ui/Text/Text.tsx
@@ -3,7 +3,7 @@ import React, {
   JSXElementConstructor,
   CSSProperties,
 } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import s from './Text.module.css'
 
 interface TextProps {
diff --git a/site/components/wishlist/WishlistButton/WishlistButton.tsx b/site/components/wishlist/WishlistButton/WishlistButton.tsx
index 7b1801e83..419d271a5 100644
--- a/site/components/wishlist/WishlistButton/WishlistButton.tsx
+++ b/site/components/wishlist/WishlistButton/WishlistButton.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import { useUI } from '@components/ui'
 import { Heart } from '@components/icons'
 import useAddItem from '@framework/wishlist/use-add-item'
diff --git a/site/components/wishlist/WishlistCard/WishlistCard.tsx b/site/components/wishlist/WishlistCard/WishlistCard.tsx
index dc7a95482..7d0c6710a 100644
--- a/site/components/wishlist/WishlistCard/WishlistCard.tsx
+++ b/site/components/wishlist/WishlistCard/WishlistCard.tsx
@@ -1,5 +1,5 @@
 import { FC, useState } from 'react'
-import cn from 'classnames'
+import cn from 'clsx'
 import Link from 'next/link'
 import Image from 'next/image'
 import s from './WishlistCard.module.css'
diff --git a/site/package.json b/site/package.json
index aa4e6bb84..7a28e7e7b 100644
--- a/site/package.json
+++ b/site/package.json
@@ -27,7 +27,7 @@
     "@vercel/commerce-vendure": "^0.0.1",
     "autoprefixer": "^10.4.2",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "classnames": "^2.3.1",
+    "clsx": "^1.1.1",
     "email-validator": "^2.0.4",
     "js-cookie": "^3.0.1",
     "keen-slider": "^6.6.3",
diff --git a/yarn.lock b/yarn.lock
index 4eb075f0c..417b2d9e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1834,11 +1834,6 @@ chokidar@^3.5.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
-classnames@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
-  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
-
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -1922,6 +1917,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"