diff --git a/src/components/ClientOnly.tsx b/src/components/ClientOnly.tsx
new file mode 100644
index 00000000..2c0baf94
--- /dev/null
+++ b/src/components/ClientOnly.tsx
@@ -0,0 +1,46 @@
+'use client'
+import { Suspense, lazy, type ComponentType } from 'react'
+
+function Placeholder({ minHeight = 200 }: { minHeight?: number }) {
+  return (
+    <div
+      className="flex items-center justify-center rounded-lg border border-gray6 border-dashed text-[14px] text-gray9"
+      style={{ minHeight }}
+    >
+      Loading…
+    </div>
+  )
+}
+
+export function clientOnly<T extends Record<string, unknown>>(
+  load: () => Promise<{ default: ComponentType<T> }>,
+  options?: { minHeight?: number },
+) {
+  const Component = lazy(load)
+
+  return function ClientOnly(props: T) {
+    return (
+      <Suspense fallback={<Placeholder minHeight={options?.minHeight} />}>
+        <Component {...props} />
+      </Suspense>
+    )
+  }
+}
+
+export function clientOnlyNamed<T extends Record<string, unknown>>(
+  load: () => Promise<Record<string, ComponentType<T>>>,
+  name: string,
+  options?: { minHeight?: number },
+) {
+  const Component = lazy(() =>
+    load().then((mod) => ({ default: mod[name] as ComponentType<T> })),
+  )
+
+  return function ClientOnly(props: T) {
+    return (
+      <Suspense fallback={<Placeholder minHeight={options?.minHeight} />}>
+        <Component {...props} />
+      </Suspense>
+    )
+  }
+}
diff --git a/src/components/guides/AccountsDemo.tsx b/src/components/guides/AccountsDemo.tsx
new file mode 100644
index 00000000..c0828c85
--- /dev/null
+++ b/src/components/guides/AccountsDemo.tsx
@@ -0,0 +1,13 @@
+'use client'
+import * as Demo from './Demo'
+import * as Step from './steps'
+
+export default function AccountsDemo() {
+  return (
+    <Demo.Container name="Make a Payment" footerVariant="source" src="tempoxyz/accounts/tree/main/examples/basic">
+      <Step.Connect stepNumber={1} />
+      <Step.AddFunds stepNumber={2} />
+      <Step.SendPayment stepNumber={3} last />
+    </Demo.Container>
+  )
+}
diff --git a/src/components/guides/AccountsSignInDemo.tsx b/src/components/guides/AccountsSignInDemo.tsx
new file mode 100644
index 00000000..08e93c02
--- /dev/null
+++ b/src/components/guides/AccountsSignInDemo.tsx
@@ -0,0 +1,11 @@
+'use client'
+import * as Demo from './Demo'
+import { AccountsSignIn } from './AccountsSignIn'
+
+export default function AccountsSignInDemo() {
+  return (
+    <Demo.Container name="Tempo Wallet" footerVariant="source" src="tempoxyz/accounts/tree/main/examples/basic">
+      <AccountsSignIn />
+    </Demo.Container>
+  )
+}
diff --git a/src/components/guides/ConnectToWalletsDemo.tsx b/src/components/guides/ConnectToWalletsDemo.tsx
new file mode 100644
index 00000000..082e55c1
--- /dev/null
+++ b/src/components/guides/ConnectToWalletsDemo.tsx
@@ -0,0 +1,15 @@
+'use client'
+import * as Demo from './Demo'
+import * as Step from './steps'
+
+export default function ConnectToWalletsDemo() {
+  return (
+    <Demo.Container
+      name="Connect to Wallets"
+      footerVariant="source"
+      src="tempoxyz/examples/tree/main/examples/accounts"
+    >
+      <Step.ConnectWallet stepNumber={1} last />
+    </Demo.Container>
+  )
+}
diff --git a/src/components/guides/EmbedPasskeysDemo.tsx b/src/components/guides/EmbedPasskeysDemo.tsx
new file mode 100644
index 00000000..f80bc825
--- /dev/null
+++ b/src/components/guides/EmbedPasskeysDemo.tsx
@@ -0,0 +1,11 @@
+'use client'
+import * as Demo from './Demo'
+import { EmbedPasskeys } from './EmbedPasskeys'
+
+export default function EmbedPasskeysDemo() {
+  return (
+    <Demo.Container name="Passkey Accounts" footerVariant="source" src="tempoxyz/accounts/tree/main/examples/domain-bound-webauthn">
+      <EmbedPasskeys />
+    </Demo.Container>
+  )
+}
diff --git a/src/components/guides/FaucetWalletDemo.tsx b/src/components/guides/FaucetWalletDemo.tsx
new file mode 100644
index 00000000..94d2a9eb
--- /dev/null
+++ b/src/components/guides/FaucetWalletDemo.tsx
@@ -0,0 +1,28 @@
+'use client'
+import * as Demo from './Demo'
+import * as Step from './steps'
+import * as Token from './tokens'
+
+export default function FaucetWalletDemo({ variant }: { variant: 'wallet' | 'address' }) {
+  if (variant === 'address') {
+    return (
+      <Demo.Container name="Fund an address" footerVariant={undefined}>
+        <Step.AddFundsToOthers stepNumber={1} last />
+      </Demo.Container>
+    )
+  }
+
+  return (
+    <Demo.Container
+      name="Connect and fund your wallet"
+      footerVariant="balances"
+      tokens={[Token.pathUsd, Token.alphaUsd, Token.betaUsd, Token.thetaUsd]}
+      balanceSource="wallet"
+    >
+      <Step.ConnectWallet stepNumber={1} />
+      <Step.AddFundsToWallet stepNumber={2} />
+      <Step.AddTokensToWallet stepNumber={3} />
+      <Step.SetFeeToken stepNumber={4} last />
+    </Demo.Container>
+  )
+}
diff --git a/src/pages/accounts/index.mdx b/src/pages/accounts/index.mdx
index 523c3965..1375dc25 100644
--- a/src/pages/accounts/index.mdx
+++ b/src/pages/accounts/index.mdx
@@ -4,10 +4,14 @@ description: Set up the Tempo Accounts SDK to create, manage, and interact with
 ---
 
 import { Cards, Card } from 'vocs'
