From 0b7d00aea58f803cf805aabdeec21c70812f30d1 Mon Sep 17 00:00:00 2001
From: Barney Wimbush <barney.wimbush@gmail.com>
Date: Fri, 6 Mar 2026 22:24:24 +1000
Subject: [PATCH] fix(core,agent,hooks,theme): add 'use client' directives for
 RSC compatibility

---
 .changeset/use-client-directives.md                       | 8 ++++++++
 .../agent/src/chat/MessageComposer/MessageComposer.tsx    | 2 ++
 packages/agent/src/chat/MessageThread/MessageThread.tsx   | 2 ++
 .../ConfidenceBreakdown/ConfidenceBreakdown.tsx           | 2 ++
 .../confidence/VerificationDetail/VerificationDetail.tsx  | 2 ++
 .../agent/src/feedback/FeedbackDialog/FeedbackDialog.tsx  | 2 ++
 .../agent/src/feedback/ThumbsFeedback/ThumbsFeedback.tsx  | 2 ++
 packages/agent/src/hooks/useAgentChat.ts                  | 2 ++
 packages/agent/src/hooks/useAgentTheme.ts                 | 2 ++
 packages/agent/src/hooks/useCharacterDrain.ts             | 2 ++
 packages/agent/src/hooks/useConversation.ts               | 2 ++
 packages/agent/src/hooks/useFeedback.ts                   | 2 ++
 packages/agent/src/hooks/useStreaming.ts                  | 2 ++
 .../agent/src/layouts/AgentFullPage/AgentFullPage.tsx     | 2 ++
 packages/agent/src/layouts/AgentPanel/AgentPanel.tsx      | 2 ++
 packages/agent/src/layouts/AgentWidget/AgentWidget.tsx    | 2 ++
 .../agent/src/mcp/MCPApprovalDialog/MCPApprovalDialog.tsx | 2 ++
 .../agent/src/mcp/MCPServerStatus/MCPServerStatus.tsx     | 2 ++
 packages/agent/src/sources/SourceList/SourceList.tsx      | 2 ++
 .../src/streaming/StreamingMessage/StreamingMessage.tsx   | 2 ++
 .../agent/src/streaming/TypewriterText/TypewriterText.tsx | 2 ++
 packages/agent/tsup.config.ts                             | 1 +
 packages/core/src/data/Accordion/Accordion.tsx            | 2 ++
 packages/core/src/data/Carousel/Carousel.tsx              | 2 ++
 packages/core/src/data/Collapsible/Collapsible.tsx        | 2 ++
 packages/core/src/data/Table/Table.tsx                    | 2 ++
 packages/core/src/feedback/Avatar/Avatar.tsx              | 2 ++
 packages/core/src/feedback/Toast/Toast.tsx                | 2 ++
 packages/core/src/inputs/Button/Button.tsx                | 2 ++
 packages/core/src/inputs/Calendar/Calendar.tsx            | 2 ++
 packages/core/src/inputs/Checkbox/Checkbox.tsx            | 2 ++
 packages/core/src/inputs/IconButton/IconButton.tsx        | 2 ++
 packages/core/src/inputs/RadioGroup/RadioGroup.tsx        | 2 ++
 packages/core/src/inputs/SearchInput/SearchInput.tsx      | 2 ++
 packages/core/src/inputs/Select/Select.tsx                | 2 ++
 packages/core/src/inputs/Slider/Slider.tsx                | 2 ++
 packages/core/src/inputs/Switch/Switch.tsx                | 2 ++
 packages/core/src/inputs/TextArea/TextArea.tsx            | 2 ++
 packages/core/src/inputs/TextInput/TextInput.tsx          | 2 ++
 packages/core/src/inputs/Toggle/Toggle.tsx                | 2 ++
 packages/core/src/inputs/ToggleGroup/ToggleGroup.tsx      | 2 ++
 packages/core/src/layout/Resizable/Resizable.tsx          | 2 ++
 packages/core/src/navigation/Breadcrumb/Breadcrumb.tsx    | 2 ++
 packages/core/src/navigation/Menubar/Menubar.tsx          | 2 ++
 .../core/src/navigation/NavigationMenu/NavigationMenu.tsx | 2 ++
 packages/core/src/navigation/Pagination/Pagination.tsx    | 2 ++
 packages/core/src/navigation/Tabs/Tabs.tsx                | 2 ++
 packages/core/src/overlay/Command/Command.tsx             | 2 ++
 packages/core/src/overlay/ContextMenu/ContextMenu.tsx     | 2 ++
 packages/core/src/overlay/Dialog/Dialog.tsx               | 2 ++
 packages/core/src/overlay/Drawer/Drawer.tsx               | 2 ++
 packages/core/src/overlay/DropdownMenu/DropdownMenu.tsx   | 2 ++
 packages/core/src/overlay/HoverCard/HoverCard.tsx         | 2 ++
 packages/core/src/overlay/Popover/Popover.tsx             | 2 ++
 packages/core/src/overlay/Sheet/Sheet.tsx                 | 2 ++
 packages/core/src/overlay/Tooltip/Tooltip.tsx             | 2 ++
 packages/core/tsup.config.ts                              | 1 +
 packages/hooks/src/useAnnounce.ts                         | 2 ++
 packages/hooks/src/useClipboard.ts                        | 2 ++
 packages/hooks/src/useFocusTrap.ts                        | 2 ++
 packages/hooks/src/useKeyboardShortcut.ts                 | 2 ++
 packages/hooks/src/useLocalStorage.ts                     | 2 ++
 packages/hooks/src/useMediaQuery.ts                       | 2 ++
 packages/hooks/tsup.config.ts                             | 1 +
 packages/theme/src/ThemeProvider.tsx                      | 2 ++
 packages/theme/src/useColorMode.ts                        | 2 ++
 packages/theme/src/useTheme.ts                            | 2 ++
 packages/theme/tsup.config.ts                             | 1 +
 68 files changed, 138 insertions(+)
 create mode 100644 .changeset/use-client-directives.md

