diff --git a/.changeset/good-experts-yawn.md b/.changeset/good-experts-yawn.md
new file mode 100644
index 0000000000..2be0c2d3fc
--- /dev/null
+++ b/.changeset/good-experts-yawn.md
@@ -0,0 +1,5 @@
+---
+"@heroui/spinner": patch
+---
+
+add `use client` directive in tsup (#4903)
diff --git a/packages/components/spinner/tsup.config.ts b/packages/components/spinner/tsup.config.ts
index e7ef417947..3e2bcff6cc 100644
--- a/packages/components/spinner/tsup.config.ts
+++ b/packages/components/spinner/tsup.config.ts
@@ -4,4 +4,5 @@ export default defineConfig({
   clean: true,
   target: "es2019",
   format: ["cjs", "esm"],
+  banner: {js: '"use client";'},
 });