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 ParaModal component. 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.

<ParaModal
  appName="Your App Name"
  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:

​

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.

<ParaModal
  currentStepOverride="ACCOUNT_MAIN" // or "account_main"
  // ... other props
/>

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.

<ParaModal
  oAuthMethods={[OAuthMethod.GOOGLE, OAuthMethod.TWITTER, OAuthMethod.DISCORD]}
  disableEmailLogin={false}
  disablePhoneLogin={true}
  // ... other props
/>

​

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.

<ParaModal
  twoFactorAuthEnabled={true}
  recoverySecretStepEnabled={true}
  // ... other props
/>

​

External Wallets

This prop allows you to specify which external wallets are supported for login. The order of wallets in the array determines their display order in the modal.

<ParaModal
  externalWallets={[ExternalWallet.METAMASK, ExternalWallet.PHANTOM]}
  // ... other props
/>

​

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.

<ParaModal
  authLayout={[AuthLayout.AUTH_CONDENSED, AuthLayout.EXTERNAL_FULL]}
  // ... other props
/>

​

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:

<ParaModal
  theme={{
    foregroundColor: "#333333",
    backgroundColor: "#FFFFFF",
    accentColor: "#007AFF",
    mode: "light",
    borderRadius: "md",
    font: "Arial, sans-serif",
  }}
  // ... other props
/>

​

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.

<ParaModal
  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
    },
  }}
/>

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.