diff --git a/.changeset/use-client-directives.md b/.changeset/use-client-directives.md
new file mode 100644
index 0000000..dfe4aa7
--- /dev/null
+++ b/.changeset/use-client-directives.md
@@ -0,0 +1,8 @@
+---
+'@surf-kit/core': patch
+'@surf-kit/agent': patch
+'@surf-kit/hooks': patch
+'@surf-kit/theme': patch
+---
+
+Add 'use client' directives for React Server Components compatibility
diff --git a/packages/agent/src/chat/MessageComposer/MessageComposer.tsx b/packages/agent/src/chat/MessageComposer/MessageComposer.tsx
index 94dd30b..9fae4c6 100644
--- a/packages/agent/src/chat/MessageComposer/MessageComposer.tsx
+++ b/packages/agent/src/chat/MessageComposer/MessageComposer.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useRef, useCallback } from 'react'
 
diff --git a/packages/agent/src/chat/MessageThread/MessageThread.tsx b/packages/agent/src/chat/MessageThread/MessageThread.tsx
index 79f320a..0762e6f 100644
--- a/packages/agent/src/chat/MessageThread/MessageThread.tsx
+++ b/packages/agent/src/chat/MessageThread/MessageThread.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useEffect, useRef } from 'react'
 import type { ChatMessage } from '../../types/chat'
diff --git a/packages/agent/src/confidence/ConfidenceBreakdown/ConfidenceBreakdown.tsx b/packages/agent/src/confidence/ConfidenceBreakdown/ConfidenceBreakdown.tsx
index affead8..aaee00c 100644
--- a/packages/agent/src/confidence/ConfidenceBreakdown/ConfidenceBreakdown.tsx
+++ b/packages/agent/src/confidence/ConfidenceBreakdown/ConfidenceBreakdown.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import type { ConfidenceBreakdown as ConfidenceBreakdownType } from '../../types/agent'
 import { ConfidenceBadge } from '../ConfidenceBadge'
diff --git a/packages/agent/src/confidence/VerificationDetail/VerificationDetail.tsx b/packages/agent/src/confidence/VerificationDetail/VerificationDetail.tsx
index e97612b..647bf03 100644
--- a/packages/agent/src/confidence/VerificationDetail/VerificationDetail.tsx
+++ b/packages/agent/src/confidence/VerificationDetail/VerificationDetail.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import type { VerificationResult } from '../../types/agent'
 import { VerificationBadge } from '../VerificationBadge'
