Kinde's prodigious product manager, Oli @oliwolff1, has created a demo using Cursor to help him customise the user auth pages with his own styling.

Hosted pages

Out of the box, Kinde gives you a hosted authentication page for maximum security and minimum fuss. Everything for a straight forward and seamless auth experience is ready to go. For those of you who want to fully customise the auth pages, Kinde supports the ability to bring your own code and styles to the auth pages, which is known as custom UI.

Custom UI

You can find more information about custom UI on Kinde's documentation site at Customize designs with code.

Check out Oli's video.

Re-create it yourself

Everything done with Oli's demo can be found online publicly and can be done for free.

Create a Kinde business

One of our amazing engineers Peter has a video How to deploy a Kinde Next.js app with Vercel that would be a great place to start, which uses the Next.js app router starter kit.

Custom UI template

The template he used in the video demo can be found on Kinde's starter kits at custom-ui-splitscape.

Sign in page

Grab the image from the sign in page used in the demo. Or you want to live on the wild side, grab an image from another nice looking sign in page.

Prompt used in Cursor

And here's the prompt used in the video.

Using the Kinde custom page template and [Kinde official docs](https://docs.kinde.com), I want to update the Kinde login page with the following details:
- Use the attached image as inspiration for updating the login page
- only show email field (no password field or social connections)
- remove all logos

Requirements:
- Use Kinde's CSS custom properties system (--kinde-* variables)
- All inline styles with nonce={getKindeNonce()}
- Use valid hex color values for Kinde properties
- Style only the appearance, not the functionality

Summary

This quick video just goes to show how easy it is to setup your own look and feel to the authentication flow of your web app. Reach out the team at one of our support communities if you have any questions.