From 2703aae7766403425356003d95e7e11bd93148e4 Mon Sep 17 00:00:00 2001
From: Derek Cofausper <256792747+decofe@users.noreply.github.com>
Date: Wed, 8 Apr 2026 17:30:28 +0000
Subject: [PATCH 1/3] perf: lazy-load interactive Demo components on faucet
 page

Use React.lazy() + Suspense to dynamically import the heavy wagmi/viem
wallet UI so static MDX content (title, description, table) paints first.

Co-authored-by: Brendan Ryan <1572504+brendanjryan@users.noreply.github.com>
Amp-Thread-ID: https://ampcode.com/threads/T-019d6e1a-2a8e-7257-a027-d6c2cb562b8b
---
 src/components/guides/FaucetWalletDemo.tsx    | 28 +++++++++++++++++++
 .../guides/LazyFaucetWalletDemo.tsx           | 28 +++++++++++++++++++
 src/pages/quickstart/faucet.mdx               | 15 ++--------
 3 files changed, 59 insertions(+), 12 deletions(-)
 create mode 100644 src/components/guides/FaucetWalletDemo.tsx
 create mode 100644 src/components/guides/LazyFaucetWalletDemo.tsx

diff --git a/src/components/guides/FaucetWalletDemo.tsx b/src/components/guides/FaucetWalletDemo.tsx
new file mode 100644
index 00000000..c53baa53
--- /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">
+        <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/components/guides/LazyFaucetWalletDemo.tsx b/src/components/guides/LazyFaucetWalletDemo.tsx
new file mode 100644
index 00000000..5da1c276
--- /dev/null
+++ b/src/components/guides/LazyFaucetWalletDemo.tsx
@@ -0,0 +1,28 @@
+'use client'
+import { lazy, Suspense } from 'react'
+
+const FaucetWalletDemo = lazy(() => import('./FaucetWalletDemo'))
+
+function Placeholder() {
+  return (
+    <div className="flex min-h-[200px] items-center justify-center rounded-lg border border-gray6 border-dashed text-[14px] text-gray9">
+      Loading demo…
+    </div>
+  )
+}
+
+export function LazyFundWallet() {
+  return (
+    <Suspense fallback={<Placeholder />}>
+      <FaucetWalletDemo variant="wallet" />
+    </Suspense>
+  )
+}
+
+export function LazyFundAddress() {
+  return (
+    <Suspense fallback={<Placeholder />}>
+      <FaucetWalletDemo variant="address" />
+    </Suspense>
+  )
+}
diff --git a/src/pages/quickstart/faucet.mdx b/src/pages/quickstart/faucet.mdx
index 26e6b5a6..b71ebe1f 100644
--- a/src/pages/quickstart/faucet.mdx
+++ b/src/pages/quickstart/faucet.mdx
@@ -3,9 +3,7 @@ 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 { LazyFundWallet, LazyFundAddress } from '../../components/guides/LazyFaucetWalletDemo.tsx'
 import { Tabs, Tab } from 'vocs'
 
 
@@ -21,12 +19,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>
+<LazyFundWallet />
 
   </Tab>
   <Tab title="Fund an address">
@@ -35,9 +28,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>
+<LazyFundAddress />
 
   </Tab>
   <Tab title="cURL request">

From b039711284b93084b94aae292f4d1d3fd7c80eed Mon Sep 17 00:00:00 2001
From: Derek Cofausper <256792747+decofe@users.noreply.github.com>
Date: Wed, 8 Apr 2026 17:41:48 +0000
Subject: [PATCH 2/3] fix: add explicit footerVariant for Container type

Co-Authored-By: Brendan Ryan <1572504+brendanjryan@users.noreply.github.com>
Amp-Thread-ID: https://ampcode.com/threads/T-019d6e1a-2a8e-7257-a027-d6c2cb562b8b
---
 src/components/guides/FaucetWalletDemo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/guides/FaucetWalletDemo.tsx b/src/components/guides/FaucetWalletDemo.tsx
