Overview
Ory is designed to allow you to use custom user interfaces (UI) for browser and native applications thanks to simple-to-use headless API flows.
Ory Network also comes with a flexible and customizable UI out of the box. The Ory Account Experience UI allows you to integrate all the essential flows, such as login or registration, without the need to design and code your own UI.
Even though it's tempting to start building a custom UI right away, it's recommended to start with the Account Experience UI, which is a battle-tested solution that provides a great starting point for integrating your application with Ory Network.
When to use the Ory Account Experience
The Account Experience UI is an out-of-the-box UI that comes with every Ory Network project on all plans. It allows you to start using Ory without the need to understand the APIs in detail. With the Ory Account Experience, your UI adjusts dynamically to reflect the changes in your project configuration, such as adding new social sign-in connectors. You can also match the look of the Account Experience UI to your brand using the customization tools available in the Ory Console.
To see the Ory Account Experience in action and customize the views, go to Branding → Theming in the Ory Console.
When to build a custom user interface
Building a custom UI allows you to get the highest level of integration with your business requirements and have the ultimate control over the user experience.
The best way to start building a custom UI is to use the provided Ory examples and tooling, since this will shorten the time to market and allow you to focus on your application's business logic.
Ory Elements
The Ory Elements component library provides a set of drop-in components that automatically map Ory provided flow data to the UI.
It handles all UI mapping for authentication flows such as login, registration, settings, verification and recovery. Ory
Elements is designed to work with your business logic, which means that you can decide how to handle API calls to Ory and how the
data resulting from these calls is managed in your application.
To learn how to use Ory Elements and see a sample implementation, read Custom UI with Ory Elements.
Next steps
To understand the fundamentals of Ory APIs and learn how to interact with them in your UI, take a look at the Basic integration document.
If you are already familiar with the fundamentals, fork one of the custom user interface quickstarts and start hacking!