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 Passage 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
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
Supported customizations
| Passage Element | 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 styling using the 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.