Change auth card colour?
Is there a way to easily do this, or do I need to customize the CSS? Every example I have seen uses next.js file strucure; are there guides to do this with react + vite (Tanstack Router)?
1 Reply
Hi @bolg55,
For changing the auth card colors, you’ll need to use custom CSS through Kinde’s hosted custom UI feature. At the moment there isn’t a simple property or theme option to change just the card color without customization.
Just to clarify, Kinde uses server-rendered JavaScript to compose custom pages, and supports templating with:
- React
- Liquid
- JavaScript
- TypeScript
If you’re using React for templating, keep in mind that this code is rendered on the server, so client-side functions (for example,
useEffect) won’t be available.
A good starting point would be to clone one of our example templates such as the Splitscape Custom UI template. It’s a fully customizable UI starter built with React Server Components, and you can now modify it to look however you like.
Let me know if you’d like more guidance on this.