diff --git a/packages/agent/src/feedback/FeedbackDialog/FeedbackDialog.tsx b/packages/agent/src/feedback/FeedbackDialog/FeedbackDialog.tsx
index e59ce02..1b3d322 100644
--- a/packages/agent/src/feedback/FeedbackDialog/FeedbackDialog.tsx
+++ b/packages/agent/src/feedback/FeedbackDialog/FeedbackDialog.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import { Dialog, Button, TextArea } from '@surf-kit/core'
 
diff --git a/packages/agent/src/feedback/ThumbsFeedback/ThumbsFeedback.tsx b/packages/agent/src/feedback/ThumbsFeedback/ThumbsFeedback.tsx
index 5beb1d0..bc65717 100644
--- a/packages/agent/src/feedback/ThumbsFeedback/ThumbsFeedback.tsx
+++ b/packages/agent/src/feedback/ThumbsFeedback/ThumbsFeedback.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 
 type FeedbackRating = 'positive' | 'negative'
diff --git a/packages/agent/src/hooks/useAgentChat.ts b/packages/agent/src/hooks/useAgentChat.ts
index 66b6eca..003c425 100644
--- a/packages/agent/src/hooks/useAgentChat.ts
+++ b/packages/agent/src/hooks/useAgentChat.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { useReducer, useCallback, useRef } from 'react'
 import type { ChatMessage, ChatError } from '../types/chat'
 import type { AgentResponse } from '../types/agent'
diff --git a/packages/agent/src/hooks/useAgentTheme.ts b/packages/agent/src/hooks/useAgentTheme.ts
index 706c448..5974477 100644
--- a/packages/agent/src/hooks/useAgentTheme.ts
+++ b/packages/agent/src/hooks/useAgentTheme.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { useMemo } from 'react'
 import type { AgentInfo } from '../types/agent'
 
diff --git a/packages/agent/src/hooks/useCharacterDrain.ts b/packages/agent/src/hooks/useCharacterDrain.ts
index 6dbb4e5..594de25 100644
--- a/packages/agent/src/hooks/useCharacterDrain.ts
+++ b/packages/agent/src/hooks/useCharacterDrain.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useRef, useEffect } from 'react'
 
 export interface CharacterDrainResult {
diff --git a/packages/agent/src/hooks/useConversation.ts b/packages/agent/src/hooks/useConversation.ts
index af50488..7cfd8f1 100644
--- a/packages/agent/src/hooks/useConversation.ts
+++ b/packages/agent/src/hooks/useConversation.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useCallback } from 'react'
 import type { ChatMessage } from '../types/chat'
 import type { ConversationSummary } from '../types/chat'
diff --git a/packages/agent/src/hooks/useFeedback.ts b/packages/agent/src/hooks/useFeedback.ts
index 3ffc16f..cef357f 100644
--- a/packages/agent/src/hooks/useFeedback.ts
+++ b/packages/agent/src/hooks/useFeedback.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useCallback, useRef } from 'react'
 
 export type FeedbackState = 'idle' | 'submitting' | 'submitted' | 'error'
diff --git a/packages/agent/src/hooks/useStreaming.ts b/packages/agent/src/hooks/useStreaming.ts
index 7e0d572..bcbe360 100644
--- a/packages/agent/src/hooks/useStreaming.ts
+++ b/packages/agent/src/hooks/useStreaming.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useCallback, useRef, useEffect } from 'react'
 import type { StreamEvent, StreamState } from '../types/streaming'
 import type { Source } from '../types/agent'
diff --git a/packages/agent/src/layouts/AgentFullPage/AgentFullPage.tsx b/packages/agent/src/layouts/AgentFullPage/AgentFullPage.tsx
index 3c491fd..39a3764 100644
--- a/packages/agent/src/layouts/AgentFullPage/AgentFullPage.tsx
+++ b/packages/agent/src/layouts/AgentFullPage/AgentFullPage.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useCallback } from 'react'
 import { AgentChat } from '../../chat/AgentChat'
diff --git a/packages/agent/src/layouts/AgentPanel/AgentPanel.tsx b/packages/agent/src/layouts/AgentPanel/AgentPanel.tsx
index 08ff7de..7200570 100644
--- a/packages/agent/src/layouts/AgentPanel/AgentPanel.tsx
+++ b/packages/agent/src/layouts/AgentPanel/AgentPanel.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef, useEffect } from 'react'
 import { AgentChat } from '../../chat/AgentChat'
