Skip to main content
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.
Para Modal Customization

​
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
/>
For optimal display, use a logo image with dimensions of 372px X 160px.
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.
​
rpcUrl
string
Specify the RPL URL where the wallet balance should be fetched from.
<ParaModal
  rpcUrl='https://sepolia.drpc.org'
  // ... other props
/>
Balance display is currently only available for EVM wallets.

​
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.
​
currentStepOverride
ModalStepProp
Override the initial step shown in the modal. Accepts either uppercase or lowercase step names.
<ParaModal
  currentStepOverride="ACCOUNT_MAIN" // or "account_main"
  // ... other props
/>
Available steps include:
Setting an invalid step or a step that requires previous steps to be completed may cause unexpected behavior. Ensure the step override makes sense in your authentication flow.

​
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.
​
oAuthMethods
OAuthMethod[]
Specify OAuth methods to display. The order of methods in the array determines their display order in the modal.
​
disableEmailLogin
boolean
default:"false"
Disable email login if set to true
​
disablePhoneLogin
boolean
default:"false"
Disable phone login if set to true
<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.
​
twoFactorAuthEnabled
boolean
default:"false"
Enable two-factor authentication steps
​
recoverySecretStepEnabled
boolean
default:"false"
Show wallet recovery option to users
<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.
​
externalWallets
TExternalWallet[]
Specify external wallets to support. The order of wallets in the array determines their display order.
<ParaModal
  externalWallets={[ExternalWallet.METAMASK, ExternalWallet.PHANTOM]}
  // ... other props
/>
For more details on external wallet integration in the Para modal, refer to theExternal Wallets

​
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.
​
authLayout
TAuthLayout[]
Configure the layout of auth components
<ParaModal
  authLayout={[AuthLayout.AUTH_CONDENSED, AuthLayout.EXTERNAL_FULL]}
  // ... other props
/>
Use ourModal Designerto visualize different layout configurations before implementing them in your project.

​
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
}
It’s crucial to set the mode correctly based on your background color to ensure all components remain visible.
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
/>
You can use custom fonts by importing them in your global CSS and specifying the font face in the font variable of the theme.

​
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:
Modal Designer

Modal Designer

View a live demo of the Para External Wallets Modal in action.
For an example code implementation of Para Modal with all the props mentioned in this guide, check out our GitHub repository:
GitHub Repository

GitHub Repository

Para integration examples for web applications.

​
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.
EVM Integration

EVM Integration

Learn how to use Para with EVM-compatible libraries like ethers.js, viem, and wagmi.
Solana Integration

Solana Integration

Discover how to integrate Para with solana-web3.js or Anchor framework for Solana applications.
Cosmos Integration

Cosmos Integration

Explore Para integration with Cosmos ecosystem using CosmJS, Cosmos Kit, and Graz connectors.
⌘I