🎨 SplitScape - Kinde Custom UI Starter Template

A fully customizable UI starter template built with React Server Components and Kinde's Custom UI feature. Design your auth flows with complete control over the UI.

Preview

Features

• 🎯 Full control over auth UI design and layout
• 🚀 Built with React Server Components
• 🔒 Kinde Authentication integration
• 📱 Responsive design out of the box

Prerequisites

• npm or yarn
• A Kinde account with Custom UI feature enabled

Quick Start

In your project root directory, use the Kinde CLI and run

kinde custom-ui --template splitscape

Customization Guide

Page Layouts

The template includes customizable layouts for all authentication pages:

• Sign In
• Sign Up
• Password Reset
• Email Verification
• Multi-factor Authentication
• Social Authentication
• Error Pages
• And more...

Each layout can be customized in the kindeSrc/enviroment/pages/(kinde) directory.

Project Structure

📂 splitScape
├── 📂 kindeSrc
│   └── 📂 environment
│       └── 📂 pages
│           ├── ⚛️ layout.tsx
│           ├── 📄 styles.ts
│           └── 📂 (kinde)
│               └── 📂 (default)
│                   └── ⚛️ page.tsx
└── 📄 kinde.json

Contributing

We welcome contributions! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

Need help? Here are some resources:

• Check out the video demos for implementation examples
• Join the Kinde Community
• Open an issue on GitHub
• Review the Kinde documentation