UI customization

For app-specific purchase or transaction content before wallet approval, see custom review components. Pass your React component through review.render on a transaction method on useSeams().wallet.

Seams uses the same theme settings for app-owned React components and wallet-iframe UI. Start by changing a few theme tokens. Add a shape preset when your product needs different control shapes or sizes.

Apply one theme

Use Theme for React-owned components and seams.config.setAppearance for wallet-iframe surfaces. Both receive the same colors and complete shape preset.

import type { SeamsWeb } from '@seams/wallet';
import {
  HostedSeamsAuthMenu,
  type HostedAuthMenuOutcome,
  SHAPE_PRESETS,
  Theme,
} from '@seams/wallet/react';

const colors = {
  colorBackground: '#ffffff',
  textPrimary: '#000000',
  buttonBackground: '#000000',
};

export function ThemedAuthMenu({
  onOutcome,
}: {
  onOutcome: (outcome: HostedAuthMenuOutcome) => void;
}) {
  return (
    <Theme
      theme="light"
      tokens={{
        light: {
          colors,
          shape: SHAPE_PRESETS.rounded,
        },
      }}
    >
      <HostedSeamsAuthMenu onOutcome={onOutcome} />
    </Theme>
  );
}

export function applyWalletTheme(seams: SeamsWeb): void {
  seams.config.setAppearance({
    theme: {
      id: 'brand',
      mode: 'light',
      colors,
      shape: { ...SHAPE_PRESETS.rounded },
    },
    palette: 'default',
  });
}

Set appearance in the provider config for the initial theme. Use seams.config.setAppearance when the person switches themes at runtime.

Send the full shape record to seams.config.setAppearance as well. Appearance updates merge key by key, so a complete preset avoids stale values when switching from rounded controls back to square controls.

Expected result

React-owned account and auth components read the Theme tokens. The auth menu, transaction confirmer, and export viewer read the iframe appearance. Driving both from the same preset keeps a theme switch visually consistent.

Recoverable failures

• Missing token keys use the SDK defaults. Start from SHAPE_PRESETS.square or SHAPE_PRESETS.rounded when changing geometry.
• Render Theme above every React component that should receive the tokens. Components outside that boundary keep their own styles.

Read the full theming guide for token names, CSS variables, runtime switching, and iframe details.