docs: bring your ui

Author: charIeszhao

docs/docs/recipes/customize-sie/bring-your-ui.md

@@ -0,0 +1,64 @@
+---
+sidebar_label: Bring your UI
+sidebar_position: 6
+---
+
+import Availability from '@components/Availability';
+
+# Bring your own sign-in experience UI
+
+<Availability cloud oss={false} />
+
+In addition to all the customization methods we introduced above, you can deeply customize your sign-in experience by bringing your own UI to completely replace the built-in Logto sign-in interface. This feature enables you to upload a zip file containing your custom UI assets (HTML, CSS, JavaScript, images, etc.), have it hosted on Logto Cloud servers, and use it as the sign-in experience for your tenant users.
+
+:::note
+
+Please note that this feature requires your custom UI to be Single Page Application (SPA) compatible, and it's recommended to always use a production build for optimal performance.
+
+:::
+
+## Upload your custom UI assets
+
+:::note
+
+Proceed with caution when using this feature in production, since it will immediately affect your users' sign-in experience.
+
+:::
+
+Navigate to "Sign-in experience > Branding > Custom UI > Bring your UI" in the Logto Console.
+
+Click to select or drag and drop your zip file containing your custom UI assets, and the upload process will start automatically. Once the upload is complete, save the changes, and your custom UI will be served immediately.
+
+The "Sign-in preview" window will be disabled when you use your custom sign-in UI. However, you can still click the "Live preview" button to test your custom sign-in page in a new opened browser tab.
+
+### Custom UI assets requirements
+
+- The upload assets should be packed as a single zip file.
+- The zip file should contain an `index.html` file in the root directory.
+- The zip file should not exceed 20MB in size.
+- The zip file should not contain any file that exceeds 10MB in size.
+- The zip file should not contain more than 200 files in total.
+
+### Tips to quickly get started
+
+At this point, the fastest way to initiate a custom sign-in UI is to clone the [Logto experience project](https://github.com/logto-io/logto/tree/master/packages/experience). This is the built-in Logto sign-in experience UI that covers all features and Logto's best practices. You can customize it to fit your needs.
+
+After checking out the code, just simply run:
+
+```
+pnpm install && pnpm start
+```
+
+Note: The whole Logto project is a [pnpm monorepo](https://pnpm.io/workspaces), and you can find workspace protocol dependencies in package.json. Replace it with regular semver if you are not using pnpm, and want to run it as a standalone project.
+
+Moreover, we are working on providing more simplified and scenario-based sample projects to cover the most common use cases. Stay tuned for our future updates!
+
+## Interact with Logto experience API
+
+When developing your custom UI pages, you can interact with Logto's experience API to perform various actions such as sign-in, sign-up, password reset, binding social accounts, enabling MFA, and more. Refer to [Logto experience API documentation](https://openapi.logto.io/group/endpoint-interaction) for more details.
+
+Other sign-in experience configurations, such as branding colors, company logo, favicon, password policy, localized language phrases, even custom CSS, can still be fetched from the [sign-in experience API endpoint](https://openapi.logto.io/operation/operation-getsigninexperienceconfig).
+
+## Restore to Logto built-in sign-in experience
+
+If you wish to restore to Logto's built-in sign-in experience, simply click the delete button on the custom UI card. After saving the changes, the sign-in experience UI will be reverted back to Logto's default.

docs/docs/recipes/customize-sie/check-out-the-live-preview.md

@@ -1,6 +1,6 @@
 ---
 sidebar_label: Check out the live preview
-sidebar_position: 6
+sidebar_position: 7
 ---
 
 # Check out the live preview

docs/docs/recipes/customize-sie/custom-css.md

@@ -9,7 +9,7 @@ Logto continually enhances the user sign-in experience and has added a brand col
 
 ## Custom CSS in Logto Console
 
-Go to "Sign-in Experience > Branding > Custom CSS" in the Logto Console.
+Go to "Sign-in Experience > Branding > Custom UI > Custom CSS" in the Logto Console.
 
 Editing CSS code in the left editor, it will render lively in the right preview modal immediately. Please note, the code editor only supports the CSS code so far. Not HTML or Javascript.