Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.getpara.com/llms.txt

Use this file to discover all available pages before exploring further.

The Para Modal provides extensive customization options through the paraModalConfig prop passed to the ParaProvider. You can customize everything from colors and themes to authentication flows and security features.
Para Modal Customization

​
Basic Setup

Pass the paraModalConfig object to your ParaProvider to customize the modal: 
<ParaProvider
  paraClientConfig={{
    apiKey: process.env.REACT_APP_PARA_API_KEY || "",
  }}
  config={{
    appName: "Your App Name"
  }}
  paraModalConfig={{
    logo: "https://yourdomain.com/logo.png",
    theme: {
      backgroundColor: "#ffffff",
      foregroundColor: "#000000",
      accentColor: "#007AFF"
    },
    // ... other customization options
  }}
>
  {children}
</ParaProvider>

​
Configuration Options

A full list of available configuration options for the paraModalConfig prop available on the ParaProvider component:

​
Complete Example

Here’s a comprehensive example showcasing multiple configuration options: 
<ParaProvider
  paraClientConfig={{
    apiKey: process.env.REACT_APP_PARA_API_KEY || "",
  }}
  config={{
    appName: "Your App Name"
  }}
  paraModalConfig={{
    // Branding
    logo: "https://yourdomain.com/logo.png",

    // Authentication
    oAuthMethods: ["GOOGLE", "TWITTER", "DISCORD"],
    disablePhoneLogin: false,
    disableEmailLogin: false,
    defaultAuthIdentifier: "user@example.com",
    authLayout: ["AUTH:FULL", "EXTERNAL:CONDENSED"],

    // Security
    twoFactorAuthEnabled: true,
    recoverySecretStepEnabled: true,
    isGuestModeEnabled: false,

    // Theme
    theme: {
      foregroundColor: "#333333",
      backgroundColor: "#FFFFFF",
      accentColor: "#007AFF",
      mode: "light",
      borderRadius: "md",
      font: "Inter, sans-serif",
      customPalette: {
        text: {
          primary: "#333333",
          secondary: "#666666"
        },
        button: {
          primary: {
            background: "#007AFF",
            hover: "#0056CC"
          }
        }
      }
    },

    // Behavior
    currentStepOverride: "AUTH_MAIN",
    onRampTestMode: false,

    // Account linking
    supportedAccountLinks: [
      "EMAIL",
      "PHONE",
      "GOOGLE",
      "TWITTER",
      "EXTERNAL_WALLET"
    ],

    // Events
    onModalStepChange: (stepInfo) => {
      console.log('Step changed:', stepInfo);
    },
    onClose: () => {
      console.log('Modal closed');
    }
  }}
>
  {children}
</ParaProvider>
Test your modal configuration with our interactive tool:

​
Next Steps

Explore detailed configuration guides for specific aspects of the modal: