diff --git a/.changeset/three-bottles-kiss.md b/.changeset/three-bottles-kiss.md
new file mode 100644
index 0000000000..b6148c003a
--- /dev/null
+++ b/.changeset/three-bottles-kiss.md
@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+feat: add `use client` directives to swap components
diff --git a/src/swap/components/Swap.tsx b/src/swap/components/Swap.tsx
index d103c5aae9..ed0d3ba932 100644
--- a/src/swap/components/Swap.tsx
+++ b/src/swap/components/Swap.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Children, useCallback, useMemo, useState } from 'react';
 import { SwapAmountInput } from './SwapAmountInput';
 import { SwapButton } from './SwapButton';
diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx
index a4bf6dceb1..d89c564c14 100644
--- a/src/swap/components/SwapAmountInput.tsx
+++ b/src/swap/components/SwapAmountInput.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback, useEffect, useMemo } from 'react';
 
 import { useSwapContext } from '../context';
diff --git a/src/swap/components/SwapButton.tsx b/src/swap/components/SwapButton.tsx
index b7b33affdf..f9aa9db1b8 100644
--- a/src/swap/components/SwapButton.tsx
+++ b/src/swap/components/SwapButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback } from 'react';
 import { useSwapContext } from '../context';
 import { buildSwapTransaction } from '../core/buildSwapTransaction';
diff --git a/src/swap/components/SwapMessage.tsx b/src/swap/components/SwapMessage.tsx
index a8bd4c024d..10eb70f5d6 100644
--- a/src/swap/components/SwapMessage.tsx
+++ b/src/swap/components/SwapMessage.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useSwapContext } from '../context';
 import { text } from '../../styles/theme';
 import { getSwapMessage } from '../core/getSwapMessage';
diff --git a/src/swap/components/SwapToggleButton.tsx b/src/swap/components/SwapToggleButton.tsx
index c01100316b..e6ad1514ae 100644
--- a/src/swap/components/SwapToggleButton.tsx
+++ b/src/swap/components/SwapToggleButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { cn, pressable } from '../../styles/theme';
 import { useSwapContext } from '../context';