diff --git a/packages/agent/src/layouts/AgentWidget/AgentWidget.tsx b/packages/agent/src/layouts/AgentWidget/AgentWidget.tsx
index 5bb4a11..97146bf 100644
--- a/packages/agent/src/layouts/AgentWidget/AgentWidget.tsx
+++ b/packages/agent/src/layouts/AgentWidget/AgentWidget.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useCallback } from 'react'
 import { AgentChat } from '../../chat/AgentChat'
diff --git a/packages/agent/src/mcp/MCPApprovalDialog/MCPApprovalDialog.tsx b/packages/agent/src/mcp/MCPApprovalDialog/MCPApprovalDialog.tsx
index 01dd439..fe7135a 100644
--- a/packages/agent/src/mcp/MCPApprovalDialog/MCPApprovalDialog.tsx
+++ b/packages/agent/src/mcp/MCPApprovalDialog/MCPApprovalDialog.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useRef, useEffect } from 'react'
 import { cva } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
diff --git a/packages/agent/src/mcp/MCPServerStatus/MCPServerStatus.tsx b/packages/agent/src/mcp/MCPServerStatus/MCPServerStatus.tsx
index 09d7f90..b2a8e04 100644
--- a/packages/agent/src/mcp/MCPServerStatus/MCPServerStatus.tsx
+++ b/packages/agent/src/mcp/MCPServerStatus/MCPServerStatus.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import { cva } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
diff --git a/packages/agent/src/sources/SourceList/SourceList.tsx b/packages/agent/src/sources/SourceList/SourceList.tsx
index f36532b..e328d7f 100644
--- a/packages/agent/src/sources/SourceList/SourceList.tsx
+++ b/packages/agent/src/sources/SourceList/SourceList.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import type { Source } from '../../types/agent'
 import { SourceCard } from '../SourceCard'
diff --git a/packages/agent/src/streaming/StreamingMessage/StreamingMessage.tsx b/packages/agent/src/streaming/StreamingMessage/StreamingMessage.tsx
index 49e7e5a..3fdb846 100644
--- a/packages/agent/src/streaming/StreamingMessage/StreamingMessage.tsx
+++ b/packages/agent/src/streaming/StreamingMessage/StreamingMessage.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect, useRef } from 'react'
 import { Spinner } from '@surf-kit/core'
 import type { StreamState } from '../../types/streaming'
diff --git a/packages/agent/src/streaming/TypewriterText/TypewriterText.tsx b/packages/agent/src/streaming/TypewriterText/TypewriterText.tsx
index 1fb2ba6..5eb78ed 100644
--- a/packages/agent/src/streaming/TypewriterText/TypewriterText.tsx
+++ b/packages/agent/src/streaming/TypewriterText/TypewriterText.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
 
 export type TypewriterTextProps = {
diff --git a/packages/agent/tsup.config.ts b/packages/agent/tsup.config.ts
index 83de58c..7d13730 100644
--- a/packages/agent/tsup.config.ts
+++ b/packages/agent/tsup.config.ts
@@ -19,4 +19,5 @@ export default defineConfig((options) => ({
   sourcemap: true,
   clean: !options.watch,
   external: ['react', 'react-dom', /^@surf-kit\//],
+  banner: { js: "'use client';" },
 }))
diff --git a/packages/core/src/data/Accordion/Accordion.tsx b/packages/core/src/data/Accordion/Accordion.tsx
index 83cbbe5..1ff8c20 100644
--- a/packages/core/src/data/Accordion/Accordion.tsx
+++ b/packages/core/src/data/Accordion/Accordion.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useRef, useCallback } from 'react'
 
diff --git a/packages/core/src/data/Carousel/Carousel.tsx b/packages/core/src/data/Carousel/Carousel.tsx
index 33b57e8..09b06d6 100644
--- a/packages/core/src/data/Carousel/Carousel.tsx
+++ b/packages/core/src/data/Carousel/Carousel.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState, useRef, useCallback, useEffect, Children } from 'react'
 import { twMerge } from 'tailwind-merge'
 
