React paywall — Theming

Customize look and feel without forking the library: CSS variables on PaywallProvider, optional class overrides, and a brand slot for your logo.

Layers

appearance.theme — design tokens → CSS variables
appearance.labels — button and picker copy
appearance.brand — React node above the title
appearance.classNames — per-slot classes (Tailwind-friendly)
PaywallGate appearance — per-page overrides

Global theme

<PaywallProvider
  appearance={{
    theme: {
      accent: "#0f766e",
      title: "#0f172a",
      muted: "#64748b",
      cardBg: "#ffffff",
      border: "#e2e8f0",
      secondaryBg: "#f1f5f9",
      overlayStart: "rgba(255,255,255,0.55)",
      overlayEnd: "rgba(248,250,252,0.97)",
      cardRadius: "14px",
      buttonRadius: "10px",
      fontFamily: "system-ui, sans-serif",
    },
    brand: <img src="/logo.svg" alt="My site" height={32} />,
    labels: {
      connectWallet: "Connect wallet",
      payToRead: "Unlock article",
      paying: "Confirm in wallet…",
    },
  }}
>

CSS variables

Applied on .x402-paywall-root:

--x402-accent, --x402-title, --x402-muted
--x402-card-bg, --x402-border, --x402-secondary-bg
--x402-overlay-start / --x402-overlay-end — teaser gradient
--x402-card-radius, --x402-button-radius, --x402-font-family
--x402-error, --x402-agent-bg

Site-wide CSS

.my-app {
  --x402-accent: #6366f1;
}

Tailwind

appearance={{
  classNames: {
    card: "rounded-2xl border border-zinc-700 bg-zinc-900 p-6 shadow-xl",
    btnPrimary: "w-full rounded-lg bg-indigo-500 py-3 font-semibold text-white",
    btnSecondary: "w-full rounded-lg border border-zinc-600 py-3 text-zinc-200",
  },
}}

Teaser

<PaywallGate teaserClassName="max-h-32 blur-md" … />

Agent block

Style agent / agentTitle slots; see AI agents.