Passage Element UI Customization

Learn about the two different ways to customize the look and feel of the Passage Elements to match your brand.

Console Customization

Customizing the Passage Authentication Elements using Console offers an easy way to preview and update styling without code. Customization via Console supports a selection of web safe fonts, 6-digit hex values, and styles most major attributes of the elements. Recommended for users who want to quickly and easily customize most of the Passage Element UI without needing to write code. Learn how to customize the Passage Elements in Console:

pageCustomize With Console

CSS Customization

Customizing the Passage Elements using in your webpage's code offers more flexibility for deeper customization through the use of CSS variables and CSS parts.

Recommended for users who want more in-depth customization options for the Passage Element UI as well as users who want to style the <passage-profile> or <passage-passkey-table> elements. Learn how to customize the Passage Elements using your own CSS:

pageCustomize With CSS

Supported Customizations

	Customize with Console	Customize with CSS
passage-auth	✅	✅
passage-login	✅	✅
passage-register	✅	✅
passage-profile		✅
passage-passkey-table		✅

Element Themes

All Passage elements support a default light and dark theme. These themes can be customized using the Console application as well as using CSS variables. Learn more about using the themes:

pageElement Themes

CSS Variable Hierarchy

We recommended using only one of these two approaches for styling the Passage Elements due to CSS Variable hierarchy and fallbacks. If you want to customize your elements beyond what is available in Console, we recommend only customizing with CSS.