diff --git a/apps/web/src/components/date-card.tsx b/apps/web/src/components/date-card.tsx
index 53ff588e0..dd471d0aa 100644
--- a/apps/web/src/components/date-card.tsx
+++ b/apps/web/src/components/date-card.tsx
@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { cn } from "@rallly/ui";
 import * as React from "react";
 
 export interface DateCardProps {
@@ -15,7 +15,7 @@ const DateCard: React.FunctionComponent<DateCardProps> = ({
 }) => {
   return (
     <div
-      className={clsx(
+      className={cn(
         "relative inline-flex size-12 flex-col rounded-md border bg-gray-50 text-center text-slate-800",
         className,
       )}
diff --git a/apps/web/src/components/date-icon.tsx b/apps/web/src/components/date-icon.tsx
index 174e8d648..bfcfd894d 100644
--- a/apps/web/src/components/date-icon.tsx
+++ b/apps/web/src/components/date-icon.tsx
@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { cn } from "@rallly/ui";
 import type { Dayjs } from "dayjs";
 import dayjs from "dayjs";
 
@@ -10,7 +10,7 @@ export const DateIconInner = (props: {
 }) => {
   return (
     <div
-      className={clsx(
+      className={cn(
         "inline-flex size-10 flex-col overflow-hidden rounded-md border bg-gray-50 text-center text-slate-800",
         props.className,
       )}
diff --git a/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx b/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
index d83dd137a..35e876f93 100644
--- a/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
+++ b/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
@@ -8,7 +8,6 @@ import {
 } from "@rallly/ui/dropdown-menu";
 import { Icon } from "@rallly/ui/icon";
 import { Switch } from "@rallly/ui/switch";
-import clsx from "clsx";
 import dayjs from "dayjs";
 import {
   CalendarIcon,
@@ -129,7 +128,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                 return (
                   <div
                     key={i}
-                    className={clsx("h-11", {
+                    className={cn("h-11", {
                       "border-r": (i + 1) % 7 !== 0,
                       "border-b": i < datepicker.days.length - 7,
                     })}
@@ -174,7 +173,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                           }
                         }
                       }}
-                      className={clsx(
+                      className={cn(
                         "group relative flex h-full w-full items-start justify-end rounded-none px-2.5 py-1.5 text-sm font-medium tracking-tight focus:z-10 focus:rounded",
                         {
                           "bg-gray-100 text-gray-400": day.isPast,
@@ -208,7 +207,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
       </div>
       <div className="flex grow flex-col">
         <div
-          className={clsx("border-b", {
+          className={cn("border-b", {
             hidden: datepicker.selection.length === 0,
           })}
         >
diff --git a/apps/web/src/components/new-participant-modal.tsx b/apps/web/src/components/new-participant-modal.tsx
index 8ffbe2f96..83cbb521b 100644
--- a/apps/web/src/components/new-participant-modal.tsx
+++ b/apps/web/src/components/new-participant-modal.tsx
@@ -1,12 +1,12 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { VoteType } from "@rallly/database";
+import { cn } from "@rallly/ui";
 import { Badge } from "@rallly/ui/badge";
 import { Button } from "@rallly/ui/button";
 import { FormMessage } from "@rallly/ui/form";
 import { Input } from "@rallly/ui/input";
 import * as Sentry from "@sentry/nextjs";
 import { TRPCClientError } from "@trpc/client";
-import clsx from "clsx";
 import { useTranslation } from "next-i18next";
 import { useForm } from "react-hook-form";
 import z from "zod";
@@ -59,7 +59,7 @@ const VoteSummary = ({
 
   return (
     <div
-      className={clsx("flex flex-wrap gap-1.5 rounded border p-1.5", className)}
+      className={cn("flex flex-wrap gap-1.5 rounded border p-1.5", className)}
     >
       {voteTypes.map((voteType) => {
         const votes = voteByType[voteType];
diff --git a/apps/web/src/components/poll/mobile-poll/grouped-options.tsx b/apps/web/src/components/poll/mobile-poll/grouped-options.tsx
index 7d99f6fdf..449239099 100644
--- a/apps/web/src/components/poll/mobile-poll/grouped-options.tsx
+++ b/apps/web/src/components/poll/mobile-poll/grouped-options.tsx
@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { cn } from "@rallly/ui";
 import { groupBy } from "lodash";
 import * as React from "react";
 
@@ -28,7 +28,7 @@ const GroupedOptions: React.FunctionComponent<GroupedOptionsProps> = ({
         return (
           <div key={day}>
             <div
-              className={clsx(
+              className={cn(
                 "flex border-b bg-gray-50 px-4 py-2 text-xs font-medium uppercase",
                 groupClassName,
               )}
diff --git a/apps/web/src/components/poll/vote-icon.tsx b/apps/web/src/components/poll/vote-icon.tsx
index 927be9f6c..d063d8ff5 100644
--- a/apps/web/src/components/poll/vote-icon.tsx
+++ b/apps/web/src/components/poll/vote-icon.tsx
@@ -1,6 +1,6 @@
 import type { VoteType } from "@rallly/database";
 import { IfNeedBeIcon, NoIcon, PendingIcon, YesIcon } from "@rallly/icons";
-import clsx from "clsx";
+import { cn } from "@rallly/ui";
 import * as React from "react";
 
 const VoteIcon: React.FunctionComponent<{
@@ -12,7 +12,7 @@ const VoteIcon: React.FunctionComponent<{
     case "yes":
       return (
         <YesIcon
-          className={clsx("text-green-500", className, {
+          className={cn("text-green-500", className, {
             "size-5": size === "md",
             "h-3": size === "sm",
           })}
@@ -22,7 +22,7 @@ const VoteIcon: React.FunctionComponent<{
     case "ifNeedBe":
       return (
         <IfNeedBeIcon
-          className={clsx("text-amber-400", className, {
+          className={cn("text-amber-400", className, {
             "size-5": size === "md",
             "h-3": size === "sm",
           })}
@@ -32,7 +32,7 @@ const VoteIcon: React.FunctionComponent<{
     case "no":
       return (
         <NoIcon
-          className={clsx("text-gray-400", className, {
+          className={cn("text-gray-400", className, {
             "size-5": size === "md",
             "h-3": size === "sm",
           })}
@@ -42,7 +42,7 @@ const VoteIcon: React.FunctionComponent<{
     default:
       return (
         <PendingIcon
-          className={clsx("text-gray-300", className, {
+          className={cn("text-gray-300", className, {
             "size-5": size === "md",
             "h-3": size === "sm",
           })}
diff --git a/apps/web/src/components/spinner.tsx b/apps/web/src/components/spinner.tsx
index ad7fbf93f..e29850455 100644
--- a/apps/web/src/components/spinner.tsx
+++ b/apps/web/src/components/spinner.tsx
@@ -1,10 +1,10 @@
-import clsx from "clsx";
+import { cn } from "@rallly/ui";
 import { Loader2Icon } from "lucide-react";
 
 export const Spinner = (props: { className?: string }) => {
   return (
     <Loader2Icon
-      className={clsx(
+      className={cn(
         "text-muted-foreground inline-block h-5 animate-spin",
         props.className,
       )}
diff --git a/apps/web/src/components/steps/steps.tsx b/apps/web/src/components/steps/steps.tsx
index 7f27e7d4a..25611cff4 100644
--- a/apps/web/src/components/steps/steps.tsx
+++ b/apps/web/src/components/steps/steps.tsx
@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { cn } from "@rallly/ui";
 import { useTranslation } from "next-i18next";
 import React from "react";
 
@@ -16,7 +16,7 @@ const Steps: React.FunctionComponent<StepsProps> = ({
   const { t } = useTranslation();
 
   return (
-    <div className={clsx("inline-flex items-center gap-2.5", className)}>
+    <div className={cn("inline-flex items-center gap-2.5", className)}>
       <div className="text-sm font-medium tracking-tight">
         {t("stepSummary", {
           current: current + 1,
@@ -28,7 +28,7 @@ const Steps: React.FunctionComponent<StepsProps> = ({
           return (
             <span
               key={i}
-              className={clsx("h-2 w-2 rounded-full transition-all", {
+              className={cn("h-2 w-2 rounded-full transition-all", {
                 "bg-primary-400": i <= current,
                 "bg-gray-300": i > current,
                 "ring-primary-200 animate-pulse ring-4": i === current,
diff --git a/apps/web/src/components/sticky.tsx b/apps/web/src/components/sticky.tsx
index 11e741e54..c4eaa013d 100644
--- a/apps/web/src/components/sticky.tsx
+++ b/apps/web/src/components/sticky.tsx
@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { cn } from "@rallly/ui";
 import React from "react";
 
 export const useDetectSticky = <E extends HTMLElement>(
@@ -35,7 +35,7 @@ export const Sticky: React.FunctionComponent<{
   return (
     <div
       ref={ref}
-      className={clsx(
+      className={cn(
         "sticky",
         typeof className === "function" ? className(isPinned) : className,
       )}