diff --git a/packages/core/src/data/Collapsible/Collapsible.tsx b/packages/core/src/data/Collapsible/Collapsible.tsx
index d8fd477..75a339e 100644
--- a/packages/core/src/data/Collapsible/Collapsible.tsx
+++ b/packages/core/src/data/Collapsible/Collapsible.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { createContext, useCallback, useContext, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 
diff --git a/packages/core/src/data/Table/Table.tsx b/packages/core/src/data/Table/Table.tsx
index 92f685a..e7b55fe 100644
--- a/packages/core/src/data/Table/Table.tsx
+++ b/packages/core/src/data/Table/Table.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React from 'react'
 
diff --git a/packages/core/src/feedback/Avatar/Avatar.tsx b/packages/core/src/feedback/Avatar/Avatar.tsx
index 47f0c29..2b4abc9 100644
--- a/packages/core/src/feedback/Avatar/Avatar.tsx
+++ b/packages/core/src/feedback/Avatar/Avatar.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { cva, type VariantProps } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { useState } from 'react'
diff --git a/packages/core/src/feedback/Toast/Toast.tsx b/packages/core/src/feedback/Toast/Toast.tsx
index f494258..a7d499f 100644
--- a/packages/core/src/feedback/Toast/Toast.tsx
+++ b/packages/core/src/feedback/Toast/Toast.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   createContext,
   useContext,
diff --git a/packages/core/src/inputs/Button/Button.tsx b/packages/core/src/inputs/Button/Button.tsx
index ad6b2cc..6399520 100644
--- a/packages/core/src/inputs/Button/Button.tsx
+++ b/packages/core/src/inputs/Button/Button.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { cva, type VariantProps } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
diff --git a/packages/core/src/inputs/Calendar/Calendar.tsx b/packages/core/src/inputs/Calendar/Calendar.tsx
index a423a7a..ca60187 100644
--- a/packages/core/src/inputs/Calendar/Calendar.tsx
+++ b/packages/core/src/inputs/Calendar/Calendar.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useCalendar, useCalendarGrid, useCalendarCell, useButton, useLocale } from 'react-aria'
diff --git a/packages/core/src/inputs/Checkbox/Checkbox.tsx b/packages/core/src/inputs/Checkbox/Checkbox.tsx
index e93237c..f0c017d 100644
--- a/packages/core/src/inputs/Checkbox/Checkbox.tsx
+++ b/packages/core/src/inputs/Checkbox/Checkbox.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useCheckbox } from 'react-aria'
diff --git a/packages/core/src/inputs/IconButton/IconButton.tsx b/packages/core/src/inputs/IconButton/IconButton.tsx
index 64368bd..4a381b8 100644
--- a/packages/core/src/inputs/IconButton/IconButton.tsx
+++ b/packages/core/src/inputs/IconButton/IconButton.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { cva, type VariantProps } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
diff --git a/packages/core/src/inputs/RadioGroup/RadioGroup.tsx b/packages/core/src/inputs/RadioGroup/RadioGroup.tsx
index fbf4c35..1b5da25 100644
--- a/packages/core/src/inputs/RadioGroup/RadioGroup.tsx
+++ b/packages/core/src/inputs/RadioGroup/RadioGroup.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { createContext, useContext, useRef } from 'react'
 import { useRadioGroup, useRadio } from 'react-aria'
