From d8d7d22225f0dff712fc307bfd3388efd7a041c0 Mon Sep 17 00:00:00 2001
From: Kyle McDonald <kyle@knock.app>
Date: Wed, 17 Jun 2026 09:08:40 -0500
Subject: [PATCH] chore(react): remove clsx dependency (KNO-13814)

---
 .changeset/remove-clsx-from-react.md          |  5 ++
 packages/react/package.json                   |  1 -
 .../guide/components/Banner/Banner.tsx        | 48 ++++++++++---
 .../modules/guide/components/Card/Card.tsx    | 67 +++++++++++++++----
 .../modules/guide/components/Modal/Modal.tsx  | 50 ++++++++++----
 yarn.lock                                     |  1 -
 6 files changed, 135 insertions(+), 37 deletions(-)
 create mode 100644 .changeset/remove-clsx-from-react.md

diff --git a/.changeset/remove-clsx-from-react.md b/.changeset/remove-clsx-from-react.md
new file mode 100644
index 000000000..f769b1334
--- /dev/null
+++ b/.changeset/remove-clsx-from-react.md
@@ -0,0 +1,5 @@
+---
+"@knocklabs/react": patch
+---
+
+Remove the `clsx` runtime dependency from `@knocklabs/react`. The guide components now compose `className` natively, dropping `clsx` from the package's install graph.
diff --git a/packages/react/package.json b/packages/react/package.json
index 89cc3a97a..1049787b9 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -88,7 +88,6 @@
     "@telegraph/tokens": ">=0.2.0",
     "@telegraph/tooltip": ">=0.2.2",
     "@telegraph/typography": ">=0.4.0",
-    "clsx": "^2.1.1",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.544.0"
   },
diff --git a/packages/react/src/modules/guide/components/Banner/Banner.tsx b/packages/react/src/modules/guide/components/Banner/Banner.tsx
index bb951fbc3..54b77dba5 100644
--- a/packages/react/src/modules/guide/components/Banner/Banner.tsx
+++ b/packages/react/src/modules/guide/components/Banner/Banner.tsx
@@ -1,5 +1,4 @@
 import { ColorMode, useGuide } from "@knocklabs/react-core";
-import clsx from "clsx";
 import React from "react";
 
 import { maybeNavigateToUrlWithDelay } from "../helpers";
