UI & Themeing

​

Modal Themes & Configs

The Capsule modal provides an easy integration path with built-in session management and cookie logic for account creation, login, and management. You can customize its appearance and behavior to match your application’s needs.

To apply customizations, pass the following configurations as properties to the CapsuleModal component:

<CapsuleModal
  capsule={capsule}
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  appName={YOUR_APP_NAME}
  logo={YOUR_LOGO_URL}
  theme={CUSTOM_THEME}
  oAuthMethods={['GOOGLE', 'TWITTER', 'DISCORD']}
  twoFactorAuthEnabled={true}
  disableEmailLogin={true}
/>

​

Available Modal & Button Configuration Props

​

Custom Theme Object

You can further customize the modal’s appearance using a custom theme object:

{
  backgroundColor?: string;
  foregroundColor?: string;
  borderRadius?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';
  font?: string;
  customPalette?: CustomPalette;
  oAuthLogoVariant?: 'dark' | 'light' | 'default';
}

For detailed customization of individual components, you can use the customPalette property. It allows you to set colors for text, modal surfaces, inputs, buttons, and more — for the full object, you can use your IDE or a react plugin to see the full set of values that can be customized.

These customizations allow you to create a cohesive brand experience across all touchpoints of your application, from modal interface to social logins. There are even more configurations available for emails, passkeys, and more available in the Developer Portal