index c53baa53..94d2a9eb 100644
--- a/src/components/guides/FaucetWalletDemo.tsx
+++ b/src/components/guides/FaucetWalletDemo.tsx
@@ -6,7 +6,7 @@ import * as Token from './tokens'
 export default function FaucetWalletDemo({ variant }: { variant: 'wallet' | 'address' }) {
   if (variant === 'address') {
     return (
-      <Demo.Container name="Fund an address">
+      <Demo.Container name="Fund an address" footerVariant={undefined}>
         <Step.AddFundsToOthers stepNumber={1} last />
       </Demo.Container>
     )

From edf5edb547d581f3a6b0f83cbe08e37ca7844fc9 Mon Sep 17 00:00:00 2001
From: Derek Cofausper <256792747+decofe@users.noreply.github.com>
Date: Wed, 8 Apr 2026 17:57:15 +0000
Subject: [PATCH 3/3] refactor: generic clientOnly helper, lazy-load demos
 across all pages

Replace faucet-specific LazyFaucetWalletDemo with a generic clientOnly()
helper that wraps React.lazy() + Suspense. Apply it to all pages with
heavy interactive components:

- faucet, add-funds: FaucetWalletDemo
- connection-details, integrate-tempo, connect-to-wallets: ConnectWallet
- embed-passkeys: EmbedPasskeys, SignInButtons
- embed-tempo-wallet: AccountsSignIn
- accounts: Demo + Steps
- tokenlist: TokenListDemo

Co-Authored-By: Brendan Ryan <1572504+brendanjryan@users.noreply.github.com>
Amp-Thread-ID: https://ampcode.com/threads/T-019d6e1a-2a8e-7257-a027-d6c2cb562b8b
---
 src/components/ClientOnly.tsx                 | 46 +++++++++++++++++++
 src/components/guides/AccountsDemo.tsx        | 13 ++++++
 src/components/guides/AccountsSignInDemo.tsx  | 11 +++++
 .../guides/ConnectToWalletsDemo.tsx           | 15 ++++++
 src/components/guides/EmbedPasskeysDemo.tsx   | 11 +++++
 .../guides/LazyFaucetWalletDemo.tsx           | 28 -----------
 src/pages/accounts/index.mdx                  | 14 +++---
 src/pages/guide/use-accounts/add-funds.mdx    | 20 ++++----
 .../guide/use-accounts/connect-to-wallets.mdx | 23 ++++++----
 .../guide/use-accounts/embed-passkeys.mdx     | 24 ++++++++--
 .../guide/use-accounts/embed-tempo-wallet.mdx | 18 ++++++--
 src/pages/quickstart/connection-details.mdx   |  9 +++-
 src/pages/quickstart/faucet.mdx               | 10 ++--
 src/pages/quickstart/integrate-tempo.mdx      |  9 +++-
 src/pages/quickstart/tokenlist.mdx            |  8 +++-
 15 files changed, 184 insertions(+), 75 deletions(-)
 create mode 100644 src/components/ClientOnly.tsx
 create mode 100644 src/components/guides/AccountsDemo.tsx
 create mode 100644 src/components/guides/AccountsSignInDemo.tsx
 create mode 100644 src/components/guides/ConnectToWalletsDemo.tsx
 create mode 100644 src/components/guides/EmbedPasskeysDemo.tsx
 delete mode 100644 src/components/guides/LazyFaucetWalletDemo.tsx

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/LazyFaucetWalletDemo.tsx b/src/components/guides/LazyFaucetWalletDemo.tsx
deleted file mode 100644
index 5da1c276..00000000
--- a/src/components/guides/LazyFaucetWalletDemo.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client'
-import { lazy, Suspense } from 'react'
-
-const FaucetWalletDemo = lazy(() => import('./FaucetWalletDemo'))
-
-function Placeholder() {
-  return (
-    <div className="flex min-h-[200px] items-center justify-center rounded-lg border border-gray6 border-dashed text-[14px] text-gray9">
-      Loading demo…
-    </div>
-  )
-}
-
-export function LazyFundWallet() {
-  return (
-    <Suspense fallback={<Placeholder />}>
-      <FaucetWalletDemo variant="wallet" />
-    </Suspense>
-  )
-}
-
-export function LazyFundAddress() {
-  return (
-    <Suspense fallback={<Placeholder />}>
-      <FaucetWalletDemo variant="address" />
-    </Suspense>
-  )
-}
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 b71ebe1f..dec8d6e9 100644
--- a/src/pages/quickstart/faucet.mdx
+++ b/src/pages/quickstart/faucet.mdx
@@ -3,9 +3,13 @@ description: Get free test stablecoins on Tempo Testnet. Connect your wallet or
 mipd: true
 ---
 
-import { LazyFundWallet, LazyFundAddress } from '../../components/guides/LazyFaucetWalletDemo.tsx'
+import { clientOnly } from '../../components/ClientOnly.tsx'
 import { Tabs, Tab } from 'vocs'
 
+export const FaucetWalletDemo = clientOnly(
+  () => import('../../components/guides/FaucetWalletDemo.tsx'),
+  { minHeight: 280 },
+)
 
 # Faucet
 
@@ -19,7 +23,7 @@ Get test stablecoins on Tempo testnet.
 Connect your wallet to receive test stablecoins directly.
 
 <div className="h-6"/>
-<LazyFundWallet />
+<FaucetWalletDemo variant="wallet" />
 
   </Tab>
   <Tab title="Fund an address">
@@ -28,7 +32,7 @@ Connect your wallet to receive test stablecoins directly.
 Send test stablecoins to any address.
 
 <div className="h-6"/>
-<LazyFundAddress />
+<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