diff --git a/packages/core/src/inputs/SearchInput/SearchInput.tsx b/packages/core/src/inputs/SearchInput/SearchInput.tsx
index 2f3fef6..fa742e5 100644
--- a/packages/core/src/inputs/SearchInput/SearchInput.tsx
+++ b/packages/core/src/inputs/SearchInput/SearchInput.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useSearchField, useButton } from 'react-aria'
diff --git a/packages/core/src/inputs/Select/Select.tsx b/packages/core/src/inputs/Select/Select.tsx
index 33cb852..38295cc 100644
--- a/packages/core/src/inputs/Select/Select.tsx
+++ b/packages/core/src/inputs/Select/Select.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useSelect, useListBox, useOption, useButton, HiddenSelect } from 'react-aria'
diff --git a/packages/core/src/inputs/Slider/Slider.tsx b/packages/core/src/inputs/Slider/Slider.tsx
index 3ee0b53..eb9494e 100644
--- a/packages/core/src/inputs/Slider/Slider.tsx
+++ b/packages/core/src/inputs/Slider/Slider.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useSlider, useSliderThumb, VisuallyHidden } from 'react-aria'
diff --git a/packages/core/src/inputs/Switch/Switch.tsx b/packages/core/src/inputs/Switch/Switch.tsx
index 09fc8ca..9d5c60d 100644
--- a/packages/core/src/inputs/Switch/Switch.tsx
+++ b/packages/core/src/inputs/Switch/Switch.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useSwitch } from 'react-aria'
diff --git a/packages/core/src/inputs/TextArea/TextArea.tsx b/packages/core/src/inputs/TextArea/TextArea.tsx
index 006ce22..9320f05 100644
--- a/packages/core/src/inputs/TextArea/TextArea.tsx
+++ b/packages/core/src/inputs/TextArea/TextArea.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useTextField } from 'react-aria'
diff --git a/packages/core/src/inputs/TextInput/TextInput.tsx b/packages/core/src/inputs/TextInput/TextInput.tsx
index 1eac088..fec450a 100644
--- a/packages/core/src/inputs/TextInput/TextInput.tsx
+++ b/packages/core/src/inputs/TextInput/TextInput.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useTextField } from 'react-aria'
diff --git a/packages/core/src/inputs/Toggle/Toggle.tsx b/packages/core/src/inputs/Toggle/Toggle.tsx
index 9022710..57639e9 100644
--- a/packages/core/src/inputs/Toggle/Toggle.tsx
+++ b/packages/core/src/inputs/Toggle/Toggle.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { cva, type VariantProps } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { createContext, useContext, useRef } from 'react'
diff --git a/packages/core/src/inputs/ToggleGroup/ToggleGroup.tsx b/packages/core/src/inputs/ToggleGroup/ToggleGroup.tsx
index 310e180..036a91d 100644
--- a/packages/core/src/inputs/ToggleGroup/ToggleGroup.tsx
+++ b/packages/core/src/inputs/ToggleGroup/ToggleGroup.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useCallback, useState } from 'react'
 import { ToggleGroupCtx } from '../Toggle'
diff --git a/packages/core/src/layout/Resizable/Resizable.tsx b/packages/core/src/layout/Resizable/Resizable.tsx
index 1e86096..f197928 100644
--- a/packages/core/src/layout/Resizable/Resizable.tsx
+++ b/packages/core/src/layout/Resizable/Resizable.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useRef, useCallback, useEffect } from 'react'
 
diff --git a/packages/core/src/navigation/Breadcrumb/Breadcrumb.tsx b/packages/core/src/navigation/Breadcrumb/Breadcrumb.tsx
index 060b0a9..f9ee9a0 100644
--- a/packages/core/src/navigation/Breadcrumb/Breadcrumb.tsx
+++ b/packages/core/src/navigation/Breadcrumb/Breadcrumb.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useBreadcrumbs, useBreadcrumbItem } from 'react-aria'
diff --git a/packages/core/src/navigation/Menubar/Menubar.tsx b/packages/core/src/navigation/Menubar/Menubar.tsx
index 1ea48e9..f07c4a2 100644
--- a/packages/core/src/navigation/Menubar/Menubar.tsx
+++ b/packages/core/src/navigation/Menubar/Menubar.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useRef, useEffect, useCallback, createContext, useContext } from 'react'
 
diff --git a/packages/core/src/navigation/NavigationMenu/NavigationMenu.tsx b/packages/core/src/navigation/NavigationMenu/NavigationMenu.tsx
index 9b6dcad..4715124 100644
--- a/packages/core/src/navigation/NavigationMenu/NavigationMenu.tsx
+++ b/packages/core/src/navigation/NavigationMenu/NavigationMenu.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useRef, useEffect, useCallback } from 'react'
 