-import * as Demo from '../../components/guides/Demo.tsx'
-import * as Step from '../../components/guides/steps'
+import { clientOnly } from '../../components/ClientOnly.tsx'
 import IconGitHub from '~icons/simple-icons/github'
 
+export const AccountsDemo = clientOnly(
+  () => import('../../components/guides/AccountsDemo.tsx'),
+  { minHeight: 180 },
+)
+
 # Getting Started
 
 ## Overview
@@ -18,11 +22,7 @@ The Tempo Accounts SDK is a TypeScript library for applications and wallets to c
 
 Try sign in and make a payment on Tempo using the Accounts SDK.
 
-<Demo.Container name="Make a Payment" footerVariant="source" src="tempoxyz/accounts/tree/main/examples/basic">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.SendPayment stepNumber={3} last />
-</Demo.Container>
+<AccountsDemo />
 
 ### Quick Prompt
 
diff --git a/src/pages/guide/use-accounts/add-funds.mdx b/src/pages/guide/use-accounts/add-funds.mdx
index f1465435..2f9789af 100644
--- a/src/pages/guide/use-accounts/add-funds.mdx
+++ b/src/pages/guide/use-accounts/add-funds.mdx
@@ -3,11 +3,14 @@ description: Get test stablecoins on Tempo Testnet using the faucet. Request pat
 mipd: true
 ---
 
-import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
-import * as Token from '../../../components/guides/tokens'
+import { clientOnly } from '../../../components/ClientOnly.tsx'
 import { Tabs, Tab } from 'vocs'
 
+export const FaucetWalletDemo = clientOnly(
+  () => import('../../../components/guides/FaucetWalletDemo.tsx'),
+  { minHeight: 280 },
+)
+
 # Add Funds to Your Balance
 
 Get test tokens to build on Tempo testnet.
@@ -20,12 +23,7 @@ Get test tokens to build on Tempo testnet.
 Connect your wallet to receive test stablecoins directly.
 
 <div className="h-6"/>
-<Demo.Container name="Connect and fund your wallet" footerVariant="balances" tokens={[Token.pathUsd, Token.alphaUsd, Token.betaUsd, Token.thetaUsd]} balanceSource="wallet">
-  <Step.ConnectWallet stepNumber={1} />
-  <Step.AddFundsToWallet stepNumber={2} />
-  <Step.AddTokensToWallet stepNumber={3} />
-  <Step.SetFeeToken stepNumber={4} last />
-</Demo.Container>
+<FaucetWalletDemo variant="wallet" />
 
   </Tab>
   <Tab title="Fund an address">
@@ -34,9 +32,7 @@ Connect your wallet to receive test stablecoins directly.
 Send test stablecoins to any address.
 
 <div className="h-6"/>
-<Demo.Container name="Fund an address">
-  <Step.AddFundsToOthers stepNumber={1} last />
-</Demo.Container>
+<FaucetWalletDemo variant="address" />
 
   </Tab>
   <Tab title="cURL request">
diff --git a/src/pages/guide/use-accounts/connect-to-wallets.mdx b/src/pages/guide/use-accounts/connect-to-wallets.mdx
index 64425465..6e90bb66 100644
--- a/src/pages/guide/use-accounts/connect-to-wallets.mdx
+++ b/src/pages/guide/use-accounts/connect-to-wallets.mdx
@@ -3,9 +3,18 @@ description: Connect your application to EVM-compatible wallets like MetaMask on
 mipd: true
 ---
 
