The Capsule modal provides an easy integration path with built-in session management and cookie logic for account creation, login, and management. This guide will walk you through the various ways you can customize the appearance and behavior of the Capsule modal to match your application’s needs.

​
Required Props

The following props are required for the Capsule modal:

<CapsuleModal
  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.

​
Authentication Options

​
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

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

​
Security Features

​
twoFactorAuthEnabled
boolean
default:
"false"

Enable two-factor authentication steps

​
recoverySecretStepEnabled
boolean
default:
"false"

Show wallet recovery option to users

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

Toggling these options will add or remove the corresponding steps from the modal UI. Enabling these security features can significantly enhance the protection of user accounts.

​
External Wallets

​
externalWallets
TExternalWallet[]

Specify external wallets to support. The order of wallets in the array determines their display order.

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

For more details on external wallet integration, please refer to our External Wallets documentation.

​
Auth Layout

​
authLayout
TAuthLayout[]

Configure the layout of auth components

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.

<CapsuleModal authLayout={[AuthLayout.AUTH_CONDENSED, AuthLayout.EXTERNAL_FULL]} />

Use our

Modal Designer

to visualize different layout configurations before implementing them in your project.

​
Theming

​
Basic Theme Configuration

You can customize the overall look of the Capsule modal by providing a theme object with the following properties:

interface CapsuleTheme {
  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.

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

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

For more granular control, use the customPalette property within the theme object:

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

The customPalette object allows you to customize colors for various components such as inputs, buttons, alerts, and more. Refer to our API documentation for a full list of customizable properties.

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

Was this page helpful?

Customization GuideOAuth Social Logins