diff --git a/site/docs/pages/swap/swap-settings.mdx b/site/docs/pages/swap/swap-settings.mdx
new file mode 100644
index 0000000000..664cf7ed56
--- /dev/null
+++ b/site/docs/pages/swap/swap-settings.mdx
@@ -0,0 +1,378 @@
+---
+title: ยท OnchainKit
+description: Swap component slippage controls
+---
+
+import { Avatar, Name } from '@coinbase/onchainkit/identity';
+import {
+ Swap,
+ SwapAmountInput,
+ SwapButton,
+ SwapMessage,
+ SwapSettings,
+ SwapSettingsSlippageDescription,
+ SwapSettingsSlippageInput,
+ SwapSettingsSlippageTitle,
+ SwapToggleButton,
+} from '@coinbase/onchainkit/swap';
+import { Wallet, ConnectWallet } from '@coinbase/onchainkit/wallet';
+import App from '../../components/App';
+import SwapWrapper from '../../components/SwapWrapper';
+import { walletDropdownLinkCustomBaseIconSvg } from '../../components/svg/walletDropdownLinkCustomBaseIconSvg';
+
+# `SwapSettings`
+The `SwapSettings` component allows users to configure the maximum acceptable price difference (slippage) for their token swap transactions.
+It provides a simple interface to set and adjust this tolerance level.
+
+## Usage
+
+```tsx twoslash
+// omitted for brevity
+import {
+ Swap,
+ SwapSettings, // [!code focus]
+ SwapSettingsSlippageDescription, // [!code focus]
+ SwapSettingsSlippageInput, // [!code focus]
+ SwapSettingsSlippageTitle, // [!code focus]
+} from '@coinbase/onchainkit/swap';
+
+
+ // [!code focus]
+ // [!code focus]
+ Max. slippage// [!code focus]
+ // [!code focus]
+ // [!code focus]
+ Your swap will revert if the prices change by more than the selected// [!code focus]
+ percentage.// [!code focus]
+ // [!code focus]
+ // [!code focus]
+ // [!code focus]
+
+```
+
+
+
+ {({ address, swappableTokens }) => {
+ if (address) {
+ return (
+
+
+ Max. slippage
+
+ Your swap will revert if the prices change by more than the selected
+ percentage.
+
+
+
+
+
+
+
+
+
+ )
+ }
+ return <>
+
+
+
+
+
+
+ ;
+ }}
+
+
+
+### Override styles
+
+You can override component styles using `className`.
+
+```tsx twoslash
+import {
+ Swap,
+ SwapSettings,
+ SwapSettingsSlippageDescription,
+ SwapSettingsSlippageInput,
+ SwapSettingsSlippageTitle,
+} from '@coinbase/onchainkit/swap';
+// ---cut-before---
+// omitted for brevity
+
+
+ // [!code focus]
+ Max. slippage
+
+ // [!code focus]
+ Your swap will revert if the prices change by more than the selected
+ percentage.
+
+
+
+
+```
+
+
+
+
+ {({ address, swappableTokens }) => {
+ if (address) {
+ return (
+
+
+ Max. slippage
+
+ Your swap will revert if the prices change by more than the selected
+ percentage.
+
+
+
+
+
+
+
+
+
+ )
+ }
+ return <>
+
+
+
+
+
+
+ ;
+ }}
+
+
+
+### Override icon
+You can override the icon using the icon prop.
+
+
+```tsx twoslash
+// suppress twoslash error
+declare const baseIcon: any;
+
+import {
+ Swap,
+ SwapSettings,
+ SwapSettingsSlippageDescription,
+ SwapSettingsSlippageInput,
+ SwapSettingsSlippageTitle,
+} from '@coinbase/onchainkit/swap';
+// ---cut-before---
+// omitted for brevity
+// [!code focus]
+// ---cut-after---
+
+```
+
+
+
+ {({ address, swappableTokens }) => {
+ if (address) {
+ return (
+
+
+ Max. slippage
+
+ Your swap will revert if the prices change by more than the selected
+ percentage.
+
+
+
+
+
+
+
+
+
+ )
+ }
+ return <>
+
+
+
+
+
+
+ ;
+ }}
+
+
+
+### Add text
+You can add text next to the `SwapSettings` component using text.
+
+```tsx twoslash
+import {
+ Swap,
+ SwapSettings,
+ SwapSettingsSlippageDescription,
+ SwapSettingsSlippageInput,
+ SwapSettingsSlippageTitle,
+} from '@coinbase/onchainkit/swap';
+// ---cut-before---
+// omitted for brevity
+// [!code focus]
+// ---cut-after---
+
+```
+
+
+
+ {({ address, swappableTokens }) => {
+ if (address) {
+ return (
+
+
+ Max. slippage
+
+ Your swap will revert if the prices change by more than the selected
+ percentage.
+
+
+
+
+
+
+
+
+
+ )
+ }
+ return <>
+
+
+
+
+
+
+ ;
+ }}
+
+
+
+### Override text
+You can override component text by providing children text.
+
+```tsx twoslash
+import {
+ Swap,
+ SwapSettings,
+ SwapSettingsSlippageDescription,
+ SwapSettingsSlippageInput,
+ SwapSettingsSlippageTitle,
+} from '@coinbase/onchainkit/swap';
+
+// ---cut-before---
+// omitted for brevity
+
+
+ Slippage Settings// [!code focus]
+
+
+ Set a max slippage you are willing to accept.// [!code focus]
+
+// ---cut-after---
+
+```
+
+
+
+ {({ address, swappableTokens }) => {
+ if (address) {
+ return (
+
+
+ Slippage Settings
+
+ Set a max slippage you are willing to accept.
+
+
+
+
+
+
+
+
+
+ )
+ }
+ return <>
+
+
+
+
+
+
+ ;
+ }}
+
+
+
+## Components
+
+- `` - Container component for swap slippage settings.
+- `` - Displays description text explaining the slippage setting.
+- `` - Input field for users to enter their desired max slippage percentage
+- `` - Displays the title for the slippage settings section
+
+## Props
+
+- [`SwapsSettingsReact`](/swap/types#swapsettingsreact)
+- [`SwapSettingsSlippageDescriptionReact`](/swap/types#swapsettingsslippagedescriptionreact)
+- [`SwapSettingsSlippageInputReact`](/swap/types#swapsettingsslippageinputreact)
+- [`SwapSettingsSlippageTitleReact`](/swap/types#swapsettingsslippagetitlereact)
diff --git a/site/sidebar.ts b/site/sidebar.ts
index 6734709c58..8c23b91444 100644
--- a/site/sidebar.ts
+++ b/site/sidebar.ts
@@ -104,6 +104,10 @@ export const sidebar = [
text: 'Swap',
link: '/swap/swap',
},
+ {
+ text: 'SwapSettings',
+ link: '/swap/swap-settings',
+ },
],
},
{
diff --git a/src/internal/svg/swapSettings.tsx b/src/internal/svg/swapSettings.tsx
index 8352e4c295..d28ad9edcb 100644
--- a/src/internal/svg/swapSettings.tsx
+++ b/src/internal/svg/swapSettings.tsx
@@ -4,8 +4,8 @@ export const swapSettingsSvg = (