Quick start guide

The quickest way to see an end-to-end example of custom HTML/CSS and JS running on Kinde hosted pages is to follow this guide.

What you need

Link to this section

• A Kinde account with an application set up on a custom domain.
• A GitHub account to host your code.

Step 1: Clone a Kinde example template

Link to this section

1. Sign in to your GitHub account and go to Kinde example Splitscape Custom UI template.
2. Select the green Use this template button.
3. Select Create a new repository. This will create a new repository in your GitHub account with a copy of the example code. It contains a a fully customizable UI starter template built with React Server Components.

Step 2: Connect your GitHub repository to Kinde

Link to this section

1. Sign in to your Kinde account and go to Settings > Git repo.
2. Select Connect GitHub and follow the instructions to connect your GitHub account to Kinde.

When you select the repository you just created, Kinde will automatically sync the code for you.

You’re done!

Link to this section

Assuming you have an application set up, you can see your custom UI by navigating to your sign in screen.

You can now modify the custom UI code to look however you like.

Next steps

Link to this section

• Explore the Kinde custom UI documentation to learn more about how custom UI works.
• Take a look at some other example templates