Comment on page
Passage Element UI Customization
Learn about the two different ways to customize the look and feel of the Passage Elements to match your brand.
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:
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: | Customize with Console | Customize with CSS |
passage-auth | ✅ | ✅ |
passage-login | ✅ | ✅ |
passage-register | ✅ | ✅ |
passage-profile | | ✅ |
passage-passkey-table | | ✅ |
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:
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.
Last modified 1mo ago