@@ -13,7 +12,10 @@ const Root: React.FC<
   React.PropsWithChildren<React.ComponentPropsWithRef<"div">>
 > = ({ children, className, ...props }) => {
   return (
-    <div className={clsx("knock-guide-banner", className)} {...props}>
+    <div
+      className={["knock-guide-banner", className].filter(Boolean).join(" ")}
+      {...props}
+    >
       {children}
     </div>
   );
@@ -24,7 +26,12 @@ const Content: React.FC<
   React.PropsWithChildren<React.ComponentPropsWithRef<"div">>
 > = ({ children, className, ...props }) => {
   return (
-    <div className={clsx("knock-guide-banner__message", className)} {...props}>
+    <div
+      className={["knock-guide-banner__message", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
       {children}
     </div>
   );
@@ -35,7 +42,12 @@ const Title: React.FC<
   { title: string } & React.ComponentPropsWithRef<"div">
 > = ({ title, className, ...props }) => {
   return (
-    <div className={clsx("knock-guide-banner__title", className)} {...props}>
+    <div
+      className={["knock-guide-banner__title", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
       {title}
     </div>
   );
@@ -49,7 +61,9 @@ const Body: React.FC<{ body: string } & React.ComponentPropsWithRef<"div">> = ({
 }) => {
   return (
     <div
-      className={clsx("knock-guide-banner__body", className)}
+      className={["knock-guide-banner__body", className]
+        .filter(Boolean)
+        .join(" ")}
       dangerouslySetInnerHTML={{ __html: body }}
       {...props}
     />
@@ -61,7 +75,12 @@ const Actions: React.FC<
   React.PropsWithChildren<React.ComponentPropsWithRef<"div">>
 > = ({ children, className, ...props }) => {
   return (
-    <div className={clsx("knock-guide-banner__actions", className)} {...props}>
+    <div
+      className={["knock-guide-banner__actions", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
       {children}
     </div>
   );
@@ -73,7 +92,9 @@ const PrimaryButton: React.FC<
 > = ({ text, action, className, ...props }) => {
   return (
     <button
-      className={clsx("knock-guide-banner__action", className)}
+      className={["knock-guide-banner__action", className]
+        .filter(Boolean)
+        .join(" ")}
       {...props}
     >
       {text}
@@ -87,10 +108,12 @@ const SecondaryButton: React.FC<
 > = ({ text, action, className, ...props }) => {
   return (
     <button
-      className={clsx(
+      className={[
         "knock-guide-banner__action knock-guide-banner__action--secondary",
         className,
-      )}
+      ]
+        .filter(Boolean)
+        .join(" ")}
       {...props}
     >
       {text}
@@ -104,7 +127,12 @@ const DismissButton: React.FC<React.ComponentPropsWithRef<"button">> = ({
   ...props
 }) => {
   return (
-    <button className={clsx("knock-guide-banner__close", className)} {...props}>
+    <button
+      className={["knock-guide-banner__close", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="18"
diff --git a/packages/react/src/modules/guide/components/Card/Card.tsx b/packages/react/src/modules/guide/components/Card/Card.tsx
index 407726bd1..80639bd22 100644
--- a/packages/react/src/modules/guide/components/Card/Card.tsx
+++ b/packages/react/src/modules/guide/components/Card/Card.tsx
@@ -1,5 +1,4 @@
 import { ColorMode, useGuide } from "@knocklabs/react-core";
-import clsx from "clsx";
 import React from "react";
 
 import { isValidHttpUrl, maybeNavigateToUrlWithDelay } from "../helpers";
@@ -20,7 +19,10 @@ const Root: React.FC<
   React.PropsWithChildren<React.ComponentPropsWithRef<"div">>
 > = ({ children, className, ...props }) => {
   return (
-    <div className={clsx("knock-guide-card", className)} {...props}>
+    <div
+      className={["knock-guide-card", className].filter(Boolean).join(" ")}
+      {...props}
+    >
       {children}
     </div>
   );
@@ -31,7 +33,12 @@ const Content: React.FC<
   React.PropsWithChildren<React.ComponentPropsWithRef<"div">>
 > = ({ children, className, ...props }) => {
   return (
-    <div className={clsx("knock-guide-card__message", className)} {...props}>
+    <div
+      className={["knock-guide-card__message", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
       {children}
     </div>
   );
@@ -42,7 +49,12 @@ const Header: React.FC<
   React.PropsWithChildren<React.ComponentPropsWithRef<"div">>
 > = ({ children, className, ...props }) => {
   return (
-    <div className={clsx("knock-guide-card__header", className)} {...props}>
+    <div
+      className={["knock-guide-card__header", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
       {children}
     </div>
   );
@@ -53,7 +65,12 @@ const Headline: React.FC<
   { headline: string } & React.ComponentPropsWithRef<"div">
 > = ({ headline, className, ...props }) => {
   return (
-    <div className={clsx("knock-guide-card__headline", className)} {...props}>
+    <div
+      className={["knock-guide-card__headline", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
       {headline}
     </div>
   );
@@ -64,7 +81,12 @@ const Title: React.FC<
   { title: string } & React.ComponentPropsWithRef<"div">
 > = ({ title, className, ...props }) => {
   return (
-    <div className={clsx("knock-guide-card__title", className)} {...props}>
+    <div
+      className={["knock-guide-card__title", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
       {title}
     </div>
   );
@@ -78,7 +100,9 @@ const Body: React.FC<{ body: string } & React.ComponentPropsWithRef<"div">> = ({
 }) => {
   return (
     <div
-      className={clsx("knock-guide-card__body", className)}
+      className={["knock-guide-card__body", className]
+        .filter(Boolean)
+        .join(" ")}
       dangerouslySetInnerHTML={{ __html: body }}
       {...props}
     />
@@ -91,7 +115,7 @@ const Img: React.FC<
 > = ({ children, className, alt, ...props }) => {
   return (
     <img
-      className={clsx("knock-guide-card__img", className)}
+      className={["knock-guide-card__img", className].filter(Boolean).join(" ")}
       alt={alt || ""}
       {...props}
     >
@@ -105,7 +129,12 @@ const Actions: React.FC<
   React.PropsWithChildren<React.ComponentPropsWithRef<"div">>
 > = ({ children, className, ...props }) => {
   return (
-    <div className={clsx("knock-guide-card__actions", className)} {...props}>
+    <div
+      className={["knock-guide-card__actions", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
       {children}
     </div>
   );
@@ -116,7 +145,12 @@ const PrimaryButton: React.FC<
   ButtonContent & React.ComponentPropsWithRef<"button">
 > = ({ text, action, className, ...props }) => {
   return (
-    <button className={clsx("knock-guide-card__action", className)} {...props}>
+    <button
+      className={["knock-guide-card__action", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
       {text}
     </button>
   );
@@ -128,10 +162,12 @@ const SecondaryButton: React.FC<
 > = ({ text, action, className, ...props }) => {
   return (
     <button
-      className={clsx(
+      className={[
         "knock-guide-card__action knock-guide-card__action--secondary",
         className,
-      )}
+      ]
+        .filter(Boolean)
+        .join(" ")}
       {...props}
     >
       {text}
@@ -145,7 +181,12 @@ const DismissButton: React.FC<React.ComponentPropsWithRef<"button">> = ({
   ...props
 }) => {
   return (
-    <button className={clsx("knock-guide-card__close", className)} {...props}>
+    <button
+      className={["knock-guide-card__close", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="18"
diff --git a/packages/react/src/modules/guide/components/Modal/Modal.tsx b/packages/react/src/modules/guide/components/Modal/Modal.tsx
index ce96c2048..bde286900 100644
--- a/packages/react/src/modules/guide/components/Modal/Modal.tsx
+++ b/packages/react/src/modules/guide/components/Modal/Modal.tsx
@@ -1,6 +1,5 @@
 import { ColorMode, useGuide } from "@knocklabs/react-core";
 import * as Dialog from "@radix-ui/react-dialog";
-import clsx from "clsx";
 import React from "react";
 
 import { isValidHttpUrl, maybeNavigateToUrlWithDelay } from "../helpers";
@@ -40,7 +39,9 @@ const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
   ({ className, ...props }, forwardedRef) => {
     return (
       <Dialog.Overlay
-        className={clsx("knock-guide-modal__overlay", className)}
+        className={["knock-guide-modal__overlay", className]
+          .filter(Boolean)
+          .join(" ")}
         ref={forwardedRef}
         {...props}
       />
@@ -57,7 +58,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
   ({ children, className, ...props }, forwardedRef) => {
     return (
       <Dialog.Content
-        className={clsx("knock-guide-modal", className)}
+        className={["knock-guide-modal", className].filter(Boolean).join(" ")}
         ref={forwardedRef}
         {...props}
       >
@@ -72,7 +73,12 @@ const Header: React.FC<
   React.PropsWithChildren<React.ComponentPropsWithRef<"div">>
 > = ({ children, className, ...props }) => {
   return (
-    <div className={clsx("knock-guide-modal__header", className)} {...props}>
+    <div
+      className={["knock-guide-modal__header", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
       {children}
     </div>
   );
@@ -87,7 +93,9 @@ type TitleProps = React.ComponentPropsWithoutRef<typeof Dialog.Title> &
 const Title = ({ title, className, ...props }: TitleProps) => {
   return (
     <Dialog.Title
-      className={clsx("knock-guide-modal__title", className)}
+      className={["knock-guide-modal__title", className]
+        .filter(Boolean)
+        .join(" ")}
       {...props}
     >
       {title}
@@ -103,7 +111,9 @@ const Body: React.FC<{ body: string } & React.ComponentPropsWithRef<"div">> = ({
 }) => {
   return (
     <Dialog.Description
-      className={clsx("knock-guide-modal__body", className)}
+      className={["knock-guide-modal__body", className]
+        .filter(Boolean)
+        .join(" ")}
       dangerouslySetInnerHTML={{ __html: body }}
       {...props}
     />
@@ -116,7 +126,9 @@ const Img: React.FC<
 > = ({ children, className, alt, ...props }) => {
   return (
     <img
-      className={clsx("knock-guide-modal__img", className)}
+      className={["knock-guide-modal__img", className]
+        .filter(Boolean)
+        .join(" ")}
       alt={alt || ""}
       {...props}
     >
@@ -130,7 +142,12 @@ const Actions: React.FC<
   React.PropsWithChildren<React.ComponentPropsWithRef<"div">>
 > = ({ children, className, ...props }) => {
   return (
-    <div className={clsx("knock-guide-modal__actions", className)} {...props}>
+    <div
+      className={["knock-guide-modal__actions", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
       {children}
     </div>
   );
@@ -141,7 +158,12 @@ const PrimaryButton: React.FC<
   ButtonContent & React.ComponentPropsWithRef<"button">
 > = ({ text, action, className, ...props }) => {
   return (
-    <button className={clsx("knock-guide-modal__action", className)} {...props}>
+    <button
+      className={["knock-guide-modal__action", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
       {text}
     </button>
   );
@@ -153,10 +175,12 @@ const SecondaryButton: React.FC<
 > = ({ text, action, className, ...props }) => {
   return (
     <button
-      className={clsx(
+      className={[
         "knock-guide-modal__action knock-guide-modal__action--secondary",
         className,
-      )}
+      ]
+        .filter(Boolean)
+        .join(" ")}
       {...props}
     >
       {text}
@@ -171,7 +195,9 @@ type CloseProps = React.ComponentPropsWithoutRef<typeof Dialog.Close> &
 const Close = ({ className, ...props }: CloseProps) => {
   return (
     <Dialog.Close
-      className={clsx("knock-guide-modal__close", className)}
+      className={["knock-guide-modal__close", className]
+        .filter(Boolean)
+        .join(" ")}
       {...props}
     >
       <svg
diff --git a/yarn.lock b/yarn.lock
index 4471442f5..cdcf61e41 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5130,7 +5130,6 @@ __metadata:
     "@typescript-eslint/parser": "npm:^8.59.4"
     "@vitejs/plugin-react": "npm:^4.5.1"
     babel-plugin-react-require: "npm:^4.0.3"
-    clsx: "npm:^2.1.1"
     eslint: "npm:^8.56.0"
     eslint-plugin-jsx-a11y: "npm:^6.10.2"
     eslint-plugin-react-hooks: "npm:^5.2.0"