UI Customization - Abstraxn Docs

Learn how to customize the login UI for smart wallets

The Abstraxn SDK allows you to customize the onboarding UI through the ui configuration object in your AbstraxnProvider config. All customization is done in one place - no additional configuration files needed.

Basic UI Configuration

Customize the UI by adding a ui property to your AbstraxnProvider configuration:

// app/layout.tsx or pages/_app.tsx
import {
  AbstraxnProvider,
  type AbstraxnProviderConfig,
} from "@abstraxn/signer-react";

const providerConfig: AbstraxnProviderConfig = {
  apiKey: process.env.NEXT_PUBLIC_ABSTRAXN_API_KEY || "your-api-key-here",
  ui: {
    onboardTitle: "Sign In", // Optional (default: 'Sign In')
    logo: "https://your-logo-url.com/logo.png", // Optional (default: no logo)
    theme: "light", // Optional: 'light' | 'dark' (default: 'light')
    showFooter: true, // Optional (default: true)
    showCloseButton: true, // Optional (default: false)
    closeOnBackdropClick: true, // Optional (default: true)
    authMethods: ["otp", "passkey", "google", "twitter", "discord"], // Optional (default: ['otp', 'google'])

    // Custom labels
    labels: {
      emailLabel: "Enter Email", // Optional (default: 'Email Address')
      emailPlaceholder: "Enter your email", // Optional (default: 'Enter your email address')
      otpLabel: "OTP", // Optional (default: 'OTP Code')
      otpPlaceholder: "Enter your OTP", // Optional (default: 'Enter 6-digit code')
      emailButton: "Continue", // Optional (default: 'Continue')
      otpButton: "Verify", // Optional (default: 'Verify')
      googleButton: "Continue with Google", // Optional (default: 'Continue with Google')
    },

    // Custom colors
    colors: {
      primary: "#9333ea",
      primaryHover: "#7e22ce",
    },

    // Custom CSS
    customCSS: `
      .onboarding-button-primary {
        background-color: rgb(234, 51, 231);
      }
      .onboarding-card {
        border-radius: 20px;
      }
    `,
  },
};

// ... rest of your setup

Available UI Options

Basic Options

ui: {
  onboardTitle: 'Sign In',               // Optional (default: 'Sign In')
  logo: 'https://...',                    // Optional (default: no logo)
  theme: 'light',                         // Optional: 'light' | 'dark' (default: 'light')
  showFooter: true,                       // Optional (default: true)
  showCloseButton: true,                  // Optional (default: false)
  closeOnBackdropClick: true,             // Optional (default: true)
}

Authentication Methods

ui: {
  authMethods: ['otp', 'passkey', 'google', 'twitter', 'discord'], // Optional (default: ['otp', 'google'])
}

Available methods:

'otp' - Email OTP authentication
'passkey' - Passkey/WebAuthn authentication
'google' - Google OAuth
'discord' - Discord OAuth
'twitter' - Twitter/X OAuth

Custom Labels

ui: {
  labels: {
    emailLabel: 'Email Address',
    emailPlaceholder: 'Enter your email',
    otpLabel: 'OTP Code',
    otpPlaceholder: 'Enter 6-digit code',
    emailButton: 'Continue',
    otpButton: 'Verify',
    googleButton: 'Continue with Google',
    connectButton: 'Connect Wallet',
    disconnectButton: 'Disconnect',
  },
}

Custom Colors

ui: {
  colors: {
    primary: '#9333ea',                  // Primary color
    primaryHover: '#7e22ce',             // Primary hover color
    background: '#ffffff',               // Background color
    text: '#000000',                     // Text color
    border: '#e5e7eb',                   // Border color
    error: '#ef4444',                    // Error color
    success: '#10b981',                  // Success color
  },
}

Custom CSS

ui: {
  customCSS: `
    .onboarding-button-primary {
      background-color: rgb(234, 51, 231) !important;
    }
    .onboarding-card {
      border-radius: 20px !important;
    }
  `,
}

External Wallets Configuration

To enable external wallet connections (MetaMask, WalletConnect, etc.):

const providerConfig: AbstraxnProviderConfig = {
  // ... other config
  externalWallets: {
    enabled: true,
    walletConnectProjectId: "your-walletconnect-project-id",
    connectors: ["injected", "metaMask", "walletConnect"],
  },
};

Complete Example

Here’s a complete example with all customization options:

const providerConfig: AbstraxnProviderConfig = {
  apiKey: import.meta.env.VITE_ABSTRAXN_API_KEY || "your-api-key-here",
  ui: {
    onboardTitle: "Sign In",
    logo: "https://your-logo-url.com/logo.png",
    theme: "light",
    showFooter: true,
    showCloseButton: true,
    closeOnBackdropClick: true,
    authMethods: ["otp", "passkey", "google", "twitter", "discord"],
    labels: {
      emailLabel: "Enter Email",
      emailPlaceholder: "Enter your email",
      otpLabel: "OTP",
      otpPlaceholder: "Enter your OTP",
      emailButton: "Continue",
      otpButton: "Verify",
      googleButton: "Continue with Google",
    },
    colors: {
      primary: "#9333ea",
      primaryHover: "#7e22ce",
    },
    customCSS: `
      .onboarding-button-primary {
        background-color: rgb(234, 51, 231);
      }
      .onboarding-card {
        border-radius: 20px;
      }
    `,
  },
  externalWallets: {
    enabled: true,
    walletConnectProjectId: "your-project-id",
    connectors: ["injected", "metaMask", "walletConnect"],
  },
};

​Basic UI Configuration

​Available UI Options

​Basic Options

​Authentication Methods

​Custom Labels

​Custom Colors

​Custom CSS

​External Wallets Configuration

​Complete Example