diff --git a/packages/core/src/navigation/Pagination/Pagination.tsx b/packages/core/src/navigation/Pagination/Pagination.tsx
index d9f75e1..cd38c98 100644
--- a/packages/core/src/navigation/Pagination/Pagination.tsx
+++ b/packages/core/src/navigation/Pagination/Pagination.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { cva, type VariantProps } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
diff --git a/packages/core/src/navigation/Tabs/Tabs.tsx b/packages/core/src/navigation/Tabs/Tabs.tsx
index c4f7835..2aac44a 100644
--- a/packages/core/src/navigation/Tabs/Tabs.tsx
+++ b/packages/core/src/navigation/Tabs/Tabs.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useTabList, useTab, useTabPanel } from 'react-aria'
diff --git a/packages/core/src/overlay/Command/Command.tsx b/packages/core/src/overlay/Command/Command.tsx
index d5667a8..1e5d278 100644
--- a/packages/core/src/overlay/Command/Command.tsx
+++ b/packages/core/src/overlay/Command/Command.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, {
   useState,
diff --git a/packages/core/src/overlay/ContextMenu/ContextMenu.tsx b/packages/core/src/overlay/ContextMenu/ContextMenu.tsx
index 2ac54ea..c3411f7 100644
--- a/packages/core/src/overlay/ContextMenu/ContextMenu.tsx
+++ b/packages/core/src/overlay/ContextMenu/ContextMenu.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useRef, useEffect, useCallback } from 'react'
 
diff --git a/packages/core/src/overlay/Dialog/Dialog.tsx b/packages/core/src/overlay/Dialog/Dialog.tsx
index 501b746..d233cc8 100644
--- a/packages/core/src/overlay/Dialog/Dialog.tsx
+++ b/packages/core/src/overlay/Dialog/Dialog.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { cva } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { useRef, useEffect } from 'react'
diff --git a/packages/core/src/overlay/Drawer/Drawer.tsx b/packages/core/src/overlay/Drawer/Drawer.tsx
index 4c343c0..68f06bb 100644
--- a/packages/core/src/overlay/Drawer/Drawer.tsx
+++ b/packages/core/src/overlay/Drawer/Drawer.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { cva, type VariantProps } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { useRef, useEffect } from 'react'
diff --git a/packages/core/src/overlay/DropdownMenu/DropdownMenu.tsx b/packages/core/src/overlay/DropdownMenu/DropdownMenu.tsx
index ea970f8..7a907ad 100644
--- a/packages/core/src/overlay/DropdownMenu/DropdownMenu.tsx
+++ b/packages/core/src/overlay/DropdownMenu/DropdownMenu.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useMenuTrigger, useMenu, useMenuItem, useButton } from 'react-aria'
diff --git a/packages/core/src/overlay/HoverCard/HoverCard.tsx b/packages/core/src/overlay/HoverCard/HoverCard.tsx
index ba7b435..7b8bc26 100644
--- a/packages/core/src/overlay/HoverCard/HoverCard.tsx
+++ b/packages/core/src/overlay/HoverCard/HoverCard.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useState, useRef, useCallback, useEffect } from 'react'
 
diff --git a/packages/core/src/overlay/Popover/Popover.tsx b/packages/core/src/overlay/Popover/Popover.tsx
index 77a9b15..00b818d 100644
--- a/packages/core/src/overlay/Popover/Popover.tsx
+++ b/packages/core/src/overlay/Popover/Popover.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef } from 'react'
 import { useOverlay, DismissButton, FocusScope } from 'react-aria'
diff --git a/packages/core/src/overlay/Sheet/Sheet.tsx b/packages/core/src/overlay/Sheet/Sheet.tsx
index 8e1cf78..7836bef 100644
--- a/packages/core/src/overlay/Sheet/Sheet.tsx
+++ b/packages/core/src/overlay/Sheet/Sheet.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { cva } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import React, { useRef, useEffect } from 'react'
diff --git a/packages/core/src/overlay/Tooltip/Tooltip.tsx b/packages/core/src/overlay/Tooltip/Tooltip.tsx
index 75ab4a1..1ddc1d9 100644
--- a/packages/core/src/overlay/Tooltip/Tooltip.tsx
+++ b/packages/core/src/overlay/Tooltip/Tooltip.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { twMerge } from 'tailwind-merge'
 import React, { useRef, cloneElement } from 'react'
 import { useTooltip, useTooltipTrigger, mergeProps } from 'react-aria'
