Customize Capsule

Modal Themes & Configs

The Capsule modal is the easiest way to get integrated. The modal implements all session management and cookie logic needed for account creation, login, and account management.

The modal also has configuration options to customize for your specific integration.

To apply these changes, simply pass the following configs as properties to the CapsuleModal Component

React SDK v3.*

<CapsuleModal
  capsule={capsule}
  isOpen={isOpen}
  onClose={() => {
    setIsOpen(false);
  }}
  appName={YOUR_APP_NAME}
  logo={YOUR_LOGO_URL} // a link to your logo, to be shown in the modal
  theme={CUSTOM_THEME}
  oAuthMethods={["GOOGLE", "TWITTER", "DISCORD"]}
  twoFactorAuthEnabled={true}
  disableEmailLogin={true}
/>

Available modal & button configuration props

Property	Type	Required	Default	Description
capsule	Capsule	yes	undefined	set your Capsule instance
isOpen	boolean	yes	undefined	control whether modal is open or closed
onClose	() => void	yes	undefined	function called on modal close (should set isOpen state to false)
appName	string	yes	undefined	set the app name to be used in the modal
logoUrl	string	no	undefined	set url used for the logo in the modal
theme	Theme	no	undefined	set the theme of the modal
oAuthMethods	OAuthMethod[]	no	[]	add social login options Available OAuth Options
twoFactorAuthEnabled	boolean	no	false	enable/disable the 2FA step in the modal
disableEmailLogin	boolean	no	false	enable/disable the email login step in the modal

Custom Theme object

backgroundColor?: string; // Used to derive the background colors of your modal
foregroundColor?: string; // Used to derive the foreground/highlight colors of your modal
borderRadius?: BorderRadius; // The border radius of your modal. Options: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full'
font?: string; // The custom font to use in your modal elements
customPalette?: CustomPalette; // Custom palette used to customize theming of individual components

Custom Palette

text?: {
  primary?: string;
  secondary?: string;
  subtle?: string;
  inverted?: string;
  error?: string;
};
modal?: {
  surface?: {
    main?: string;
    footer?: string;
  };
  border?: string;
};
input?: {
  surface?: {
    disabled?: string;
    default?: string;
  };
  border?: {
    placeholder?: string;
    active?: string;
    error?: string;
  };
};
tileButton?: {
  surface?: {
    default?: string;
    hover?: string;
    pressed?: string;
  };
  border?: string;
};
primaryButton?: {
  surface?: {
    default?: string;
    hover?: string;
    pressed?: string;
    disabled?: string;
  };
  border?: {
    default?: string;
    disabled?: string;
  };
  outline?: string;
};
secondaryButton?: {
  surface?: {
    default?: string;
    hover?: string;
    pressed?: string;
    disabled?: string;
  };
  border?: {
    default?: string;
    disabled?: string;
  };
  outline?: string;
};
divider?: string;
spinner?: {
  path?: string;
  circle?: string;
};
pill?: {
  text?: string;
  container?: {
    background?: string;
    border?: string;
  };
};
progressIndicator?: {
  active?: string;
  next?: string;
  previous?: string;
};
qr?: {
  fill?: string;
  background?: string;
  border?: string;
};
slideButton?: {
  slider?: {
    background?: string;
    border?: string;
    text?: string;
    container?: {
      start?: {
        background?: string;
        border?: string;
      };
      end?: {
        background?: string;
        border?: string;
      };
    };
  };
  start?: {
    text?: string;
  };
  end?: {
    text?: string;
  };
};
alert?: {
  surface?: {
    error?: string;
  };
  border?: {
    error?: string;
  };
};

React SDK v2.*

<CapsuleModal
    capsule={capsule} 
    isOpen={isOpen} 
    onClose={() => {setIsOpen(false)}}
    appName={YOUR_APP_NAME}
    logo={YOUR_LOGO_URL}    // a link to your logo, to be shown in the modal
    logoDark={YOUR_LOGO_URL}    // an optional link to your logo, to be shown in the modal when in dark theme
    theme='light' // or 'dark'
    oAuthMethods={['GOOGLE', 'TWITTER', 'DISCORD']}
    twoFactorAuthEnabled={false}
/>

Available modal & button configuration props

Property	Type	Required	Default	Description
capsule	Capsule	yes	undefined	set your Capsule instance
isOpen	boolean	yes	undefined	control whether modal is open or closed
onClose	() => void	yes	undefined	function called on modal close (should set isOpen state to false)
appName	string	yes	undefined	set the app name to be displayed in the modal
logoUrl	string	no	undefined	set url used for the logo in the modal header
theme	light dark	no	dark	set the theme of the modal
oAuthMethods	OAuthMethod[]	no	[]	add social login options Available OAuth Options
twoFactorAuthEnabled	boolean	no	false	enable/disable the 2FA step in the modal

Constructor Options

Here's an example of constructorOpts that can be passed in as the third argument to the Capsule() constructor object

Typescript

// see getting started for imports

const constructorOpts = {
    // passkey configs
    portalBackgroundColor: 'white', // deprecated
    portalPrimaryButtonColor: 'red', // deprecated
    portalTextColor: 'black', // deprecated
    portalPrimaryButtonTextColor: '#FFFFFF', // deprecated
    portalTheme?: {} // See Custom Theme below;
    
    // email configs
    emailTheme: 'light',
    emailPrimaryColor: 'pink',
    githubUrl: 'https://github.com/vbuterin',
    linkedinUrl: 'https://www.linkedin.com/company/wanderlust-creamery-llc';
    xUrl: 'https://twitter.com/eatwanderlust',
    homepageUrl: 'https://wanderlustcreamery.com/',
    supportUrl: 'mailto:[e-mail]',    // can also be a webpage URL
}

const capsule = new Capsule(
    Environment.BETA,
    "YOUR_API_KEY",
    constructorOpts
)

Capsule Passkey Prompt

The passkey screen also supports custom images and colors. Custom colors should be passed in as the following opts when instantiating the capsule object.

portalBackgroundColor?: string; // deprecated
portalPrimaryButtonColor?: string; // deprecated
portalTextColor?: string; // deprecated
portalPrimaryButtonTextColor?: string; // deprecated
portalTheme?: Theme;

Images are configured via API key- get in touch to update these!

Custom Theme object

backgroundColor?: string; // Used to derive the background colors of your portal
foregroundColor?: string; // Used to derive the foreground/highlight colors of your portal
borderRadius?: BorderRadius; // The border radius of your portal elements. Options: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full'

User-Facing Emails

The following values can be set on emails to brand them - these should be passed in as the following opts when instantiating the capsule object.

  /**
   * Base theme for the emails sent from this Capsule instance.
   * @default - dark
   */
  emailTheme?: EmailTheme;

  /**
   * Hex color to use as the primary color in the emails.
   * @default - #FE452B
   */
  emailPrimaryColor?: string;

  /**
   * Linkedin URL to link to in the emails. Should be a secure URL string starting with https://www.linkedin.com/company/.
   */
  linkedinUrl?: string;

  /**
   * Github URL to link to in the emails. Should be a secure URL string starting with https://github.com/.
   */
  githubUrl?: string;

  /**
   * X (Twitter) URL to link to in the emails. Should be a secure URL string starting with https://twitter.com/.
   */
  xUrl?: string;

  /**
   * Support URL to link to in the emails. This can be a secure https URL or a mailto: string. Will default to using the stored application URL is nothing is provided here.
   */
  supportUrl?: string;

  /**
   * URL for your home landing page. Should be a secure URL string starting with https://.
   */
  homepageUrl?: string;