-import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
-import { ConnectWallet } from '../../../components/ConnectWallet.tsx'
+import { clientOnly, clientOnlyNamed } from '../../../components/ClientOnly.tsx'
+
+export const ConnectWallet = clientOnlyNamed(
+  () => import('../../../components/ConnectWallet.tsx'),
+  'ConnectWallet',
+  { minHeight: 48 },
+)
+
+export const ConnectToWalletsDemo = clientOnly(
+  () => import('../../../components/guides/ConnectToWalletsDemo.tsx'),
+  { minHeight: 120 },
+)
 
 # Connect to Wallets
 
@@ -16,13 +25,7 @@ You can use these wallets when building your application on Tempo.
 
 This guide will walk you through how to set up your application to connect to wallets.
 
-<Demo.Container 
-  name="Connect to Wallets" 
-  footerVariant="source" 
-  src="tempoxyz/examples/tree/main/examples/accounts"
->
-  <Step.ConnectWallet stepNumber={1} last />
-</Demo.Container>
+<ConnectToWalletsDemo />
 
 ## Wagmi Setup
 
diff --git a/src/pages/guide/use-accounts/embed-passkeys.mdx b/src/pages/guide/use-accounts/embed-passkeys.mdx
index 59024b85..2637d804 100644
--- a/src/pages/guide/use-accounts/embed-passkeys.mdx
+++ b/src/pages/guide/use-accounts/embed-passkeys.mdx
@@ -3,8 +3,24 @@ description: Create domain-bound passkey accounts on Tempo using WebAuthn for se
 ---
 
 import { Cards, Card } from 'vocs'
-import * as Demo from '../../../components/guides/Demo.tsx'
-import { EmbedPasskeys, SignInButtons } from '../../../components/guides/EmbedPasskeys.tsx'
+import { clientOnly, clientOnlyNamed } from '../../../components/ClientOnly.tsx'
+
+export const EmbedPasskeysDemo = clientOnly(
+  () => import('../../../components/guides/EmbedPasskeysDemo.tsx'),
+  { minHeight: 120 },
+)
+
+export const EmbedPasskeys = clientOnlyNamed(
+  () => import('../../../components/guides/EmbedPasskeys.tsx'),
+  'EmbedPasskeys',
+  { minHeight: 48 },
+)
+
+export const SignInButtons = clientOnlyNamed(
+  () => import('../../../components/guides/EmbedPasskeys.tsx'),
+  'SignInButtons',
+  { minHeight: 48 },
+)
 
 # Embed Passkey Accounts
 
@@ -28,9 +44,7 @@ This means your users won't be able to use the same passkey account on other app
 
 By the end of this guide, you will be able to embed passkey accounts into your application.
 
-<Demo.Container name="Passkey Accounts" footerVariant="source" src="tempoxyz/accounts/tree/main/examples/domain-bound-webauthn">
-  <EmbedPasskeys />
-</Demo.Container>
+<EmbedPasskeysDemo />
 
 ## Steps
 
diff --git a/src/pages/guide/use-accounts/embed-tempo-wallet.mdx b/src/pages/guide/use-accounts/embed-tempo-wallet.mdx
index 35021a35..6583aa3e 100644
--- a/src/pages/guide/use-accounts/embed-tempo-wallet.mdx
+++ b/src/pages/guide/use-accounts/embed-tempo-wallet.mdx
@@ -3,8 +3,18 @@ description: Embed the Tempo Wallet dialog into your application for a universal
 ---
 
 import { Cards, Card } from 'vocs'
-import * as Demo from '../../../components/guides/Demo.tsx'
-import { AccountsSignIn } from '../../../components/guides/AccountsSignIn.tsx'
+import { clientOnly, clientOnlyNamed } from '../../../components/ClientOnly.tsx'
+
+export const AccountsSignInDemo = clientOnly(
+  () => import('../../../components/guides/AccountsSignInDemo.tsx'),
+  { minHeight: 120 },
+)
+
+export const AccountsSignIn = clientOnlyNamed(
+  () => import('../../../components/guides/AccountsSignIn.tsx'),
+  'AccountsSignIn',
+  { minHeight: 48 },
+)
 
 # Embed Tempo Wallet
 