diff --git a/packages/core/tsup.config.ts b/packages/core/tsup.config.ts
index 52458db..8b68216 100644
--- a/packages/core/tsup.config.ts
+++ b/packages/core/tsup.config.ts
@@ -16,4 +16,5 @@ export default defineConfig((options) => ({
   sourcemap: true,
   clean: !options.watch,
   external: ['react', 'react-dom', /^@surf-kit\//],
+  banner: { js: "'use client';" },
 }))
diff --git a/packages/hooks/src/useAnnounce.ts b/packages/hooks/src/useAnnounce.ts
index 28927ab..6d59cfd 100644
--- a/packages/hooks/src/useAnnounce.ts
+++ b/packages/hooks/src/useAnnounce.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { useCallback, useEffect, useRef } from 'react'
 
 type Priority = 'polite' | 'assertive'
diff --git a/packages/hooks/src/useClipboard.ts b/packages/hooks/src/useClipboard.ts
index fb4e10a..7e5ec0e 100644
--- a/packages/hooks/src/useClipboard.ts
+++ b/packages/hooks/src/useClipboard.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useCallback, useRef } from 'react'
 
 export function useClipboard(): { copy: (text: string) => Promise<void>; copied: boolean } {
diff --git a/packages/hooks/src/useFocusTrap.ts b/packages/hooks/src/useFocusTrap.ts
index 9b9c8c4..3893254 100644
--- a/packages/hooks/src/useFocusTrap.ts
+++ b/packages/hooks/src/useFocusTrap.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { useEffect, useRef, type RefObject } from 'react'
 
 const FOCUSABLE_SELECTOR =
diff --git a/packages/hooks/src/useKeyboardShortcut.ts b/packages/hooks/src/useKeyboardShortcut.ts
index fd6540e..571c860 100644
--- a/packages/hooks/src/useKeyboardShortcut.ts
+++ b/packages/hooks/src/useKeyboardShortcut.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { useEffect } from 'react'
 
 interface ShortcutOptions {
diff --git a/packages/hooks/src/useLocalStorage.ts b/packages/hooks/src/useLocalStorage.ts
index a4dfe31..8f5e380 100644
--- a/packages/hooks/src/useLocalStorage.ts
+++ b/packages/hooks/src/useLocalStorage.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useCallback } from 'react'
 
 type SetValue<T> = T | ((prev: T) => T)
diff --git a/packages/hooks/src/useMediaQuery.ts b/packages/hooks/src/useMediaQuery.ts
index a96785d..23837b4 100644
--- a/packages/hooks/src/useMediaQuery.ts
+++ b/packages/hooks/src/useMediaQuery.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useEffect } from 'react'
 
 export function useMediaQuery(query: string): boolean {
diff --git a/packages/hooks/tsup.config.ts b/packages/hooks/tsup.config.ts
index 56f7c1d..3e9c46f 100644
--- a/packages/hooks/tsup.config.ts
+++ b/packages/hooks/tsup.config.ts
@@ -8,4 +8,5 @@ export default defineConfig((options) => ({
   sourcemap: true,
   clean: !options.watch,
   external: ['react'],
+  banner: { js: "'use client';" },
 }))
diff --git a/packages/theme/src/ThemeProvider.tsx b/packages/theme/src/ThemeProvider.tsx
index 633b68f..f4f5d39 100644
--- a/packages/theme/src/ThemeProvider.tsx
+++ b/packages/theme/src/ThemeProvider.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   createContext,
   useCallback,
diff --git a/packages/theme/src/useColorMode.ts b/packages/theme/src/useColorMode.ts
index 39e57e7..deab204 100644
--- a/packages/theme/src/useColorMode.ts
+++ b/packages/theme/src/useColorMode.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { useCallback, useEffect, useState } from 'react'
 import { useTheme } from './useTheme'
 import type { ColorMode, ColorModePreference } from './types'
diff --git a/packages/theme/src/useTheme.ts b/packages/theme/src/useTheme.ts
index 9332aec..a60cfd8 100644
--- a/packages/theme/src/useTheme.ts
+++ b/packages/theme/src/useTheme.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { useContext } from 'react'
 import { ThemeContext } from './ThemeProvider'
 import type { ThemeContextValue } from './types'
diff --git a/packages/theme/tsup.config.ts b/packages/theme/tsup.config.ts
index 7f583f0..356df09 100644
--- a/packages/theme/tsup.config.ts
+++ b/packages/theme/tsup.config.ts
@@ -8,4 +8,5 @@ export default defineConfig((options) => ({
   sourcemap: true,
   clean: !options.watch,
   external: ['react', 'tailwindcss'],
+  banner: { js: "'use client';" },
 }))