Working with the Kinde widget

The Kinde widget is a core element in Kinde page design. The components that make up the widget have been specifically designed to be easily overridden by your own CSS so you can give it the look and feel of your brand whilst keeping best in class security.

The widget refers to a specific form component that lives on the page, that consists of fields, labels, cards, buttons, text strings with URLs, and the ‘Built with Kinde’ logo.

Most styles can be switched out using our suite of CSS custom properties but for more complex customizations, we have provided style hooks that you can use to completely replace everything.

Before designing the elements of the widget and page, fully set up authentication and user access flow, as these impact what is shown in the widget.

Change what appears in the widget

Link to this section

Settings for all widgets

Link to this section

• Remove Kinde branding - available only on paid plans

Settings for the sign in flow

Link to this section

• Auth options (org or application level configuration)
• Create account link - hidden if registrations are disabled

Settings for the register flow

Link to this section

• Auth options (org or application level configuration)
• Ask first name / last name
• Show marketing widget
• Show “already have account” link
• Privacy / terms of use links

Settings for the MFA method

Link to this section

• MFA options (org or application level configuration)

Settings for errors

Link to this section

Follow this procedure to include ‘escape hatch’ URLs for errors during the auth flow.