diff --git a/sparkle/src/components/Hoverable.tsx b/sparkle/src/components/Hoverable.tsx
index f6e5be72e42f..90dda5ca8a54 100644
--- a/sparkle/src/components/Hoverable.tsx
+++ b/sparkle/src/components/Hoverable.tsx
@@ -1,33 +1,42 @@
+import { cva, type VariantProps } from "class-variance-authority";
 import React, { SyntheticEvent } from "react";
 import { ReactNode } from "react";
 
-import { classNames } from "@sparkle/lib/utils";
+import { cn } from "@sparkle/lib/utils";
 
-interface HoverableProps {
+const hoverableVariants = cva(
+  "s-cursor-pointer s-duration-200 hover:s-underline hover:s-underline-offset-2",
+  {
+    variants: {
+      variant: {
+        invisible: "hover:s-text-highlight-light active:s-text-highlight-dark",
+        primary:
+          "s-font-medium s-text-foreground hover:s-text-highlight-light active:s-text-highlight-dark",
+        highlight:
+          "s-font-medium s-text-highlight hover:s-text-highlight-light active:s-text-highlight-dark",
+      },
+    },
+    defaultVariants: {
+      variant: "invisible",
+    },
+  }
+);
+
+interface HoverableProps extends VariantProps<typeof hoverableVariants> {
   children: ReactNode;
   className?: string;
   onClick: (e: SyntheticEvent) => void;
-  variant?: "primary" | "highlight" | "invisible";
 }
 
 export function Hoverable({
   children,
-  className = "",
+  className,
   onClick,
-  variant = "invisible",
+  variant,
 }: HoverableProps) {
-  const baseClasses =
-    "s-cursor-pointer s-duration-200 hover:s-underline hover:s-text-highlight-light hover:s-underline-offset-2 active:s-text-highlight-dark";
-
-  const variantClasses = {
-    invisible: "",
-    primary: "s-font-medium s-text-foreground",
-    highlight: "s-font-medium s-text-highlight",
-  };
-
   return (
     <span
-      className={classNames(baseClasses, variantClasses[variant], className)}
+      className={cn(hoverableVariants({ variant }), className)}
       onClick={onClick}
     >
       {children}