Speed/Ease of use

Refining titles in the context of the Refine framework (a React-based framework for building CRUD applications) involves customizing the application name and logo displayed in the layout, sidebar, and browser tab.

Here are the primary ways to refine titles in Refine, based on documentation and community solutions: 1. Global Title Customization (Recommended)

You can customize the app name and icon globally by passing an options.title property to the component in your App.tsx file.

import { Refine } from “@refinedev/core”; import { CustomIcon } from “./components/CustomIcon”; const App = () => ( , // Custom React Node for icon text: “My Custom App Name”, // Custom text }, }} > {/… /} ); Use code with caution. 2. Customizing Layout Title ()

import { ThemedLayoutV2, ThemedTitleV2 } from “@refinedev/antd”; const CustomLayout = () => ( ( } text=“My Project” /> )} > {/ … */} ); Use code with caution. 3. Dynamic Page Titles ()

To change the browser tab title based on the current page (e.g., “Login”, “Edit Project”, “Dashboard”), use the component within your Refine app. You can create a customTitleHandler to map paths to specific titles.

import { DocumentTitleHandler } from “@refinedev/core”; const customTitleHandler = ({ pathname }) => { if (pathname === “/login”) return “Login | My App”; return “My App”; }; // Inside App.tsx Use code with caution. Summary of Options Default Title: “Refine Project”.

Use refine.new: You can use refine.new to generate a new project with your custom title and logo pre-configured. If you’d like, I can:

Show you how to integrate a custom SVG logo instead of just text.

Explain how to change the title for different roles (e.g., Admin vs User). Provide a full code example for the DocumentTitleHandler. Let me know which of these you’d like to dive into!

DocumentTitleHandler – Trying to change the page title from Refine to different names · refinedev refine · Discussion #6198 · GitHub