@@ -28,9 +38,7 @@ If you want a quick integration with a full-featured wallet, use the [Tempo Wall
 
 By the end of this guide, you will be able to embed the Tempo Wallet into your application.
 
-<Demo.Container name="Tempo Wallet" footerVariant="source" src="tempoxyz/accounts/tree/main/examples/basic">
-  <AccountsSignIn />
-</Demo.Container>
+<AccountsSignInDemo />
 
 ## Steps
 
diff --git a/src/pages/quickstart/connection-details.mdx b/src/pages/quickstart/connection-details.mdx
index fc808255..92466576 100644
--- a/src/pages/quickstart/connection-details.mdx
+++ b/src/pages/quickstart/connection-details.mdx
@@ -3,8 +3,13 @@ description: Connect to Tempo using browser wallets, CLI tools, or direct RPC en
 mipd: true
 ---
 
-import * as Demo from '../../components/guides/Demo.tsx'
-import { ConnectWallet } from '../../components/ConnectWallet.tsx'
+import { clientOnlyNamed } from '../../components/ClientOnly.tsx'
+
+export const ConnectWallet = clientOnlyNamed(
+  () => import('../../components/ConnectWallet.tsx'),
+  'ConnectWallet',
+  { minHeight: 48 },
+)
 
 # Connect to the Network
 
diff --git a/src/pages/quickstart/faucet.mdx b/src/pages/quickstart/faucet.mdx
index 26e6b5a6..dec8d6e9 100644
--- a/src/pages/quickstart/faucet.mdx
+++ b/src/pages/quickstart/faucet.mdx
@@ -3,11 +3,13 @@ description: Get free test stablecoins on Tempo Testnet. Connect your wallet or
 mipd: true
 ---
 
-import * as Demo from '../../components/guides/Demo.tsx'
-import * as Step from '../../components/guides/steps'
-import * as Token from '../../components/guides/tokens'
+import { clientOnly } from '../../components/ClientOnly.tsx'
 import { Tabs, Tab } from 'vocs'
 
+export const FaucetWalletDemo = clientOnly(
+  () => import('../../components/guides/FaucetWalletDemo.tsx'),
+  { minHeight: 280 },
+)
 
 # Faucet
 
@@ -21,12 +23,7 @@ Get test stablecoins on Tempo testnet.
 Connect your wallet to receive test stablecoins directly.
 
 <div className="h-6"/>
-<Demo.Container name="Connect and fund your wallet" footerVariant="balances" tokens={[Token.pathUsd, Token.alphaUsd, Token.betaUsd, Token.thetaUsd]} balanceSource="wallet">
-  <Step.ConnectWallet stepNumber={1} />
-  <Step.AddFundsToWallet stepNumber={2} />
-  <Step.AddTokensToWallet stepNumber={3} />
-  <Step.SetFeeToken stepNumber={4} last />
-</Demo.Container>
+<FaucetWalletDemo variant="wallet" />
 
   </Tab>
   <Tab title="Fund an address">
@@ -35,9 +32,7 @@ Connect your wallet to receive test stablecoins directly.
 Send test stablecoins to any address.
 
 <div className="h-6"/>
-<Demo.Container name="Fund an address">
-  <Step.AddFundsToOthers stepNumber={1} last />
-</Demo.Container>
+<FaucetWalletDemo variant="address" />
 
   </Tab>
   <Tab title="cURL request">
diff --git a/src/pages/quickstart/integrate-tempo.mdx b/src/pages/quickstart/integrate-tempo.mdx
index 80a58a8e..bbbdbd8f 100644
--- a/src/pages/quickstart/integrate-tempo.mdx
+++ b/src/pages/quickstart/integrate-tempo.mdx
@@ -2,8 +2,13 @@
 description: Build on Tempo Testnet. Connect to the network, explore SDKs, and follow guides for accounts, payments, and stablecoin issuance.
 ---
 
-import * as Demo from '../../components/guides/Demo.tsx'
-import { ConnectWallet } from '../../components/ConnectWallet.tsx'
+import { clientOnlyNamed } from '../../components/ClientOnly.tsx'
+
+export const ConnectWallet = clientOnlyNamed(
+  () => import('../../components/ConnectWallet.tsx'),
+  'ConnectWallet',
+  { minHeight: 48 },
+)
 import TempoTxProperties from '../../snippets/tempo-tx-properties.mdx'
 import { Cards, Card } from 'vocs'
 
diff --git a/src/pages/quickstart/tokenlist.mdx b/src/pages/quickstart/tokenlist.mdx
index 8b5272b3..90570e17 100644
--- a/src/pages/quickstart/tokenlist.mdx
+++ b/src/pages/quickstart/tokenlist.mdx
@@ -3,7 +3,13 @@ title: Tempo Token List Registry
 ---
 import { Callout } from 'vocs'
 
-import { TokenListDemo } from '../../components/TokenList.tsx'
+import { clientOnlyNamed } from '../../components/ClientOnly.tsx'
+
+export const TokenListDemo = clientOnlyNamed(
+  () => import('../../components/TokenList.tsx'),
+  'TokenListDemo',
+  { minHeight: 200 },
+)
 
 # Tempo Token List Registry