Modal Customization

The Para Modal is designed to be easily customizable, allowing you to adapt its appearance to fit your application’s design. UI and theming options are props that can be passed to the ParaProvider component as paraModalConfig. These props allow you to configure the modal’s appearance, authentication options, and security features.

​

Modal Configuration

​

Required Props

A few props are required to ensure the modal displays correctly. These include the appName and logo props, which are essential for branding and user recognition.

<ParaProvider
  config={{
    appName: "Your App Name"
  }}
  paraModalConfig={{  
    logo: "https://yourdomain.com/logo.png"
  }}
  // ... other props
/>

I’ll add a section about the currentStepOverride prop in the Modal Configuration section, after the Required Props section. Here’s how I would add it:

​

Wallet Balance

This prop allow the passing of an RPC URL from which the balance will be fetched and displayed for the selected wallet.

paraModalConfig={{  
  rpcUrl: 'https://sepolia.drpc.org'
  // ... other modal config
}}

​

Step Override

The currentStepOverride prop allows you to control which step of the modal flow is displayed when the modal opens. This is useful when you want to skip directly to a specific step rather than starting from the beginning of the flow.

paraModalConfig={{  
  currentStepOverride: "ACCOUNT_MAIN" // or "account_main"
  // ... other modal config
}}

Available steps include:

​

Authentication Options

The authentication options allow you to control the authentication methods available to users. You can enable or disable email and phone login, as well as specify the order of OAuth methods.

paraModalConfig={{  
  oAuthMethods: [OAuthMethod.GOOGLE, OAuthMethod.TWITTER, OAuthMethod.DISCORD] 
  disableEmailLogin: false
  disableEmailLogin: true
  // ... other modal config
}}

​

Security Features

Configure additional security steps in the Para modal by setting twoFactorAuthEnabled and recoverySecretStepEnabled flags. When enabled, these flags add their respective authentication steps to the modal’s UI flow. Two-factor authentication adds a verification code step, while the recovery secret step allows users to download and store their account recovery credentials.

paraModalConfig={{  
  twoFactorAuthEnabled: true
  recoverySecretStepEnabled: true
  // ... other modal config
}}

​

External Wallets

For details on external wallet integration in the Para modal, refer to the

​

Auth Layout

The authLayout prop can expand or collapse the view of OAuth methods and external wallets. Only one of Auth: or External: can be passed into the array, either CONDENSED or FULL UI versions of each. The order of the array determines the order that the components will be displayed in the modal.

paraModalConfig={{  
  authLayout: [AuthLayout.AUTH_CONDENSED, AuthLayout.EXTERNAL_FULL]
  // ... other modal config
}}

​

Theming

You can customize the overall look of the Para modal by providing a theme object with the following properties all of which are optional:

interface ParaTheme {
  foregroundColor?: string; // Primary text and icon color
  backgroundColor?: string; // Background color of the modal
  accentColor?: string; // Color for interactive elements and highlights
  darkForegroundColor?: string; // Foreground color for dark mode
  darkBackgroundColor?: string; // Background color for dark mode
  darkAccentColor?: string; // Accent color for dark mode
  mode?: "light" | "dark"; // Set the overall theme mode
  borderRadius?: BorderRadius; // Set the border radius for UI elements
  font?: string; // Specify the font family to use
}

An example of a basic theme object is as follows:

paraModalConfig={{  
  theme: {
    foregroundColor: "#333333",
    backgroundColor: "#FFFFFF",
    accentColor: "#007AFF",
    mode: "light",
    borderRadius: "md",
    font: "Arial, sans-serif",
  }
  // ... other modal config
}}

​

Advanced Theme Customization

The para modal also offers more granular control over specific UI elements through the customPalette property. This allows you to define colors for various components, ensuring that the modal aligns perfectly with your application’s design language.

paraModalConfig={{  
  theme: {
   // ... basic theme properties
    customPalette: {
      text: {
        primary: "#333333",
        secondary: "#666666",
        subtle: "#999999",
        inverted: "#FFFFFF",
        error: "#FF3B30",
      },
      modal: {
        surface: {
          main: "#FFFFFF",
          footer: "#F2F2F7",
        },
        border: "#E5E5EA",
      },
      // ... other customPalette properties
    },
  }
  // ... other modal config
}}

By leveraging these theming options, you can ensure that the Para modal seamlessly integrates with your application’s design language, providing a cohesive user experience.

​

Examples

To see what all of these props look like in practice, check out our live demo:

For an example code implementation of Para Modal with all the props mentioned in this guide, check out our GitHub repository:

​

Next Steps

Now that you have customized the Para modal to fit your application’s design, you can explore other features and integrations to enhance your Para experience. Here are some resources to help you get started:

​

Ecosystems

Learn how to use Para with popular Web3 clients and wallet connectors. We’ll cover integration with key libraries for EVM, Solana, and Cosmos ecosystems.