UI & Themeing
Learn how to customize Capsule to match your brand
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
Property | Type | Required | Default | Description |
---|---|---|---|---|
capsule | Capsule | yes | undefined | Your Capsule instance |
isOpen | boolean | yes | undefined | Controls modal visibility |
onClose | () => void | yes | undefined | Function called on modal close |
appName | string | yes | undefined | Your app’s name displayed in the modal |
logo | string | no | undefined | URL for your logo in the modal |
theme | Theme | no | undefined | Custom theme for the modal |
oAuthMethods | OAuthMethod[] | no | [] | Social login options |
twoFactorAuthEnabled | boolean | no | false | Enables/disables 2FA in the modal |
disableEmailLogin | boolean | no | false | Enables/disables email login |
networks | Network[] | no | ['ETHEREUM'] | Supported networks for your app |
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
Was this page helpful?