diff --git a/.github/workflows/build-examples.yml b/.github/workflows/build-examples.yml
index 2f2f25320399..f6f9e364d139 100644
--- a/.github/workflows/build-examples.yml
+++ b/.github/workflows/build-examples.yml
@@ -23,10 +23,11 @@ on:
     - cron: "0 6 * * *"
   workflow_dispatch:
     inputs:
-      environment:
-        description: "Environment to run tests against"
-        type: environment
+      build_all_examples:
+        description: "Build all examples"
+        type: boolean
         required: false
+        default: true
 
 jobs:
   chunks:
@@ -67,7 +68,7 @@ jobs:
 
       - name: Split Into Chunks
         id: chunkstep
-        run: CHUNKS=6 BASE_REF=${{ github.base_ref }} BUILD_ALL_EXAMPLES=${{ (contains(steps.pr-labels.outputs.labels, ' build-examples ') || github.event_name == 'schedule' ) && 'true' || 'false' }} node ./.github/workflows/scripts/build-example-chunks.js
+        run: CHUNKS=6 BASE_REF=${{ github.base_ref }} BUILD_ALL_EXAMPLES=${{ (github.event.inputs.build_all_examples || contains(steps.pr-labels.outputs.labels, ' build-examples ') || github.event_name == 'schedule' ) && 'true' || 'false' }} node ./.github/workflows/scripts/build-example-chunks.js
 
   build-chunk-1:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 3a8ca942433a..914caccd60ba 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -2,9 +2,6 @@ name: Release
 
 on:
   push:
-    paths:
-      - ".changeset/**"
-      - "packages/**"
     branches:
       - main
 
diff --git a/documentation/blog/2022-11-17-antd-dynamic-form.md b/documentation/blog/2024-12-20-antd-dynamic-form.md
similarity index 96%
rename from documentation/blog/2022-11-17-antd-dynamic-form.md
rename to documentation/blog/2024-12-20-antd-dynamic-form.md
index 93c30c85201b..e9ac6ef02797 100644
--- a/documentation/blog/2022-11-17-antd-dynamic-form.md
+++ b/documentation/blog/2024-12-20-antd-dynamic-form.md
@@ -4,12 +4,17 @@ description: Easy way to creating dynamic forms in React CRUD apps with Ant Desi
 slug: react-crud-app-with-dynamic-form-ant-design
 authors: david_omotayo
 tags: [react, Refine, tutorial, ant-design]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-17-antd-dynamic-form/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-17-antd-dynamic-form/social-2.png
 hide_table_of_contents: false
 ---
 
+**This article was last updated on December 20, 2024, to include advanced styling techniques for Ant Design dynamic forms and integration with form libraries like Formik and React Hook Form. Additionally, the introduction has been updated for clarity.**
+
 ## Introduction
 
+**TL;DR:** What is Ant Design Dynamic Form?
+Ant Design provides a dynamic form that enables the developer to create flexible and interactive forms, where users can dynamically add or remove fields if needed, making it quite suitable for complex data collection.
+
 Forms are one of the most adaptable elements in web development. They come in distinct structures for various use cases.
 
 However, due to the sporadic complexity of the information they collect, they tend to grow larger with several fields, which can be a big turnoff for most users.
@@ -31,7 +36,8 @@ Steps we'll cover:
 - [Adding icons](#adding-icons)
 - [Validation](#validation)
 - [Building the edit page](#building-the-edit-page)
-- [Live StackBlitz Example](#example)
+- [FAQ's](#faqs)
+- [Why Use AntD Dynamic Forms?](#why-use-antd-dynamic-forms)
 
 **Prerequisite**
 
@@ -1174,7 +1180,26 @@ This is a duplicate of the form component we created inside the `UserCreate` pag
 
 That's it. We've successfully built an application that uses an API to post and edit response records using a **dynamic form**.
 
-As a challenge, visit Refine's [documentation](https://refine.dev/docs/) to learn how you can add a `delete` button to the fields on the table and make your application a full-fledged CRUD application. Cheers!
+As a challenge, visit Refine's [documentation](https://refine.dev/docs/) to learn how you can add a `delete` button to the fields on the table and make your application a full-fledged CRUD application.
+
+## FAQ's
+
+- What is a dynamic form?
+  A dynamic form is one that automatically changes its structure depending on what the user enters, often allowing users to add or remove fields dynamically.
+
+- How do I start using dynamic fields from Ant Design?
+  To manage dynamic fields, use the component and methods provided by `<Form.List>`: add() and remove().
+
+- Is it possible to add validation to dynamic form fields?
+  Yes, you can utilize the rules prop on `<Form.Item>` to extend your own validate logic.
+
+## Why Use AntD Dynamic Forms?
+
+Dynamic forms improve user satisfaction by:
+
+- Simplifying User Input: Users only see fields they need, reducing form clutter.
+- Flexibility: Provide the user with the facility to add or remove fields as required.
+- Streamlining Complex Data: Collect additional details without overwhelming users with lengthy forms upfront. • Saving Time: Automate repetitive input scenarios with less manual work.
 
 ## Conclusion
 
diff --git a/documentation/blog/2022-10-30-mui-select.md b/documentation/blog/2024-12-20-mui-select.md
similarity index 86%
rename from documentation/blog/2022-10-30-mui-select.md
rename to documentation/blog/2024-12-20-mui-select.md
index a84f4cc98786..313468bc5d86 100644
--- a/documentation/blog/2022-10-30-mui-select.md
+++ b/documentation/blog/2024-12-20-mui-select.md
@@ -4,12 +4,30 @@ description: We'll discover the Material UI select component with examples
 slug: material-ui-select-component
 authors: doro_onome
 tags: [material-ui, react]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-10-30-mui-select/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-10-30-mui-select/social-2.png
 hide_table_of_contents: false
 ---
 
+**This article was last updated on December 20, 2024, to include advanced styling techniques for Material UI Select and integration with form libraries like Formik and React Hook Form. Also the introduction is updated for clarity.**
+
 ## Introduction
 
+**TL;DR:**
+
+Material UI Select is a component to create dropdowns in React that provides native customization options for styles, indicators, decorators, and grouped options.
+
+**How to use Material UI Select?**
+
+- Import the required components, Select and Option, from @mui/joy:.
+- Customize with props like placeholder, defaultValue, and indicator.
+- Sx to style for responsive and dynamic designs.
+
+**Key Features of Material-UI Select:**
+
+- Custom Indicators: Replaces the default dropdown arrow for your icon.
+- Decorators: Appending icons or elements before or after the select field.
+- Options Grouped Together: A categorization of options contributes towards better usability. 4. Clearable Select: Add a clear button for resetting the selection. 5. - - - Accessibility: Native support for ARIA attributes.
+
 Material UI provides a plethora of available styled components that assist developers in creating responsive and aesthetically pleasing web designs. One of these components is Material UI's Select, which is an input field that showcases a list of customizable options. In this tutorial, we will deeply dive into **Material UI Select**, look at its prop possibilities, and highlight its features. We will also investigate a potential use case in a real-world application.
 
 Steps we'll cover:
@@ -18,12 +36,11 @@ Steps we'll cover:
 - [Getting Started with Material UI Select](#getting-started-with-material-ui-select)
 - [The Option component](#the-option-component)
 - [Other Material UI Select features](#other-material-ui-select-features)
-  - [Indicator](#indicator)
-  - [Decorator](#decorator)
-  - [Grouped Options](#grouped-options)
 - [Clearing the Select field](#clearing-the-select-field)
 - [Accessibility](#accessibility)
 - [Building a Sign-up Form UI with React and Material UI Select](#building-a-sign-up-form-ui-with-react-and-material-ui-select)
+- [Advanced Styling with Material UI Select](#advanced-styling-with-material-ui-select)
+- [Integration with Form Libraries (Formik and React Hook Form)](#integration-with-form-libraries-formik-and-react-hook-form)
 
 ## What is Material UI
 
@@ -527,6 +544,72 @@ And the result:
    <img style={{alignSelf:"center"}}  src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-10-30-mui-select/mui-select-result.gif"  alt="Material UI select option" />
 </div>
 
+## Advanced Styling with Material UI Select
+
+Material UI Select has more detailed customization with the sx prop and themes. On this page you can show how to:
+
+- Override default styles for hover, focus, and selected states.
+- Integrate custom themes to maintain consistent styling throughout the application.
+- Add animations for dropdown behavior or transitions.
+
+```tsx
+<Select
+  placeholder="Choose an option"
+  sx={{
+    borderRadius: "8px",
+    boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
+    "&:hover": {
+      backgroundColor: "#f0f0f0",
+    },
+    "& .Mui-selected": {
+      fontWeight: "bold",
+    },
+  }}
+>
+  <Option value="one">Option One</Option>
+  <Option value="two">Option Two</Option>
+  <Option value="three">Option Three</Option>
+</Select>
+```
+
+## Integration with Form Libraries (Formik and React Hook Form)
+
+This section would appeal to developers building forms with validation.
+
+Example with React Hook Form:
+
+```tsx
+import { useForm, Controller } from "react-hook-form";
+import Select from "@mui/joy/Select";
+import Option from "@mui/joy/Option";
+
+export default function FormWithSelect() {
+  const { control, handleSubmit } = useForm();
+
+  const onSubmit = (data) => {
+    console.log(data);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        name="carBrand"
+        control={control}
+        defaultValue=""
+        render={({ field }) => (
+          <Select {...field} placeholder="Select a Car Brand">
+            <Option value="tesla">Tesla</Option>
+            <Option value="bmw">BMW</Option>
+            <Option value="audi">Audi</Option>
+          </Select>
+        )}
+      />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
 ## Conclusion
 
 This article covered the **Material UI Select** component, navigated its features, and highlighted its functionalities in a React application. We also investigated a use case by developing a Sign-up form UI in React with **Material UI Select**. I hope you find this post helpful.
diff --git a/documentation/blog/2023-03-07-react-dnd.md b/documentation/blog/2024-12-24-react-dnd.md
similarity index 89%
rename from documentation/blog/2023-03-07-react-dnd.md
rename to documentation/blog/2024-12-24-react-dnd.md
index f8d48d5c7237..7d44b07c1ab7 100644
--- a/documentation/blog/2023-03-07-react-dnd.md
+++ b/documentation/blog/2024-12-24-react-dnd.md
@@ -4,17 +4,19 @@ description: We'll be using the react-dnd library to create draggable components
 slug: react-draggable-components-with-react-dnd
 authors: david_omotayo
 tags: [react, Refine, tutorial]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-03-07-react-dnd/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-03-07-react-dnd/social-2.png
 hide_table_of_contents: false
 ---
 
+**This article was last updated on December 24, 2024, to include advanced techniques for optimizing React-DND performance, such as avoiding unnecessary re-renders, virtualizing large lists, and supporting mobile devices with the Touch Backend, along with simplified explanations for better clarity.**
+
 <br/>
 
 <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-03-07-react-dnd/final-min.gif"  alt="react draggable" />
 
 <br />
 
-# Introduction
+## Introduction
 
 The HTML Drag-and-Drop API is a pioneering feature of the web, whose introduction has inspired developers to find innovative ways of using it to enhance the user experience on their websites.
 
@@ -688,15 +690,6 @@ Now, if you save your project go back to the browser, you should see the cards r
 
 <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-03-07-react-dnd/rendering-cards.png"  alt="react draggable" />
 
-<br />
-
-<br/>
-<div>
-<a href="https://discord.gg/refine">
-  <img  src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/discord_big_blue.png" alt="discord banner" />
-</a>
-</div>
-
 ## Using the useDrag hook
 
 To make our cards draggable, we'll declare the `useDrag` hook inside the `cards` component, give it a `type` and item `value`, and then pass the `dragRef` variable to the card component using the `ref` attribute.
@@ -901,6 +894,114 @@ If you save your progress and revisit the browser, you should now be able to dra
 
 That's all. We have successfully created a kanban board with draggable cards and columns with drop zones. You can enhance the appearance by adding designs based on the state of each card and column.
 
+## Optimizing Performance with React-DND
+
+Performance can become an issue when working with React-DND, especially with a large number of draggable items. Below are some tips to keep things running efficiently:
+
+**Avoid Unnecessary Re-Renders**
+
+Utilize `React.memo` or `useMemo` to avoid unnecessary re-renders. For instance, if your draggable items remain unchanged, memoizing them can save a lot of processing time.
+
+**Batch State Updates**
+
+When updating multiple items after a drop, batch those updates instead of triggering multiple state changes. This minimizes React’s render cycles.
+
+**Minimize the `collect` Function’s Scope**
+
+The `collect` function in `useDrag` and `useDrop` is powerful, but adding excessive logic can degrade performance. Only gather data that’s absolutely necessary.
+
+**Virtualize Large Lists**
+
+For hundreds of draggable items, consider using libraries like `react-window` or `react-virtualized`. These libraries render only the visible items, reducing React’s workload.
+
+By applying these strategies, you’ll achieve a drag-and-drop experience that is both fast and functional.
+
+## Error Handling and Debugging
+
+React-DND is a robust library, but you might encounter some common issues. Here’s how to resolve them:
+
+**Missing `DndProvider`**
+
+If you forget to wrap your app with `DndProvider`, nothing will work. Ensure your root component includes it:
+
+```jsx
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
+function App() {
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <YourApp />
+    </DndProvider>
+  );
+}
+```
+
+**Type Mismatches Between useDrag and useDrop**
+
+The type property in useDrag must match the accept property in useDrop. Otherwise, the drop zone won’t recognize the dragged item:
+
+```tsx
+const [{ isDragging }, dragRef] = useDrag({ type: "item" });
+const [{ isOver }, dropRef] = useDrop({ accept: "item" });
+```
+
+**Monitor Data Not Updating**
+
+If collect isn’t providing accurate data, ensure you’re returning the correct values from the monitor:
+
+```tsx
+collect: (monitor) => ({ isDragging: monitor.isDragging() });
+```
+
+Debugging these small issues can save significant time. Always refer to the documentation and browser console for detailed error messages.
+
+**Mobile Device Support**
+
+React-DND’s default backend (HTML5Backend) works well on desktop browsers but struggles on mobile devices. Here’s how to enable drag-and-drop for touchscreens:
+
+**Use the Touch Backend**
+
+Install the react-dnd-touch-backend package designed for touch devices:
+
+```
+npm install react-dnd-touch-backend
+```
+
+**Set Up the Touch Backend**
+
+Replace HTML5Backend with TouchBackend in your app’s DndProvider:
+
+```tsx
+import { DndProvider } from "react-dnd";
+import { TouchBackend } from "react-dnd-touch-backend";
+
+function App() {
+  return (
+    <DndProvider backend={TouchBackend}>
+      <YourApp />
+    </DndProvider>
+  );
+}
+```
+
+**Customize Touch Behavior**
+
+You can tweak the touch backend’s settings for better performance, such as adjusting the drag delay:
+
+```tsx
+const backendOptions = {
+  enableMouseEvents: true,
+  delay: 100,
+};
+
+<DndProvider backend={TouchBackend} options={backendOptions}>
+  <YourApp />
+</DndProvider>;
+```
+
+With these adjustments, your drag-and-drop features will work seamlessly across both desktop and mobile devices.
+
 ## Conclusion
 
 This article introduced Refine and React-DND, detailing the process of setting up a Refine project with predefined CRUD pages via the Superplate CLI and integrating React-DND. It also covered the creation of a dashboard page featuring a kanban board that utilizes the useDrag and useDrop hooks from React-DND for its drag-and-drop functionality.
diff --git a/documentation/blog/2022-12-15-mui-checkbox.md b/documentation/blog/2024-12-25-mui-checkbox.md
similarity index 82%
rename from documentation/blog/2022-12-15-mui-checkbox.md
rename to documentation/blog/2024-12-25-mui-checkbox.md
index c7f12043b17f..73afb06610b5 100644
--- a/documentation/blog/2022-12-15-mui-checkbox.md
+++ b/documentation/blog/2024-12-25-mui-checkbox.md
@@ -4,30 +4,40 @@ description: We'll discover the Material UI Checkbox component with examples
 slug: material-ui-checkbox-component
 authors: doro_onome
 tags: [material-ui, react]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-12-15-mui-checkbox/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-12-15-mui-checkbox/social-2.png
 hide_table_of_contents: false
 ---
 
+**This article was last updated on December 25, 2024, to include advanced Material UI Checkbox customization techniques, improved form validation patterns, and accessibility best practices.**
+
 ## Introduction
 
-Material UI offers a wide range of component and utilities that empowers developers with the appropriate tools to create more responsive web designs and bolster the UX of their apps. A checkbox is a small box that, when selected by the user, indicates that a specific feature or option has been enabled. Material UI provides this valuable component on a platter and makes them customizable to apply to your project fittingly. This article will deeply traverse the Material UI Checkbox component, investigate its processes and highlight its syntax application. We will also explore a potential use case in a real-world application.
+### What is Material UI Checkbox?
+
+Material UI Checkbox is a form input component that allows users to select one or more options out of a given set of choices. It is part of the Material UI library, which provides an up-to-date, accessible, and customizable implementation of the checkbox for React applications.
+
+Key Features and Benefits
+
+- **Easy Integration**: Easy to implement with just a single import
+- **Accessibility**: ARIA support included; keyboard navigation
+- **Customization**: Rich styling with props and themes
+- **Form Support**: Seamless integrations with form libraries
+- **State Management**: controlled and uncontrolled component options
+- **Responsive**: Works on all sizes of devices - **TypeScript Support**: Full type definitions included
+
+Material UI offers a wide range of component and utilities that empowers developers with the appropriate tools to create more responsive web designs and bolster the UX of their apps. A checkbox is a small box that, when selected by the user, indicates that a specific feature or option has been enabled. Material UI provides this valuable component on a platter and makes them customizable to apply to your project fittingly.
+
+This article will deeply traverse the Material UI Checkbox component, investigate its processes and highlight its syntax application. We will also explore a potential use case in a real-world application.
 
 Steps we'll cover:
 
 - [What is Material UI?](#what-is-material-ui)
 - [Getting started with Material UI Checkbox](#getting-started-with-material-ui-checkbox)
 - [Customizing your Material UI Checkbox](#customizing-your-material-ui-checkbox)
-  - [Adding Labels](#adding-labels)
-  - [Controlling the Checkbox Size](#controlling-the-checkbox-size)
-  - [Controlling the Checkbox Color](#controlling-the-checkbox-color)
-  - [Label Placement](#label-placement)
-  - [Checkbox Icons](#checkbox-icons)
 - [Other handy features](#other-handy-features)
-  - [FormGroup](#formgroup)
-  - [Indeterminate](#indeterminate)
-- [When to use the Material UI Checkbox](#when-to-use-the-mui-checkbox)
-  - [Checkboxes vs Radio buttons](#checkboxes-vs-radio-buttons)
-  - [Checkboxes vs Switches](#checkboxes-vs-switches)
+- [Error Handling \& Validation](#error-handling--validation)
+- [Advanced Customization](#advanced-customization)
+- [When to use the Material UI Checkbox](#when-to-use-the-material-ui-checkbox)
 - [Material UI Checkbox Accessibility](#material-ui-checkbox-accessibility)
 
 ## What is Material UI?
@@ -460,12 +470,108 @@ export default function IndeterminateCheckbox() {
 
 <br/>
 
-<br/>
-<div>
-<a href="https://discord.gg/refine">
-  <img  src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/discord_big_blue.png" alt="discord banner" />
-</a>
-</div>
+## Error Handling & Validation
+
+When working with checkboxes in forms, proper error handling is essential. Here's a simple example of form validation with Material UI Checkbox:
+
+```tsx
+import * as React from "react";
+import {
+  Checkbox,
+  FormControlLabel,
+  FormHelperText,
+  FormControl,
+} from "@mui/material";
+
+export default function ValidationExample() {
+  const [checked, setChecked] = React.useState(false);
+  const [error, setError] = React.useState(false);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (!checked) {
+      setError(true);
+      return;
+    }
+    setError(false);
+    // Handle form submission
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <FormControl error={error}>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={checked}
+              onChange={(e) => setChecked(e.target.checked)}
+            />
+          }
+          label="I accept the terms and conditions"
+        />
+        {error && (
+          <FormHelperText>You must accept the terms to continue</FormHelperText>
+        )}
+      </FormControl>
+    </form>
+  );
+}
+```
+
+Common validation scenarios include:
+
+- Required field validation
+- Minimum selection requirements
+- Group validation rules
+
+## Advanced Customization
+
+### Custom Styling
+
+You can create your own styled checkbox using the `styled` API:
+
+```tsx
+import { styled } from "@mui/material/styles";
+import Checkbox from "@mui/material/Checkbox";
+
+const CustomCheckbox = styled(Checkbox)`
+  &.MuiCheckbox-root {
+    color: #666;
+  }
+  &.Mui-checked {
+    color: #2196f3;
+  }
+`;
+
+export default function StyledExample() {
+  return <CustomCheckbox defaultChecked />;
+}
+```
+
+### Custom Icons
+
+You can also use custom icons for your checkboxes:
+
+```tsx
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
+
+export default function CustomIconExample() {
+  return (
+    <Checkbox
+      icon={<FavoriteBorderIcon />}
+      checkedIcon={<FavoriteIcon />}
+      sx={{ color: "pink" }}
+    />
+  );
+}
+```
+
+These customizations allow you to:
+
+- Match your application's design system
+- Create unique visual elements
+- Improve user experience with custom interactions
 
 ## When to use the Material UI Checkbox
 
diff --git a/documentation/blog/2023-01-04-mui-card.md b/documentation/blog/2024-12-26-mui-card.md
similarity index 91%
rename from documentation/blog/2023-01-04-mui-card.md
rename to documentation/blog/2024-12-26-mui-card.md
index 156e594051dc..b97478d7c055 100644
--- a/documentation/blog/2023-01-04-mui-card.md
+++ b/documentation/blog/2024-12-26-mui-card.md
@@ -4,36 +4,51 @@ description: We'll discover the Material UI Card component with examples
 slug: material-ui-card
 authors: doro_onome
 tags: [material-ui, react]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-01-04-mui-card/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-01-04-mui-card/social-2.png
 hide_table_of_contents: false
 ---
 
 ## Introduction
 
+### Quick Summary: What is Material UI Card?
+
+Think of a Material UI Card as a digital container - like a paper card in real life, but for your website. It's a neat way to show related information in one place. You can put all sorts of things in it: text, pictures, buttons, and more.
+
+Here's what makes Material UI Cards so useful:
+
+- They keep information organized and tidy
+- You can easily add images and other media
+- They're interactive - users can click, expand, or interact with them
+- They look great on both desktop and mobile screens
+- You can style them however you want to match your website
+
+The best part? They're super easy to use, even if you're just starting with React!
+
 Material UI cards are an important part of modern web design. They make it simple for users to access and interact with important information, whether text, images, or a combination of the two. Developers can use Material UI to easily create powerful and interactive cards that integrate seamlessly into their website design. This article will go over the various features, benefits, and applications of Material UI cards to give web developers a thorough understanding of how the component can help them create beautiful and engaging user experiences.
 
 Steps we'll cover:
 
+- [Quick Summary: What is Material UI Card?](#quick-summary-what-is-material-ui-card)
 - [What is Material UI?](#what-is-material-ui)
 - [Getting started with Material UI Card](#getting-started-with-material-ui-card)
 - [Other Material UI Card Variants](#other-material-ui-card-variants)
-  - [Image Cards](#image-cards)
-  - [Outlined Cards](#outlined-cards)
 - [Material UI Card Component Classes](#material-ui-card-component-classes)
 - [Material UI Card Interactions](#material-ui-card-interactions)
 - [Building a simple Blog Layout with React and Material UI Cards](#building-a-simple-blog-layout-with-react-and-material-ui-cards)
+- [Frequently Asked Questions (FAQ)](#frequently-asked-questions-faq)
 
 ## What is Material UI?
 
 Material UI is a React-based UI framework designed to aid in the creation of consistent user interfaces across web and mobile applications. It includes a large library of components and tools to help developers easily create modern user interfaces.
 
 It provides a comprehensive library of components and tools to help developers create modern user interfaces with ease. Some of which include:
-Input components
-Surface components
-Data Display components
-Navigation components
-Feedback components
-Layout components
+
+- Input components
+- Surface components
+- Data Display components
+- Navigation components
+- Feedback components
+- Layout components
 
 The Material UI Card is an example of the Material UI Surfaces.
 
@@ -545,12 +560,34 @@ Here’s the result:
 
 <br/>
 
-<br/>
-<div>
-<a href="https://discord.gg/refine">
-  <img  src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/discord_big_blue.png" alt="discord banner" />
-</a>
-</div>
+## Frequently Asked Questions (FAQ)
+
+### Can I customize the look of Material UI Cards?
+
+Absolutely! You can change pretty much everything about how a card looks. Colors, shadows, borders, spacing - it's all customizable using the `sx` prop or custom styles.
+
+### Do Material UI Cards work well on mobile devices?
+
+Yes! Cards are responsive by default and will adjust their size based on the screen. Just make sure to set appropriate width values (like maxWidth) to control how they display.
+
+### What can I put inside a Material UI Card?
+
+Almost anything! Common elements include:
+
+- Text content
+- Images and videos
+- Buttons and links
+- Icons
+- Action areas
+- Expandable sections
+
+### Are Material UI Cards accessible?
+
+Yes, they're built with accessibility in mind. They work well with screen readers and can be navigated using a keyboard. Just remember to add proper ARIA labels when needed!
+
+### How do I handle card interactions like clicking or expanding?
+
+It's pretty straightforward! You can add onClick handlers to the Card or CardActionArea components, and use the Collapse component for expandable content. Check out our examples above to see how it works.
 
 ## Conclusion
 
diff --git a/documentation/blog/2023-03-22-react-admin-templates.md b/documentation/blog/2024-12-27-react-admin-templates.md
similarity index 69%
rename from documentation/blog/2023-03-22-react-admin-templates.md
rename to documentation/blog/2024-12-27-react-admin-templates.md
index 47b030965828..6e2646e7b319 100644
--- a/documentation/blog/2023-03-22-react-admin-templates.md
+++ b/documentation/blog/2024-12-27-react-admin-templates.md
@@ -1,13 +1,15 @@
 ---
-title: Top React Admin Templates 2023
+title: Top React Admin Templates 2025
 description: We have compiled a list of the top 5 React admin templates that are currently available on the market.
 slug: react-admin-template
 authors: chidume_nnamdi
 tags: [comparison]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog%2F2023-03-22-react-admin-templates%2Fsocial.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-03-22-react-admin-templates/social-2.png
 hide_table_of_contents: false
 ---
 
+**This article was last updated on December 27, 2024, to include practical strategies for choosing React admin templates, such as avoiding overly complex templates, ensuring scalability, and verifying licenses. Simplified explanations and real-world examples have been added for improved clarity and usability.**
+
 ## Introduction
 
 Templates are blueprints or models or guides used to make something. We can have a house template, that is used as a sample to build a house. Also in the world of software development, we have website design templates that present ideas on how to create a specific website for specific industries.
@@ -18,7 +20,7 @@ As React continues to gain popularity in web development, it is becoming increas
 
 ## 1. Refine CRM admin template
 
-[Refine CRM admin](https://example.crm.refine.dev/) is a open source React admin template powered by [Refine](https://github.com/refinedev/refine).
+[Refine CRM admin](https://example.crm.refine.dev/) is an enterprise-grade React admin template powered by [Refine](https://github.com/refinedev/refine).
 
 <div className="centered-image"  >
 <a href="https://github.com/refinedev/refine" >
@@ -124,6 +126,118 @@ Another key feature of the Wieldy template is its real-time chat integration. It
 
 Finally, the Wieldy react admin template is highly customizable. It comes with a range of theme options and customization tools, allowing businesses to tailor the design to their specific needs. It also has a range of customization options for the pre-built components, making it easy to create a unique and user-friendly admin interface that meets the specific needs of the business.
 
+## Top 10 Mistakes to Avoid When Choosing Admin Templates
+
+1. Picking looks over features.
+2. Choosing a template that doesn't match your tech stack.
+3. Choosing too complicated templates.
+4. Neglecting scalability.
+5. Skipping documentation review.
+6. Forgetting to test responsiveness.
+7. Overlooking performance.
+8. Using templates that have unclear licenses.
+9. Blind reliance on free templates without scrutiny. 10. Ignoring accessibility requirements.
+
+## Common Mistakes While Choosing an Admin Template (And How I Avoid Them)
+
+During all these years, I have tried lots of admin templates. Sometimes, they worked just fine, but other times I ran into big problems because I didn't think things through.
+
+Let me share with you some of the mistakes I've made and seen others make, and how you can avoid them.
+
+### Picking Looks Over Features
+
+**What I Did Wrong:**  
+I used to select templates based on how good they look. Later on, I felt some of them lacked charts or good form handling that I needed.
+
+**What I Do Now:**  
+First, I make sure that the template will have all the tools that I need for my project. Although the design is important, features like authentication, dashboards, and responsive layouts concern me more.
+
+### Not Matching It to My Tech Stack
+
+**What I Did Wrong:**
+
+It once happened that I accidentally chose a Vue template for a React project. Suffice it to say that didn't go well, and I had to build much of it from scratch.
+
+**What I Do Now:**
+
+I will only use templates that are made specifically for the framework I am working in. For instance, if I were working in React, then I would find templates using either Material UI or Tailwind CSS.
+
+### Choosing Over-Complicated Templates
+
+**What I Did Wrong:**  
+I made a very bad choice with a template, which had too many features for what I needed, such as multi-language support and drag-and-drop tools, that made everything harder to customize.
+
+**What I Do Now:**  
+Me, I keep it simple: I don't need all advanced features; if so, I use a basic template. Easier to work with, faster to set up.
+
+### Forgetting About Scalability
+
+**What I Did Wrong:**
+
+I once chose a template, which was fine for small projects, but became a nightmare when my app grew. It didn't handle large amounts of data well.
+
+**What I Do Now:**
+
+I check whether the template is well-structured. Are the components reusable? Can I scale it up if the project grows? Templates with clear folder structures are way easier to maintain.
+
+### Ignoring Documentation
+
+**What I Did Wrong:**
+
+Once, I selected a free template with zero documentation. I had to spend hours trying to figure out how things worked.
+
+**What I Do Now:**
+
+I always check the documentation first. A well-documented template saves a lot of time. If it is a paid template, I make sure it comes with support.
+
+### Not Testing on Different Devices
+
+**What I Did Wrong:**
+
+I once completed an administrative panel and realized it looked terrible on a mobile device. It just wasn't responsive at all.
+
+**What I Do Now:**
+
+Before I start building, I am testing the demo on both mobile and desktop; a good template should look great everywhere.
+
+### Forgetting About Performance
+
+**What I Did Wrong:**
+
+I used a template with so many animations and libraries not really needed. It made my app really slow.
+
+**What I Do Now:**
+
+I run a quick performance test using Lighthouse on the demo. Looking for templates featuring lazy loading with minimal dependencies.
+
+### Not Verifying the License
+
+**What I Did Wrong:**
+
+Once, I did not know that the license for using the template in one of my client projects prohibited commercial use. I had to redo everything.
+
+**What I Do Now:**
+
+I always check out the license, whether I use a template or not. In case there's a commercial project in line, then I really see to it that this covers under its license.
+
+### Free Templates Not Vetted
+
+**What I Did Wrong:**  
+I used a free template without reviewing the code. It was badly written and full of bugs.
+
+**What I Do Now:**  
+If it's free, I check out the GitHub repo for how often it is updated and how many issues it has. Sometimes, it's worth paying for a high-quality template.
+
+### Ignoring Accessibility
+
+**What I Did Wrong:**
+
+Early on, I never thought about accessibility. Then, I realized that some users couldn't navigate my admin panel properly.
+
+**What I Do Now:**
+
+I look for templates with keyboard navigation, screen reader, and high-contrast mode support. Accessibility is more important than you think.
+
 ## Conclusion
 
 We have gone through all the most popular React admin templates. We have seen their features and uniqueness. Also, we have learned what each template is capable of doing and on what occasions each of them is best suitable.
diff --git a/documentation/blog/2023-05-09-material-ui-modal.md b/documentation/blog/2024-12-30-material-ui-modal.md
similarity index 80%
rename from documentation/blog/2023-05-09-material-ui-modal.md
rename to documentation/blog/2024-12-30-material-ui-modal.md
index e4440a7fcff1..31f00e52d28c 100644
--- a/documentation/blog/2023-05-09-material-ui-modal.md
+++ b/documentation/blog/2024-12-30-material-ui-modal.md
@@ -4,10 +4,12 @@ description: We'll learn how to use Material UI Modal to create a popup window t
 slug: material-ui-modal
 authors: doro_onome
 tags: [material-ui, react]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-05-09-material-ui-modal/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-05-09-material-ui-modal/social-2.png
 hide_table_of_contents: false
 ---
 
+**This article was last updated on December 30, 2024, to include common mistakes to avoid when working with Material UI Modals, such as accessibility or performance optimizations. A Frequently Asked Questions section has also been added to address common concerns.**
+
 ## Introduction
 
 Material UI is a popular front-end library for React that provides a comprehensive set of tools for creating user interfaces. One of the most valuable components of Material UI is the Modal, which allows developers to create a popup window that can display important information or facilitate user input. This tutorial will explain how to use the Material UI Modal and customize it to your needs.
@@ -389,14 +391,129 @@ Here’s the result:
 
 <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-05-09-material-ui-modal/edit-form-min.gif" alt="MUI Modal" />
 
-<br/>
+## Common Mistakes and How to Avoid Them
 
-<br/>
-<div>
-<a href="https://discord.gg/refine">
-  <img  src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/discord_big_blue.png" alt="discord banner" />
-</a>
-</div>
+Here are a few lessons I’ve learned the hard way while working with Material UI Modals. These are some common mistakes I’ve either made myself or seen others make, along with how I’ve managed to avoid them. Hopefully, this saves you some trouble too!
+
+### Forgetting to Manage the Open State Properly
+
+Initially, I forgot to control the modal’s open state correctly. Sometimes, the modal would stay open forever—or even worse—open and close unpredictably.
+
+**How I Avoid It Now:**
+
+I always use React state to manage the modal’s state, like this:
+
+```tsx
+const [open, setOpen] = React.useState(false);
+
+<Modal open={open} onClose={() => setOpen(false)} />;
+```
+
+### Not Testing Responsiveness
+
+I built a modal that looked amazing on desktop but completely broke on mobile. Text overflowed, buttons were missing—it was chaos.
+
+**How I Avoid It Now:**
+
+I test the modal on various screen sizes, especially mobile. Although Material UI Modals are responsive by default, I sometimes tweak the styles:
+
+```tsx
+const style = {
+  width: "90%",
+  maxWidth: "400px", // Keeps it compact on larger screens
+};
+```
+
+### Overloading the Modal with Too Much Content
+
+I once built a five-field form, a sidebar, and additional instructions into a single modal. It became overwhelming and hard to use.
+
+**How I Avoid It Now:**
+
+I keep the modal focused on one task. If more space is required, I use a drawer or redirect to another page.
+
+### Ignoring Accessibility
+
+I forgot to add aria attributes, making the modal inaccessible to screen readers. It was a significant oversight.
+
+**How I Avoid It Now:**
+
+Put proper aria attributes are included, like this:
+
+```tsx
+<Modal
+  aria-labelledby="modal-title"
+  aria-describedby="modal-description"
+/>
+<Typography id="modal-title">Modal Header</Typography>
+<Typography id="modal-description">This is the content.</Typography>
+```
+
+### Not Optimizing Performance
+
+I created a modal with heavy animations and a large component tree, which caused noticeable lag whenever the modal opened.
+
+**How I Avoid It Now:**
+
+I use the `keepMounted` prop to avoid unnecessary re-renders and optimize the child components inside the modal:
+
+```tsx
+<Modal keepMounted />
+```
+
+### Disabling the Backdrop Click Without Thinking
+
+I disabled the backdrop click to prevent accidental closures. However, users were frustrated when they couldn’t easily close the modal.
+
+**How I Avoid It Now:**
+
+I leave the backdrop click enabled unless there’s a compelling reason to disable it. If I do disable it, I make sure to include a clear “Close” button.
+
+## Frequently Asked Questions
+
+**Q: How do I open and close a Material UI Modal?**
+A: You can use React state to control the open property.
+
+```tsx
+const [open, setOpen] = React.useState(false);
+
+<Modal open={open} onClose={() => setOpen(false)}>
+  <Box>Modal Content Here</Box>
+</Modal>;
+```
+
+**Q: Is Material UI Modal accessible?**
+A: Yes, Material UI is designed with accessibility in mind. You can use aria-labelledby and aria-describedby attributes to ensure it works well with screen readers.
+
+**Q: How do I make the Modal responsive?**
+A: You can define responsive styles to adapt the modal to different screen sizes.
+
+```tsx
+const style = {
+  width: "90%",
+  maxWidth: "400px",
+};
+```
+
+This way, the modal looks great on both mobile and desktop.
+
+**Q: Can I add animations to the Modal?**
+A: Yes, Material UI supports transitions. Wrap the content with the Fade component for animations:
+
+```tsx
+<Modal open={open}>
+  <Fade in={open}>
+    <Box>Animated Modal Content</Box>
+  </Fade>
+</Modal>
+```
+
+**Q: How can I close the Modal by clicking outside it?**
+A: That’s the default behavior. Clicking the backdrop (outside the modal) will close it. No extra code is needed unless you want to disable this feature:
+
+```tsx
+<Modal disableBackdropClick />
+```
 
 ## Conclusion
 
diff --git a/documentation/docs/data/packages/strapi-v4/index.md b/documentation/docs/data/packages/strapi-v4/index.md
index fad5c22e349b..0edafc913770 100644
--- a/documentation/docs/data/packages/strapi-v4/index.md
+++ b/documentation/docs/data/packages/strapi-v4/index.md
@@ -409,7 +409,7 @@ const App: React.FC = () => {
 render(<App />);
 ```
 
-##### Relations Population for `/me` request
+#### Relations Population for `/me` request
 
 If you need to the population for the `/me` request you can use it like this in your `authProvider`.
 
diff --git a/documentation/docs/guides-concepts/forms/index.md b/documentation/docs/guides-concepts/forms/index.md
index 001d10354bb6..41e28237e133 100644
--- a/documentation/docs/guides-concepts/forms/index.md
+++ b/documentation/docs/guides-concepts/forms/index.md
@@ -332,7 +332,7 @@ useForm({
 });
 ```
 
-##### **Usage of `<UnsavedChangesNotifier />`**
+#### **Usage of `<UnsavedChangesNotifier />`**
 
 <Tabs wrapContent={false}>
 <TabItem value="react-router" label="React Router">
diff --git a/documentation/docs/packages/list-of-packages/index.md b/documentation/docs/packages/list-of-packages/index.md
index 2078bb10c5cd..0bc9c8dd0b04 100644
--- a/documentation/docs/packages/list-of-packages/index.md
+++ b/documentation/docs/packages/list-of-packages/index.md
@@ -79,3 +79,4 @@ To learn more about Live Providers, check out [Realtime](/docs/guides-concepts/r
 - [`@refine-auth/kinde-react`](https://github.com/hirenf14/refine-auth-kinde-react) - Support for [Kinde](https://kinde.com) authentication.
 - [`refine-pocketbase`](https://github.com/kruschid/refine-pocketbase) - Connector for backends created with [PocketBase](https://pocketbase.io/). Also has auth provider and live provider supports.
 - [`refine-postgrest-ts`](https://github.com/ffimnsr/refine-postgrest-ts) - Connector for [PostgREST](https://postgrest.org) backends.
+- [`refine-chakra-ui-v3-ts`](https://github.com/ffimnsr/refine-chakra-ui-v3-ts) - Integration for [Chakra UI v3](https://www.chakra-ui.com).
diff --git a/documentation/docs/routing/integrations/react-router/migration-guide-v6-to-v7.md b/documentation/docs/routing/integrations/react-router/migration-guide-v6-to-v7.md
index 62deabc7db39..cd1c820b2569 100644
--- a/documentation/docs/routing/integrations/react-router/migration-guide-v6-to-v7.md
+++ b/documentation/docs/routing/integrations/react-router/migration-guide-v6-to-v7.md
@@ -5,7 +5,7 @@ sidebar_label: v6 to v7
 
 In this guide, we will cover the breaking changes of `@refinedev/react-router-v6` and how to migrate your project to `@refinedev/react-router` with `react-router` v7.
 
-> 🚨 Refine doesn't introduce any breaking changes besides the package name changes. However, we recommend you to read the [React Router v7 migration guide](https://reactrouter.com/en/main/upgrading/v6) for more detailed information about React Router v7 changes.
+> 🚨 Refine doesn't introduce any breaking changes besides the package name changes. However, we recommend you to read the [React Router v7 migration guide](https://reactrouter.com/upgrading/v6) for more detailed information about React Router v7 changes.
 
 ## Package Changes
 
@@ -28,7 +28,7 @@ npm install @refinedev/react-router react-router
 ```diff
 
 - "@refinedev/react-router-v6": "^4.6.0"
-+ "@refinedev/react-router": "^5.0.0"
++ "@refinedev/react-router": "^1.0.1"
 
 - "react-router-dom": "^6.8.1"
 - "react-router": "^6.8.1"
@@ -64,5 +64,5 @@ npx @refinedev/codemod@latest refine-react-router-v6-to-refine-react-router
 For `react-router-dom` to `react-router`:
 
 ```bash
-npx @refinedev/codemod@latest react-router-dom-to-react-router"
+npx @refinedev/codemod@latest react-router-dom-to-react-router
 ```
diff --git a/documentation/docs/ui-integrations/ant-design/components/basic-views/create/index.md b/documentation/docs/ui-integrations/ant-design/components/basic-views/create/index.md
index ea1760cf28b4..df87f5f8f870 100644
--- a/documentation/docs/ui-integrations/ant-design/components/basic-views/create/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/basic-views/create/index.md
@@ -8,6 +8,8 @@ swizzle: true
 We will show what `<Create>` does using properties with examples.
 
 ```tsx live hideCode url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 interface ICategory {
   id: number;
   title: string;
@@ -90,21 +92,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -121,7 +141,7 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 `title` allows you to add a title inside the `<Create>` component. If you don't pass the title props, it uses the "Create" prefix and the singular resource name by default. For example, for the `/posts/create` resource, it would be "Create post".
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
-const { Form, Input, Select, useForm, useSelect, CreateButton } = RefineAntd;
+setInitialRoutes(["/posts/create"]);
 
 // visible-block-start
 import { Create } from "@refinedev/antd";
@@ -137,21 +157,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -160,7 +198,7 @@ render(
 The `<Create>` component has a save button that submits the form by default. If you want to customize this button you can use the `saveButtonProps` property:
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
-const { Form, Input, Select, useForm, useSelect, CreateButton } = RefineAntd;
+setInitialRoutes(["/posts/create"]);
 
 // visible-block-start
 import { Create } from "@refinedev/antd";
@@ -176,21 +214,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -200,18 +256,16 @@ render(
 
 The `<Create>` component reads the `resource` information from the route by default. If you want to use a custom resource for the `<Create>` component, you can use the `resource` prop:
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom
-// handle initial routes in new way
-setInitialRoutes(["/custom"]);
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
 
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 import { Refine } from "@refinedev/core";
+import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Create } from "@refinedev/antd";
 
-const MyComponent: React.FC = () => {
+const CustomPage: React.FC = () => {
   return (
     /* highlight-next-line */
     <Create resource="posts">
@@ -221,27 +275,41 @@ const MyComponent: React.FC = () => {
 };
 // visible-block-end
 
-const App: React.FC = () => {
-  return (
+render(
+  <ReactRouter.BrowserRouter>
     <RefineAntdDemo
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <MyComponent />,
-            path: "/custom",
-          },
-        ],
-        // highlight-end
-      }}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
-
-render(<App />);
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<CustomPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
 
 If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
@@ -253,7 +321,7 @@ If you have multiple resources with the same name, you can pass the `identifier`
 To customize the back button or to disable it, you can use the `goBack` property:
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
-const { CreateButton } = RefineAntd;
+setInitialRoutes(["/posts/create"]);
 
 // visible-block-start
 import { Create } from "@refinedev/antd";
@@ -271,21 +339,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts", "/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -316,7 +402,7 @@ const PostCreate: React.FC = () => {
 To toggle the loading state of the `<Create/>` component, you can use the `isLoading` property:
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
-const { CreateButton } = RefineAntd;
+setInitialRoutes(["/posts/create"]);
 
 // visible-block-start
 import { Create } from "@refinedev/antd";
@@ -332,21 +418,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -355,7 +459,7 @@ render(
 To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default the `Breadcrumb` component from the `@refinedev/antd` package is used for breadcrumbs.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
-const { CreateButton } = RefineAntd;
+setInitialRoutes(["/posts/create"]);
 
 // visible-block-start
 import { Create, Breadcrumb } from "@refinedev/antd";
@@ -383,21 +487,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -408,7 +530,7 @@ render(
 You can use the `wrapperProps` property if you want to customize the wrapper of the `<Create/>` component. The `@refinedev/antd` wrapper elements are simply `<div/>`s and `wrapperProps` and can get every attribute that `<div/>` can get.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
-const { CreateButton } = RefineAntd;
+setInitialRoutes(["/posts/create"]);
 
 // visible-block-start
 import { Create } from "@refinedev/antd";
@@ -432,21 +554,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -455,7 +595,7 @@ render(
 You can use the `headerProps` property to customize the header of the `<Create/>` component:
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
-const { CreateButton } = RefineAntd;
+setInitialRoutes(["/posts/create"]);
 
 // visible-block-start
 import { Create } from "@refinedev/antd";
@@ -480,21 +620,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -505,7 +663,7 @@ render(
 You can use the `contentProps` property to customize the content of the `<Create/>` component:
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
-const { CreateButton } = RefineAntd;
+setInitialRoutes(["/posts/create"]);
 
 // visible-block-start
 import { Create } from "@refinedev/antd";
@@ -529,21 +687,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -554,7 +730,7 @@ render(
 You can customize the buttons at the header by using the `headerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
-const { CreateButton } = RefineAntd;
+setInitialRoutes(["/posts/create"]);
 
 // visible-block-start
 import { Create } from "@refinedev/antd";
@@ -579,21 +755,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -602,7 +796,7 @@ render(
 You can use the `headerButtonProps` property to customize the wrapper element of the buttons at the header:
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
-const { CreateButton } = RefineAntd;
+setInitialRoutes(["/posts/create"]);
 
 // visible-block-start
 import { Create } from "@refinedev/antd";
@@ -614,6 +808,10 @@ const PostCreate: React.FC = () => {
       // highlight-start
       headerButtonProps={{
         style: {
+          // hide-start
+          float: "right",
+          marginRight: 24,
+          // hide-end
           backgroundColor: "cornflowerblue",
           padding: "16px",
         },
@@ -628,21 +826,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -655,7 +871,7 @@ By default, the `<Create/>` component has a [`<SaveButton>`][save-button] at the
 You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, saveButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
-const { CreateButton } = RefineAntd;
+setInitialRoutes(["/posts/create"]);
 
 // visible-block-start
 import { Create } from "@refinedev/antd";
@@ -680,27 +896,47 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `saveButtonProps` to utilize the default values of the [`<SaveButton>`][save-button] component.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
 import { Create, SaveButton } from "@refinedev/antd";
 import { Button } from "antd";
@@ -727,25 +963,42 @@ const PostCreate: React.FC = () => {
     </Create>
   );
 };
-
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -754,7 +1007,7 @@ render(
 You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
-const { CreateButton } = RefineAntd;
+setInitialRoutes(["/posts/create"]);
 
 // visible-block-start
 import { Create } from "@refinedev/antd";
@@ -783,21 +1036,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -810,3 +1081,5 @@ render(
 <PropsTable module="@refinedev/antd/Create" goBack-default="`<ArrowLeft />`" headerProps-type="[`PageHeaderProps`](https://procomponents.ant.design/en-US/components/page-header)" />
 
 [save-button]: /docs/ui-integrations/ant-design/components/buttons/save-button
+
+</rewritten_file>
diff --git a/documentation/docs/ui-integrations/ant-design/components/basic-views/edit/index.md b/documentation/docs/ui-integrations/ant-design/components/basic-views/edit/index.md
index 4c2cd1eec84c..f91de2e237f8 100644
--- a/documentation/docs/ui-integrations/ant-design/components/basic-views/edit/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/basic-views/edit/index.md
@@ -7,114 +7,56 @@ swizzle: true
 
 We will show what `<Edit>` does using properties with examples.
 
-```tsx live hideCode url=http://localhost:3000/posts/edit/123
-const { EditButton } = RefineAntd;
-
-interface ICategory {
-  id: number;
-  title: string;
-}
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom/123
+setInitialRoutes(["/custom/123"]);
 
 // visible-block-start
+import { Edit } from "@refinedev/antd";
 
-interface IPost {
-  id: number;
-  title: string;
-  content: string;
-  status: "published" | "draft" | "rejected";
-  category: { id: number };
-}
-
-import { Edit, useForm, useSelect } from "@refinedev/antd";
-import { Form, Input, Select } from "antd";
-
-const PostEdit: React.FC = () => {
-  const { formProps, saveButtonProps, query } = useForm<IPost>({
-    warnWhenUnsavedChanges: true,
-  });
-
-  const postData = query?.data?.data;
-  const { selectProps: categorySelectProps } = useSelect<ICategory>({
-    resource: "categories",
-    defaultValue: postData?.category.id,
-  });
-
+const CustomPage: React.FC = () => {
   return (
-    <Edit saveButtonProps={saveButtonProps}>
-      <Form {...formProps} layout="vertical">
-        <Form.Item
-          label="Title"
-          name="title"
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label="Category"
-          name={["category", "id"]}
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        >
-          <Select {...categorySelectProps} />
-        </Form.Item>
-        <Form.Item
-          label="Status"
-          name="status"
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        >
-          <Select
-            options={[
-              {
-                label: "Published",
-                value: "published",
-              },
-              {
-                label: "Draft",
-                value: "draft",
-              },
-              {
-                label: "Rejected",
-                value: "rejected",
-              },
-            ]}
-          />
-        </Form.Item>
-      </Form>
+    /* highlight-next-line */
+    <Edit resource="posts">
+      <p>Rest of your page here</p>
     </Edit>
   );
 };
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton recordItemId="123">Edit Item 123</EditButton>
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/custom/:id"
+          element={
+            <div style={{ padding: 16 }}>
+              <CustomPage />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
+:::tip
+The example above shows how to use the `resource` prop when the component is rendered on a custom page with a different route than the resource route.
+:::
+
+If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
+
+> For more information, refer to the [`identifier` section of the `<Refine/>` component documentation &#8594](/docs/core/refine-component#identifier)
+
 :::simple Good to know
 
 You can swizzle this component to customize it with the [**Refine CLI**](/docs/packages/list-of-packages)
@@ -127,20 +69,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 `title` allows you to add a title inside the `<Edit>` component. If you don't pass title props, it uses the "Edit" prefix and the singular resource name by default. For example, for the "posts" resource, it will be "Edit post".
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2
-const { EditButton } = RefineAntd;
-const { default: simpleRest } = RefineSimpleRest;
-
-const dataProvider = simpleRest("https://api.fake-rest.refine.dev");
-
-const customDataProvider = {
-  ...dataProvider,
-  deleteOne: async ({ resource, id, variables }) => {
-    return {
-      data: {},
-    };
-  },
-};
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
 // visible-block-start
 import { Edit } from "@refinedev/antd";
@@ -156,21 +86,41 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton recordItemId="2">Edit Item 2</EditButton>
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -178,8 +128,8 @@ render(
 
 The `<Edit>` component has a save button that submits the form by default. If you want to customize this button you can use the `saveButtonProps` property:
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2
-const { EditButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
 // visible-block-start
 import { Edit } from "@refinedev/antd";
@@ -195,21 +145,41 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -222,60 +192,25 @@ render(
 If you want to customize this button you can use the `deleteButtonProps` property like the code below.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
-const { EditButton } = RefineAntd;
-const { default: simpleRest } = RefineSimpleRest;
-
-const dataProvider = simpleRest("https://api.fake-rest.refine.dev");
-
-const customDataProvider = {
-  ...dataProvider,
-  deleteOne: async ({ resource, id, variables }) => {
-    return {
-      data: {},
-    };
-  },
-};
+setInitialRoutes(["/posts/edit/123"]);
 
-const authProvider = {
-  login: () => {
-    return {
-      success: true,
-      redirectTo: "/",
-    };
-  },
-  register: () => {
-    return {
-      success: true,
-    };
-  },
-  forgotPassword: () => {
-    return {
-      success: true,
-    };
-  },
-  updatePassword: () => {
-    return {
-      success: true,
-    };
-  },
-  logout: () => {
-    return {
-      success: true,
-      redirectTo: "/",
-    };
-  },
-  check: () => ({
-    authenticated: true,
-  }),
-  onError: () => ({}),
-  getPermissions: () => null,
-  getIdentity: () => null,
-};
+interface ICategory {
+  id: number;
+  title: string;
+}
+
+interface IPost {
+  id: number;
+  title: string;
+  content: string;
+  status: "published" | "draft" | "rejected";
+  category: { id: number };
+}
 
-// visible-block-start
 import { Edit } from "@refinedev/antd";
 import { usePermissions } from "@refinedev/core";
 
+// visible-block-start
 const PostEdit: React.FC = () => {
   const { data: permissionsData } = usePermissions();
   return (
@@ -293,23 +228,41 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    authProvider={authProvider}
-    dataProvider={customDataProvider}
-    initialRoutes={["/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton recordItemId="123">Edit Item 123</EditButton>
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -321,12 +274,9 @@ render(
 
 The `<Edit>` component reads the `resource` information from the route by default. If you want to use a custom resource for the `<Edit>` component, you can use the `resource` prop:
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom/2
-setInitialRoutes(["/custom/2"]);
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom/123
+setInitialRoutes(["/custom/123"]);
 
-import { Refine } from "@refinedev/core";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 // visible-block-start
 import { Edit } from "@refinedev/antd";
 
@@ -340,29 +290,36 @@ const CustomPage: React.FC = () => {
 };
 // visible-block-end
 
-const App: React.FC = () => {
-  return (
+render(
+  <ReactRouter.BrowserRouter>
     <RefineAntdDemo
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom/:id",
-          },
-        ],
-        // highlight-end
-      }}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
-
-render(<App />);
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/custom/:id"
+          element={
+            <div style={{ padding: 16 }}>
+              <CustomPage />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
 
+:::tip
+The example above shows how to use the `resource` prop when the component is rendered on a custom page with a different route than the resource route.
+:::
+
 If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
 
 > For more information, refer to the [`identifier` section of the `<Refine/>` component documentation &#8594](/docs/core/refine-component#identifier)
@@ -371,13 +328,13 @@ If you have multiple resources with the same name, you can pass the `identifier`
 
 The `<Edit>` component reads the `id` information from the route by default. When it cannot be read from the URL, which happens when it's used on a custom page, modal or drawer, `recordItemId` is used.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2
-const { EditButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-// visible-block-start
 import { Edit, useModalForm } from "@refinedev/antd";
 import { Modal, Button } from "antd";
 
+// visible-block-start
 const PostEdit: React.FC = () => {
   const { modalProps, id, show } = useModalForm({
     action: "edit",
@@ -398,21 +355,41 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton recordItemId="2">Edit Item 2</EditButton>
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -422,116 +399,57 @@ The `<Edit>` component needs the `id` information for the `<RefreshButton>` to w
 
 Determines which mode mutation will have while executing `<DeleteButton>` .
 
-```tsx live hideCode url=http://localhost:3000/posts/edit/2
-const { EditButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-interface ICategory {
-  id: number;
-  title: string;
-}
+import { Edit } from "@refinedev/antd";
 
 // visible-block-start
-
-interface IPost {
-  id: number;
-  title: string;
-  content: string;
-  status: "published" | "draft" | "rejected";
-  category: { id: number };
-}
-
-import { Edit, useForm, useSelect } from "@refinedev/antd";
-import { Form, Input, Select } from "antd";
-
 const PostEdit: React.FC = () => {
-  const { formProps, saveButtonProps, query } = useForm<IPost>({
-    warnWhenUnsavedChanges: true,
-  });
-
-  const postData = query?.data?.data;
-  const { selectProps: categorySelectProps } = useSelect<ICategory>({
-    resource: "categories",
-    defaultValue: postData?.category.id,
-  });
-
   return (
-    <Edit
-      /* highlight-next-line */
-      mutationMode="undoable"
-      canDelete
-      saveButtonProps={saveButtonProps}
-    >
-      <Form {...formProps} layout="vertical">
-        <Form.Item
-          label="Title"
-          name="title"
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label="Category"
-          name={["category", "id"]}
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        >
-          <Select {...categorySelectProps} />
-        </Form.Item>
-        <Form.Item
-          label="Status"
-          name="status"
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        >
-          <Select
-            options={[
-              {
-                label: "Published",
-                value: "published",
-              },
-              {
-                label: "Draft",
-                value: "draft",
-              },
-              {
-                label: "Rejected",
-                value: "rejected",
-              },
-            ]}
-          />
-        </Form.Item>
-      </Form>
+    <Edit mutationMode="undoable" saveButtonProps={{ size: "small" }}>
+      <p>Rest of your page here</p>
     </Edit>
   );
 };
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton recordItemId="2">Edit Item 2</EditButton>
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -574,12 +492,12 @@ export const App: React.FC = () => {
 To customize the back button or to disable it, you can use the `goBack` property:
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
-const { EditButton } = RefineAntd;
+setInitialRoutes(["/posts/edit/123"]);
 
-// visible-block-start
 import { Edit } from "@refinedev/antd";
 import { Button } from "antd";
 
+// visible-block-start
 const PostEdit: React.FC = () => {
   const BackButton = () => <Button>←</Button>;
   return (
@@ -592,39 +510,56 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts", "/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton recordItemId="123">Edit Item 123</EditButton>
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 If your route has no `:action` parameter or your action is `list`, the back button will not be shown even if you pass a `goBack` property. You can override this behavior by using the `headerProps` property:
 
 ```tsx
-/* highlight-next-line */
 import { useBack } from "@refinedev/core";
 import { Edit } from "@refinedev/antd";
 import { Button } from "antd";
 
 const PostEdit: React.FC = () => {
-  /* highlight-next-line */
   const back = useBack();
   const BackButton = () => <Button>←</Button>;
 
   return (
-    /* highlight-next-line */
     <Edit goBack={<BackButton />} headerProps={{ onBack: back }}>
       <p>Rest of your page here</p>
     </Edit>
@@ -636,12 +571,12 @@ const PostEdit: React.FC = () => {
 
 To toggle the loading state of the `<Edit/>` component, you can use the `isLoading` property:
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2
-const { EditButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-// visible-block-start
 import { Edit } from "@refinedev/antd";
 
+// visible-block-start
 const PostEdit: React.FC = () => {
   return (
     /* highlight-next-line */
@@ -653,21 +588,41 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -675,12 +630,12 @@ render(
 
 To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default the `Breadcrumb` component from the `@refinedev/antd` package is used for breadcrumbs.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2
-const { EditButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-// visible-block-start
 import { Edit, Breadcrumb } from "@refinedev/antd";
 
+// visible-block-start
 const PostEdit: React.FC = () => {
   return (
     <Edit
@@ -704,21 +659,41 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -728,12 +703,12 @@ render(
 
 You can use the `wrapperProps` property if you want to customize the wrapper of the `<Edit/>` component. The `@refinedev/antd` wrapper elements are simply `<div/>`s and `wrapperProps` and can get every attribute that `<div/>` can get.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2
-const { EditButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-// visible-block-start
 import { Edit } from "@refinedev/antd";
 
+// visible-block-start
 const PostEdit: React.FC = () => {
   return (
     <Edit
@@ -753,21 +728,41 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -775,12 +770,12 @@ render(
 
 You can use the `headerProps` property to customize the header of the `<Edit/>` component:
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2
-const { EditButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-// visible-block-start
 import { Edit } from "@refinedev/antd";
 
+// visible-block-start
 const PostEdit: React.FC = () => {
   return (
     <Edit
@@ -801,21 +796,41 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -825,12 +840,12 @@ render(
 
 You can use the `contentProps` property to customize the content of the `<Edit/>` component:
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2
-const { EditButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-// visible-block-start
 import { Edit } from "@refinedev/antd";
 
+// visible-block-start
 const PostEdit: React.FC = () => {
   return (
     <Edit
@@ -850,21 +865,41 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -878,13 +913,13 @@ You can customize the buttons at the header by using the `headerButtons` propert
 
 If the "list" resource is not defined, the [`<ListButton>`][list-button] will not render and `listButtonProps` will be `undefined`.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2
-const { EditButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-// visible-block-start
 import { Edit } from "@refinedev/antd";
 import { Button } from "antd";
 
+// visible-block-start
 const PostEdit: React.FC = () => {
   return (
     <Edit
@@ -904,33 +939,53 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `refreshButtonProps` and `listButtonProps` to utilize the default values of the `<ListButton>`[list-button] and `<RefreshButton>`[refresh-button] components.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2
-const { EditButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-// visible-block-start
 import { Edit, ListButton, RefreshButton } from "@refinedev/antd";
 import { Button } from "antd";
 
+// visible-block-start
 const PostEdit: React.FC = () => {
   return (
     <Edit
@@ -953,21 +1008,41 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -975,13 +1050,13 @@ render(
 
 You can use the `headerButtonProps` property to customize the wrapper element of the buttons at the header:
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2
-const { EditButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-// visible-block-start
 import { Edit } from "@refinedev/antd";
 import { Button } from "antd";
 
+// visible-block-start
 const PostEdit: React.FC = () => {
   return (
     <Edit
@@ -1002,26 +1077,44 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Space` documentation &#8594](https://ant.design/components/space/)
-
 ### footerButtons
 
 By default, the `<Edit/>` component has a [`<SaveButton>`][save-button] and a [`<DeleteButton>`][delete-button] at the footer.
@@ -1030,13 +1123,13 @@ You can customize the buttons at the footer by using the `footerButtons` propert
 
 If [`canDelete`](#candelete-and-deletebuttonprops) is `false`, the [`<DeleteButton>`][delete-button] will not render and `deleteButtonProps` will be `undefined`.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2
-const { EditButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-// visible-block-start
 import { Edit } from "@refinedev/antd";
 import { Button } from "antd";
 
+// visible-block-start
 const PostEdit: React.FC = () => {
   return (
     <Edit
@@ -1056,40 +1149,58 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `saveButtonProps` and `deleteButtonProps` to utilize the default values of the [`<SaveButton>`][save-button] and [`<DeleteButton>`][delete-button] components.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2
-const { EditButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-// visible-block-start
 import { Edit, SaveButton, DeleteButton } from "@refinedev/antd";
-import { Button } from "antd";
 
+// visible-block-start
 const PostEdit: React.FC = () => {
   return (
     <Edit
       // highlight-start
       footerButtons={({ saveButtonProps, deleteButtonProps }) => (
         <>
-          <Button type="primary">Custom Button</Button>
           <SaveButton {...saveButtonProps} hideText />
           {deleteButtonProps && (
             <DeleteButton {...deleteButtonProps} hideText />
@@ -1105,21 +1216,41 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1127,22 +1258,20 @@ render(
 
 You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2
-const { EditButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-// visible-block-start
 import { Edit } from "@refinedev/antd";
 
+// visible-block-start
 const PostEdit: React.FC = () => {
   return (
     <Edit
       // highlight-start
       footerButtonProps={{
         style: {
-          // hide-start
           float: "right",
           marginRight: 24,
-          // hide-end
           backgroundColor: "cornflowerblue",
           padding: "16px",
         },
@@ -1156,32 +1285,50 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Space` documentation &#8594](https://ant.design/components/space/)
-
 ### autoSaveProps
 
 You can use the auto save feature of the `<Edit/>` component by using the `autoSaveProps` property.
 
 ```tsx live url=http://localhost:3000/posts/edit/123
-const { EditButton } = RefineAntd;
+setInitialRoutes(["/posts/edit/123"]);
 
 interface ICategory {
   id: number;
@@ -1201,82 +1348,50 @@ import { Form, Input, Select } from "antd";
 
 // visible-block-start
 const PostEdit: React.FC = () => {
-  const {
-    formProps,
-    saveButtonProps,
-    query,
-    // highlight-next-line
-    autoSaveProps,
-  } = useForm<IPost>({
-    warnWhenUnsavedChanges: true,
-    // highlight-start
-    autoSave: {
-      enabled: true,
-    },
-    // highlight-end
-  });
-
-  const postData = query?.data?.data;
-  const { selectProps: categorySelectProps } = useSelect<ICategory>({
-    resource: "categories",
-    defaultValue: postData?.category.id,
-  });
+  const { current, gotoStep, stepsProps, formProps, saveButtonProps, query } =
+    useStepsForm<IPost>({
+      stepsProps: {
+        items: [
+          {
+            title: "First Step",
+          },
+          {
+            title: "Second Step",
+          },
+        ],
+      },
+    });
 
   return (
-    <Edit
-      saveButtonProps={saveButtonProps}
-      // highlight-next-line
-      autoSaveProps={autoSaveProps}
-    >
+    <Edit saveButtonProps={saveButtonProps}>
+      <Steps {...stepsProps} />
       <Form {...formProps} layout="vertical">
-        <Form.Item
-          label="Title"
-          name="title"
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label="Category"
-          name={["category", "id"]}
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        >
-          <Select {...categorySelectProps} />
-        </Form.Item>
-        <Form.Item
-          label="Status"
-          name="status"
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        >
-          <Select
-            options={[
+        {current === 0 && (
+          <Form.Item
+            label="Title"
+            name="title"
+            rules={[
               {
-                label: "Published",
-                value: "published",
-              },
-              {
-                label: "Draft",
-                value: "draft",
+                required: true,
               },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+        )}
+        {current === 1 && (
+          <Form.Item
+            label="Content"
+            name="content"
+            rules={[
               {
-                label: "Rejected",
-                value: "rejected",
+                required: true,
               },
             ]}
-          />
-        </Form.Item>
+          >
+            <Input.TextArea />
+          </Form.Item>
+        )}
       </Form>
     </Edit>
   );
@@ -1284,43 +1399,95 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <EditButton recordItemId="123">Edit Item 123</EditButton>
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineAntd.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
+:::tip
+The `query` object from the `useForm` hook contains the query result from the data provider. You can use it to access the data returned from the API.
+
+```tsx
+const { query } = useForm();
+const record = query?.data?.data;
+```
+
+The `data.data` structure shown above is the default for the `@refinedev/simple-rest` data provider. This structure may be different for other data providers.
+:::
+
 ## API Reference
 
 ### Properties
 
-<PropsTable module="@refinedev/antd/Edit"
-contentProps-type="[`CardProps`](https://ant.design/components/card/#API)"
-headerProps-type="[`PageHeaderProps`](https://procomponents.ant.design/en-US/components/page-header)"
-headerButtons-default="[`ListButton`](/docs/ui-integrations/ant-design/components/buttons/list-button/) and [`RefreshButton`](/docs/ui-integrations/ant-design/components/buttons/refresh-button/)"
-headerButtonProps-type="[`SpaceProps`](https://ant.design/components/space/)"
-deleteButtonProps-type="[`DeleteButtonProps`](/docs/ui-integrations/ant-design/components/buttons/delete-button)"
-saveButtonProps-type="[`SaveButtonProps`](/docs/ui-integrations/ant-design/components/buttons/save-button/)"
-footerButtons-default="[`SaveButton`](/docs/ui-integrations/ant-design/components/buttons/save-button/) and [`DeleteButton`](/docs/ui-integrations/ant-design/components/buttons/delete-button/)"
-footerButtonsProps-type="[`SpaceProps`](https://ant.design/components/space/)"
-breadcrumb-default="[`<Breadcrumb>`](https://ant.design/components/breadcrumb/)"
-goBack-default="`<ArrowLeft />`"
-goBack-type="`ReactNode`"
-/>
-
-> `*`: These properties have default values in `RefineContext` and can also be set on the **<[Refine](/docs/core/refine-component)>** component.
+<PropsTable module="@refinedev/antd/Edit" />
+
+:::tip External Props
+It also accepts all props of Ant Design [Form](https://ant.design/components/form/#API).
+:::
+
+### Type Parameters
+
+| Property     | Extends | Default | Description                                                    |
+| ------------ | ------- | ------- | -------------------------------------------------------------- |
+| TQueryFnData | unknown | unknown | Result data returned by the query function. Extends unknown    |
+| TError       | unknown | unknown | Custom error object that extends unknown                       |
+| TVariables   | object  | object  | Values for params. default `object`                            |
+| TData        | unknown | unknown | Result data returned by the `select` function. Extends unknown |
+| TResponse    | unknown | unknown | Result data returned by the mutation function. Extends unknown |
+
+### Return values
+
+| Property            | Description                                                                                                            |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `queryResult`       | If the `queryResult` prop is given, it will be returned. Otherwise, it will return `undefined`.                        |
+| `mutationResult`    | Mutation result from `react-query`. [Check here →](https://tanstack.com/query/latest/docs/react/reference/useMutation) |
+| `saveButtonProps`   | Props for a save button.                                                                                               |
+| `cancelButtonProps` | Props for a cancel button.                                                                                             |
+| `deleteButtonProps` | Props for a delete button.                                                                                             |
+| `formProps`         | Props for the `<Form>` component.                                                                                      |
+| `formLoading`       | Loading state of form.                                                                                                 |
+| `setId`             | `id` setter.                                                                                                           |
+| `id`                | Record id for edit action. The record to edit.                                                                         |
+| `defaultValues`     | Default form values.                                                                                                   |
+| `formValues`        | Form values.                                                                                                           |
+| `submit`            | Submit method, the parameter is the values to update a record.                                                         |
+| `reset`             | Reset method, reset the form values to initial values.                                                                 |
+| `redirect`          | Redirect function, will be called after form is submitted successfully.                                                |
+| `goBack`            | Go back function, will be called when the cancel button is clicked.                                                    |
+| `query`             | Query result from `react-query`. [Check here →](https://tanstack.com/query/latest/docs/react/reference/useQuery)       |
 
 [list-button]: /docs/ui-integrations/ant-design/components/buttons/list-button
 [refresh-button]: /docs/ui-integrations/ant-design/components/buttons/refresh-button
diff --git a/documentation/docs/ui-integrations/ant-design/components/basic-views/list/index.md b/documentation/docs/ui-integrations/ant-design/components/basic-views/list/index.md
index 01064a8290ea..e7f8a58631ff 100644
--- a/documentation/docs/ui-integrations/ant-design/components/basic-views/list/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/basic-views/list/index.md
@@ -8,6 +8,8 @@ swizzle: true
 We will show what `<List>` does using properties with examples.
 
 ```tsx live hideCode url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 interface ICategory {
   id: number;
   title: string;
@@ -74,15 +76,29 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -99,6 +115,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 `title` allows you to add a title to the `<List>` component. If you don't pass the title props, it uses plural form of resource name by default.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { List } from "@refinedev/antd";
 
@@ -113,15 +131,29 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -129,12 +161,12 @@ render(
 
 The `<List>` component reads the `resource` information from the route by default. If you want to use a custom resource for the `<List>` component, you can use the `resource` prop:
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom
-setInitialRoutes(["/custom"]);
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
 
 import { Refine } from "@refinedev/core";
-import routerProvider from "@refinedev/react-router-v6/legacy";
 import dataProvider from "@refinedev/simple-rest";
+
 // visible-block-start
 import { List } from "@refinedev/antd";
 
@@ -148,27 +180,31 @@ const CustomPage: React.FC = () => {
 };
 // visible-block-end
 
-const App: React.FC = () => {
-  return (
+render(
+  <ReactRouter.BrowserRouter>
     <RefineAntdDemo
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom",
-          },
-        ],
-        // highlight-end
-      }}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
-
-render(<App />);
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<CustomPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
 
 If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
@@ -177,9 +213,10 @@ If you have multiple resources with the same name, you can pass the `identifier`
 
 ### canCreate and createButtonProps
 
-`canCreate` allows us to add the create button inside the `<List>` component. If you want to customize this button you can use `createButtonProps` property like the code below:
+`canCreate` allows us to add the create button inside the `<List />` component. If you want to customize this button you can use `createButtonProps` property like the code below:
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
 const { Create } = RefineAntd;
 const { default: simpleRest } = RefineSimpleRest;
 
@@ -253,20 +290,36 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    authProvider={authProvider}
-    dataProvider={customDataProvider}
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-        create: () => {
-          return <Create>Create Page</Create>;
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      authProvider={authProvider}
+      dataProvider={customDataProvider}
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
         },
-      },
-    ]}
-  />,
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+          <ReactRouter.Route
+            path="/posts/create"
+            element={<Create>Create Page</Create>}
+          />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -281,6 +334,7 @@ To customize or disable the breadcrumb, you can use the `breadcrumb` property. B
 [Refer to the `Breadcrumb` documentation for detailed usage. &#8594](/docs/ui-integrations/ant-design/components/breadcrumb)
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
 // visible-block-start
 import { List } from "@refinedev/antd";
 
@@ -311,15 +365,29 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -328,6 +396,8 @@ render(
 You can use the `wrapperProps` property if you want to customize the wrapper of the `<List/>` component. The `@refinedev/antd` wrapper elements are simply `<div/>`s and `wrapperProps` and can get every attribute that `<div/>` can get.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { List } from "@refinedev/antd";
 
@@ -350,15 +420,29 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -367,6 +451,8 @@ render(
 You can use the `headerProps` property to customize the header of the `<List/>` component:
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { List } from "@refinedev/antd";
 
@@ -390,15 +476,29 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -409,6 +509,8 @@ render(
 You can use the `contentProps` property to customize the content of the `<Create/>` component. The `<List/>` components content is wrapped with a `<div/>` and `contentProps` can get every attribute that `<div/>` can get.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { List } from "@refinedev/antd";
 
@@ -431,15 +533,29 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -452,6 +568,8 @@ You can customize the buttons at the header by using the `headerButtons` propert
 If the "create" resource is not defined or if [`canCreate`](#cancreate-and-createbuttonprops) is false, the [`<CreateButton>`][create-button] will not render and `createButtonProps`will be `undefined`.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { List } from "@refinedev/antd";
 import { Button } from "antd";
@@ -475,21 +593,37 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `createButtonProps` to utilize the default values of the [`<CreateButton>`][create-button] component.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { List, CreateButton } from "@refinedev/antd";
 import { Button } from "antd";
@@ -515,15 +649,29 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -532,6 +680,8 @@ render(
 You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { List } from "@refinedev/antd";
 import { Button } from "antd";
@@ -556,15 +706,29 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/basic-views/show/index.md b/documentation/docs/ui-integrations/ant-design/components/basic-views/show/index.md
index 3a114bea8eb6..8f905ad164a5 100644
--- a/documentation/docs/ui-integrations/ant-design/components/basic-views/show/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/basic-views/show/index.md
@@ -7,7 +7,22 @@ swizzle: true
 
 We will show what `<Show>` does using properties with examples.
 
-```tsx live hideCode url=http://localhost:3000/posts/show/2
+```tsx live hideCode url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
+
+interface ICategory {
+  id: number;
+  title: string;
+}
+
+interface IPost {
+  id: number;
+  title: string;
+  content: string;
+  status: "published" | "draft" | "rejected";
+  category: { id: number };
+}
+
 // visible-block-start
 import { Show, MarkdownField } from "@refinedev/antd";
 import { Typography } from "antd";
@@ -48,21 +63,41 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/show/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <ShowButton recordItemId="2">Edit Item 2</ShowButton>
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -78,20 +113,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 `title` allows you to add a title inside the `<Show>` component. If you don't pass title props, it uses the "Show" prefix and the singular resource name by default. For example, for the "posts" resource, it will be "Show post".
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2
-const { ShowButton } = RefineAntd;
-const { default: simpleRest } = RefineSimpleRest;
-
-const dataProvider = simpleRest("https://api.fake-rest.refine.dev");
-
-const customDataProvider = {
-  ...dataProvider,
-  deleteOne: async ({ resource, id, variables }) => {
-    return {
-      data: {},
-    };
-  },
-};
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import { Show } from "@refinedev/antd";
@@ -107,21 +130,41 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/show/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <ShowButton recordItemId="2">Show Item 2</ShowButton>
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -129,12 +172,12 @@ render(
 
 The `<Show>` component reads the `resource` information from the route by default. If you want to use a custom resource for the `<Show>` component, you can use the `resource` prop:
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom/2
-setInitialRoutes(["/custom/2"]);
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 import { Refine } from "@refinedev/core";
-import routerProvider from "@refinedev/react-router-v6/legacy";
 import dataProvider from "@refinedev/simple-rest";
+
 // visible-block-start
 import { Show } from "@refinedev/antd";
 
@@ -147,27 +190,44 @@ const CustomPage: React.FC = () => {
   );
 };
 // visible-block-end
-const App: React.FC = () => {
-  return (
-    <RefineAntdDemo
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom/:id",
-          },
-        ],
-        // highlight-end
-      }}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
 
-render(<App />);
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<CustomPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
 
 If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
@@ -180,8 +240,8 @@ If you have multiple resources with the same name, you can pass the `identifier`
 
 When clicked on, the delete button executes the `useDelete` method provided by the [`dataProvider`](/docs/data/data-provider) and the edit button redirects the user to the record edit page.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2
-const { ShowButton, Edit } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 const { default: simpleRest } = RefineSimpleRest;
 
@@ -255,39 +315,56 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    authProvider={authProvider}
-    dataProvider={customDataProvider}
-    initialRoutes={["/posts/show/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <ShowButton>Show Item 2</ShowButton>
-          </div>
-        ),
-        show: PostShow,
-        edit: () => {
-          return <Edit>Edit Page</Edit>;
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      authProvider={authProvider}
+      dataProvider={customDataProvider}
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+          edit: "/posts/edit/:id",
         },
-      },
-    ]}
-  />,
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+          <ReactRouter.Route path="edit/:id" element={<div>Edit Page</div>} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`usePermission` documentation &#8594](/docs/authentication/hooks/use-permissions)
-
-> For more information, refer to the [`<DeleteButton>`](/docs/ui-integrations/ant-design/components/buttons/delete-button) and the [`<EditButton>`](/docs/ui-integrations/ant-design/components/buttons/edit-button) documentations.
+[Refer to the `usePermissions` documentation for detailed usage. &#8594](/docs/api-reference/core/hooks/authentication/usePermissions/)
 
 ### recordItemId
 
-The`<Show>` component reads the `id` information from the route by default. `recordItemId` is used when it cannot read from the URL (when used on a custom page, modal or drawer).
+The `<Show>` component reads the `id` information from the route by default. `recordItemId` is used when it cannot read from the URL (when used on a custom page, modal or drawer).
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2
-const { ShowButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import { Show, useModalForm } from "@refinedev/antd";
@@ -313,21 +390,41 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/show/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <ShowButton recordItemId="2">Show Item 2</ShowButton>
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -369,8 +466,8 @@ export const App: React.FC = () => {
 
 To customize the back button or to disable it, you can use the `goBack` property:
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2
-const { ShowButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import { Show } from "@refinedev/antd";
@@ -380,7 +477,7 @@ const PostShow: React.FC = () => {
   const BackButton = () => <Button>←</Button>;
   return (
     /* highlight-next-line */
-    <Show goBack={<div>back</div>}>
+    <Show goBack={<BackButton />}>
       <p>Rest of your page here</p>
     </Show>
   );
@@ -388,21 +485,41 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts", "/posts/show/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <ShowButton>Show Item 2</ShowButton>
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -432,8 +549,8 @@ const PostShow: React.FC = () => {
 
 Since `<Show>` uses the Ant Design [`<Card>`](https://ant.design/components/card/) component, the `isLoading` property can be set like the below:
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2
-const { ShowButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import { Show } from "@refinedev/antd";
@@ -449,21 +566,41 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/show/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <ShowButton />
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -471,8 +608,8 @@ render(
 
 To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default the `Breadcrumb` component from the `@refinedev/antd` package is used for breadcrumbs.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2
-const { ShowButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import { Show, Breadcrumb } from "@refinedev/antd";
@@ -500,21 +637,41 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/show"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <ShowButton />
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -524,8 +681,8 @@ render(
 
 You can use the `wrapperProps` property if you want to customize the wrapper of the `<Show/>` component. The `@refinedev/antd` wrapper elements are simply `<div/>`s and `wrapperProps` and can get every attribute that `<div/>` can get.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2
-const { ShowButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import { Show } from "@refinedev/antd";
@@ -549,21 +706,41 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/show"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <ShowButton />
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -571,8 +748,8 @@ render(
 
 You can use the `headerProps` property to customize the header of the `<Show/>` component:
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2
-const { ShowButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import { Show } from "@refinedev/antd";
@@ -597,21 +774,41 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/show/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <ShowButton />
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -621,8 +818,8 @@ render(
 
 You can use the `contentProps` property to customize the content of the `<Show/>` component:
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2
-const { ShowButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import { Show } from "@refinedev/antd";
@@ -646,21 +843,41 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/show"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <ShowButton />
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -678,8 +895,8 @@ If [`canDelete`](#candelete-and-canedit) is `false`, the [`<DeleteButton>`][dele
 
 If [`canEdit`](#candelete-and-canedit) is `false`, [`<EditButton>`][edit-button] will not render and `editButtonProps` will be `undefined`.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2
-const { ShowButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import { Show } from "@refinedev/antd";
@@ -704,28 +921,48 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/show/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <ShowButton />
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `createButtonProps` to utilize the default values of the [`<ListButton>`][list-button], [`<EditButton>`][edit-button], [`<DeleteButton>`][delete-button], and [`<RefreshButton>`][refresh-button] components.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2
-const { ShowButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import {
@@ -770,21 +1007,41 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/show/2"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <ShowButton />
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -792,8 +1049,8 @@ render(
 
 You can use the `headerButtonProps` property to customize the wrapper element of the buttons at the header:
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/2
-const { ShowButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import { Show } from "@refinedev/antd";
@@ -819,21 +1076,41 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/show"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <ShowButton />
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -843,8 +1120,8 @@ render(
 
 You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2
-const { ShowButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import { Show } from "@refinedev/antd";
@@ -869,21 +1146,41 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/show"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <ShowButton />
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -891,8 +1188,8 @@ render(
 
 You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/2
-const { ShowButton } = RefineAntd;
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import { Show } from "@refinedev/antd";
@@ -910,10 +1207,8 @@ const PostShow: React.FC = () => {
       // highlight-start
       footerButtonProps={{
         style: {
-          // hide-start
           float: "right",
           marginRight: 24,
-          // hide-end
           backgroundColor: "cornflowerblue",
           padding: "16px",
         },
@@ -927,21 +1222,41 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/show"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <ShowButton />
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/breadcrumb/index.md b/documentation/docs/ui-integrations/ant-design/components/breadcrumb/index.md
index 4ce98b7730db..b39c0f822e25 100644
--- a/documentation/docs/ui-integrations/ant-design/components/breadcrumb/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/breadcrumb/index.md
@@ -80,6 +80,9 @@ const PostList = () => {
   return (
     <RefineAntd.List>
       <p>Content of your list page...</p>
+      <RefineAntd.ShowButton recordItemId="123" resource="posts">
+        Show Post 123
+      </RefineAntd.ShowButton>
     </RefineAntd.List>
   );
 };
@@ -87,12 +90,8 @@ const PostList = () => {
 setInitialRoutes(["/posts/show/123"]);
 
 render(
-  <ReactRouterDom.BrowserRouter>
-    <RefineCore.Refine
-      dataProvider={RefineSimpleRest.default(
-        "https://api.fake-rest.refine.dev",
-      )}
-      routerProvider={RefineReactRouterV6.default}
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
       resources={[
         {
           name: "posts",
@@ -103,13 +102,13 @@ render(
       ]}
     >
       <RefineAntd.Layout>
-        <ReactRouterDom.Routes>
-          <ReactRouterDom.Route path="/posts" element={<PostList />} />
-          <ReactRouterDom.Route path="/posts/show/:id" element={<PostShow />} />
-        </ReactRouterDom.Routes>
+        <ReactRouter.Routes>
+          <ReactRouter.Route path="/posts" element={<PostList />} />
+          <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+        </ReactRouter.Routes>
       </RefineAntd.Layout>
-    </RefineCore.Refine>
-  </ReactRouterDom.BrowserRouter>,
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/buttons/clone-button/index.md b/documentation/docs/ui-integrations/ant-design/components/buttons/clone-button/index.md
index 20478c621b18..f965e758cfbe 100644
--- a/documentation/docs/ui-integrations/ant-design/components/buttons/clone-button/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/buttons/clone-button/index.md
@@ -15,8 +15,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ## Usage
 
-```tsx live previewHeight=300px
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=360px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   List,
@@ -54,21 +55,37 @@ interface IPost {
 }
 // visible-block-end
 
-const PostCreate = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+const PostClone = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          clone: "/posts/:id/clone",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+          <ReactRouter.Route path=":id/clone" element={<PostClone />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -78,33 +95,49 @@ render(
 
 `recordItemId` is used to append the record id to the end of the route path. By default, the `recordItemId` is inferred from the route params.
 
-```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { CloneButton } from "@refinedev/antd";
 
 const MyCloneComponent = () => {
-  return <CloneButton resource="posts" recordItemId="1" />;
+  return <CloneButton resource="posts" recordItemId="123" />;
 };
 
 // visible-block-end
 
 const ClonedPage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        create: ClonedPage,
-      },
-    ]}
-    DashboardPage={MyCloneComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          clone: "/posts/:id/clone",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyCloneComponent />} />
+          <ReactRouter.Route path=":id/clone" element={<ClonedPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -114,37 +147,48 @@ Clicking the button will trigger the `clone` method of [`useNavigation`](/docs/r
 
 `resource` is used to redirect the app to the `clone` action of the given resource name. By default, the app redirects to the inferred resource's `clone` action path.
 
-```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/categories"]);
 
 // visible-block-start
 import { CloneButton } from "@refinedev/antd";
 
 const MyCloneComponent = () => {
-  return <CloneButton resource="categories" recordItemId="1" />;
+  return <CloneButton resource="categories" recordItemId="123" />;
 };
 
 // visible-block-end
 
-const ClonedPage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+const CategoryClone = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-      },
-      {
-        name: "categories",
-        create: ClonedPage,
-      },
-    ]}
-    DashboardPage={MyCloneComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          clone: "/posts/:id/clone",
+        },
+        {
+          name: "categories",
+          list: "/categories",
+          clone: "/categories/:id/clone",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/categories" element={<MyCloneComponent />} />
+        <ReactRouter.Route
+          path="/categories/:id/clone"
+          element={<CategoryClone />}
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -170,15 +214,15 @@ const MyComponent = () => {
 
 It is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
-```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
-
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
 // visible-block-start
 import { CloneButton } from "@refinedev/antd";
 
 const MyCloneComponent = () => {
   return (
     <CloneButton
+      recordItemId="123"
       // highlight-next-line
       hideText={true}
     />
@@ -188,21 +232,36 @@ const MyCloneComponent = () => {
 // visible-block-end
 
 const ClonedPage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MyCloneComponent,
-        create: ClonedPage,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          clone: "/posts/:id/clone",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyCloneComponent />} />
+          <ReactRouter.Route path=":id/clone" element={<ClonedPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/buttons/create-button/index.md b/documentation/docs/ui-integrations/ant-design/components/buttons/create-button/index.md
index 2ee69a995303..b59595f9e5fd 100644
--- a/documentation/docs/ui-integrations/ant-design/components/buttons/create-button/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/buttons/create-button/index.md
@@ -15,8 +15,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ## Usage
 
-```tsx live previewHeight=300px
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=360px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   List,
@@ -49,20 +50,36 @@ interface IPost {
 // visible-block-end
 
 const CreatePage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-        create: CreatePage,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+          <ReactRouter.Route path="create" element={<CreatePage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -72,42 +89,48 @@ render(
 
 `resource` is used to redirect the app to the `create` action path of the given resource name. By default, the app redirects to the inferred resource's `create` action path.
 
-```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/categories"]);
 
 // visible-block-start
 import { CreateButton } from "@refinedev/antd";
 
 const MyCreateComponent = () => {
-  return (
-    <CreateButton
-      // highlight-next-line
-      resource="categories"
-    />
-  );
+  return <CreateButton resource="categories" />;
 };
 
 // visible-block-end
 
-const CreatePage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+const CategoryCreate = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-      },
-      {
-        name: "categories",
-        create: CreatePage,
-      },
-    ]}
-    DashboardPage={MyCreateComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+        {
+          name: "categories",
+          list: "/categories",
+          create: "/categories/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/categories" element={<MyCreateComponent />} />
+        <ReactRouter.Route
+          path="/categories/create"
+          element={<CategoryCreate />}
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -133,8 +156,8 @@ const MyComponent = () => {
 
 It is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
-```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { CreateButton } from "@refinedev/antd";
@@ -151,21 +174,36 @@ const MyCreateComponent = () => {
 // visible-block-end
 
 const CreatePage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MyCreateComponent,
-        create: CreatePage,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyCreateComponent />} />
+          <ReactRouter.Route path="create" element={<CreatePage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -178,7 +216,12 @@ import { CreateButton } from "@refinedev/antd";
 
 export const MyListComponent = () => {
   return (
-    <CreateButton accessControl={{ enabled: true, hideIfUnauthorized: true }} />
+    <CreateButton
+      accessControl={{
+        enabled: true,
+        hideIfUnauthorized: true,
+      }}
+    />
   );
 };
 ```
diff --git a/documentation/docs/ui-integrations/ant-design/components/buttons/delete-button/index.md b/documentation/docs/ui-integrations/ant-design/components/buttons/delete-button/index.md
index dec9b7086f6e..f3a131a1642c 100644
--- a/documentation/docs/ui-integrations/ant-design/components/buttons/delete-button/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/buttons/delete-button/index.md
@@ -15,7 +15,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ## Usage
 
-```tsx live
+```tsx live previewHeight=360px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   List,
@@ -25,7 +27,7 @@ import {
 } from "@refinedev/antd";
 import { Table } from "antd";
 
-const PostList: React.FC = () => {
+const PostList = () => {
   const { tableProps } = useTable<IPost>();
 
   return (
@@ -55,14 +57,29 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -72,12 +89,13 @@ render(
 
 `recordItemId` allows us to manage which record will be deleted. By default, the `recordItemId` is inferred from the route params.
 
-```tsx live disableScroll previewHeight=150px disableScroll
-const { useRouterContext } = RefineCore;
+```tsx live disableScroll previewHeight=120px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { DeleteButton } from "@refinedev/antd";
 
-const MyEditComponent = () => {
+const MyDeleteComponent = () => {
   return (
     <DeleteButton
       resource="posts"
@@ -90,18 +108,29 @@ const MyEditComponent = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => {
-          return <RefineAntd.List>List page here...</RefineAntd.List>;
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
         },
-      },
-    ]}
-    DashboardPage={MyEditComponent}
-  />,
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyDeleteComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -111,8 +140,8 @@ Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete)
 
 `resource` allows us to manage which resource's record is going to be deleted. By default, the `resource` is inferred from the route params.
 
-```tsx live disableScroll previewHeight=150px disableScroll
-const { useRouterContext } = RefineCore;
+```tsx live disableScroll previewHeight=120px
+setInitialRoutes(["/categories"]);
 
 // visible-block-start
 import { DeleteButton } from "@refinedev/antd";
@@ -124,28 +153,28 @@ const MyDeleteComponent = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => {
-          return <RefineAntd.List>List page here...</RefineAntd.List>;
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
         },
-      },
-      {
-        name: "categories",
-        list: () => {
-          return <RefineAntd.List>List page here...</RefineAntd.List>;
+        {
+          name: "categories",
+          list: "/categories",
         },
-      },
-    ]}
-    DashboardPage={MyDeleteComponent}
-  />,
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/categories" element={<MyDeleteComponent />} />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete) method and then the record whose resource is "categories" and whose id is "2" will be deleted.
+Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete) method and then the record whose resource is "categories" and whose id is "123" will be deleted.
 
 If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
 
@@ -157,10 +186,8 @@ If you have multiple resources with the same name, you can pass the `identifier`
 
 For example, let's `console.log` after deletion:
 
-```tsx live url=http://localhost:3000 previewHeight=150px disableScroll
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
+```tsx live disableScroll previewHeight=120px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { DeleteButton } from "@refinedev/antd";
@@ -168,7 +195,7 @@ import { DeleteButton } from "@refinedev/antd";
 const MyDeleteComponent = () => {
   return (
     <DeleteButton
-      resourceNameOrRouteName="posts"
+      resource="posts"
       recordItemId="1"
       onSuccess={(value) => {
         console.log(value);
@@ -195,15 +222,30 @@ const App = () => {
   };
 
   return (
-    <RefineAntdDemo
-      dataProvider={customDataProvider}
-      resources={[
-        {
-          name: "posts",
-          list: MyDeleteComponent,
-        },
-      ]}
-    />
+    <ReactRouter.BrowserRouter>
+      <RefineAntdDemo
+        dataProvider={customDataProvider}
+        resources={[
+          {
+            name: "posts",
+            list: "/posts",
+          },
+        ]}
+      >
+        <ReactRouter.Routes>
+          <ReactRouter.Route
+            path="/posts"
+            element={
+              <div style={{ padding: 16 }}>
+                <ReactRouter.Outlet />
+              </div>
+            }
+          >
+            <ReactRouter.Route index element={<MyDeleteComponent />} />
+          </ReactRouter.Route>
+        </ReactRouter.Routes>
+      </RefineAntdDemo>
+    </ReactRouter.BrowserRouter>
   );
 };
 
@@ -216,11 +258,14 @@ Determines which mode mutation will have while executing `<DeleteButton>`.
 
 > For more information, refer to the [mutation mode documentation &#8594](/advanced-tutorials/mutation-mode.md)
 
-```tsx
+```tsx live disableScroll previewHeight=360px
+setInitialRoutes(["/posts"]);
+
+// visible-block-start
 import { List, DeleteButton, useTable } from "@refinedev/antd";
 import { Table } from "antd";
 
-export const PostList: React.FC = () => {
+const PostList = () => {
   const { tableProps } = useTable<IPost>();
 
   return (
@@ -244,14 +289,46 @@ export const PostList: React.FC = () => {
     </List>
   );
 };
+
+interface IPost {
+  id: number;
+  title: string;
+}
+// visible-block-end
+
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
 
 ### hideText
 
 It is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
-```tsx live disableScroll previewHeight=150px disableScroll
-const { useRouterContext } = RefineCore;
+```tsx live disableScroll previewHeight=120px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { DeleteButton } from "@refinedev/antd";
@@ -259,9 +336,9 @@ import { DeleteButton } from "@refinedev/antd";
 const MyDeleteComponent = () => {
   return (
     <DeleteButton
-      recordItemId="123"
       // highlight-next-line
       hideText={true}
+      recordItemId="123"
     />
   );
 };
@@ -269,15 +346,29 @@ const MyDeleteComponent = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MyDeleteComponent,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyDeleteComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -290,7 +381,12 @@ import { DeleteButton } from "@refinedev/antd";
 
 export const MyListComponent = () => {
   return (
-    <DeleteButton accessControl={{ enabled: true, hideIfUnauthorized: true }} />
+    <DeleteButton
+      accessControl={{
+        enabled: true,
+        hideIfUnauthorized: true,
+      }}
+    />
   );
 };
 ```
@@ -299,44 +395,6 @@ export const MyListComponent = () => {
 
 Use `resource` prop instead.
 
-## How to override confirm texts?
-
-You can change the text that appears when you confirm a transaction with the `confirmTitle` prop, as well as what the 'ok' and 'cancel' buttons' text look like with the `confirmOkText` and `confirmCancelText` props.
-
-```tsx live disableScroll previewHeight=150px disableScroll
-const { useRouterContext } = RefineCore;
-
-// visible-block-start
-import { DeleteButton } from "@refinedev/antd";
-
-const MyDeleteComponent = () => {
-  return (
-    <DeleteButton
-      recordItemId="123"
-      // highlight-start
-      confirmTitle="Title"
-      confirmOkText="Ok Text"
-      confirmCancelText="Delete Text"
-      // highlight-end
-    />
-  );
-};
-
-// visible-block-end
-
-render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MyDeleteComponent,
-      },
-    ]}
-  />,
-);
-```
-
 ## API Reference
 
 ### Properties
diff --git a/documentation/docs/ui-integrations/ant-design/components/buttons/edit-button/index.md b/documentation/docs/ui-integrations/ant-design/components/buttons/edit-button/index.md
index 281e66e712f8..8827747cbc11 100644
--- a/documentation/docs/ui-integrations/ant-design/components/buttons/edit-button/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/buttons/edit-button/index.md
@@ -15,8 +15,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ## Usage
 
-```tsx live previewHeight=300px
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=360px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   List,
@@ -55,20 +56,36 @@ interface IPost {
 // visible-block-end
 
 const PostEdit = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/:id/edit",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+          <ReactRouter.Route path=":id/edit" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -78,8 +95,9 @@ render(
 
 `recordItemId` is used to append the record id to the end of the route path. By default, the `recordItemId` is inferred from the route params.
 
-```tsx live disableScroll previewHeight=150px disableScroll
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { EditButton } from "@refinedev/antd";
 
@@ -95,22 +113,37 @@ const MyEditComponent = () => {
 
 // visible-block-end
 
+const PostEdit = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
+};
+
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => {
-          return <RefineAntd.List>List page here...</RefineAntd.List>;
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/:id/edit",
         },
-        edit: () => {
-          return <RefineAntd.Edit>Edit page here...</RefineAntd.Edit>;
-        },
-      },
-    ]}
-    DashboardPage={MyEditComponent}
-  />,
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyEditComponent />} />
+          <ReactRouter.Route path=":id/edit" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -120,8 +153,8 @@ Clicking the button will trigger the `edit` method of [`useNavigation`](/docs/ro
 
 The redirection endpoint is defined by the `resource` property and its `edit` action path. By default, `<EditButton>` uses the inferred resource from the route.
 
-```tsx live disableScroll previewHeight=150px disableScroll
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/categories"]);
 
 // visible-block-start
 import { EditButton } from "@refinedev/antd";
@@ -138,31 +171,42 @@ const MyEditComponent = () => {
 
 // visible-block-end
 
+const CategoryEdit = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
+};
+
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => {
-          return <RefineAntd.List>List page here...</RefineAntd.List>;
-        },
-        edit: () => {
-          return <RefineAntd.Edit>Edit page here...</RefineAntd.Edit>;
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/:id/edit",
         },
-      },
-      {
-        name: "categories",
-        list: () => {
-          return <RefineAntd.List>List page here...</RefineAntd.List>;
+        {
+          name: "categories",
+          list: "/categories",
+          edit: "/categories/:id/edit",
         },
-        edit: () => {
-          return <RefineAntd.Edit>Edit page here...</RefineAntd.Edit>;
-        },
-      },
-    ]}
-    DashboardPage={MyEditComponent}
-  />,
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/categories"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyEditComponent />} />
+          <ReactRouter.Route path=":id/edit" element={<CategoryEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -188,8 +232,8 @@ const MyComponent = () => {
 
 It is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
-```tsx live disableScroll previewHeight=150px disableScroll
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { EditButton } from "@refinedev/antd";
@@ -197,28 +241,46 @@ import { EditButton } from "@refinedev/antd";
 const MyEditComponent = () => {
   return (
     <EditButton
-      recordItemId="123"
       // highlight-next-line
       hideText={true}
+      recordItemId="123"
     />
   );
 };
 
 // visible-block-end
 
+const PostEdit = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
+};
+
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MyEditComponent,
-        edit: () => {
-          return <RefineAntd.Edit>Edit page here...</RefineAntd.Edit>;
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/:id/edit",
         },
-      },
-    ]}
-  />,
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyEditComponent />} />
+          <ReactRouter.Route path=":id/edit" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -232,12 +294,10 @@ import { EditButton } from "@refinedev/antd";
 export const MyListComponent = () => {
   return (
     <EditButton
-      // highlight-start
       accessControl={{
         enabled: true,
         hideIfUnauthorized: true,
       }}
-      // highlight-end
     />
   );
 };
diff --git a/documentation/docs/ui-integrations/ant-design/components/buttons/export-button/index.md b/documentation/docs/ui-integrations/ant-design/components/buttons/export-button/index.md
index e43eacec8978..7ebe37ccaf2c 100644
--- a/documentation/docs/ui-integrations/ant-design/components/buttons/export-button/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/buttons/export-button/index.md
@@ -19,7 +19,9 @@ You can use it like any other Ant Design [`<Button>`][button].
 
 For example, you can use it with [useExport][useexport]:
 
-```tsx live
+```tsx live previewHeight=360px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { useExport } from "@refinedev/core";
 import {
@@ -58,14 +60,29 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -75,8 +92,8 @@ render(
 
 `hideText` is used to hide the text of the button. When its `true`, only the button icon will be visible.
 
-```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { ExportButton } from "@refinedev/antd";
@@ -93,15 +110,29 @@ const MyExportComponent = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MyExportComponent,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyExportComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/buttons/import-button/index.md b/documentation/docs/ui-integrations/ant-design/components/buttons/import-button/index.md
index 5d796d2cd9dc..715dc3848b96 100644
--- a/documentation/docs/ui-integrations/ant-design/components/buttons/import-button/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/buttons/import-button/index.md
@@ -15,7 +15,10 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ## Usage
 
-```tsx live
+```tsx live previewHeight=360px
+setInitialRoutes(["/posts"]);
+
+// visible-block-start
 import {
   List,
   useTable,
@@ -59,14 +62,29 @@ interface IPostFile {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -76,8 +94,8 @@ render(
 
 `hideText` is used to hide the text of the button. When its `true`, only the button icon will be visible.
 
-```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { ImportButton, useImport } from "@refinedev/antd";
@@ -97,15 +115,29 @@ const MyImportComponent = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MyImportComponent,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyImportComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/buttons/list-button/index.md b/documentation/docs/ui-integrations/ant-design/components/buttons/list-button/index.md
index ca5b44faf36d..802021e7dcd3 100644
--- a/documentation/docs/ui-integrations/ant-design/components/buttons/list-button/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/buttons/list-button/index.md
@@ -15,7 +15,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ## Usage
 
-```tsx live url=http://localhost:3000/posts/show/123
+```tsx live previewHeight=360px
+setInitialRoutes(["/posts/show/123"]);
+
 // visible-block-start
 import { useShow } from "@refinedev/core";
 import {
@@ -51,22 +53,34 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/show/123"]}
-    resources={[
-      {
-        name: "posts",
-        show: PostShow,
-        list: () => {
-          return (
-            <RefineAntd.List>
-              <p>Your list page here</p>
-            </RefineAntd.List>
-          );
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
         },
-      },
-    ]}
-  />,
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={<div>Your list page here...</div>}
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -78,8 +92,8 @@ The button text is defined automatically by Refine based on the `resource` defin
 
 The redirection endpoint is defined by the `resource`'s `list` action path. By default, `<ListButton>` uses the inferred resource from the route.
 
-```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/"]);
 
 // visible-block-start
 import { ListButton } from "@refinedev/antd";
@@ -91,25 +105,33 @@ const MyListComponent = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-      },
-      {
-        name: "categories",
-        list: () => {
-          return (
-            <RefineAntd.List>
-              <p>Your list page here</p>
-            </RefineAntd.List>
-          );
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "categories",
+          list: "/categories",
         },
-      },
-    ]}
-    DashboardPage={MyListComponent}
-  />,
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyListComponent />} />
+          <ReactRouter.Route
+            path="/categories"
+            element={<div>Your list page here...</div>}
+          />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -135,13 +157,16 @@ const MyComponent = () => {
 
 `hideText` is used to hide the text of the button. When its `true`, only the button icon will be visible.
 
-```tsx live disableScroll previewHeight=120px
+```tsx live previewHeight=120px
+setInitialRoutes(["/"]);
+
 // visible-block-start
 import { ListButton } from "@refinedev/antd";
 
 const MyListComponent = () => {
   return (
     <ListButton
+      resource="posts"
       // highlight-next-line
       hideText={true}
     />
@@ -151,22 +176,33 @@ const MyListComponent = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => {
-          return (
-            <RefineAntd.List>
-              <p>Your list page here</p>
-            </RefineAntd.List>
-          );
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
         },
-      },
-    ]}
-    DashboardPage={MyListComponent}
-  />,
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyListComponent />} />
+          <ReactRouter.Route
+            path="/posts"
+            element={<div>Your list page here...</div>}
+          />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -179,7 +215,12 @@ import { ListButton } from "@refinedev/antd";
 
 export const MyListComponent = () => {
   return (
-    <ListButton accessControl={{ enabled: true, hideIfUnauthorized: true }} />
+    <ListButton
+      accessControl={{
+        enabled: true,
+        hideIfUnauthorized: true,
+      }}
+    />
   );
 };
 ```
diff --git a/documentation/docs/ui-integrations/ant-design/components/buttons/refresh-button/index.md b/documentation/docs/ui-integrations/ant-design/components/buttons/refresh-button/index.md
index 0effed58ae1d..43c6c4e36acc 100644
--- a/documentation/docs/ui-integrations/ant-design/components/buttons/refresh-button/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/buttons/refresh-button/index.md
@@ -13,7 +13,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ## Usage
 
-```tsx live
+```tsx live previewHeight=360px
+setInitialRoutes(["/posts/show/123"]);
+
 // visible-block-start
 import { useShow } from "@refinedev/core";
 import {
@@ -52,22 +54,31 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/show/123"]}
-    resources={[
-      {
-        name: "posts",
-        show: PostShow,
-        list: () => {
-          return (
-            <RefineAntd.List>
-              <p>Your list page here</p>
-            </RefineAntd.List>
-          );
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
         },
-      },
-    ]}
-  />,
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<div>List page here...</div>} />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -77,7 +88,9 @@ render(
 
 `recordItemId` allows us to manage which data is going to be refreshed. By default, the `recordItemId` is inferred from the route params.
 
-```tsx live disableScroll previewHeight=120px
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { RefreshButton } from "@refinedev/antd";
 
@@ -86,32 +99,48 @@ const MyRefreshComponent = () => {
     <RefreshButton
       resource="posts"
       // highlight-next-line
-      recordItemId="1"
+      recordItemId="123"
     />
   );
 };
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-      },
-    ]}
-    DashboardPage={MyRefreshComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyRefreshComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-Clicking the button will trigger the [`useInvalidate`][use-invalidate] hook and then fetch the record whose resource is "post" and whose id is "1".
+Clicking the button will trigger the [`useInvalidate`][use-invalidate] hook and then fetch the record whose resource is "post" and whose id is "123".
 
 ### resource
 
 `resource` allows us to manage which resource is going to be refreshed. By default, the `resource` is inferred from the route params.
 
-```tsx live disableScroll previewHeight=120px
+```tsx live previewHeight=120px
+setInitialRoutes(["/categories"]);
+
 // visible-block-start
 import { RefreshButton } from "@refinedev/antd";
 
@@ -121,25 +150,38 @@ const MyRefreshComponent = () => {
       // highlight-next-line
       resource="categories"
       // highlight-next-line
-      recordItemId="2"
+      recordItemId="123"
     />
   );
 };
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-      },
-      {
-        name: "categories",
-      },
-    ]}
-    DashboardPage={MyRefreshComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+        {
+          name: "categories",
+          list: "/categories",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/categories"
+          element={
+            <div style={{ padding: "16px" }}>
+              <MyRefreshComponent />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -153,7 +195,9 @@ If you have multiple resources with the same name, you can pass the `identifier`
 
 `hideText` is used to hide the text of the button. When its `true`, only the button icon will be visible.
 
-```tsx live disableScroll previewHeight=120px
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { RefreshButton } from "@refinedev/antd";
 
@@ -168,15 +212,29 @@ const MyRefreshComponent = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-      },
-    ]}
-    DashboardPage={MyRefreshComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyRefreshComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/buttons/save-button/index.md b/documentation/docs/ui-integrations/ant-design/components/buttons/save-button/index.md
index 60cd1b38f20d..96f9ddbf4995 100644
--- a/documentation/docs/ui-integrations/ant-design/components/buttons/save-button/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/buttons/save-button/index.md
@@ -15,7 +15,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's add logic to the `<SaveButton>` component with the `saveButtonProps` returned by the [`useForm`](/docs/ui-integrations/ant-design/hooks/use-form) hook:
 
-```tsx live url=http://localhost:3000/posts/edit/123
+```tsx live previewHeight=360px
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import { Edit, useForm } from "@refinedev/antd";
 import { Form, Input } from "antd";
@@ -51,22 +53,31 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        edit: PostEdit,
-        list: () => {
-          return (
-            <RefineAntd.List>
-              <p>Your list page here</p>
-            </RefineAntd.List>
-          );
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
-      },
-    ]}
-  />,
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<div>List page here...</div>} />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -78,7 +89,9 @@ The [`useForm`](/docs/ui-integrations/ant-design/hooks/use-form) hook exposes `s
 
 `hideText` is used to hide the text of the button. When its `true`, only the button icon will be visible.
 
-```tsx live disableScroll previewHeight=120px
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { SaveButton } from "@refinedev/antd";
 
@@ -93,15 +106,29 @@ const MySaveComponent = () => {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MySaveComponent,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MySaveComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/buttons/show-button/index.md b/documentation/docs/ui-integrations/ant-design/components/buttons/show-button/index.md
index 7dc4d99aa59d..613838680956 100644
--- a/documentation/docs/ui-integrations/ant-design/components/buttons/show-button/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/buttons/show-button/index.md
@@ -15,8 +15,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ## Usage
 
-```tsx live previewHeight=300px
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=360px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   List,
@@ -55,20 +56,36 @@ interface IPost {
 // visible-block-end
 
 const PostShow = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -78,8 +95,9 @@ render(
 
 `recordItemId` is used to append the record id to the end of the route path. By default, the `recordItemId` is inferred from the route params.
 
-```tsx live disableScroll previewHeight=150px disableScroll
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { ShowButton } from "@refinedev/antd";
 
@@ -95,22 +113,37 @@ const MyShowComponent = () => {
 
 // visible-block-end
 
+const PostShow = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
+};
+
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => {
-          return <RefineAntd.List>List page here...</RefineAntd.List>;
-        },
-        show: () => {
-          return <RefineAntd.Show>Show page here...</RefineAntd.Show>;
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
         },
-      },
-    ]}
-    DashboardPage={MyShowComponent}
-  />,
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyShowComponent />} />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -120,8 +153,8 @@ Clicking the button will trigger the `show` method of [`useNavigation`](/docs/ro
 
 The redirection endpoint is defined by the `resource`'s `show` action path. By default, `<ShowButton>` uses the inferred resource from the route.
 
-```tsx live disableScroll previewHeight=150px disableScroll
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/categories"]);
 
 // visible-block-start
 import { ShowButton } from "@refinedev/antd";
@@ -138,31 +171,45 @@ const MyShowComponent = () => {
 
 // visible-block-end
 
+const CategoryShow = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
+};
+
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => {
-          return <RefineAntd.List>List page here...</RefineAntd.List>;
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
         },
-        show: () => {
-          return <RefineAntd.Show>Show page here...</RefineAntd.Show>;
+        {
+          name: "categories",
+          list: "/categories",
+          show: "/categories/show/:id",
         },
-      },
-      {
-        name: "categories",
-        list: () => {
-          return <RefineAntd.List>List page here...</RefineAntd.List>;
-        },
-        show: () => {
-          return <RefineAntd.Show>Show page here...</RefineAntd.Show>;
-        },
-      },
-    ]}
-    DashboardPage={MyShowComponent}
-  />,
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/categories"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyShowComponent />} />
+          <ReactRouter.Route
+            path="/categories/show/:id"
+            element={<CategoryShow />}
+          />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -188,8 +235,8 @@ const MyComponent = () => {
 
 `hideText` is used to hide the text of the button. When its `true`, only the button icon will be visible.
 
-```tsx live disableScroll previewHeight=150px disableScroll
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { ShowButton } from "@refinedev/antd";
@@ -197,28 +244,47 @@ import { ShowButton } from "@refinedev/antd";
 const MyShowComponent = () => {
   return (
     <ShowButton
-      recordItemId="123"
       // highlight-next-line
       hideText={true}
+      resource="posts"
+      recordItemId="123"
     />
   );
 };
 
 // visible-block-end
 
+const PostShow = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
+};
+
 render(
-  <RefineAntdDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MyShowComponent,
-        show: () => {
-          return <RefineAntd.Show>Show page here...</RefineAntd.Show>;
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
         },
-      },
-    ]}
-  />,
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyShowComponent />} />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -232,12 +298,10 @@ import { ShowButton } from "@refinedev/antd";
 export const MyListComponent = () => {
   return (
     <ShowButton
-      // highlight-start
       accessControl={{
         enabled: true,
         hideIfUnauthorized: true,
       }}
-      // highlight-end
     />
   );
 };
@@ -255,6 +319,6 @@ Use `resource` prop instead.
 
 :::simple External Props
 
-`<ShowButton>` also accepts all props of Ant Design's [Button](https://ant.design/components/button/#API) component.
+It also accepts all props of Ant Design [Button](https://ant.design/components/button/#API).
 
 :::
diff --git a/documentation/docs/ui-integrations/ant-design/components/fields/boolean-field/index.md b/documentation/docs/ui-integrations/ant-design/components/fields/boolean-field/index.md
index b0fff496c28b..9d59442d66b0 100644
--- a/documentation/docs/ui-integrations/ant-design/components/fields/boolean-field/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/fields/boolean-field/index.md
@@ -15,14 +15,15 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use `<BooleanField>` with the example in the post list:
 
-```tsx live
+```tsx live previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   List,
   useTable,
-  // highlight-start
+  // highlight-next-line
   BooleanField,
-  // highlight-end
 } from "@refinedev/antd";
 import { Table } from "antd";
 
@@ -30,14 +31,13 @@ const PostList: React.FC = () => {
   const { tableProps } = useTable<IPost>();
 
   const TrueIcon = () => <span>✅</span>;
-
   const FalseIcon = () => <span>❌</span>;
 
   return (
     <List>
       <Table {...tableProps} rowKey="id">
         <Table.Column dataIndex="id" title="ID" />
-        <Table.Column dataIndex="title" title="Title" width="50%" />
+        <Table.Column dataIndex="title" title="Title" />
         <Table.Column
           dataIndex="status"
           title="Published"
@@ -52,7 +52,6 @@ const PostList: React.FC = () => {
             />
             // highlight-end
           )}
-          width="50%"
         />
       </Table>
     </List>
@@ -67,14 +66,27 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <PostList />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/fields/date-field/index.md b/documentation/docs/ui-integrations/ant-design/components/fields/date-field/index.md
index 216ee5f79fac..9684e4d57c3f 100644
--- a/documentation/docs/ui-integrations/ant-design/components/fields/date-field/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/fields/date-field/index.md
@@ -15,15 +15,11 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use `<DateField>` with the example in the post list:
 
-```tsx live url=http://localhost:3000/posts previewHeight=340px
+```tsx live previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
-import {
-  List,
-  useTable,
-  // highlight-start
-  DateField,
-  // highlight-end
-} from "@refinedev/antd";
+import { List, useTable, DateField } from "@refinedev/antd";
 import { Table } from "antd";
 
 const PostList: React.FC = () => {
@@ -33,16 +29,12 @@ const PostList: React.FC = () => {
     <List>
       <Table {...tableProps} rowKey="id">
         <Table.Column dataIndex="id" title="ID" />
-        <Table.Column dataIndex="title" title="Title" width="50%" />
+        <Table.Column dataIndex="title" title="Title" />
         <Table.Column
           dataIndex="createdAt"
           title="Created At"
-          render={(value) => (
-            // highlight-start
-            <DateField value={value} />
-            // highlight-end
-          )}
-          width="50%"
+          // highlight-next-line
+          render={(value) => <DateField value={value} />}
         />
       </Table>
     </List>
@@ -57,14 +49,27 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <PostList />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/fields/email-field/index.md b/documentation/docs/ui-integrations/ant-design/components/fields/email-field/index.md
index 18ecd5456a18..f233b342571e 100644
--- a/documentation/docs/ui-integrations/ant-design/components/fields/email-field/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/fields/email-field/index.md
@@ -15,7 +15,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use `<EmailField>` with the example in the user list:
 
-```tsx live
+```tsx live previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/users"]);
+
 // visible-block-start
 import {
   List,
@@ -39,7 +41,6 @@ const UserList: React.FC = () => {
           render={(value: string) => <EmailField value={value} />}
           width="100%"
         />
-        ...
       </Table>
     </List>
   );
@@ -52,14 +53,27 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "users",
-        list: UserList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "users",
+          list: "/users",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/users"
+          element={
+            <div style={{ padding: 16 }}>
+              <UserList />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/fields/file-field/index.md b/documentation/docs/ui-integrations/ant-design/components/fields/file-field/index.md
index bbf8e83d47db..e47ae89f39b1 100644
--- a/documentation/docs/ui-integrations/ant-design/components/fields/file-field/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/fields/file-field/index.md
@@ -15,7 +15,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use `<FileField>` with the example in the edit page:
 
-```tsx live
+```tsx live previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   List,
@@ -32,7 +34,7 @@ const PostList: React.FC = () => {
     <List>
       <Table {...tableProps} rowKey="id">
         <Table.Column dataIndex="id" title="ID" />
-        <Table.Column dataIndex="title" title="Title" width="50%" />
+        <Table.Column dataIndex="title" title="Title" />
         <Table.Column<IPost>
           title="Image"
           dataIndex="image"
@@ -40,7 +42,6 @@ const PostList: React.FC = () => {
             // highlight-next-line
             <FileField src={record.image[0].url} />
           )}
-          width="50%"
         />
       </Table>
     </List>
@@ -59,14 +60,27 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <PostList />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/fields/image-field/index.md b/documentation/docs/ui-integrations/ant-design/components/fields/image-field/index.md
index 1a03e18d1ef6..b85bc440399c 100644
--- a/documentation/docs/ui-integrations/ant-design/components/fields/image-field/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/fields/image-field/index.md
@@ -15,7 +15,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use `<ImageField>` with the example in the edit page:
 
-```tsx live
+```tsx live previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   List,
@@ -32,7 +34,7 @@ const PostList: React.FC = () => {
     <List>
       <Table {...tableProps} rowKey="id">
         <Table.Column dataIndex="id" title="ID" />
-        <Table.Column dataIndex="title" title="Title" width="50%" />
+        <Table.Column dataIndex="title" title="Title" />
         <Table.Column<IPost>
           title="Image"
           dataIndex="image"
@@ -58,21 +60,33 @@ interface IPost {
   image: [
     {
       url: string;
-      name: string;
     },
   ];
 }
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <PostList />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/fields/markdown-field/index.md b/documentation/docs/ui-integrations/ant-design/components/fields/markdown-field/index.md
index 2c9101305b81..536c984ebedd 100644
--- a/documentation/docs/ui-integrations/ant-design/components/fields/markdown-field/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/fields/markdown-field/index.md
@@ -15,7 +15,10 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use `<MarkdownField>` in a show page:
 
-```tsx live
+```tsx live previewHeight=280px url=http://localhost:3000/samples/show/123
+setInitialRoutes(["/samples", "/samples/show/123"]);
+
+// visible-block-start
 import { useShow } from "@refinedev/core";
 import {
   Show,
@@ -46,29 +49,46 @@ const SampleShow: React.FC = () => {
 
 interface IPost {
   id: number;
-  title: string;
   content: string;
 }
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    initialRoutes={["/samples", "/samples/show/123"]}
-    resources={[
-      {
-        name: "samples",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineAntd.ShowButton recordItemId="123">
-              Show Item 123
-            </RefineAntd.ShowButton>
-          </div>
-        ),
-        show: SampleShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "samples",
+          list: "/samples",
+          show: "/samples/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/samples"
+          element={
+            <div style={{ padding: 16 }}>
+              <div>
+                <p>This page is empty.</p>
+                <RefineAntd.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineAntd.ShowButton>
+              </div>
+            </div>
+          }
+        />
+        <ReactRouter.Route
+          path="/samples/show/:id"
+          element={
+            <div style={{ padding: 16 }}>
+              <SampleShow />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/fields/number-field/index.md b/documentation/docs/ui-integrations/ant-design/components/fields/number-field/index.md
index 0a4431586d1f..c0a206e3b735 100644
--- a/documentation/docs/ui-integrations/ant-design/components/fields/number-field/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/fields/number-field/index.md
@@ -17,7 +17,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 If Intl is not available, `<NumberField>` outputs numbers as is (and ignores the locales and options props).
 
-```tsx live
+```tsx live previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   List,
@@ -34,7 +36,7 @@ const PostList: React.FC = () => {
     <List>
       <Table {...tableProps} rowKey="id">
         <Table.Column dataIndex="id" title="ID" />
-        <Table.Column dataIndex="title" title="Title" width="50%" />
+        <Table.Column dataIndex="title" title="Title" />
         <Table.Column<IPost>
           key="hit"
           title="Hit"
@@ -49,7 +51,6 @@ const PostList: React.FC = () => {
             />
             // highlight-end
           )}
-          width="50%"
         />
       </Table>
     </List>
@@ -64,14 +65,27 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <PostList />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/fields/tag-field/index.md b/documentation/docs/ui-integrations/ant-design/components/fields/tag-field/index.md
index b656c29079a7..ddf46d82d99d 100644
--- a/documentation/docs/ui-integrations/ant-design/components/fields/tag-field/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/fields/tag-field/index.md
@@ -15,14 +15,11 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use it in a basic list page:
 
-```tsx live
+```tsx live previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
-import {
-  List,
-  // highlight-next-line
-  TagField,
-  useTable,
-} from "@refinedev/antd";
+import { List, TagField, useTable } from "@refinedev/antd";
 import { Table } from "antd";
 
 const PostList: React.FC = () => {
@@ -31,13 +28,11 @@ const PostList: React.FC = () => {
   return (
     <List>
       <Table {...tableProps} rowKey="id">
-        <Table.Column dataIndex="title" title="Sitle" width="50%" />
+        <Table.Column dataIndex="title" title="Title" />
         <Table.Column
           dataIndex="status"
           title="Status"
-          // highlight-next-line
           render={(value: string) => <TagField value={value} />}
-          width="50%"
         />
       </Table>
     </List>
@@ -52,14 +47,27 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <PostList />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/fields/text-field/index.md b/documentation/docs/ui-integrations/ant-design/components/fields/text-field/index.md
index 27ec4902858b..5fb465aa0106 100644
--- a/documentation/docs/ui-integrations/ant-design/components/fields/text-field/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/fields/text-field/index.md
@@ -15,7 +15,9 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how to use it in a basic list page:
 
-```tsx live
+```tsx live previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { useMany } from "@refinedev/core";
 import {
@@ -26,7 +28,7 @@ import {
 } from "@refinedev/antd";
 import { Table } from "antd";
 
-const PostList: React.FC = (props) => {
+const PostList: React.FC = () => {
   const { tableProps } = useTable<IPost>();
 
   const categoryIds =
@@ -41,12 +43,12 @@ const PostList: React.FC = (props) => {
   });
 
   return (
-    <List {...props}>
+    <List>
       <Table {...tableProps} rowKey="id">
-        <Table.Column dataIndex="title" title="title" width="50%" />
+        <Table.Column dataIndex="title" title="Title" />
         <Table.Column
           dataIndex={["category", "id"]}
-          title="category"
+          title="Category"
           render={(value: number) => {
             // highlight-start
             if (isLoading) {
@@ -63,7 +65,6 @@ const PostList: React.FC = (props) => {
             );
             // highlight-end
           }}
-          width="50%"
         />
       </Table>
     </List>
@@ -83,14 +84,27 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <PostList />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/ant-design/components/fields/url-field/index.md b/documentation/docs/ui-integrations/ant-design/components/fields/url-field/index.md
index 23145050b8b0..ab88f2f3b2fb 100644
--- a/documentation/docs/ui-integrations/ant-design/components/fields/url-field/index.md
+++ b/documentation/docs/ui-integrations/ant-design/components/fields/url-field/index.md
@@ -15,13 +15,10 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use `<UrlField>` with an example:
 
-```tsx live
-import {
-  List,
-  useTable,
-  // highlight-next-line
-  UrlField,
-} from "@refinedev/antd";
+```tsx live previewHeight=280px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
+import { List, UrlField, useTable } from "@refinedev/antd";
 import { Table } from "antd";
 
 const PostList: React.FC = () => {
@@ -30,14 +27,12 @@ const PostList: React.FC = () => {
   return (
     <List>
       <Table {...tableProps} rowKey="id">
-        <Table.Column dataIndex="title" title="Title" key="title" width="50%" />
+        <Table.Column dataIndex="title" title="Title" />
         <Table.Column
           dataIndex={["image", "0", "url"]}
-          title={"Image"}
-          key="image"
+          title="Image"
           // highlight-next-line
           render={(value: string) => <UrlField value={value} />}
-          width="50%"
         />
       </Table>
     </List>
@@ -53,17 +48,29 @@ interface IPost {
 interface IImage {
   url: string;
 }
-// visible-block-end
 
 render(
-  <RefineAntdDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineAntdDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <PostList />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineAntdDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/create/index.md b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/create/index.md
index 2e085f4a02b6..41f8fcc49bc4 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/create/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/create/index.md
@@ -3,58 +3,19 @@ title: Create
 swizzle: true
 ---
 
-```tsx live shared
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-
-const DummyListPage = () => (
-  <ChakraUI.VStack alignItems="flex-start">
-    <ChakraUI.Text>This page is empty.</ChakraUI.Text>
-    <CreateButton colorScheme="black" />
-  </ChakraUI.VStack>
-);
-
-interface ICategory {
-  id: number;
-  title: string;
-}
-
-interface IPost {
-  id: number;
-  title: string;
-  content: string;
-  status: "published" | "draft" | "rejected";
-  category: { id: number };
-}
-```
-
 `<Create>` provides us a layout to display the page. It does not contain any logic and just adds extra functionalities like action buttons and being able to give titles to the page.
 
 We will show what `<Create>` does using properties with examples.
 
-```tsx live url=http://localhost:3000/posts/create previewHeight=420px hideCode
+```tsx live previewHeight=420px hideCode url=http://localhost:3000/posts/create
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/chakra-ui";
 
 // visible-block-start
 import { Create } from "@refinedev/chakra-ui";
 import {
   FormControl,
-  FormErrorMessage,
   FormLabel,
+  FormErrorMessage,
   Input,
   Select,
 } from "@chakra-ui/react";
@@ -67,7 +28,7 @@ const PostCreate: React.FC = () => {
     saveButtonProps,
     register,
     formState: { errors },
-  } = useForm<IPost>();
+  } = useForm();
 
   const { options } = useSelect({
     resource: "categories",
@@ -82,7 +43,7 @@ const PostCreate: React.FC = () => {
           type="text"
           {...register("title", { required: "Title is required" })}
         />
-        <FormErrorMessage>{`${errors.title?.message}`}</FormErrorMessage>
+        <FormErrorMessage>{`${errors?.title?.message}`}</FormErrorMessage>
       </FormControl>
       <FormControl mb="3" isInvalid={!!errors?.status}>
         <FormLabel>Status</FormLabel>
@@ -97,14 +58,14 @@ const PostCreate: React.FC = () => {
           <option>draft</option>
           <option>rejected</option>
         </Select>
-        <FormErrorMessage>{`${errors.status?.message}`}</FormErrorMessage>
+        <FormErrorMessage>{`${errors?.status?.message}`}</FormErrorMessage>
       </FormControl>
-      <FormControl mb="3" isInvalid={!!errors?.categoryId}>
+      <FormControl mb="3" isInvalid={!!errors?.category}>
         <FormLabel>Category</FormLabel>
         <Select
           id="categoryId"
           placeholder="Select Category"
-          {...register("categoryId", {
+          {...register("category.id", {
             required: "Category is required",
           })}
         >
@@ -114,30 +75,38 @@ const PostCreate: React.FC = () => {
             </option>
           ))}
         </Select>
-        <FormErrorMessage>{`${errors.categoryId?.message}`}</FormErrorMessage>
+        <FormErrorMessage>{`${errors?.category?.message}`}</FormErrorMessage>
       </FormControl>
     </Create>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: DummyListPage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.CreateButton>Create Post</RefineChakra.CreateButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/create" element={<PostCreate />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -151,12 +120,10 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 ### title
 
-`title` allows the addition of titles inside the `<Create>` component by passing title props. If you don't pass title props, however, it uses the "Create" prefix and the singular resource name by default. For example, for the `/posts/create` resource, it would be "Create post".
+`title` allows you to add a title inside the `<Create>` component. If you don't pass title props, it uses the "Create" prefix and the singular resource name by default. For example, for the "posts" resource, it will be "Create post".
 
-```tsx live url=http://localhost:3000/posts/create previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/chakra-ui";
 
 // visible-block-start
 import { Create } from "@refinedev/chakra-ui";
@@ -172,34 +139,40 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: DummyListPage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.CreateButton>Create Post</RefineChakra.CreateButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/create" element={<PostCreate />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 ### saveButtonProps
 
-`saveButtonProps` can be used to customize the default button of the `<Create>` component that submits the form:
+The `<Create>` component has a save button that submits the form by default. If you want to customize this button you can use the `saveButtonProps` property:
 
-```tsx live url=http://localhost:3000/posts/create previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/chakra-ui";
 
 // visible-block-start
 import { Create } from "@refinedev/chakra-ui";
@@ -214,125 +187,124 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: DummyListPage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.CreateButton>Create Post</RefineChakra.CreateButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/create" element={<PostCreate />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`<SaveButton>` documentation &#8594](/docs/ui-integrations/chakra-ui/components/buttons/save-button)
-
 ### resource
 
 The `<Create>` component reads the `resource` information from the route by default. If you want to use a custom resource for the `<Create>` component, you can use the `resource` prop.
 
-```tsx live url=http://localhost:3000/custom previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom
 setInitialRoutes(["/custom"]);
 
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import { Layout } from "@refinedev/chakra-ui";
 // visible-block-start
 import { Create } from "@refinedev/chakra-ui";
 
 const CustomPage: React.FC = () => {
   return (
     /* highlight-next-line */
-    <Create resource="categories">
+    <Create resource="posts">
       <p>Rest of your page here</p>
     </Create>
   );
 };
 // visible-block-end
 
-const App: React.FC = () => {
-  return (
-    <Refine
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom",
-          },
-        ],
-        // highlight-end
-      }}
-      Layout={Layout}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+        {
+          name: "custom",
+          list: "/custom",
+          create: "/custom/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/custom" element={<CustomPage />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
-
-> For more information, refer to the [`identifier` section of the `<Refine/>` component documentation &#8594](/docs/core/refine-component#identifier)
-
 ### goBack
 
-To customize the back button or to disable it, you can use the `goBack` property. You can pass `false` or `null` to hide the back button.
+To customize the back button or to disable it, you can use the `goBack` property.
 
-```tsx live url=http://localhost:3000/posts/create previewHeight=280px
-setInitialRoutes(["/posts", "/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/chakra-ui";
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
 
 // visible-block-start
 import { Create } from "@refinedev/chakra-ui";
-/* highlight-next-line */
 import { IconMoodSmile } from "@tabler/icons-react";
 
 const PostCreate: React.FC = () => {
   return (
     /* highlight-next-line */
     <Create goBack={<IconMoodSmile />}>
-      <p>Rest of your page here 2</p>
+      <p>Rest of your page here</p>
     </Create>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: DummyListPage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.CreateButton>Create Post</RefineChakra.CreateButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/create" element={<PostCreate />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -340,10 +312,8 @@ render(
 
 To toggle the loading state of the `<Create/>` component, you can use the `isLoading` property.
 
-```tsx live url=http://localhost:3000/posts/create previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/chakra-ui";
 
 // visible-block-start
 import { Create } from "@refinedev/chakra-ui";
@@ -358,34 +328,40 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: DummyListPage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.CreateButton>Create Post</RefineChakra.CreateButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/create" element={<PostCreate />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-### breadcrumb <GlobalConfigBadge id="core/refine-component/#breadcrumb" />
+### breadcrumb
 
 To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/chakra-ui` package.
 
-```tsx live url=http://localhost:3000/posts/create previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/chakra-ui";
 
 // visible-block-start
 import { Create, Breadcrumb } from "@refinedev/chakra-ui";
@@ -408,36 +384,40 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: DummyListPage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.CreateButton>Create Post</RefineChakra.CreateButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/create" element={<PostCreate />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Breadcrumb` documentation &#8594](/docs/ui-integrations/chakra-ui/components/breadcrumb)
-
 ### wrapperProps
 
 If you want to customize the wrapper of the `<Create/>` component, you can use the `wrapperProps` property. For `@refinedev/chakra-ui` wrapper element is `<Card>`s and `wrapperProps` can get every attribute that `<Box>` can get.
 
-```tsx live url=http://localhost:3000/posts/create previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/chakra-ui";
 
 // visible-block-start
 import { Create } from "@refinedev/chakra-ui";
@@ -459,36 +439,40 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: DummyListPage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.CreateButton>Create Post</RefineChakra.CreateButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/create" element={<PostCreate />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
-
 ### headerProps
 
 If you want to customize the header of the `<Create/>` component, you can use the `headerProps` property.
 
-```tsx live url=http://localhost:3000/posts/create previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/chakra-ui";
 
 // visible-block-start
 import { Create } from "@refinedev/chakra-ui";
@@ -510,103 +494,54 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      resources={[
-        {
-          name: "posts",
-          create: PostCreate,
-          list: DummyListPage,
-        },
-      ]}
-    />
-  );
-};
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-```
-
-> For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
-
-### contentProps
-
-If you want to customize the content of the `<Create/>` component, you can use the `contentProps` property.
-
-```tsx live url=http://localhost:3000/posts/create previewHeight=320px
-setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/chakra-ui";
-
-// visible-block-start
-import { Create } from "@refinedev/chakra-ui";
-
-const PostCreate: React.FC = () => {
-  return (
-    <Create
-      // highlight-start
-      contentProps={{
-        borderColor: "blue",
-        borderStyle: "dashed",
-        borderWidth: "2px",
-      }}
-      // highlight-end
-    >
-      <p>Rest of your page here</p>
-    </Create>
-  );
-};
-// visible-block-end
-
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: DummyListPage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.CreateButton>Create Post</RefineChakra.CreateButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/create" element={<PostCreate />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
-
 ### headerButtons
 
 You can customize the buttons at the header by using the `headerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
 
-```tsx live url=http://localhost:3000/posts/create previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/chakra-ui";
 
 // visible-block-start
 import { Create } from "@refinedev/chakra-ui";
-import { Button, Box } from "@chakra-ui/react";
+import { Button, HStack } from "@chakra-ui/react";
 
 const PostCreate: React.FC = () => {
   return (
     <Create
       // highlight-start
       headerButtons={({ defaultButtons }) => (
-        <Box borderColor="blue" borderStyle="dashed" borderWidth="2px" p="2">
+        <HStack>
           {defaultButtons}
-          <Button colorScheme="red" variant="solid">
-            Custom Button
-          </Button>
-        </Box>
+          <Button colorScheme="red">Custom Button</Button>
+        </HStack>
       )}
       // highlight-end
     >
@@ -616,23 +551,31 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: DummyListPage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.CreateButton>Create Post</RefineChakra.CreateButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/create" element={<PostCreate />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -640,10 +583,8 @@ render(
 
 You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property.
 
-```tsx live url=http://localhost:3000/posts/create previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/chakra-ui";
 
 // visible-block-start
 import { Create } from "@refinedev/chakra-ui";
@@ -657,9 +598,14 @@ const PostCreate: React.FC = () => {
         borderColor: "blue",
         borderStyle: "dashed",
         borderWidth: "2px",
+        p: "2",
       }}
       // highlight-end
-      headerButtons={<Button type="primary">Custom Button</Button>}
+      headerButtons={
+        <Button colorScheme="green" variant="outline">
+          Custom Button
+        </Button>
+      }
     >
       <p>Rest of your page here</p>
     </Create>
@@ -667,38 +613,42 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: DummyListPage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.CreateButton>Create Post</RefineChakra.CreateButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/create" element={<PostCreate />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
-
 ### footerButtons
 
-By default, the `<Create/>` component has a [`<SaveButton>`][save-button] at the header.
+By default, the `<Create/>` component has a [`<SaveButton>`][save-button] at the footer.
 
 You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, saveButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
 
-```tsx live url=http://localhost:3000/posts/create previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/chakra-ui";
 
 // visible-block-start
 import { Create } from "@refinedev/chakra-ui";
@@ -724,74 +674,31 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      resources={[
-        {
-          name: "posts",
-          create: PostCreate,
-          list: DummyListPage,
-        },
-      ]}
-    />
-  );
-};
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-```
-
-Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `saveButtonProps` to utilize the default values of the [`<SaveButton>`][save-button] component.
-
-```tsx live url=http://localhost:3000/posts/create previewHeight=280px
-setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton, SaveButton } from "@refinedev/chakra-ui";
-
-// visible-block-start
-import { Create } from "@refinedev/chakra-ui";
-import { Button, HStack } from "@chakra-ui/react";
-
-const PostCreate: React.FC = () => {
-  return (
-    <Create
-      // highlight-start
-      footerButtons={({ saveButtonProps }) => (
-        <HStack borderColor="blue" borderStyle="dashed" borderWidth="2px" p="2">
-          <SaveButton {...saveButtonProps} hideText />
-          <Button colorScheme="red" variant="solid">
-            Custom Button
-          </Button>
-        </HStack>
-      )}
-      // highlight-end
-    >
-      <p>Rest of your page here</p>
-    </Create>
-  );
-};
-// visible-block-end
-
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: DummyListPage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.CreateButton>Create Post</RefineChakra.CreateButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/create" element={<PostCreate />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -799,10 +706,8 @@ render(
 
 You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property.
 
-```tsx live url=http://localhost:3000/posts/create previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/chakra-ui";
 
 // visible-block-start
 import { Create } from "@refinedev/chakra-ui";
@@ -826,32 +731,38 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: DummyListPage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.CreateButton>Create Post</RefineChakra.CreateButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/create" element={<PostCreate />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
-
 ## API Reference
 
-### Props
+### Properties
 
-<PropsTable module="@refinedev/chakra-ui/Create" goBack-default="`<IconArrowLeft />`" title-default="`<Title order={3}>Create {resource.name}</Title>`"/>
+<PropsTable module="@refinedev/chakra-ui/Create" />
 
 [save-button]: /docs/ui-integrations/chakra-ui/components/buttons/save-button
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/edit/index.md b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/edit/index.md
index e6b5e573aaa0..07f1b6b5760e 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/edit/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/edit/index.md
@@ -3,174 +3,149 @@ title: Edit
 swizzle: true
 ---
 
-```tsx live shared
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-
-const DummyListPage = () => (
-  <ChakraUI.VStack alignItems="flex-start">
-    <ChakraUI.Text>This page is empty.</ChakraUI.Text>
-    <EditButton colorScheme="black" recordItemId="123">
-      Edit Item 123
-    </EditButton>
-  </ChakraUI.VStack>
-);
-
-interface ICategory {
-  id: number;
-  title: string;
-}
-
-interface IPost {
-  id: number;
-  title: string;
-  content: string;
-  status: "published" | "draft" | "rejected";
-  category: { id: number };
-}
-```
-
-`<Edit>` provides us a layout for displaying the page. It does not contain any logic and just adds extra functionalities like a refresh button.
+`<Edit>` provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a refresh button.
 
 We will show what `<Edit>` does using properties with examples.
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=420px hideCode
+```tsx live  previewHeight=480px hideCode  url=http://localhost:3000/posts/edit/123
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
+import React from "react";
 import { Edit } from "@refinedev/chakra-ui";
 import {
   FormControl,
-  FormErrorMessage,
   FormLabel,
+  FormErrorMessage,
   Input,
+  Box,
   Select,
 } from "@chakra-ui/react";
-import { useSelect } from "@refinedev/core";
 import { useForm } from "@refinedev/react-hook-form";
+import { useSelect } from "@refinedev/core";
+import { Controller } from "react-hook-form";
 
 const PostEdit: React.FC = () => {
   const {
-    refineCore: { formLoading, query },
     saveButtonProps,
+    refineCore: { query },
     register,
+    control,
     formState: { errors },
-    resetField,
-  } = useForm<IPost>();
+  } = useForm();
 
   const { options } = useSelect({
     resource: "categories",
-
-    defaultValue: query?.data?.data.category.id,
-    queryOptions: { enabled: !!query?.data?.data.category.id },
+    defaultValue: query?.data?.category?.id,
   });
 
-  useEffect(() => {
-    resetField("category.id");
-  }, [options]);
-
   return (
-    <Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
-      <FormControl mb="3" isInvalid={!!errors?.title}>
-        <FormLabel>Title</FormLabel>
-        <Input
-          id="title"
-          type="text"
-          {...register("title", { required: "Title is required" })}
-        />
-        <FormErrorMessage>{`${errors.title?.message}`}</FormErrorMessage>
-      </FormControl>
-      <FormControl mb="3" isInvalid={!!errors?.status}>
-        <FormLabel>Status</FormLabel>
-        <Select
-          id="content"
-          placeholder="Select Post Status"
-          {...register("status", {
-            required: "Status is required",
-          })}
-        >
-          <option>published</option>
-          <option>draft</option>
-          <option>rejected</option>
-        </Select>
-        <FormErrorMessage>{`${errors.status?.message}`}</FormErrorMessage>
-      </FormControl>
-      <FormControl mb="3" isInvalid={!!errors?.categoryId}>
-        <FormLabel>Category</FormLabel>
-        <Select
-          id="ca"
-          placeholder="Select Category"
-          {...register("category.id", {
-            required: true,
-          })}
-        >
-          {options?.map((option) => (
-            <option value={option.value} key={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </Select>
-        <FormErrorMessage>{`${errors.categoryId?.message}`}</FormErrorMessage>
-      </FormControl>
+    <Edit saveButtonProps={saveButtonProps}>
+      <Box component="form" autoComplete="off">
+        <FormControl mb="3" isInvalid={!!errors?.id}>
+          <FormLabel>Id</FormLabel>
+          <Input
+            disabled
+            type="number"
+            {...register("id", {
+              required: "This field is required",
+            })}
+          />
+          <FormErrorMessage>{`${errors?.id?.message}`}</FormErrorMessage>
+        </FormControl>
+
+        <FormControl mb="3" isInvalid={!!errors?.title}>
+          <FormLabel>Title</FormLabel>
+          <Input
+            type="text"
+            {...register("title", {
+              required: "This field is required",
+            })}
+          />
+          <FormErrorMessage>{`${errors?.title?.message}`}</FormErrorMessage>
+        </FormControl>
+        <FormControl mb="3" isInvalid={!!errors?.status}>
+          <FormLabel>Status</FormLabel>
+          <Select
+            id="content"
+            placeholder="Select Post Status"
+            {...register("status", {
+              required: "Status is required",
+            })}
+          >
+            <option>published</option>
+            <option>draft</option>
+            <option>rejected</option>
+          </Select>
+          <FormErrorMessage>{`${errors.status?.message}`}</FormErrorMessage>
+        </FormControl>
+
+        <FormControl mb="3" isInvalid={!!errors?.category}>
+          <FormLabel>Category</FormLabel>
+          <Controller
+            control={control}
+            name="category.id"
+            rules={{ required: "This field is required" }}
+            render={({ field }) => (
+              <Select placeholder="Select category" {...field}>
+                {options?.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </Select>
+            )}
+          />
+          <FormErrorMessage>{`${errors?.category?.message}`}</FormErrorMessage>
+        </FormControl>
+      </Box>
     </Edit>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      notificationProvider={RefineChakra.notificationProvider()}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.EditButton recordItemId="123">
+                Edit Item 123
+              </RefineChakra.EditButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 :::simple Good to know
-
-You can swizzle this component to customize it with the [**Refine CLI**](/docs/packages/list-of-packages)
-
+You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-packages) to customize it.
 :::
 
 ## Properties
 
 ### title
 
-`title` allows the addition of titles inside the `<Edit>` component. if you don't pass title props it uses the "Edit" prefix and singular resource name by default. For example, for the "posts" resource, it would be "Edit post".
+`title` allows you to add a title inside the `<Edit>` component. If you don't pass title props, it uses the "Edit" prefix and the singular resource name by default. For example, for the "posts" resource, it will be "Edit post".
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/chakra-ui";
@@ -186,257 +161,218 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.EditButton recordItemId="123">
+                Edit Item 123
+              </RefineChakra.EditButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-### saveButtonProps
+### resource
 
-`saveButtonProps` can be used to customize the default button of the `<Edit>` component that submits the form:
+The `<Edit>` component reads the `resource` information from the route by default. If you want to use a custom resource for the `<Edit>` component, you can use the `resource` prop.
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
-setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom/123
+setInitialRoutes(["/custom/123"]);
 
 // visible-block-start
 import { Edit } from "@refinedev/chakra-ui";
 
-const PostEdit: React.FC = () => {
+const CustomPage: React.FC = () => {
   return (
     /* highlight-next-line */
-    <Edit saveButtonProps={{ colorScheme: "red" }}>
+    <Edit resource="posts" recordItemId={123}>
       <p>Rest of your page here</p>
     </Edit>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+        {
+          name: "custom",
+          list: "/custom",
+          edit: "/custom/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.EditButton recordItemId="123">
+                Edit Item 123
+              </RefineChakra.EditButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/custom/:id" element={<CustomPage />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`<SaveButton>` documentation &#8594](/docs/ui-integrations/chakra-ui/components/buttons/save-button)
+If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
 
-### canDelete and deleteButtonProps
+> For more information, refer to the [`identifier` section of the `<Refine/>` component documentation &#8594](/docs/core/refine-component#identifier)
 
-`canDelete` allows us to add the delete button inside the `<Edit>` component that executes the `useDelete` method provided by the `dataProvider` when clicked on.
+### saveButtonProps
 
-If the resource has the `canDelete` property, Refine adds the delete button by default. If you want to customize this button, you can use the `deleteButtonProps` property like the code below.
+The `<Edit>` component has a save button that submits the form by default. If you want to customize this button you can use the `saveButtonProps` property:
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/chakra-ui";
-import { usePermissions } from "@refinedev/core";
 
 const PostEdit: React.FC = () => {
-  const { data: permissionsData } = usePermissions();
   return (
-    <Edit
-      /* highlight-start */
-      canDelete={permissionsData?.includes("admin")}
-      deleteButtonProps={{ colorScheme: "orange" }}
-      /* highlight-end */
-    >
+    /* highlight-next-line */
+    <Edit saveButtonProps={{ colorScheme: "red" }}>
       <p>Rest of your page here</p>
     </Edit>
   );
 };
 // visible-block-end
 
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      return {
-        data: {},
-      };
-    },
-  };
-
-  const authProvider = {
-    login: async () => {
-      return {
-        success: true,
-        redirectTo: "/",
-      };
-    },
-    register: async () => {
-      return {
-        success: true,
-      };
-    },
-    forgotPassword: async () => {
-      return {
-        success: true,
-      };
-    },
-    updatePassword: async () => {
-      return {
-        success: true,
-      };
-    },
-    logout: async () => {
-      return {
-        success: true,
-        redirectTo: "/",
-      };
-    },
-    check: async () => ({
-      authenticated: true,
-    }),
-    onError: async (error) => {
-      console.error(error);
-      return { error };
-    },
-    getPermissions: async () => ["admin"],
-    getIdentity: async () => null,
-  };
-
-  return (
-    <RefineHeadlessDemo
-      dataProvider={customDataProvider}
-      authProvider={authProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.EditButton recordItemId="123">
+                Edit Item 123
+              </RefineChakra.EditButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`<DeleteButton>` &#8594](/docs/ui-integrations/chakra-ui/components/buttons/delete-button) and [`usePermission` &#8594](/docs/authentication/hooks/use-permissions) documentations
+> For more information, refer to the [`<SaveButton>` documentation &#8594](/docs/ui-integrations/chakra-ui/components/buttons/save-button)
 
-### resource
+### canDelete and deleteButtonProps
 
-`<Edit>` component reads the `resource` information from the route by default. If you want to use a custom resource for the `<Edit>` component, you can use the `resource` prop.
+`canDelete` allows you to add a delete button inside the `<Edit>` component. If the resource has the `canDelete` property, Refine adds the delete button by default. If you want to customize this button you can use the `deleteButtonProps` property like the code below.
 
-```tsx live url=http://localhost:3000/custom/23 previewHeight=280px
-setInitialRoutes(["/custom/23"]);
+When clicked on, the delete button executes the `useDelete` method provided by the `dataProvider`.
+
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
-import { Layout } from "@refinedev/chakra-ui";
 // visible-block-start
 import { Edit } from "@refinedev/chakra-ui";
+import { usePermissions } from "@refinedev/core";
+
+const PostEdit: React.FC = () => {
+  const { data: permissionsData } = usePermissions();
 
-const CustomPage: React.FC = () => {
   return (
-    /* highlight-next-line */
-    <Edit resource="categories">
+    <Edit
+      /* highlight-start */
+      canDelete={permissionsData?.includes("admin")}
+      deleteButtonProps={{ colorScheme: "red" }}
+      /* highlight-end */
+    >
       <p>Rest of your page here</p>
     </Edit>
   );
 };
 // visible-block-end
 
-const App: React.FC = () => {
-  return (
-    <Refine
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom/:id",
-          },
-        ],
-        // highlight-end
-      }}
-      Layout={Layout}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+      options={{
+        auth: {
+          getPermissions: () => Promise.resolve(["admin"]),
+        },
+      }}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
-
-> For more information, refer to the [`identifier` section of the `<Refine/>` component documentation &#8594](/docs/core/refine-component#identifier)
-
 ### recordItemId
 
-The `<Edit>` component reads the `id` information from the route by default. `recordItemId` is used when it cannot read from the URL(when used on a custom page, modal or drawer).
+The `<Edit>` component reads the `id` information from the route by default. `recordItemId` is used when it cannot read from the URL (when used on a custom page, modal or drawer).
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=350px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
-import { useModalForm } from "@refinedev/react-hook-form";
 import { Edit } from "@refinedev/chakra-ui";
+import { useModalForm } from "@refinedev/react-hook-form";
 import {
   Modal,
-  Button,
   ModalOverlay,
   ModalContent,
   ModalCloseButton,
   ModalHeader,
   ModalBody,
+  Button,
 } from "@chakra-ui/react";
 
 const PostEdit: React.FC = () => {
@@ -454,8 +390,7 @@ const PostEdit: React.FC = () => {
         <ModalOverlay />
         <ModalContent>
           <ModalCloseButton />
-          <ModalHeader>Edit</ModalHeader>
-
+          <ModalHeader>Edit Post</ModalHeader>
           <ModalBody>
             {/* highlight-next-line */}
             <Edit recordItemId={id}>
@@ -469,56 +404,39 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="23">Edit Item 23</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-:::simple Implementation Tips
-
-The `<Edit>` component needs the `id` information for the `<RefreshButton>` to work properly.
-
-:::
-
 ### mutationMode
 
-`mutationMode` determines which mode the mutation will have while executing `<DeleteButton>`.
+Determines which mode mutation will have while executing `useDelete`.
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/chakra-ui";
 import {
-  Input,
   FormControl,
   FormLabel,
   FormErrorMessage,
+  Input,
 } from "@chakra-ui/react";
 import { useForm } from "@refinedev/react-hook-form";
 
@@ -527,7 +445,7 @@ const PostEdit: React.FC = () => {
     saveButtonProps,
     register,
     formState: { errors },
-  } = useForm<IPost>();
+  } = useForm();
 
   return (
     <Edit
@@ -543,33 +461,40 @@ const PostEdit: React.FC = () => {
           type="text"
           {...register("title", { required: "Title is required" })}
         />
-        <FormErrorMessage>{`${errors.title?.message}`}</FormErrorMessage>
+        <FormErrorMessage>{`${errors?.title?.message}`}</FormErrorMessage>
       </FormControl>
     </Edit>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      notificationProvider={RefineChakra.notificationProvider()}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.EditButton recordItemId="123">
+                Edit Item 123
+              </RefineChakra.EditButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -579,9 +504,10 @@ If not specified, Refine will use the default data provider. If you have multipl
 
 ```tsx
 import { Refine } from "@refinedev/core";
-import { Edit } from "@refinedev/chakra-ui";
 import dataProvider from "@refinedev/simple-rest";
 
+import { Edit } from "@refinedev/chakra-ui";
+
 // highlight-start
 const PostEdit = () => {
   return <Edit dataProviderName="other">...</Edit>;
@@ -608,46 +534,50 @@ export const App: React.FC = () => {
 
 To customize the back button or to disable it, you can use the `goBack` property. You can pass `false` or `null` to hide the back button.
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
-setInitialRoutes(["/posts", "/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
 // visible-block-start
 import { Edit } from "@refinedev/chakra-ui";
-/* highlight-next-line */
 import { IconMoodSmile } from "@tabler/icons-react";
 
 const PostEdit: React.FC = () => {
   return (
     /* highlight-next-line */
     <Edit goBack={<IconMoodSmile />}>
-      <p>Rest of your page here 2</p>
+      <p>Rest of your page here</p>
     </Edit>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.EditButton recordItemId="123">
+                Edit Item 123
+              </RefineChakra.EditButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -655,12 +585,8 @@ render(
 
 To toggle the loading state of the `<Edit/>` component, you can use the `isLoading` property.
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/chakra-ui";
@@ -675,37 +601,31 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-### breadcrumb <GlobalConfigBadge id="core/refine-component/#breadcrumb" />
+### breadcrumb
 
 To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/chakra-ui` package.
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit, Breadcrumb } from "@refinedev/chakra-ui";
@@ -728,94 +648,42 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[
-        {
-          name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
-        },
-      ]}
-    />
-  );
-};
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-```
-
-> For more information, refer to the [`Breadcrumb` documentation &#8594](/docs/ui-integrations/chakra-ui/components/breadcrumb)
-
-### wrapperProps
-
-If you want to customize the wrapper of the `<Edit/>` component, you can use the `wrapperProps` property. For `@refinedev/chakra-ui` wrapper element is `<Card>`s and `wrapperProps` can get every attribute that `<Card>` can get.
-
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
-setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
-
-// visible-block-start
-import { Edit } from "@refinedev/chakra-ui";
-
-const PostEdit: React.FC = () => {
-  return (
-    <Edit
-      // highlight-start
-      wrapperProps={{
-        borderColor: "blue",
-        borderStyle: "dashed",
-        borderWidth: "2px",
-        p: "2",
-      }}
-      // highlight-end
-    >
-      <p>Rest of your page here</p>
-    </Edit>
-  );
-};
-// visible-block-end
-
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.EditButton recordItemId="123">
+                Edit Item 123
+              </RefineChakra.EditButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
-
 ### headerProps
 
 If you want to customize the header of the `<Edit/>` component, you can use the `headerProps` property.
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/chakra-ui";
@@ -837,84 +705,25 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[
-        {
-          name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
-        },
-      ]}
-    />
-  );
-};
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-```
-
-> For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
-
-### contentProps
-
-If you want to customize the content of the `<Edit/>` component, you can use the `contentProps` property.
-
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
-setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
-
-// visible-block-start
-import { Edit } from "@refinedev/chakra-ui";
-
-const PostEdit: React.FC = () => {
-  return (
-    <Edit
-      // highlight-start
-      contentProps={{
-        borderColor: "blue",
-        borderStyle: "dashed",
-        borderWidth: "2px",
-        p: "2",
-      }}
-      // highlight-end
-    >
-      <p>Rest of your page here</p>
-    </Edit>
-  );
-};
-// visible-block-end
-
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
-
 ### headerButtons
 
 By default, the `<Edit/>` component has a [`<ListButton>`][list-button] and a [`<RefreshButton>`][refresh-button] at the header.
@@ -922,21 +731,15 @@ By default, the `<Edit/>` component has a [`<ListButton>`][list-button] and a [`
 You can customize the buttons at the header by using the `headerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, refreshButtonProps, listButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
 
 :::simple Implementation Tips
-
-If the "list" resource is not defined, the [`<ListButton>`][list-button] will not render and `listButtonProps` will be `undefined`.
-
+If "list" resource is not defined, the [`<ListButton>`][list-button] will not render and `listButtonProps` will be `undefined`.
 :::
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/chakra-ui";
-import { Button, HStack, Box } from "@chakra-ui/react";
+import { Button, HStack } from "@chakra-ui/react";
 
 const PostEdit: React.FC = () => {
   return (
@@ -956,79 +759,33 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[
-        {
-          name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
-        },
-      ]}
-    />
-  );
-};
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-```
-
-Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `refreshButtonProps` and `listButtonProps` to utilize the default values of the [`<ListButton>`][list-button] and [`<RefreshButton>`][refresh-button] components.
-
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
-setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton, RefreshButton, ListButton } from "@refinedev/chakra-ui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
-
-// visible-block-start
-import { Edit } from "@refinedev/chakra-ui";
-import { Button, HStack, Box } from "@chakra-ui/react";
-
-const PostEdit: React.FC = () => {
-  return (
-    <Edit
-      // highlight-start
-      headerButtons={({ refreshButtonProps, listButtonProps }) => (
-        <HStack>
-          <RefreshButton {...refreshButtonProps} meta={{ foo: "bar" }} />
-          {listButtonProps && (
-            <ListButton {...listButtonProps} meta={{ foo: "bar" }} />
-          )}
-          <Button colorScheme="red">Custom Button</Button>
-        </HStack>
-      )}
-      // highlight-end
-    >
-      <p>Rest of your page here</p>
-    </Edit>
-  );
-};
-// visible-block-end
-
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.EditButton recordItemId="123">
+                Edit Item 123
+              </RefineChakra.EditButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1036,12 +793,8 @@ render(
 
 You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property.
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/chakra-ui";
@@ -1059,7 +812,7 @@ const PostEdit: React.FC = () => {
       }}
       // highlight-end
       headerButtons={
-        <Button variant="outline" colorScheme="green">
+        <Button colorScheme="green" variant="outline">
           Custom Button
         </Button>
       }
@@ -1070,29 +823,36 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.EditButton recordItemId="123">
+                Edit Item 123
+              </RefineChakra.EditButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
-
 ### footerButtons
 
 By default, the `<Edit/>` component has a [`<SaveButton>`][save-button] and a [`<DeleteButton>`][delete-button] at the footer.
@@ -1100,17 +860,11 @@ By default, the `<Edit/>` component has a [`<SaveButton>`][save-button] and a [`
 You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, saveButtonProps, deleteButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
 
 :::simple Implementation Tips
-
 If [`canDelete`](#candelete-and-deletebuttonprops) is `false`, the [`<DeleteButton>`][delete-button] will not render and `deleteButtonProps` will be `undefined`.
-
 :::
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/chakra-ui";
@@ -1136,81 +890,33 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[
-        {
-          name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
-        },
-      ]}
-    />
-  );
-};
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-```
-
-Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `saveButtonProps` and `deleteButtonProps` to utilize the default values of the [`<SaveButton>`][save-button] and [`<DeleteButton>`][delete-button] components.
-
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
-setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton, SaveButton, DeleteButton } from "@refinedev/chakra-ui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
-
-// visible-block-start
-import { Edit } from "@refinedev/chakra-ui";
-import { Button, HStack } from "@chakra-ui/react";
-
-const PostEdit: React.FC = () => {
-  return (
-    <Edit
-      // highlight-start
-      footerButtons={({ saveButtonProps, deleteButtonProps }) => (
-        <HStack borderColor="blue" borderStyle="dashed" borderWidth="2px" p="2">
-          <SaveButton {...saveButtonProps} hideText />
-          {deleteButtonProps && (
-            <DeleteButton {...deleteButtonProps} hideText />
-          )}
-          <Button colorScheme="red" variant="solid">
-            Custom Button
-          </Button>
-        </HStack>
-      )}
-      // highlight-end
-    >
-      <p>Rest of your page here</p>
-    </Edit>
-  );
-};
-// visible-block-end
-
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.EditButton recordItemId="123">
+                Edit Item 123
+              </RefineChakra.EditButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1218,12 +924,8 @@ render(
 
 You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property.
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/chakra-ui";
@@ -1247,51 +949,55 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.EditButton recordItemId="123">
+                Edit Item 123
+              </RefineChakra.EditButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
-
 ### autoSaveProps
 
 You can use the auto save feature of the `<Edit/>` component by using the `autoSaveProps` property.
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=420px
+```tsx live disableScroll previewHeight=420px url=http://localhost:3000/posts/edit/123
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
+// visible-block-start
 import { Edit } from "@refinedev/chakra-ui";
 import {
   FormControl,
-  FormErrorMessage,
   FormLabel,
+  FormErrorMessage,
   Input,
   Select,
 } from "@chakra-ui/react";
-import { useSelect } from "@refinedev/core";
 import { useForm } from "@refinedev/react-hook-form";
+import { useSelect } from "@refinedev/core";
 
-// visible-block-start
 const PostEdit: React.FC = () => {
   const {
     refineCore: {
@@ -1316,9 +1022,7 @@ const PostEdit: React.FC = () => {
 
   const { options } = useSelect({
     resource: "categories",
-
-    defaultValue: query?.data?.data.category.id,
-    queryOptions: { enabled: !!query?.data?.data.category.id },
+    defaultValue: query?.data?.category?.id,
   });
 
   useEffect(() => {
@@ -1339,7 +1043,7 @@ const PostEdit: React.FC = () => {
           type="text"
           {...register("title", { required: "Title is required" })}
         />
-        <FormErrorMessage>{`${errors.title?.message}`}</FormErrorMessage>
+        <FormErrorMessage>{`${errors?.title?.message}`}</FormErrorMessage>
       </FormControl>
       <FormControl mb="3" isInvalid={!!errors?.status}>
         <FormLabel>Status</FormLabel>
@@ -1354,57 +1058,48 @@ const PostEdit: React.FC = () => {
           <option>draft</option>
           <option>rejected</option>
         </Select>
-        <FormErrorMessage>{`${errors.status?.message}`}</FormErrorMessage>
-      </FormControl>
-      <FormControl mb="3" isInvalid={!!errors?.categoryId}>
-        <FormLabel>Category</FormLabel>
-        <Select
-          id="ca"
-          placeholder="Select Category"
-          {...register("category.id", {
-            required: true,
-          })}
-        >
-          {options?.map((option) => (
-            <option value={option.value} key={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </Select>
-        <FormErrorMessage>{`${errors.categoryId?.message}`}</FormErrorMessage>
+        <FormErrorMessage>{`${errors?.status?.message}`}</FormErrorMessage>
       </FormControl>
     </Edit>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      notificationProvider={RefineChakra.notificationProvider()}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: DummyListPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.EditButton recordItemId="123">
+                Edit Item 123
+              </RefineChakra.EditButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 ## API Reference
 
-### Props
+### Properties
 
-<PropsTable module="@refinedev/chakra-ui/Edit" goBack-default="`<IconArrowLeft />`" title-default="`<Title order={3}>Edit {resource.name}</Title>`" />
+<PropsTable module="@refinedev/chakra-ui/Edit" />
 
 [list-button]: /docs/ui-integrations/chakra-ui/components/buttons/list-button
 [refresh-button]: /docs/ui-integrations/chakra-ui/components/buttons/refresh-button
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/list/index.md b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/list/index.md
index 1f67446d7345..446f2b9398b9 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/list/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/list/index.md
@@ -3,44 +3,12 @@ title: List
 swizzle: true
 ---
 
-```tsx live shared
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-
-interface ICategory {
-  id: number;
-  title: string;
-}
-
-interface IPost {
-  id: number;
-  title: string;
-  content: string;
-  status: "published" | "draft" | "rejected";
-  category: { id: number };
-}
-```
-
 `<List>` provides us a layout to display the page. It does not contain any logic and just adds extra functionalities like a create button or giving the page titles.
 
 We will show what `<List>` does using properties with examples.
 
 ```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { List, DateField } from "@refinedev/chakra-ui";
@@ -140,24 +108,21 @@ const PostList: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      notificationProvider={RefineChakra.notificationProvider()}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -192,23 +157,22 @@ const PostList: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -219,16 +183,11 @@ render(
 ```tsx live url=http://localhost:3000/custom previewHeight=280px
 setInitialRoutes(["/custom"]);
 
-import { Refine } from "@refinedev/core";
-import { Layout } from "@refinedev/chakra-ui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 // visible-block-start
 import { List } from "@refinedev/chakra-ui";
 
 const CustomPage: React.FC = () => {
   return (
-    /* highlight-next-line */
     <List resource="categories">
       <p>Rest of your page here</p>
     </List>
@@ -236,30 +195,21 @@ const CustomPage: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom",
-          },
-        ],
-        // highlight-end
-      }}
-      Layout={Layout}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
+      resources={[
+        {
+          name: "categories",
+          list: "/categories",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/custom" element={<CustomPage />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -351,23 +301,26 @@ const App = () => {
   };
 
   return (
-    <RefineHeadlessDemo
-      dataProvider={customDataProvider}
-      authProvider={authProvider}
-      resources={[
-        {
-          name: "posts",
-          list: PostList,
-        },
-      ]}
-    />
+    <ReactRouter.BrowserRouter>
+      <RefineChakraDemo
+        dataProvider={customDataProvider}
+        authProvider={authProvider}
+        resources={[
+          {
+            name: "posts",
+            list: "/posts",
+            create: "/posts/create",
+          },
+        ]}
+      >
+        <ReactRouter.Routes>
+          <ReactRouter.Route path="/posts" element={<PostList />} />
+        </ReactRouter.Routes>
+      </RefineChakraDemo>
+    </ReactRouter.BrowserRouter>
   );
 };
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
+render(<App />);
 ```
 
 ### breadcrumb <GlobalConfigBadge id="core/refine-component/#breadcrumb" />
@@ -406,22 +359,24 @@ const PostList: React.FC = () => {
 
 const App = () => {
   return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[
-        {
-          name: "posts",
-          list: PostList,
-        },
-      ]}
-    />
+    <ReactRouter.BrowserRouter>
+      <RefineChakraDemo
+        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+        resources={[
+          {
+            name: "posts",
+            list: "/posts",
+          },
+        ]}
+      >
+        <ReactRouter.Routes>
+          <ReactRouter.Route path="/posts" element={<PostList />} />
+        </ReactRouter.Routes>
+      </RefineChakraDemo>
+    </ReactRouter.BrowserRouter>
   );
 };
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
+render(<App />);
 ```
 
 > For more information, refer to the [`Breadcrumb` documentation &#8594](/docs/ui-integrations/chakra-ui/components/breadcrumb)
@@ -458,22 +413,24 @@ const PostList: React.FC = () => {
 
 const App = () => {
   return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[
-        {
-          name: "posts",
-          list: PostList,
-        },
-      ]}
-    />
+    <ReactRouter.BrowserRouter>
+      <RefineChakraDemo
+        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+        resources={[
+          {
+            name: "posts",
+            list: "/posts",
+          },
+        ]}
+      >
+        <ReactRouter.Routes>
+          <ReactRouter.Route path="/posts" element={<PostList />} />
+        </ReactRouter.Routes>
+      </RefineChakraDemo>
+    </ReactRouter.BrowserRouter>
   );
 };
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
+render(<App />);
 ```
 
 > For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
@@ -510,22 +467,24 @@ const PostList: React.FC = () => {
 
 const App = () => {
   return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[
-        {
-          name: "posts",
-          list: PostList,
-        },
-      ]}
-    />
+    <ReactRouter.BrowserRouter>
+      <RefineChakraDemo
+        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+        resources={[
+          {
+            name: "posts",
+            list: "/posts",
+          },
+        ]}
+      >
+        <ReactRouter.Routes>
+          <ReactRouter.Route path="/posts" element={<PostList />} />
+        </ReactRouter.Routes>
+      </RefineChakraDemo>
+    </ReactRouter.BrowserRouter>
   );
 };
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
+render(<App />);
 ```
 
 > For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
@@ -562,22 +521,24 @@ const PostList: React.FC = () => {
 
 const App = () => {
   return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[
-        {
-          name: "posts",
-          list: PostList,
-        },
-      ]}
-    />
+    <ReactRouter.BrowserRouter>
+      <RefineChakraDemo
+        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+        resources={[
+          {
+            name: "posts",
+            list: "/posts",
+          },
+        ]}
+      >
+        <ReactRouter.Routes>
+          <ReactRouter.Route path="/posts" element={<PostList />} />
+        </ReactRouter.Routes>
+      </RefineChakraDemo>
+    </ReactRouter.BrowserRouter>
   );
 };
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
+render(<App />);
 ```
 
 > For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
@@ -625,22 +586,24 @@ const PostList: React.FC = () => {
 
 const App = () => {
   return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[
-        {
-          name: "posts",
-          list: PostList,
-        },
-      ]}
-    />
+    <ReactRouter.BrowserRouter>
+      <RefineChakraDemo
+        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+        resources={[
+          {
+            name: "posts",
+            list: "/posts",
+          },
+        ]}
+      >
+        <ReactRouter.Routes>
+          <ReactRouter.Route path="/posts" element={<PostList />} />
+        </ReactRouter.Routes>
+      </RefineChakraDemo>
+    </ReactRouter.BrowserRouter>
   );
 };
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
+render(<App />);
 ```
 
 Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `createButtonProps` to utilize the default values of the [`<CreateButton>`][create-button] component.
@@ -678,22 +641,24 @@ const PostList: React.FC = () => {
 
 const App = () => {
   return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[
-        {
-          name: "posts",
-          list: PostList,
-        },
-      ]}
-    />
+    <ReactRouter.BrowserRouter>
+      <RefineChakraDemo
+        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+        resources={[
+          {
+            name: "posts",
+            list: "/posts",
+          },
+        ]}
+      >
+        <ReactRouter.Routes>
+          <ReactRouter.Route path="/posts" element={<PostList />} />
+        </ReactRouter.Routes>
+      </RefineChakraDemo>
+    </ReactRouter.BrowserRouter>
   );
 };
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
+render(<App />);
 ```
 
 ### headerButtonProps
@@ -734,22 +699,24 @@ const PostList: React.FC = () => {
 
 const App = () => {
   return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[
-        {
-          name: "posts",
-          list: PostList,
-        },
-      ]}
-    />
+    <ReactRouter.BrowserRouter>
+      <RefineChakraDemo
+        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+        resources={[
+          {
+            name: "posts",
+            list: "/posts",
+          },
+        ]}
+      >
+        <ReactRouter.Routes>
+          <ReactRouter.Route path="/posts" element={<PostList />} />
+        </ReactRouter.Routes>
+      </RefineChakraDemo>
+    </ReactRouter.BrowserRouter>
   );
 };
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
+render(<App />);
 ```
 
 > For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/show/index.md b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/show/index.md
index 1ae8b54fc603..81de6ea46a41 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/basic-views/show/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/basic-views/show/index.md
@@ -3,60 +3,17 @@ title: Show
 swizzle: true
 ---
 
-```tsx live shared
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-
-const DummyListPage = () => (
-  <ChakraUI.VStack alignItems="flex-start">
-    <ChakraUI.Text>This page is empty.</ChakraUI.Text>
-    <ShowButton colorScheme="black" recordItemId="123">
-      Show Item 123
-    </ShowButton>
-  </ChakraUI.VStack>
-);
-
-interface ICategory {
-  id: number;
-  title: string;
-}
-
-interface IPost {
-  id: number;
-  title: string;
-  content: string;
-  status: "published" | "draft" | "rejected";
-  category: { id: number };
-}
-```
-
-`<Show>` provides us a layout for displaying the page. It does not contain any logic and just adds extra functionalities like a refresh button or giving title to the page.
+`<Show>` provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a refresh button.
 
 We will show what `<Show>` does using properties with examples.
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
+```tsx live previewHeight=420px hideCode url=http://localhost:3000/posts/show/123
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { useShow, useOne } from "@refinedev/core";
 import { Show, MarkdownField } from "@refinedev/chakra-ui";
-import { Heading, Text, Spacer } from "@chakra-ui/react";
+import { Heading, Text } from "@chakra-ui/react";
 
 const PostShow: React.FC = () => {
   const { queryResult } = useShow<IPost>();
@@ -65,9 +22,9 @@ const PostShow: React.FC = () => {
 
   const { data: categoryData } = useOne<ICategory>({
     resource: "categories",
-    id: record?.category.id || "",
+    id: record?.category?.id || "",
     queryOptions: {
-      enabled: !!record?.category.id,
+      enabled: !!record?.category?.id,
     },
   });
 
@@ -83,11 +40,6 @@ const PostShow: React.FC = () => {
       </Heading>
       <Text mt={2}>{record?.title}</Text>
 
-      <Heading as="h5" size="sm" mt={4}>
-        Status
-      </Heading>
-      <Text mt={2}>{record?.status}</Text>
-
       <Heading as="h5" size="sm" mt={4}>
         Category
       </Heading>
@@ -96,53 +48,48 @@ const PostShow: React.FC = () => {
       <Heading as="h5" size="sm" mt={4}>
         Content
       </Heading>
-      <Spacer mt={2} />
       <MarkdownField value={record?.content} />
     </Show>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      notificationProvider={RefineChakra.notificationProvider()}
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: DummyListPage,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.ShowButton recordItemId="123">
+                Show Post 123
+              </RefineChakra.ShowButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-:::simple Good to know
-
-You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-packages) to customize it.
-
-:::
-
-## Properties
-
 ### title
 
-`title` allows the addition of titles inside the `<Show>` component. If you don't pass title props it uses the "Show" prefix and the singular resource name by default. For example, for the "posts" resource, it will be "Show post".
+`title` allows you to add a title inside the `<Show>` component. If you don't pass title props, it uses the "Show" prefix and the singular resource name by default. For example, for the "posts" resource, it will be "Show post".
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/chakra-ui";
@@ -158,24 +105,33 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: DummyListPage,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.ShowButton recordItemId="123">
+                Show Post 123
+              </RefineChakra.ShowButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -183,504 +139,340 @@ render(
 
 The `<Show>` component reads the `resource` information from the route by default. If you want to use a custom resource for the `<Show>` component, you can use the `resource` prop.
 
-```tsx live url=http://localhost:3000/custom/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom/123
 setInitialRoutes(["/custom/123"]);
 
-import { Refine } from "@refinedev/core";
-import { Layout } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
-import routerProvider from "@refinedev/react-router-v6/legacy";
 // visible-block-start
 import { Show } from "@refinedev/chakra-ui";
 
 const CustomPage: React.FC = () => {
   return (
     /* highlight-next-line */
-    <Show resource="categories">
+    <Show resource="posts" recordItemId={123}>
       <p>Rest of your page here</p>
     </Show>
   );
 };
 // visible-block-end
 
-const App: React.FC = () => {
-  return (
-    <Refine
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom/:id",
-          },
-        ],
-        // highlight-end
-      }}
-      Layout={Layout}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-```
-
-If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
-
-> For more information, refer to the [`identifier` section of the `<Refine/>` component documentation &#8594](/docs/core/refine-component#identifier)
-
-### canDelete and canEdit
-
-`canDelete` and `canEdit` allows us to add the delete and edit buttons inside the `<Show>` component. If the resource has `canDelete` or `canEdit` property Refine adds the buttons by default.
-
-When clicked on, delete button executes the `useDelete` method provided by the [`dataProvider`](/docs/data/data-provider) and the edit button redirects the user to the record edit page.
-
-Refer to the [`<DeleteButton>`](/docs/ui-integrations/chakra-ui/components/buttons/delete-button) and the [`<EditButton>`](/docs/ui-integrations/chakra-ui/components/buttons/edit-button) documentation for detailed usage.
-
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
-setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
-
-// visible-block-start
-import { Show } from "@refinedev/chakra-ui";
-import { usePermissions } from "@refinedev/core";
-
-const PostShow: React.FC = () => {
-  const { data: permissionsData } = usePermissions();
-
-  return (
-    <Show
-      /* highlight-start */
-      canDelete={permissionsData?.includes("admin")}
-      canEdit={permissionsData?.includes("admin")}
-      /* highlight-end */
-    >
-      <p>Rest of your page here</p>
-    </Show>
-  );
-};
-// visible-block-end
-
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      return {
-        data: {},
-      };
-    },
-  };
-
-  const authProvider = {
-    login: async () => {
-      return {
-        success: true,
-        redirectTo: "/",
-      };
-    },
-    register: async () => {
-      return {
-        success: true,
-      };
-    },
-    forgotPassword: async () => {
-      return {
-        success: true,
-      };
-    },
-    updatePassword: async () => {
-      return {
-        success: true,
-      };
-    },
-    logout: async () => {
-      return {
-        success: true,
-        redirectTo: "/",
-      };
-    },
-    check: async () => ({
-      authenticated: true,
-    }),
-    onError: async (error) => {
-      console.error(error);
-      return { error };
-    },
-    getPermissions: async () => ["admin"],
-    getIdentity: async () => null,
-  };
-
-  return (
-    <RefineHeadlessDemo
-      dataProvider={customDataProvider}
-      authProvider={authProvider}
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: DummyListPage,
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+        {
+          name: "custom",
+          list: "/custom",
+          show: "/custom/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/custom/:id" element={<CustomPage />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`usePermission` documentation &#8594](/docs/authentication/hooks/use-permissions)
-
 ### recordItemId
 
-`<Show>` component reads the `id` information from the route by default. `recordItemId` is used when it cannot read from the URL (when used on a custom page, modal or drawer).
+The `<Show>` component reads the `id` information from the route by default. If you want to use a custom `id` value, you can use the `recordItemId` prop.
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=350px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
-import { useModalForm } from "@refinedev/react-hook-form";
 import { Show } from "@refinedev/chakra-ui";
-import {
-  Modal,
-  Button,
-  ModalOverlay,
-  ModalContent,
-  ModalCloseButton,
-  ModalHeader,
-  ModalBody,
-} from "@chakra-ui/react";
 
 const PostShow: React.FC = () => {
-  const {
-    modal: { visible, close, show },
-    id,
-  } = useModalForm({
-    refineCoreProps: { action: "show" },
-  });
-
   return (
-    <div>
-      <Button onClick={() => show()}>Edit Button</Button>
-      <Modal isOpen={visible} onClose={close} size="xl">
-        <ModalOverlay />
-        <ModalContent>
-          <ModalCloseButton />
-          <ModalHeader>Show</ModalHeader>
-
-          <ModalBody>
-            {/* highlight-next-line */}
-            <Show recordItemId={id}>
-              <p>Rest of your page here</p>
-            </Show>
-          </ModalBody>
-        </ModalContent>
-      </Modal>
-    </div>
+    /* highlight-next-line */
+    <Show recordItemId="123">
+      <p>Rest of your page here</p>
+    </Show>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: DummyListPage,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-```
-
-:::simple Implementation Tips
-
-The `<Edit>` component needs the `id` information for the `<RefreshButton>` to work properly.
-
-:::
-
-### dataProviderName
-
-If not specified, Refine will use the default data provider. If you have multiple data providers and want to use a different one, you can use the `dataProviderName` property.
-
-```tsx
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
-
-import { Show } from "@refinedev/chakra-ui";
-
-// highlight-start
-const PostShow = () => {
-  return <Show dataProviderName="other">...</Show>;
-};
-// highlight-end
-
-export const App: React.FC = () => {
-  return (
-    <Refine
-      // highlight-start
-      dataProvider={{
-        default: dataProvider("https://api.fake-rest.refine.dev/"),
-        other: dataProvider("https://other-api.fake-rest.refine.dev/"),
-      }}
-      // highlight-end
     >
-      {/* ... */}
-    </Refine>
-  );
-};
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.ShowButton recordItemId="123">
+                Show Post 123
+              </RefineChakra.ShowButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
 
-### goBack
+### canEdit and editButtonProps
 
-To customize the back button or to disable it, you can use the `goBack` property. You can pass `false` or `null` to hide the back button.
+`canEdit` allows you to add an edit button inside the `<Show>` component. If the resource has the `canEdit` property, Refine adds the edit button by default. If you want to customize this button you can use the `editButtonProps` property.
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
-setInitialRoutes(["/posts", "/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import { Show } from "@refinedev/chakra-ui";
-/* highlight-next-line */
-import { IconMoodSmile } from "@tabler/icons-react";
+import { usePermissions } from "@refinedev/core";
 
 const PostShow: React.FC = () => {
+  const { data: permissionsData } = usePermissions();
   return (
-    /* highlight-next-line */
-    <Show goBack={<IconMoodSmile />}>
+    <Show
+      /* highlight-start */
+      canEdit={permissionsData?.includes("admin")}
+      editButtonProps={{ colorScheme: "red" }}
+      /* highlight-end */
+    >
       <p>Rest of your page here</p>
     </Show>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: DummyListPage,
+          list: "/posts",
+          show: "/posts/show/:id",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+      options={{
+        auth: {
+          getPermissions: () => Promise.resolve(["admin"]),
+        },
+      }}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.ShowButton recordItemId="123">
+                Show Post 123
+              </RefineChakra.ShowButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-### isLoading
+### canDelete and deleteButtonProps
 
-To toggle the loading state of the `<Edit/>` component, you can use the `isLoading` property.
+`canDelete` allows you to add a delete button inside the `<Show>` component. If the resource has the `canDelete` property, Refine adds the delete button by default. If you want to customize this button you can use the `deleteButtonProps` property.
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/chakra-ui";
+import { usePermissions } from "@refinedev/core";
 
 const PostShow: React.FC = () => {
+  const { data: permissionsData } = usePermissions();
   return (
-    /* highlight-next-line */
-    <Show isLoading={true}>
+    <Show
+      /* highlight-start */
+      canDelete={permissionsData?.includes("admin")}
+      deleteButtonProps={{ colorScheme: "red" }}
+      /* highlight-end */
+    >
       <p>Rest of your page here</p>
     </Show>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: DummyListPage,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+      options={{
+        auth: {
+          getPermissions: () => Promise.resolve(["admin"]),
+        },
+      }}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.ShowButton recordItemId="123">
+                Show Post 123
+              </RefineChakra.ShowButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-### breadcrumb <GlobalConfigBadge id="core/refine-component/#breadcrumb" />
+### goBack
 
-To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/chakra-ui` package.
+To customize the back button or to disable it, you can use the `goBack` property.
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
-import { Show, Breadcrumb } from "@refinedev/chakra-ui";
-import { Box } from "@chakra-ui/react";
-
-const CustomBreadcrumb: React.FC = () => {
-  return (
-    <Box borderColor="blue" borderStyle="dashed" borderWidth="2px">
-      <Breadcrumb />
-    </Box>
-  );
-};
+import { Show } from "@refinedev/chakra-ui";
+import { IconMoodSmile } from "@tabler/icons-react";
 
 const PostShow: React.FC = () => {
   return (
-    <Show
-      // highlight-start
-      breadcrumb={<CustomBreadcrumb />}
-      // highlight-end
-    >
+    /* highlight-next-line */
+    <Show goBack={<IconMoodSmile />}>
       <p>Rest of your page here</p>
     </Show>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: DummyListPage,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.ShowButton recordItemId="123">
+                Show Post 123
+              </RefineChakra.ShowButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Breadcrumb` documentation &#8594](/docs/ui-integrations/chakra-ui/components/breadcrumb)
-
-### wrapperProps
+### isLoading
 
-If you want to customize the wrapper of the `<Show/>` component, you can use the `wrapperProps` property. For `@refinedev/chakra-ui` wrapper element is `<Box>`s and `wrapperProps` can get every attribute that `<Card>` can get.
+To toggle the loading state of the `<Show/>` component, you can use the `isLoading` property.
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/chakra-ui";
 
 const PostShow: React.FC = () => {
   return (
-    <Show
-      // highlight-start
-      wrapperProps={{
-        borderColor: "blue",
-        borderStyle: "dashed",
-        borderWidth: "2px",
-        p: "2",
-      }}
-      // highlight-end
-    >
+    /* highlight-next-line */
+    <Show isLoading={true}>
       <p>Rest of your page here</p>
     </Show>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: DummyListPage,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.ShowButton recordItemId="123">
+                Show Post 123
+              </RefineChakra.ShowButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Chakra UI #8594](https://www.chakra-ui.com/docs/components/box#usage)
+### breadcrumb
 
-### headerProps
-
-If you want to customize the header of the `<Show/>` component, you can use the `headerProps` property.
+To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/chakra-ui` package.
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
-import { Show } from "@refinedev/chakra-ui";
+import { Show, Breadcrumb } from "@refinedev/chakra-ui";
+import { Box } from "@chakra-ui/react";
 
 const PostShow: React.FC = () => {
   return (
     <Show
       // highlight-start
-      headerProps={{
-        borderColor: "blue",
-        borderStyle: "dashed",
-        borderWidth: "2px",
-      }}
+      breadcrumb={
+        <Box borderColor="blue" borderStyle="dashed" borderWidth="2px">
+          <Breadcrumb />
+        </Box>
+      }
       // highlight-end
     >
       <p>Rest of your page here</p>
@@ -689,38 +481,42 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: DummyListPage,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.ShowButton recordItemId="123">
+                Show Post 123
+              </RefineChakra.ShowButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
-
-### contentProps
+### headerProps
 
-If you want to customize the content of the `<Show/>` component, you can use the `contentProps` property.
+If you want to customize the header of the `<Show/>` component, you can use the `headerProps` property.
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/chakra-ui";
@@ -729,11 +525,10 @@ const PostShow: React.FC = () => {
   return (
     <Show
       // highlight-start
-      contentProps={{
+      headerProps={{
         borderColor: "blue",
         borderStyle: "dashed",
         borderWidth: "2px",
-        p: "2",
       }}
       // highlight-end
     >
@@ -743,54 +538,46 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: DummyListPage,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.ShowButton recordItemId="123">
+                Show Post 123
+              </RefineChakra.ShowButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
-
 ### headerButtons
 
-By default, the `<Show/>` component has a [`<ListButton>`][list-button], [`<EditButton>`][edit-button], [`<DeleteButton>`][delete-button], and a[`<RefreshButton>`][refresh-button] at the header.
-
-You can customize the buttons at the header by using the `headerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, deleteButtonProps, editButtonProps, listButtonProps, refreshButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
-
-:::simple Implementation Tips
+You can customize the buttons at the header by using the `headerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, editButtonProps, deleteButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
 
-- If the "list" resource is not defined, the [`<ListButton>`][list-button] will not render and `listButtonProps` will be `undefined`.
-
-- If [`canDelete`](#candelete-and-canedit) is `false`, the [`<DeleteButton>`][delete-button] will not render and `deleteButtonProps` will be `undefined`.
-
-- If [`canEdit`](#candelete-and-canedit) is `false`, [`<EditButton>`][edit-button] will not render and `editButtonProps` will be `undefined`.
-
-:::
-
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/chakra-ui";
-import { Button, HStack, Box } from "@chakra-ui/react";
+import { Button, HStack } from "@chakra-ui/react";
 
 const PostShow: React.FC = () => {
   return (
@@ -810,95 +597,33 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[
-        {
-          name: "posts",
-          show: PostShow,
-          list: DummyListPage,
-        },
-      ]}
-    />
-  );
-};
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-```
-
-Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `createButtonProps` to utilize the default values of the [`<ListButton>`][list-button], [`<EditButton>`][edit-button], [`<DeleteButton>`][delete-button], and, [`<RefreshButton>`][refresh-button] components.
-
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
-setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
-
-// visible-block-start
-import {
-  Show,
-  ListButton,
-  EditButton,
-  DeleteButton,
-  RefreshButton,
-} from "@refinedev/chakra-ui";
-import { Button, HStack, Box } from "@chakra-ui/react";
-
-const PostShow: React.FC = () => {
-  return (
-    <Show
-      // highlight-start
-      headerButtons={({
-        deleteButtonProps,
-        editButtonProps,
-        listButtonProps,
-        refreshButtonProps,
-      }) => (
-        <HStack>
-          {listButtonProps && (
-            <ListButton {...listButtonProps} meta={{ foo: "bar" }} />
-          )}
-          {editButtonProps && (
-            <EditButton {...editButtonProps} meta={{ foo: "bar" }} />
-          )}
-          {deleteButtonProps && (
-            <DeleteButton {...deleteButtonProps} meta={{ foo: "bar" }} />
-          )}
-          <RefreshButton {...refreshButtonProps} meta={{ foo: "bar" }} />
-          <Button colorScheme="red">Custom Button</Button>
-        </HStack>
-      )}
-      // highlight-end
-    >
-      <p>Rest of your page here</p>
-    </Show>
-  );
-};
-// visible-block-end
-
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: DummyListPage,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.ShowButton recordItemId="123">
+                Show Post 123
+              </RefineChakra.ShowButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -906,11 +631,8 @@ render(
 
 You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property.
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/chakra-ui";
@@ -928,7 +650,7 @@ const PostShow: React.FC = () => {
       }}
       // highlight-end
       headerButtons={
-        <Button variant="outline" colorScheme="green">
+        <Button colorScheme="green" variant="outline">
           Custom Button
         </Button>
       }
@@ -939,38 +661,42 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: DummyListPage,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.ShowButton recordItemId="123">
+                Show Post 123
+              </RefineChakra.ShowButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
-
 ### footerButtons
 
 You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/chakra-ui";
@@ -996,24 +722,33 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: DummyListPage,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.ShowButton recordItemId="123">
+                Show Post 123
+              </RefineChakra.ShowButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1021,11 +756,8 @@ render(
 
 You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property.
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/chakra-ui";
@@ -1053,34 +785,41 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: DummyListPage,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div>
+              <p>This page is empty.</p>
+              <RefineChakra.ShowButton recordItemId="123">
+                Show Post 123
+              </RefineChakra.ShowButton>
+            </div>
+          }
+        />
+        <ReactRouter.Route path="/posts/show/:id" element={<PostShow />} />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Chakra UI &#8594](https://www.chakra-ui.com/docs/components/box#usage)
-
 ## API Reference
 
-### Props
+### Properties
 
-<PropsTable module="@refinedev/chakra-ui/Show" title-default="<Title order={3}>Show {resource.name}</Title>"/>
+<PropsTable module="@refinedev/chakra-ui/Show" />
 
 [list-button]: /docs/ui-integrations/chakra-ui/components/buttons/list-button
 [refresh-button]: /docs/ui-integrations/chakra-ui/components/buttons/refresh-button
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/buttons/clone-button/index.md b/documentation/docs/ui-integrations/chakra-ui/components/buttons/clone-button/index.md
index 4e349fde50ae..4eaf7ff58cf8 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/buttons/clone-button/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/buttons/clone-button/index.md
@@ -3,35 +3,25 @@ title: Clone
 swizzle: true
 ---
 
-```tsx live shared
-const { default: sharedRouterProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: sharedRouterProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-  catchAll: <RefineChakra.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
+`<CloneButton>` uses Chakra UI's [`<Button>`](https://www.chakra-ui.com/docs/components/button#usage) component. It uses the `clone` method from [useNavigation](/docs/routing/hooks/use-navigation) under the hood.
+
+:::simple Good to know
 
+You can swizzle this component to customize it with the [**Refine CLI**](/docs/packages/list-of-packages)
+
+:::
+
+```tsx live shared
 const ClonePage = () => {
   const { list } = RefineCore.useNavigation();
-  const params = RefineCore.useRouterContext().useParams();
+  const params = RefineCore.useParsed();
 
   return (
     <ChakraUI.VStack alignItems="flex-start">
       <ChakraUI.Text as="i" color="gray.700" fontSize="sm">
         URL Parameters:
       </ChakraUI.Text>
-      <ChakraUI.Code>{JSON.stringify(params)}</ChakraUI.Code>
+      <ChakraUI.Code>{JSON.stringify(params, null, 2)}</ChakraUI.Code>
 
       <ChakraUI.Button
         size="sm"
@@ -45,25 +35,21 @@ const ClonePage = () => {
 };
 ```
 
-`<CloneButton>` uses Chakra UI's [`<Button>`](https://www.chakra-ui.com/docs/components/button#usage) component. It uses the `clone` method from [useNavigation](/docs/routing/hooks/use-navigation) under the hood.
-
-:::simple Good to know
-
-You can swizzle this component to customize it with the [**Refine CLI**](/docs/packages/list-of-packages)
-
-:::
-
 ## Usage
 
 ```tsx live url=http://localhost:3000 previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import routerProvider from "@refinedev/react-router-v6/legacy";
+
+//hide-start
+List.defaultProps = {
+  headerButtons: <></>,
+};
+//hide-end
 
 // visible-block-start
 import {
   List,
-  // highlight-next-line
+  //highlight-next-line
   CloneButton,
 } from "@refinedev/chakra-ui";
 import {
@@ -97,9 +83,9 @@ const PostList: React.FC = () => {
         accessorKey: "id",
         cell: function render({ getValue }) {
           return (
-            // highlight-start
+            //highlight-start
             <CloneButton recordItemId={getValue() as number} />
-            // highlight-end
+            //highlight-end
           );
         },
       },
@@ -111,50 +97,35 @@ const PostList: React.FC = () => {
     columns,
   });
 
-  //hide-start
-  List.defaultProps = {
-    headerButtons: <></>,
-  };
-  //hide-end
-
   return (
     <List>
-      <TableContainer>
-        <Table variant="simple" whiteSpace="pre-line">
+      <TableContainer whiteSpace="pre-line">
+        <Table variant="simple">
           <Thead>
             {getHeaderGroups().map((headerGroup) => (
               <Tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  return (
-                    <Th key={header.id}>
-                      {!header.isPlaceholder &&
-                        flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
-                    </Th>
-                  );
-                })}
+                {headerGroup.headers.map((header) => (
+                  <Th key={header.id}>
+                    {!header.isPlaceholder &&
+                      flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                  </Th>
+                ))}
               </Tr>
             ))}
           </Thead>
           <Tbody>
-            {getRowModel().rows.map((row) => {
-              return (
-                <Tr key={row.id}>
-                  {row.getVisibleCells().map((cell) => {
-                    return (
-                      <Td key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </Td>
-                    );
-                  })}
-                </Tr>
-              );
-            })}
+            {getRowModel().rows.map((row) => (
+              <Tr key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <Td key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Td>
+                ))}
+              </Tr>
+            ))}
           </Tbody>
         </Table>
       </TableContainer>
@@ -168,25 +139,34 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      notificationProvider={RefineChakra.notificationProvider()}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
-          create: ClonePage,
+          //highlight-start
+          list: "/posts",
+          clone: "/posts/clone/:id",
+          //highlight-end
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+          <ReactRouter.Route path="/posts/clone/:id" element={<ClonePage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -197,35 +177,43 @@ render(
 `recordItemId` is used to append the record id to the end of the route path.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { CloneButton } from "@refinedev/chakra-ui";
 
 const MyCloneComponent = () => {
+  //highlight-next-line
   return <CloneButton colorScheme="black" recordItemId="123" />;
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          create: ClonePage,
-          list: MyCloneComponent,
+          list: "/posts",
+          clone: "/posts/clone/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyCloneComponent />} />
+          <ReactRouter.Route path="/posts/clone/:id" element={<ClonePage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -242,46 +230,65 @@ Clicking the button will trigger the `clone` method of [`useNavigation`](/docs/r
 `resource` is used to redirect the app to the `clone` action of the given resource name. By default, the app redirects to the inferred resource's `clone` action path.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { CloneButton } from "@refinedev/chakra-ui";
 
 const MyCloneComponent = () => {
+  //highlight-next-line
   return (
     <CloneButton colorScheme="black" resource="categories" recordItemId="2" />
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyCloneComponent,
+          list: "/posts",
         },
         {
+          //highlight-start
           name: "categories",
-          create: ClonePage,
+          list: "/categories",
+          clone: "/categories/clone/:id",
+          //highlight-end
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyCloneComponent />} />
+        </ReactRouter.Route>
+        <ReactRouter.Route
+          path="/categories/clone/:id"
+          element={
+            <div
+              style={{
+                padding: 16,
+              }}
+            >
+              <ClonePage />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-Clicking the button will trigger the `clone` method of [`useNavigation`](/docs/routing/hooks/use-navigation) and then redirect the app to the `clone` action path of the resource, filling the necessary parameters in the route.
-
 If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
 
 > For more information, refer to the [`identifier` section of the `<Refine/>` component documentation &#8594](/docs/core/refine-component#identifier)
@@ -294,45 +301,52 @@ If the `clone` action route is defined by the pattern: `/posts/:authorId/clone/:
 
 ```tsx
 const MyComponent = () => {
+  //highlight-next-line
   return <CloneButton meta={{ authorId: "10" }} />;
 };
 ```
 
 ### hideText
 
-`hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
+It is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { CloneButton } from "@refinedev/chakra-ui";
 
 const MyCloneComponent = () => {
-  return <CloneButton colorScheme="black" hideText />;
+  //highlight-next-line
+  return <CloneButton colorScheme="black" hideText recordItemId="123" />;
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyCloneComponent,
-          create: ClonePage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyCloneComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -344,6 +358,7 @@ The `accessControl` prop can be used to skip the access control check with its `
 import { CloneButton } from "@refinedev/chakra-ui";
 
 export const MyListComponent = () => {
+  //highlight-next-line
   return (
     <CloneButton accessControl={{ enabled: true, hideIfUnauthorized: true }} />
   );
@@ -359,3 +374,9 @@ Use `resource` prop instead.
 ### Properties
 
 <PropsTable module="@refinedev/chakra-ui/CloneButton" />
+
+:::simple External Props
+
+It also accepts all props of Chakra UI [Button](https://chakra-ui.com/docs/components/button#props).
+
+:::
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/buttons/create-button/index.md b/documentation/docs/ui-integrations/chakra-ui/components/buttons/create-button/index.md
index 33e48f42eb6d..73a21f90d26c 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/buttons/create-button/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/buttons/create-button/index.md
@@ -3,48 +3,6 @@ title: Create
 swizzle: true
 ---
 
-```tsx live shared
-const { default: sharedRouterProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: sharedRouterProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-  catchAll: <RefineChakra.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-
-const CreatePage = () => {
-  const { list } = RefineCore.useNavigation();
-  const params = RefineCore.useRouterContext().useParams();
-
-  return (
-    <ChakraUI.VStack alignItems="flex-start">
-      <ChakraUI.Text as="i" color="gray.700" fontSize="sm">
-        URL Parameters:
-      </ChakraUI.Text>
-      <ChakraUI.Code>{JSON.stringify(params)}</ChakraUI.Code>
-
-      <ChakraUI.Button
-        size="sm"
-        onClick={() => list("posts")}
-        colorScheme="green"
-      >
-        Go back
-      </ChakraUI.Button>
-    </ChakraUI.VStack>
-  );
-};
-```
-
 `<CreateButton>` uses Chakra UI's [`<Button>`](https://www.chakra-ui.com/docs/components/button#usage) component. It uses the `create` method from [`useNavigation`](/docs/routing/hooks/use-navigation) under the hood. It can be useful to redirect the app to the create page route of resource.
 
 :::simple Good to know
@@ -55,9 +13,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ## Usage
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live previewHeight=360px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
 import {
@@ -150,24 +107,53 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
+const CreatePage = () => {
+  const { list } = RefineCore.useNavigation();
+  const parsed = RefineCore.useParsed();
   return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
+    <ChakraUI.VStack alignItems="flex-start">
+      <ChakraUI.Text as="i" color="gray.700" fontSize="sm">
+        URL Parameters:
+      </ChakraUI.Text>
+      <ChakraUI.Code>{JSON.stringify(parsed, null, 2)}</ChakraUI.Code>
+
+      <ChakraUI.Button
+        size="sm"
+        onClick={() => list("posts")}
+        colorScheme="green"
+      >
+        Go back
+      </ChakraUI.Button>
+    </ChakraUI.VStack>
+  );
+};
+
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
-          create: CreatePage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+          <ReactRouter.Route path="create" element={<CreatePage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -177,40 +163,69 @@ render(
 
 `resource` is used to redirect the app to the `create` action path of the given resource name. By default, the app redirects to the inferred resource's `create` action path.
 
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+```tsx live previewHeight=160px
+setInitialRoutes(["/categories"]);
 
 // visible-block-start
 import { CreateButton } from "@refinedev/chakra-ui";
 
 const MyCreateComponent = () => {
-  return <CreateButton colorScheme="black" resource="categories" />;
+  return <CreateButton colorScheme="blue" resource="categories" />;
 };
 // visible-block-end
 
-const App = () => {
+const CategoryCreate = () => {
+  const { list } = RefineCore.useNavigation();
+  const parsed = RefineCore.useParsed();
   return (
-    <Refine
+    <ChakraUI.VStack alignItems="flex-start">
+      <ChakraUI.Text as="i" color="gray.700" fontSize="sm">
+        URL Parameters:
+      </ChakraUI.Text>
+      <ChakraUI.Code>{JSON.stringify(parsed, null, 2)}</ChakraUI.Code>
+
+      <ChakraUI.Button
+        size="sm"
+        onClick={() => list("categories")}
+        colorScheme="green"
+      >
+        Go back
+      </ChakraUI.Button>
+    </ChakraUI.VStack>
+  );
+};
+
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyCreateComponent,
+          list: "/posts",
+          create: "/posts/create",
         },
         {
           name: "categories",
-          create: CreatePage,
+          list: "/categories",
+          create: "/categories/create",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/categories"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyCreateComponent />} />
+          <ReactRouter.Route path="create" element={<CategoryCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -218,7 +233,7 @@ Clicking the button will trigger the `create` method of [`useNavigation`](/docs/
 
 If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
 
-> For more information, refer to the [`identifier` of the `<Refine/>` component documentation &#8594](/docs/core/refine-component#identifier)
+> For more information, refer to the [`identifier` section of the `<Refine/>` component documentation &#8594](/docs/core/refine-component#identifier)
 
 ### meta
 
@@ -234,52 +249,89 @@ const MyComponent = () => {
 
 ### hideText
 
-`hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
-
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
+It is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
-import { Refine } from "@refinedev/core";
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { CreateButton } from "@refinedev/chakra-ui";
 
 const MyCreateComponent = () => {
-  return <CreateButton colorScheme="black" hideText />;
+  return (
+    <CreateButton
+      // highlight-next-line
+      hideText={true}
+    />
+  );
 };
 // visible-block-end
 
-const App = () => {
+const CreatePage = () => {
+  const { list } = RefineCore.useNavigation();
+  const parsed = RefineCore.useParsed();
   return (
-    <Refine
+    <ChakraUI.VStack alignItems="flex-start">
+      <ChakraUI.Text as="i" color="gray.700" fontSize="sm">
+        URL Parameters:
+      </ChakraUI.Text>
+      <ChakraUI.Code>{JSON.stringify(parsed, null, 2)}</ChakraUI.Code>
+
+      <ChakraUI.Button
+        size="sm"
+        onClick={() => list("posts")}
+        colorScheme="green"
+      >
+        Go back
+      </ChakraUI.Button>
+    </ChakraUI.VStack>
+  );
+};
+
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyCreateComponent,
-          create: CreatePage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyCreateComponent />} />
+          <ReactRouter.Route path="create" element={<CreatePage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 ### accessControl
 
-The `accessControl` prop can be used to skip the access control check with its `enabled` property or to hide the button when the user does not have the permission to access the resource with `hideIfUnauthorized` property. This is relevant only when an [`accessControlProvider`](/docs/authorization/access-control-provider) is provided to [`<Refine/>`](/docs/core/refine-component)
+This prop can be used to skip access control check with its `enabled` property or to hide the button when the user does not have the permission to access the resource with `hideIfUnauthorized` property. This is relevant only when an [`accessControlProvider`](/docs/authorization/access-control-provider) is provided to [`<Refine/>`](/docs/core/refine-component)
 
 ```tsx
 import { CreateButton } from "@refinedev/chakra-ui";
 
 export const MyListComponent = () => {
   return (
-    <CreateButton accessControl={{ enabled: true, hideIfUnauthorized: true }} />
+    <CreateButton
+      accessControl={{
+        enabled: true,
+        hideIfUnauthorized: true,
+      }}
+    />
   );
 };
 ```
@@ -292,4 +344,10 @@ Use `resource` prop instead.
 
 ### Properties
 
-<PropsTable module="@refinedev/chakra-ui/CloneButton" />
+<PropsTable module="@refinedev/chakra-ui/CreateButton" />
+
+:::simple External Props
+
+It also accepts all props of Chakra UI [Button](https://chakra-ui.com/docs/components/button#props).
+
+:::
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/buttons/delete-button/index.md b/documentation/docs/ui-integrations/chakra-ui/components/buttons/delete-button/index.md
index 1a9c04a76163..8e29da9a29c2 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/buttons/delete-button/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/buttons/delete-button/index.md
@@ -3,24 +3,6 @@ title: Delete
 swizzle: true
 ---
 
-```tsx live shared
-const { default: sharedRouterProvider } = LegacyRefineReactRouterV6;
-setRefineProps({
-  legacyRouterProvider: sharedRouterProvider,
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-  catchAll: <RefineChakra.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-```
-
 `<DeleteButton>` uses Chakra UI's [`<Button>`](https://www.chakra-ui.com/docs/components/button#usage) and [`<Popover>`](https://www.chakra-ui.com/docs/components/popover#usage) components.
 When you try to delete something, a pop-up shows up and asks for confirmation. When confirmed it executes the [`useDelete`](/docs/data/hooks/use-delete) method provided by your [`dataProvider`](/docs/data/data-provider).
 
@@ -32,10 +14,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ## Usage
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live previewHeight=360px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import {
@@ -139,24 +119,30 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -164,119 +150,101 @@ render(
 
 ### recordItemId
 
-`recordItemId` allows us to manage which record will be deleted. By default, it will be read from the URL.
+`recordItemId` allows us to manage which record will be deleted. By default, the `recordItemId` is inferred from the route params.
 
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
+```tsx live previewHeight=160px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { DeleteButton } from "@refinedev/chakra-ui";
 
 const MyDeleteComponent = () => {
-  return <DeleteButton recordItemId="123" />;
+  return (
+    <DeleteButton
+      resource="posts"
+      // highlight-next-line
+      recordItemId="123"
+    />
+  );
 };
 // visible-block-end
 
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      return {
-        data: {},
-      };
-    },
-  };
-
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
-      dataProvider={customDataProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyDeleteComponent,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyDeleteComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete) method and then the record whose resource is "post" and whose id is "123" gets deleted.
+Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete) method and then the record whose resource is "posts" and whose id is "123" will be deleted.
 
 ### resource
 
-`resource` allows us to manage which resource's record is going to be deleted. By default, it will be read from the URL.
+`resource` allows us to manage which resource's record is going to be deleted. By default, the `resource` is inferred from the route params.
 
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
+```tsx live previewHeight=160px
+setInitialRoutes(["/categories"]);
 
 // visible-block-start
 import { DeleteButton } from "@refinedev/chakra-ui";
 
 const MyDeleteComponent = () => {
-  return <DeleteButton resource="categories" recordItemId="2" />;
+  return <DeleteButton resource="categories" recordItemId="123" />;
 };
 // visible-block-end
 
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      return {
-        data: {},
-      };
-    },
-  };
-
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
-      dataProvider={customDataProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyDeleteComponent,
+          list: "/posts",
         },
         {
           name: "categories",
+          list: "/categories",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/categories"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyDeleteComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete) method and then the record whose resource is "categories" and whose id is "2" gets deleted.
+Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete) method and then the record whose resource is "categories" and whose id is "123" will be deleted.
 
 If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
 
@@ -284,14 +252,12 @@ If you have multiple resources with the same name, you can pass the `identifier`
 
 ### onSuccess
 
-`onSuccess` can be used if you want to do anything based on the result returned after the delete request.
+`onSuccess` can be used if you want to do something based on the results returned after the delete request.
 
 For example, let's `console.log` after deletion:
 
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
+```tsx live previewHeight=160px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { DeleteButton } from "@refinedev/chakra-ui";
@@ -299,7 +265,7 @@ import { DeleteButton } from "@refinedev/chakra-ui";
 const MyDeleteComponent = () => {
   return (
     <DeleteButton
-      resourceNameOrRouteName="posts"
+      resource="posts"
       recordItemId="1"
       onSuccess={(value) => {
         console.log(value);
@@ -309,164 +275,95 @@ const MyDeleteComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      return {
-        message: "You have successfully deleted the record",
-      };
-    },
-  };
-
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
-      dataProvider={customDataProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyDeleteComponent,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyDeleteComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-### mutationMode
+### hideText
 
-Determines which mode mutation will have while executing `<DeleteButton>`.
+It is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
+```tsx live previewHeight=160px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { DeleteButton } from "@refinedev/chakra-ui";
 
 const MyDeleteComponent = () => {
-  return <DeleteButton recordItemId="1" mutationMode="undoable" />;
-};
-// visible-block-end
-
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      return {
-        data: {},
-      };
-    },
-  };
-
   return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
-      dataProvider={customDataProvider}
-      notificationProvider={RefineChakra.notificationProvider()}
-      resources={[
-        {
-          name: "posts",
-          list: MyDeleteComponent,
-        },
-      ]}
+    <DeleteButton
+      // highlight-next-line
+      hideText={true}
     />
   );
 };
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-```
-
-> For more information, refer to the [mutation mode docsumentation &#8594](/advanced-tutorials/mutation-mode.md)
-
-### hideText
-
-`hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
-
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
-
-// visible-block-start
-import { DeleteButton } from "@refinedev/chakra-ui";
-
-const MyDeleteComponent = () => {
-  return <DeleteButton recordItemId="1" hideText />;
-};
 // visible-block-end
 
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      return {
-        data: {},
-      };
-    },
-  };
-
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
-      dataProvider={customDataProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyDeleteComponent,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyDeleteComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 ### accessControl
 
-The `accessControl` prop can be used to skip the access control check with its `enabled` property or to hide the button when the user does not have the permission to access the resource with `hideIfUnauthorized` property. This is relevant only when an [`accessControlProvider`](/docs/authorization/access-control-provider) is provided to [`<Refine/>`](/docs/core/refine-component)
+This prop can be used to skip access control check with its `enabled` property or to hide the button when the user does not have the permission to access the resource with `hideIfUnauthorized` property. This is relevant only when an [`accessControlProvider`](/docs/authorization/access-control-provider) is provided to [`<Refine/>`](/docs/core/refine-component)
 
 ```tsx
 import { DeleteButton } from "@refinedev/chakra-ui";
 
 export const MyListComponent = () => {
   return (
-    <DeleteButton accessControl={{ enabled: true, hideIfUnauthorized: true }} />
+    <DeleteButton
+      accessControl={{
+        enabled: true,
+        hideIfUnauthorized: true,
+      }}
+    />
   );
 };
 ```
@@ -475,72 +372,14 @@ export const MyListComponent = () => {
 
 Use `resource` prop instead.
 
-## How to override confirm texts?
-
-You can change the text that appears when you confirm a transaction with `confirmTitle` prop, as well as what 'ok' and 'cancel' buttons text look like with the `confirmOkText` and `confirmCancelText` props.
-
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
-
-// visible-block-start
-import { DeleteButton } from "@refinedev/chakra-ui";
-
-const MyDeleteComponent = () => {
-  return (
-    <DeleteButton
-      //hide-start
-      recordItemId="1"
-      //hide-end
-      confirmTitle="Custom Title"
-      confirmOkText="Ok Text"
-      confirmCancelText="Delete Text"
-    />
-  );
-};
-// visible-block-end
-
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      console.log("girdi");
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      return {
-        data: {},
-      };
-    },
-  };
-
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
-      dataProvider={customDataProvider}
-      resources={[
-        {
-          name: "posts",
-          list: MyDeleteComponent,
-        },
-      ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-```
-
 ## API Reference
 
 ### Properties
 
 <PropsTable module="@refinedev/chakra-ui/DeleteButton" />
+
+:::simple External Props
+
+It also accepts all props of Chakra UI [Button](https://chakra-ui.com/docs/components/button#props).
+
+:::
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/buttons/edit-button/index.md b/documentation/docs/ui-integrations/chakra-ui/components/buttons/edit-button/index.md
index 46fb3fdb69c9..73b0056e17ed 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/buttons/edit-button/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/buttons/edit-button/index.md
@@ -3,48 +3,6 @@ title: Edit
 swizzle: true
 ---
 
-```tsx live shared
-const { default: sharedRouterProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: sharedRouterProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-  catchAll: <RefineChakra.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-
-const EditPage = () => {
-  const { list } = RefineCore.useNavigation();
-  const params = RefineCore.useRouterContext().useParams();
-
-  return (
-    <ChakraUI.VStack alignItems="flex-start">
-      <ChakraUI.Text as="i" color="gray.700" fontSize="sm">
-        URL Parameters:
-      </ChakraUI.Text>
-      <ChakraUI.Code>{JSON.stringify(params)}</ChakraUI.Code>
-
-      <ChakraUI.Button
-        size="sm"
-        onClick={() => list("posts")}
-        colorScheme="green"
-      >
-        Go back
-      </ChakraUI.Button>
-    </ChakraUI.VStack>
-  );
-};
-```
-
 `<EditButton>` uses Chakra UI's [`<Button>`](https://www.chakra-ui.com/docs/components/button#usage) component. It uses the `edit` method from [`useNavigation`](/docs/routing/hooks/use-navigation) under the hood. It can be useful when redirecting the app to the edit page with the record id route of resource.
 
 :::simple Good to know
@@ -55,14 +13,12 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ## Usage
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live previewHeight=360px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine, useNavigation, useRouterContext } from "@refinedev/core";
 
 // visible-block-start
 import {
   List,
-
   // highlight-next-line
   EditButton,
 } from "@refinedev/chakra-ui";
@@ -107,11 +63,7 @@ const PostList: React.FC = () => {
     [],
   );
 
-  const {
-    getHeaderGroups,
-    getRowModel,
-    refineCore: { setCurrent, pageCount, current },
-  } = useTable({
+  const { getHeaderGroups, getRowModel } = useTable({
     columns,
   });
 
@@ -166,24 +118,53 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
+const EditPage = () => {
+  const { list } = RefineCore.useNavigation();
+  const parsed = RefineCore.useParsed();
   return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
+    <ChakraUI.VStack alignItems="flex-start">
+      <ChakraUI.Text as="i" color="gray.700" fontSize="sm">
+        URL Parameters:
+      </ChakraUI.Text>
+      <ChakraUI.Code>{JSON.stringify(parsed, null, 2)}</ChakraUI.Code>
+
+      <ChakraUI.Button
+        size="sm"
+        onClick={() => list("posts")}
+        colorScheme="green"
+      >
+        Go back
+      </ChakraUI.Button>
+    </ChakraUI.VStack>
+  );
+};
+
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
-          edit: EditPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+          <ReactRouter.Route path="edit/:id" element={<EditPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -193,80 +174,134 @@ render(
 
 `recordItemId` is used to append the record id to the end of the route path.
 
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+```tsx live previewHeight=160px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { EditButton } from "@refinedev/chakra-ui";
 
 const MyEditComponent = () => {
-  return <EditButton colorScheme="black" recordItemId="123" />;
+  return <EditButton recordItemId="123" />;
 };
 // visible-block-end
 
-const App = () => {
+const EditPage = () => {
+  const { list } = RefineCore.useNavigation();
+  const parsed = RefineCore.useParsed();
   return (
-    <Refine
+    <ChakraUI.VStack alignItems="flex-start">
+      <ChakraUI.Text as="i" color="gray.700" fontSize="sm">
+        URL Parameters:
+      </ChakraUI.Text>
+      <ChakraUI.Code>{JSON.stringify(parsed, null, 2)}</ChakraUI.Code>
+
+      <ChakraUI.Button
+        size="sm"
+        onClick={() => list("posts")}
+        colorScheme="green"
+      >
+        Go back
+      </ChakraUI.Button>
+    </ChakraUI.VStack>
+  );
+};
+
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyEditComponent,
-          edit: EditPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyEditComponent />} />
+          <ReactRouter.Route path="edit/:id" element={<EditPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 ### resource
 
-Redirection endpoint is defined by the `resource` property and its `edit` action path. By default, `<EditButton>` uses the inferred resource from the route.
-
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
+`resource` is used to redirect the app to the `edit` action path of the given resource name. By default, the app redirects to the inferred resource's `edit` action path.
 
-import { Refine } from "@refinedev/core";
+```tsx live previewHeight=160px
+setInitialRoutes(["/categories"]);
 
 // visible-block-start
 import { EditButton } from "@refinedev/chakra-ui";
 
 const MyEditComponent = () => {
-  return (
-    <EditButton colorScheme="black" resource="categories" recordItemId="2" />
-  );
+  return <EditButton resource="categories" recordItemId="123" />;
 };
 // visible-block-end
 
-const App = () => {
+const CategoryEdit = () => {
+  const { list } = RefineCore.useNavigation();
+  const parsed = RefineCore.useParsed();
   return (
-    <Refine
+    <ChakraUI.VStack alignItems="flex-start">
+      <ChakraUI.Text as="i" color="gray.700" fontSize="sm">
+        URL Parameters:
+      </ChakraUI.Text>
+      <ChakraUI.Code>{JSON.stringify(parsed, null, 2)}</ChakraUI.Code>
+
+      <ChakraUI.Button
+        size="sm"
+        onClick={() => list("categories")}
+        colorScheme="green"
+      >
+        Go back
+      </ChakraUI.Button>
+    </ChakraUI.VStack>
+  );
+};
+
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyEditComponent,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
         {
           name: "categories",
-          edit: EditPage,
+          list: "/categories",
+          edit: "/categories/edit/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/categories"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyEditComponent />} />
+          <ReactRouter.Route path="edit/:id" element={<CategoryEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -274,7 +309,7 @@ Clicking the button will trigger the `edit` method of [`useNavigation`](/docs/ro
 
 If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
 
-> For more information, refer to the [`identifier` of the `<Refine/>` component documentation &#8594](/docs/core/refine-component#identifier)
+> For more information, refer to the [`identifier` section of the `<Refine/>` component documentation &#8594](/docs/core/refine-component#identifier)
 
 ### meta
 
@@ -292,50 +327,88 @@ const MyComponent = () => {
 
 It is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+```tsx live previewHeight=160px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { EditButton } from "@refinedev/chakra-ui";
 
 const MyEditComponent = () => {
-  return <EditButton colorScheme="black" recordItemId="123" hideText />;
+  return (
+    <EditButton
+      // highlight-next-line
+      hideText={true}
+      recordItemId="123"
+    />
+  );
 };
 // visible-block-end
 
-const App = () => {
+const EditPage = () => {
+  const { list } = RefineCore.useNavigation();
+  const parsed = RefineCore.useParsed();
   return (
-    <Refine
+    <ChakraUI.VStack alignItems="flex-start">
+      <ChakraUI.Text as="i" color="gray.700" fontSize="sm">
+        URL Parameters:
+      </ChakraUI.Text>
+      <ChakraUI.Code>{JSON.stringify(parsed, null, 2)}</ChakraUI.Code>
+
+      <ChakraUI.Button
+        size="sm"
+        onClick={() => list("posts")}
+        colorScheme="green"
+      >
+        Go back
+      </ChakraUI.Button>
+    </ChakraUI.VStack>
+  );
+};
+
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyEditComponent,
-          edit: EditPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyEditComponent />} />
+          <ReactRouter.Route path="edit/:id" element={<EditPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 ### accessControl
 
-The `accessControl` prop can be used to skip the access control check with its `enabled` property or to hide the button when the user does not have the permission to access the resource with `hideIfUnauthorized` property. This is relevant only when an [`accessControlProvider`](/docs/authorization/access-control-provider) is provided to [`<Refine/>`](/docs/core/refine-component)
+This prop can be used to skip access control check with its `enabled` property or to hide the button when the user does not have the permission to access the resource with `hideIfUnauthorized` property. This is relevant only when an [`accessControlProvider`](/docs/authorization/access-control-provider) is provided to [`<Refine/>`](/docs/core/refine-component)
 
 ```tsx
 import { EditButton } from "@refinedev/chakra-ui";
 
 export const MyListComponent = () => {
   return (
-    <EditButton accessControl={{ enabled: true, hideIfUnauthorized: true }} />
+    <EditButton
+      accessControl={{
+        enabled: true,
+        hideIfUnauthorized: true,
+      }}
+    />
   );
 };
 ```
@@ -349,3 +422,9 @@ Use `resource` prop instead.
 ### Properties
 
 <PropsTable module="@refinedev/chakra-ui/EditButton" />
+
+:::simple External Props
+
+It also accepts all props of Chakra UI [Button](https://chakra-ui.com/docs/components/button#props).
+
+:::
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/buttons/export-button/index.md b/documentation/docs/ui-integrations/chakra-ui/components/buttons/export-button/index.md
index df661a102173..cbd630c50d08 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/buttons/export-button/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/buttons/export-button/index.md
@@ -3,40 +3,14 @@ title: Export
 swizzle: true
 ---
 
-```tsx live shared
-const { default: sharedRouterProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: sharedRouterProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-  catchAll: <RefineChakra.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-```
-
 `<ExportButton>` is an Chakra UI [`<Button>`](https://www.chakra-ui.com/docs/components/button#usage) with a default export icon and a default text with "Export". It only has presentational value.
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live previewHeight=360px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
-//highlight-next-line
 import { useExport } from "@refinedev/core";
-import {
-  List,
-  //highlight-next-line
-  ExportButton,
-} from "@refinedev/chakra-ui";
+import { List, ExportButton } from "@refinedev/chakra-ui";
 import {
   TableContainer,
   Table,
@@ -45,6 +19,8 @@ import {
   Th,
   Tbody,
   Td,
+  Box,
+  Text,
 } from "@chakra-ui/react";
 import { useTable } from "@refinedev/react-table";
 import { ColumnDef, flexRender } from "@tanstack/react-table";
@@ -66,15 +42,10 @@ const PostList: React.FC = () => {
     [],
   );
 
-  const {
-    getHeaderGroups,
-    getRowModel,
-    refineCore: { setCurrent, pageCount, current },
-  } = useTable({
+  const { getHeaderGroups, getRowModel } = useTable({
     columns,
   });
 
-  //highlight-start
   const { triggerExport, isLoading: exportLoading } = useExport<IPost>({
     mapData: (item) => {
       return {
@@ -85,22 +56,20 @@ const PostList: React.FC = () => {
     pageSize: 10,
     maxItemCount: 50,
   });
-  //highlight-end
 
   return (
     <List
       headerButtons={
-        // highlight-next-line
         <ExportButton loading={exportLoading} onClick={triggerExport} />
       }
     >
-      <TableContainer>
-        <Table variant="simple" whiteSpace="pre-line">
-          <Thead>
-            {getHeaderGroups().map((headerGroup) => (
-              <Tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  return (
+      <Box position="relative">
+        <TableContainer whiteSpace="pre-line">
+          <Table variant="simple">
+            <Thead>
+              {getHeaderGroups().map((headerGroup) => (
+                <Tr key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
                     <Th key={header.id}>
                       {!header.isPlaceholder &&
                         flexRender(
@@ -108,31 +77,27 @@ const PostList: React.FC = () => {
                           header.getContext(),
                         )}
                     </Th>
-                  );
-                })}
-              </Tr>
-            ))}
-          </Thead>
-          <Tbody>
-            {getRowModel().rows.map((row) => {
-              return (
+                  ))}
+                </Tr>
+              ))}
+            </Thead>
+            <Tbody>
+              {getRowModel().rows.map((row) => (
                 <Tr key={row.id}>
-                  {row.getVisibleCells().map((cell) => {
-                    return (
-                      <Td key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </Td>
-                    );
-                  })}
+                  {row.getVisibleCells().map((cell) => (
+                    <Td key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </Td>
+                  ))}
                 </Tr>
-              );
-            })}
-          </Tbody>
-        </Table>
-      </TableContainer>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </Box>
     </List>
   );
 };
@@ -143,23 +108,30 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -171,40 +143,120 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ## Properties
 
-### hideText
-
-`hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
+### `hideText`
 
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
+It is used to show and hide the text of the button. When `true`, only the button icon is shown.
 
-import { Refine } from "@refinedev/core";
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { ExportButton } from "@refinedev/chakra-ui";
+import { useExport } from "@refinedev/core";
 
 const MyExportComponent = () => {
-  return <ExportButton colorScheme="black" hideText />;
+  const { triggerExport, isLoading } = useExport({
+    mapData: (item) => {
+      return {
+        id: item.id,
+        title: item.title,
+      };
+    },
+  });
+
+  return (
+    <ExportButton
+      colorScheme="blue"
+      hideText={true}
+      loading={isLoading}
+      onClick={triggerExport}
+    />
+  );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyExportComponent,
+          list: "/posts",
         },
       ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyExportComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
+);
+```
+
+### `loading`
+
+It is used to show a loading state on the button when the export process is in progress.
+
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
+
+// visible-block-start
+import { ExportButton } from "@refinedev/chakra-ui";
+import { useExport } from "@refinedev/core";
+
+const MyExportComponent = () => {
+  const { triggerExport, isLoading } = useExport({
+    mapData: (item) => {
+      return {
+        id: item.id,
+        title: item.title,
+      };
+    },
+  });
+
+  return (
+    <ExportButton
+      colorScheme="blue"
+      loading={isLoading}
+      onClick={triggerExport}
     />
   );
 };
+// visible-block-end
 
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyExportComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -213,3 +265,9 @@ render(
 ### Properties
 
 <PropsTable module="@refinedev/chakra-ui/ExportButton" />
+
+:::simple External Props
+
+It also accepts all props of Chakra UI [Button](https://chakra-ui.com/docs/components/button#props).
+
+:::
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/buttons/import-button/index.md b/documentation/docs/ui-integrations/chakra-ui/components/buttons/import-button/index.md
index a3868027af5b..5d3c3496ba47 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/buttons/import-button/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/buttons/import-button/index.md
@@ -3,42 +3,16 @@ title: Import
 swizzle: true
 ---
 
-```tsx live shared
-const { default: sharedRouterProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: sharedRouterProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-  catchAll: <RefineChakra.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-```
-
 `<ImportButton>` is compatible with the [`useImport`][useimport] hook and is meant to be used as it's upload button.
 
 It uses Chakra UI's [`<Button>`][button] component and native html [`<input>`][input] element. It wraps a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) with a [`<Button>`][button] component and [`<input>`][input] element and accepts its own properties separately.
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live previewHeight=360px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
-//highlight-next-line
 import { useImport, useNotification } from "@refinedev/core";
-import {
-  List,
-  //highlight-next-line
-  ImportButton,
-} from "@refinedev/chakra-ui";
+import { List, ImportButton } from "@refinedev/chakra-ui";
 import {
   TableContainer,
   Table,
@@ -47,6 +21,8 @@ import {
   Th,
   Tbody,
   Td,
+  Box,
+  Text,
 } from "@chakra-ui/react";
 import { useTable } from "@refinedev/react-table";
 import { ColumnDef, flexRender } from "@tanstack/react-table";
@@ -68,15 +44,10 @@ const PostList: React.FC = () => {
     [],
   );
 
-  const {
-    getHeaderGroups,
-    getRowModel,
-    refineCore: { setCurrent, pageCount, current },
-  } = useTable({
+  const { getHeaderGroups, getRowModel } = useTable({
     columns,
   });
 
-  //highlight-start
   const { open } = useNotification();
 
   const { inputProps, isLoading } = useImport({
@@ -87,22 +58,20 @@ const PostList: React.FC = () => {
       });
     },
   });
-  //highlight-end
 
   return (
     <List
       headerButtons={
-        // highlight-next-line
         <ImportButton loading={isLoading} inputProps={inputProps} />
       }
     >
-      <TableContainer>
-        <Table variant="simple" whiteSpace="pre-line">
-          <Thead>
-            {getHeaderGroups().map((headerGroup) => (
-              <Tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  return (
+      <Box position="relative">
+        <TableContainer whiteSpace="pre-line">
+          <Table variant="simple">
+            <Thead>
+              {getHeaderGroups().map((headerGroup) => (
+                <Tr key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
                     <Th key={header.id}>
                       {!header.isPlaceholder &&
                         flexRender(
@@ -110,31 +79,47 @@ const PostList: React.FC = () => {
                           header.getContext(),
                         )}
                     </Th>
-                  );
-                })}
-              </Tr>
-            ))}
-          </Thead>
-          <Tbody>
-            {getRowModel().rows.map((row) => {
-              return (
+                  ))}
+                </Tr>
+              ))}
+            </Thead>
+            <Tbody>
+              {getRowModel().rows.map((row) => (
                 <Tr key={row.id}>
-                  {row.getVisibleCells().map((cell) => {
-                    return (
-                      <Td key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </Td>
-                    );
-                  })}
+                  {row.getVisibleCells().map((cell) => (
+                    <Td key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </Td>
+                  ))}
                 </Tr>
-              );
-            })}
-          </Tbody>
-        </Table>
-      </TableContainer>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+        <Box
+          position="absolute"
+          top={0}
+          left={0}
+          right={0}
+          bottom={0}
+          height="100%"
+          pointerEvents="none"
+          background="linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0.1) 95%, rgba(0, 0, 0, 0.2) 100%)"
+        />
+        <Text
+          position="absolute"
+          bottom={2}
+          left="50%"
+          transform="translateX(-50%)"
+          color="gray.700"
+          fontSize="sm"
+        >
+          ✨ Live Preview
+        </Text>
+      </Box>
     </List>
   );
 };
@@ -145,23 +130,30 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -173,40 +165,114 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ## Properties
 
-### hideText
+### `hideText`
 
 `hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { ImportButton } from "@refinedev/chakra-ui";
+import { useImport } from "@refinedev/core";
 
 const MyImportComponent = () => {
-  return <ImportButton colorScheme="black" hideText />;
+  const { inputProps, isLoading } = useImport({
+    onFinish: () => {
+      console.log("Import completed");
+    },
+  });
+
+  return (
+    <ImportButton
+      colorScheme="blue"
+      hideText={true}
+      loading={isLoading}
+      inputProps={inputProps}
+    />
+  );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyImportComponent,
+          list: "/posts",
         },
       ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyImportComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
+);
+```
+
+### `loading`
+
+It is used to show a loading state on the button when the import process is in progress.
+
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
+
+// visible-block-start
+import { ImportButton } from "@refinedev/chakra-ui";
+import { useImport } from "@refinedev/core";
+
+const MyImportComponent = () => {
+  const { inputProps, isLoading } = useImport({
+    onFinish: () => {
+      console.log("Import completed");
+    },
+  });
+
+  return (
+    <ImportButton
+      colorScheme="black"
+      loading={isLoading}
+      inputProps={inputProps}
     />
   );
 };
+// visible-block-end
 
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyImportComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -216,6 +282,12 @@ render(
 
 <PropsTable module="@refinedev/chakra-ui/ImportButton" />
 
+:::simple External Props
+
+It also accepts all props of Chakra UI [Button](https://chakra-ui.com/docs/components/button#props).
+
+:::
+
 [useimport]: /docs/core/hooks/utilities/use-import
 [button]: https://www.chakra-ui.com/docs/components/button#usage
 [input]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/buttons/list-button/index.md b/documentation/docs/ui-integrations/chakra-ui/components/buttons/list-button/index.md
index 70b8e57839fb..9a18a06c2a4f 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/buttons/list-button/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/buttons/list-button/index.md
@@ -3,26 +3,6 @@ title: List
 swizzle: true
 ---
 
-```tsx live shared
-const { default: sharedRouterProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: sharedRouterProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-  catchAll: <RefineChakra.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-```
-
 `<ListButton>` is using Chakra UI's [`<Button>`](https://www.chakra-ui.com/docs/components/button#usage) component. It uses the `list` method from [`useNavigation`](/docs/routing/hooks/use-navigation) under the hood. It can be useful when redirecting the app to the list page route of resource.
 
 :::simple Good to know
@@ -33,9 +13,10 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ## Usage
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts/show/123 previewHeight=360px hideCode
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
+
+import { VStack } from "@chakra-ui/react";
 import { ShowButton } from "@refinedev/chakra-ui";
 
 // visible-block-start
@@ -43,7 +24,7 @@ import { useShow } from "@refinedev/core";
 import {
   Show,
   MarkdownField,
-  //highlight-next-line
+  // highlight-next-line
   ListButton,
 } from "@refinedev/chakra-ui";
 import { Heading, Text, Spacer } from "@chakra-ui/react";
@@ -54,8 +35,11 @@ const PostShow: React.FC = () => {
   const record = data?.data;
 
   return (
-    // highlight-next-line
-    <Show headerButtons={<ListButton />} isLoading={isLoading}>
+    <Show
+      // highlight-next-line
+      headerButtons={<ListButton />}
+      isLoading={isLoading}
+    >
       <Heading as="h5" size="sm">
         Id
       </Heading>
@@ -74,33 +58,50 @@ const PostShow: React.FC = () => {
     </Show>
   );
 };
+
+interface IPost {
+  id: number;
+  title: string;
+  content: string;
+}
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <RefineChakra.VStack alignItems="flex-start">
-              <RefineChakra.Text>This page is empty.</RefineChakra.Text>
-              <ShowButton colorScheme="black" recordItemId="123">
-                Show Item 123
-              </ShowButton>
-            </RefineChakra.VStack>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <VStack alignItems="flex-start">
+                <Text>This is the list page of posts.</Text>
+                <ShowButton colorScheme="black" recordItemId="123">
+                  Show Item 123
+                </ShowButton>
+              </VStack>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -113,8 +114,10 @@ The button text is defined automatically by Refine, based on the `resource` defi
 Redirection endpoint is defined by the `resource`'s `list` action path. By default, `<ListButton>` uses the inferred resource from the route.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/categories/show/123"]);
+
+import { VStack, Text } from "@chakra-ui/react";
+import { ShowButton } from "@refinedev/chakra-ui";
 
 // visible-block-start
 import { ListButton } from "@refinedev/chakra-ui";
@@ -124,49 +127,57 @@ const MyListComponent = () => {
 };
 // visible-block-end
 
-const ListPage = () => {
-  const { list } = RefineCore.useNavigation();
-  const params = RefineCore.useRouterContext().useParams();
-
-  return (
-    <RefineChakra.VStack alignItems="flex-start">
-      <RefineChakra.Text as="i" color="gray.700" fontSize="sm">
-        URL Parameters:
-      </RefineChakra.Text>
-      <RefineChakra.Code>{JSON.stringify(params)}</RefineChakra.Code>
-
-      <RefineChakra.Button
-        size="sm"
-        onClick={() => list("posts")}
-        colorScheme="green"
-      >
-        Go back
-      </RefineChakra.Button>
-    </RefineChakra.VStack>
-  );
-};
-
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyListComponent,
+          list: "/posts",
         },
         {
           name: "categories",
-          list: ListPage,
+          list: "/categories",
+          show: "/categories/show/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            path="/categories"
+            element={
+              <VStack alignItems="flex-start">
+                <Text>This is the list page of categories.</Text>
+                <ShowButton
+                  colorScheme="black"
+                  recordItemId="123"
+                  svgIconProps={{
+                    style: {
+                      display: "none",
+                    },
+                  }}
+                >
+                  Go back
+                </ShowButton>
+              </VStack>
+            }
+          />
+          <ReactRouter.Route
+            path="/categories/show/:id"
+            element={<MyListComponent />}
+          />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -192,10 +203,8 @@ const MyComponent = () => {
 
 It is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+```tsx live url=http://localhost:3000 previewHeight=120px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { ListButton } from "@refinedev/chakra-ui";
@@ -205,23 +214,30 @@ const MyListComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyListComponent,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyListComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -248,3 +264,9 @@ Use `resource` prop instead.
 ### Properties
 
 <PropsTable module="@refinedev/chakra-ui/ListButton" />
+
+:::simple External Props
+
+It also accepts all props of Chakra UI [Button](https://chakra-ui.com/docs/components/button#props).
+
+:::
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/buttons/refresh-button/index.md b/documentation/docs/ui-integrations/chakra-ui/components/buttons/refresh-button/index.md
index 2f0db52e83a5..fc1491980794 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/buttons/refresh-button/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/buttons/refresh-button/index.md
@@ -3,26 +3,6 @@ title: Refresh
 swizzle: true
 ---
 
-```tsx live shared
-const { default: sharedRouterProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: sharedRouterProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-  catchAll: <RefineChakra.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-```
-
 `<RefreshButton>` uses Chakra UI's [`<Button>`](https://www.chakra-ui.com/docs/components/button#usage) component to update the data shown on the page via the [`useInvalidate`][use-invalidate] hook.
 
 :::simple Good to know
@@ -33,9 +13,10 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ## Usage
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts/show/123 previewHeight=360px hideCode
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
+
+import { VStack } from "@chakra-ui/react";
 import { ShowButton } from "@refinedev/chakra-ui";
 
 // visible-block-start
@@ -54,7 +35,7 @@ const PostShow: React.FC = () => {
   const record = data?.data;
 
   return (
-    // highlight-next-line
+    //highlight-next-line
     <Show headerButtons={<RefreshButton />} isLoading={isLoading}>
       <Heading as="h5" size="sm">
         Id
@@ -74,33 +55,50 @@ const PostShow: React.FC = () => {
     </Show>
   );
 };
+
+interface IPost {
+  id: number;
+  title: string;
+  content: string;
+}
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <RefineChakra.VStack alignItems="flex-start">
-              <RefineChakra.Text>This page is empty.</RefineChakra.Text>
-              <ShowButton colorScheme="black" recordItemId="123">
-                Show Item 123
-              </ShowButton>
-            </RefineChakra.VStack>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <VStack alignItems="flex-start">
+                <Text>This page is empty.</Text>
+                <ShowButton colorScheme="black" recordItemId="123">
+                  Show Item 123
+                </ShowButton>
+              </VStack>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -111,34 +109,44 @@ render(
 `recordItemId` allows us to manage which data is going to be refreshed. By default it will read the id information from the route.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { RefreshButton } from "@refinedev/chakra-ui";
 
 const MyRefreshComponent = () => {
-  return <RefreshButton colorScheme="black" recordItemId="123" />;
+  //highlight-next-line
+  return (
+    <RefreshButton colorScheme="black" resource="posts" recordItemId="123" />
+  );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyRefreshComponent,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyRefreshComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -149,37 +157,49 @@ Clicking the button will trigger the [`useInvalidate`][use-invalidate] hook and
 `resource` allows us to manage which resource is going to be refreshed. By default it will read the id information from the route.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { RefreshButton } from "@refinedev/chakra-ui";
 
 const MyRefreshComponent = () => {
+  //highlight-next-line
   return (
     <RefreshButton colorScheme="black" resource="categories" recordItemId="2" />
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyRefreshComponent,
+          list: "/posts",
+        },
+        {
+          //highlight-start
+          name: "categories",
+          list: "/categories",
+          //highlight-end
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyRefreshComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -194,35 +214,41 @@ If you have multiple resources with the same name, you can pass the `identifier`
 `hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { RefreshButton } from "@refinedev/chakra-ui";
 
 const MyRefreshComponent = () => {
+  //highlight-next-line
   return <RefreshButton colorScheme="black" hideText recordItemId="123" />;
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyRefreshComponent,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyRefreshComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -236,4 +262,10 @@ Use `resource` prop instead.
 
 <PropsTable module="@refinedev/chakra-ui/RefreshButton" />
 
+:::simple External Props
+
+It also accepts all props of Chakra UI [Button](https://chakra-ui.com/docs/components/button#props).
+
+:::
+
 [use-invalidate]: /docs/data/hooks/use-invalidate
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/buttons/save-button/index.md b/documentation/docs/ui-integrations/chakra-ui/components/buttons/save-button/index.md
index f3d2b35ac510..5077a7640548 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/buttons/save-button/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/buttons/save-button/index.md
@@ -3,27 +3,7 @@ title: Save
 swizzle: true
 ---
 
-```tsx live shared
-const { default: sharedRouterProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: sharedRouterProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-  catchAll: <RefineChakra.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-```
-
-`<SaveButton>` uses Chakra UI's [`<Button>`](https://www.chakra-ui.com/docs/components/button#usage) component. It uses it for presantation purposes only. Some of the hooks that Refine has adds features to this button.
+`<SaveButton>` uses Chakra UI's [`<Button>`](https://www.chakra-ui.com/docs/components/button#usage) component. It uses it for presentation purposes only. Some of the hooks that Refine has adds features to this button.
 
 :::simple Good to know
 
@@ -37,7 +17,7 @@ For example, lets add logic to the `<SaveButton>` component with the `saveButton
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=420px hideCode
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
+
 import { EditButton } from "@refinedev/chakra-ui";
 
 // visible-block-start
@@ -48,6 +28,8 @@ import {
   FormLabel,
   Input,
   Select,
+  VStack,
+  Text,
 } from "@chakra-ui/react";
 import { useSelect } from "@refinedev/core";
 import { useForm } from "@refinedev/react-hook-form";
@@ -55,7 +37,7 @@ import { useForm } from "@refinedev/react-hook-form";
 const PostEdit: React.FC = () => {
   const {
     refineCore: { formLoading, query },
-    // highlight-next-line
+    //highlight-next-line
     saveButtonProps,
     register,
     formState: { errors },
@@ -73,7 +55,7 @@ const PostEdit: React.FC = () => {
   }, [options]);
 
   return (
-    // highlight-next-line
+    //highlight-next-line
     <Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
       <FormControl mb="3" isInvalid={!!errors?.title}>
         <FormLabel>Title</FormLabel>
@@ -119,34 +101,6 @@ const PostEdit: React.FC = () => {
     </Edit>
   );
 };
-// visible-block-end
-
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
-      resources={[
-        {
-          name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <RefineChakra.VStack alignItems="flex-start">
-              <RefineChakra.Text>This page is empty.</RefineChakra.Text>
-              <EditButton colorScheme="black" recordItemId="123">
-                Edit Item 123
-              </EditButton>
-            </RefineChakra.VStack>
-          ),
-        },
-      ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
 
 interface ICategory {
   id: number;
@@ -159,6 +113,47 @@ interface IPost {
   status: "published" | "draft" | "rejected";
   category: { id: number };
 }
+// visible-block-end
+
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
+      resources={[
+        {
+          name: "posts",
+          //highlight-start
+          list: "/posts",
+          edit: "/posts/edit/:id",
+          //highlight-end
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <VStack alignItems="flex-start">
+                <Text>This page is empty.</Text>
+                <EditButton colorScheme="black" recordItemId="123">
+                  Edit Item 123
+                </EditButton>
+              </VStack>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
 
 ## Properties
@@ -168,35 +163,41 @@ interface IPost {
 `hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { SaveButton } from "@refinedev/chakra-ui";
 
 const MySaveComponent = () => {
+  //highlight-next-line
   return <SaveButton hideText />;
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MySaveComponent,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MySaveComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -205,3 +206,9 @@ render(
 ### Properties
 
 <PropsTable module="@refinedev/chakra-ui/SaveButton" />
+
+:::simple External Props
+
+It also accepts all props of Chakra UI [Button](https://chakra-ui.com/docs/components/button#props).
+
+:::
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/buttons/show-button/index.md b/documentation/docs/ui-integrations/chakra-ui/components/buttons/show-button/index.md
index eb7c432fa2d9..0f2fdf5d065a 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/buttons/show-button/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/buttons/show-button/index.md
@@ -3,48 +3,6 @@ title: Show
 swizzle: true
 ---
 
-```tsx live shared
-const { default: sharedRouterProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: sharedRouterProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-  catchAll: <RefineChakra.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-
-const ShowPage = () => {
-  const { list } = RefineCore.useNavigation();
-  const params = RefineCore.useRouterContext().useParams();
-
-  return (
-    <ChakraUI.VStack alignItems="flex-start">
-      <ChakraUI.Text as="i" color="gray.700" fontSize="sm">
-        URL Parameters:
-      </ChakraUI.Text>
-      <ChakraUI.Code>{JSON.stringify(params)}</ChakraUI.Code>
-
-      <ChakraUI.Button
-        size="sm"
-        onClick={() => list("posts")}
-        colorScheme="green"
-      >
-        Go back
-      </ChakraUI.Button>
-    </ChakraUI.VStack>
-  );
-};
-```
-
 `<ShowButton>` uses Chakra UI's [`<Button>`](https://www.chakra-ui.com/docs/components/button#usage) component. It uses the `show` method from [`useNavigation`](/docs/routing/hooks/use-navigation) under the hood. It can be useful when redirecting the app to the show page with the record id route of resource.
 
 :::simple Good to know
@@ -57,13 +15,11 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ```tsx live url=http://localhost:3000 previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
 import {
   List,
-
-  // highlight-next-line
+  //highlight-next-line
   ShowButton,
 } from "@refinedev/chakra-ui";
 import {
@@ -97,9 +53,12 @@ const PostList: React.FC = () => {
         accessorKey: "id",
         cell: function render({ getValue }) {
           return (
-            // highlight-start
-            <ShowButton recordItemId={getValue() as number} />
-            // highlight-end
+            //highlight-start
+            <ShowButton
+              colorScheme="black"
+              recordItemId={getValue() as number}
+            />
+            //highlight-end
           );
         },
       },
@@ -111,50 +70,35 @@ const PostList: React.FC = () => {
     columns,
   });
 
-  //hide-start
-  List.defaultProps = {
-    headerButtons: <></>,
-  };
-  //hide-end
-
   return (
     <List>
-      <TableContainer>
-        <Table variant="simple" whiteSpace="pre-line">
+      <TableContainer whiteSpace="pre-line">
+        <Table variant="simple">
           <Thead>
             {getHeaderGroups().map((headerGroup) => (
               <Tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  return (
-                    <Th key={header.id}>
-                      {!header.isPlaceholder &&
-                        flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
-                    </Th>
-                  );
-                })}
+                {headerGroup.headers.map((header) => (
+                  <Th key={header.id}>
+                    {!header.isPlaceholder &&
+                      flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                  </Th>
+                ))}
               </Tr>
             ))}
           </Thead>
           <Tbody>
-            {getRowModel().rows.map((row) => {
-              return (
-                <Tr key={row.id}>
-                  {row.getVisibleCells().map((cell) => {
-                    return (
-                      <Td key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </Td>
-                    );
-                  })}
-                </Tr>
-              );
-            })}
+            {getRowModel().rows.map((row) => (
+              <Tr key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <Td key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Td>
+                ))}
+              </Tr>
+            ))}
           </Tbody>
         </Table>
       </TableContainer>
@@ -168,24 +112,33 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
-          show: ShowPage,
+          //highlight-start
+          list: "/posts",
+          show: "/posts/show/:id",
+          //highlight-end
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -196,35 +149,42 @@ render(
 `recordItemId` is used to append the record id to the end of the route path. By default it will read the id information from the route.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { ShowButton } from "@refinedev/chakra-ui";
 
 const MyShowComponent = () => {
+  //highlight-next-line
   return <ShowButton colorScheme="black" recordItemId="123" />;
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: ShowPage,
-          list: MyShowComponent,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyShowComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -235,41 +195,50 @@ Clicking the button will trigger the `show` method of [`useNavigation`](/docs/ro
 Redirection endpoint is defined by the `resource`'s `show` action path. By default, `<ShowButton>` uses the inferred resource from the route.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { ShowButton } from "@refinedev/chakra-ui";
 
 const MyShowComponent = () => {
+  //highlight-next-line
   return (
     <ShowButton colorScheme="black" resource="categories" recordItemId="2" />
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyShowComponent,
+          list: "/posts",
         },
         {
+          //highlight-start
           name: "categories",
-          show: ShowPage,
+          list: "/categories",
+          show: "/categories/show/:id",
+          //highlight-end
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyShowComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -287,6 +256,7 @@ If the `show` action route is defined by the pattern: `/posts/:authorId/show/:id
 
 ```tsx
 const MyComponent = () => {
+  //highlight-next-line
   return <ShowButton meta={{ authorId: "10" }} />;
 };
 ```
@@ -296,36 +266,42 @@ const MyComponent = () => {
 It is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { ShowButton } from "@refinedev/chakra-ui";
 
 const MyShowComponent = () => {
-  return <ShowButton colorScheme="black" recordItemId="123" hideText />;
+  //highlight-next-line
+  return <ShowButton colorScheme="black" hideText recordItemId="123" />;
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          list: MyShowComponent,
-          show: ShowPage,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyShowComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -337,6 +313,7 @@ The `accessControl` prop can be used to skip the access control check with its `
 import { ShowButton } from "@refinedev/chakra-ui";
 
 export const MyListComponent = () => {
+  //highlight-next-line
   return (
     <ShowButton accessControl={{ enabled: true, hideIfUnauthorized: true }} />
   );
@@ -352,3 +329,9 @@ Use `resource` prop instead.
 ### Properties
 
 <PropsTable module="@refinedev/chakra-ui/ShowButton" />
+
+:::simple External Props
+
+It also accepts all props of Chakra UI [Button](https://chakra-ui.com/docs/components/button#props).
+
+:::
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/fields/boolean-field/index.md b/documentation/docs/ui-integrations/chakra-ui/components/fields/boolean-field/index.md
index c592483e3e7d..31efef63d04b 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/fields/boolean-field/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/fields/boolean-field/index.md
@@ -4,15 +4,6 @@ swizzle: true
 ---
 
 ```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-});
-
 const Wrapper = ({ children }) => {
   return (
     <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
@@ -36,8 +27,6 @@ Let's see how we can use `<BooleanField>` with the example in the post list.
 
 ```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import {
@@ -144,23 +133,31 @@ const PostList: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[
-        {
-          name: "posts",
-          list: PostList,
-        },
-      ]}
-    />
-  );
-};
 render(
   <Wrapper>
-    <App />
+    <ReactRouter.BrowserRouter>
+      <RefineChakraDemo
+        resources={[
+          {
+            name: "posts",
+            list: "/posts",
+          },
+        ]}
+      >
+        <ReactRouter.Routes>
+          <ReactRouter.Route
+            path="/posts"
+            element={
+              <div style={{ padding: 16 }}>
+                <ReactRouter.Outlet />
+              </div>
+            }
+          >
+            <ReactRouter.Route index element={<PostList />} />
+          </ReactRouter.Route>
+        </ReactRouter.Routes>
+      </RefineChakraDemo>
+    </ReactRouter.BrowserRouter>
   </Wrapper>,
 );
 ```
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/fields/date-field/index.md b/documentation/docs/ui-integrations/chakra-ui/components/fields/date-field/index.md
index 564e2f2f0ed2..f12290ab7076 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/fields/date-field/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/fields/date-field/index.md
@@ -4,15 +4,6 @@ swizzle: true
 ---
 
 ```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-});
-
 const Wrapper = ({ children }) => {
   return (
     <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
@@ -36,8 +27,6 @@ Let's see how we can use `<DateField>` with the example in the post list.
 
 ```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import {
@@ -135,23 +124,31 @@ const PostList: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[
-        {
-          name: "posts",
-          list: PostList,
-        },
-      ]}
-    />
-  );
-};
 render(
   <Wrapper>
-    <App />
+    <ReactRouter.BrowserRouter>
+      <RefineChakraDemo
+        resources={[
+          {
+            name: "posts",
+            list: "/posts",
+          },
+        ]}
+      >
+        <ReactRouter.Routes>
+          <ReactRouter.Route
+            path="/posts"
+            element={
+              <div style={{ padding: 16 }}>
+                <ReactRouter.Outlet />
+              </div>
+            }
+          >
+            <ReactRouter.Route index element={<PostList />} />
+          </ReactRouter.Route>
+        </ReactRouter.Routes>
+      </RefineChakraDemo>
+    </ReactRouter.BrowserRouter>
   </Wrapper>,
 );
 ```
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/fields/email-field/index.md b/documentation/docs/ui-integrations/chakra-ui/components/fields/email-field/index.md
index 41443138b4f8..4a4fcf276fc0 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/fields/email-field/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/fields/email-field/index.md
@@ -4,15 +4,6 @@ swizzle: true
 ---
 
 ```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-});
-
 const Wrapper = ({ children }) => {
   return (
     <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
@@ -36,7 +27,6 @@ Let's see how we can use `<EmailField>` with the example in the user list.
 
 ```tsx live url=http://localhost:3000/users previewHeight=420px hideCode
 setInitialRoutes(["/users"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
 import {
@@ -146,18 +136,31 @@ interface IUser {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
-      resources={[{ name: "users", list: UserList }]}
-    />
-  );
-};
-
 render(
   <Wrapper>
-    <App />
+    <ReactRouter.BrowserRouter>
+      <RefineChakraDemo
+        resources={[
+          {
+            name: "users",
+            list: "/users",
+          },
+        ]}
+      >
+        <ReactRouter.Routes>
+          <ReactRouter.Route
+            path="/users"
+            element={
+              <div style={{ padding: 16 }}>
+                <ReactRouter.Outlet />
+              </div>
+            }
+          >
+            <ReactRouter.Route index element={<UserList />} />
+          </ReactRouter.Route>
+        </ReactRouter.Routes>
+      </RefineChakraDemo>
+    </ReactRouter.BrowserRouter>
   </Wrapper>,
 );
 ```
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/fields/file-field/index.md b/documentation/docs/ui-integrations/chakra-ui/components/fields/file-field/index.md
index 1450ca9c1d80..1d20356168d5 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/fields/file-field/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/fields/file-field/index.md
@@ -4,15 +4,6 @@ swizzle: true
 ---
 
 ```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-});
-
 const Wrapper = ({ children }) => {
   return (
     <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
@@ -34,9 +25,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use `<FileField>` with the example in the list page.
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
 import {
@@ -140,18 +130,31 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
-      resources={[{ name: "posts", list: PostList }]}
-    />
-  );
-};
-
 render(
   <Wrapper>
-    <App />
+    <ReactRouter.BrowserRouter>
+      <RefineChakraDemo
+        resources={[
+          {
+            name: "posts",
+            list: "/posts",
+          },
+        ]}
+      >
+        <ReactRouter.Routes>
+          <ReactRouter.Route
+            path="/posts"
+            element={
+              <div style={{ padding: 16 }}>
+                <ReactRouter.Outlet />
+              </div>
+            }
+          >
+            <ReactRouter.Route index element={<PostList />} />
+          </ReactRouter.Route>
+        </ReactRouter.Routes>
+      </RefineChakraDemo>
+    </ReactRouter.BrowserRouter>
   </Wrapper>,
 );
 ```
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/fields/markdown-field/index.md b/documentation/docs/ui-integrations/chakra-ui/components/fields/markdown-field/index.md
index 604515c5142c..e58b20bcea8b 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/fields/markdown-field/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/fields/markdown-field/index.md
@@ -3,25 +3,6 @@ title: Markdown
 swizzle: true
 ---
 
-```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-```
-
 This field lets you display markdown content. It supports [GitHub Flavored Markdown](https://github.github.com/gfm/).
 
 :::simple Good to know
@@ -35,9 +16,7 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 Let's see how we can use `<MarkdownField>` in a show page.
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
-setInitialRoutes(["/samples", "/samples/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
+setInitialRoutes(["/posts", "/posts/show/123"]);
 
 // visible-block-start
 import { useShow } from "@refinedev/core";
@@ -48,7 +27,7 @@ import {
 } from "@refinedev/chakra-ui";
 import { Heading, Text } from "@chakra-ui/react";
 
-const SampleShow: React.FC = () => {
+const PostShow: React.FC = () => {
   const { queryResult } = useShow<IPost>();
   const { data, isLoading } = queryResult;
   const record = data?.data;
@@ -74,31 +53,42 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
-          name: "samples",
-          show: SampleShow,
-          list: () => (
-            <ChakraUI.VStack alignItems="flex-start">
-              <ChakraUI.Text>This page is empty.</ChakraUI.Text>
-              <RefineChakra.ShowButton colorScheme="black" recordItemId="123">
-                Show Item 123
-              </RefineChakra.ShowButton>
-            </ChakraUI.VStack>
-          ),
+          name: "posts",
+          show: "/posts/show/:id",
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+          <ReactRouter.Route
+            index
+            element={
+              <ChakraUI.VStack alignItems="flex-start">
+                <ChakraUI.Text>This page is empty.</ChakraUI.Text>
+                <RefineChakra.ShowButton colorScheme="black" recordItemId="123">
+                  Show Item 123
+                </RefineChakra.ShowButton>
+              </ChakraUI.VStack>
+            }
+          />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/fields/number-field/index.md b/documentation/docs/ui-integrations/chakra-ui/components/fields/number-field/index.md
index d12b3ffff3df..ce29340f047a 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/fields/number-field/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/fields/number-field/index.md
@@ -3,25 +3,6 @@ title: Number
 swizzle: true
 ---
 
-```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-```
-
 This field is used to display a number formatted according to the browser locale, right aligned. and uses [`Intl`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) to display date format.
 
 :::simple Good to know
@@ -36,9 +17,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 If Intl is not available, `<NumberField>` outputs numbers as is (and ignores the locales and options props).
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
 import {
@@ -148,19 +128,30 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
-      resources={[{ name: "posts", list: PostList }]}
-    />
-  );
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/fields/tag-field/index.md b/documentation/docs/ui-integrations/chakra-ui/components/fields/tag-field/index.md
index aa374b1d3f42..242b6e0efe44 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/fields/tag-field/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/fields/tag-field/index.md
@@ -3,25 +3,6 @@ title: Tag
 swizzle: true
 ---
 
-```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-```
-
 This field lets you display a value in a tag. It uses Chakra UI's [`<Tag>`](https://www.chakra-ui.com/docs/components/tag#usage) component.
 
 :::simple Good to know
@@ -34,9 +15,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use it in a basic list page:
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
 import {
@@ -140,19 +120,30 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
-      resources={[{ name: "posts", list: PostList }]}
-    />
-  );
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/fields/text-field/index.md b/documentation/docs/ui-integrations/chakra-ui/components/fields/text-field/index.md
index eb8e67a95b8e..093e895437d7 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/fields/text-field/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/fields/text-field/index.md
@@ -3,25 +3,6 @@ title: Text
 swizzle: true
 ---
 
-```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-```
-
 This field lets you show basic text. It uses Chakra UI's [`<Text>`](https://www.chakra-ui.com/docs/components/text#usage) component.
 
 :::simple Good to know
@@ -35,9 +16,7 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 Let's see how to use it in a basic show page:
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
-setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/chakra-ui";
+setInitialRoutes(["/posts", "/posts/show/123"]);
 
 // visible-block-start
 import { useShow } from "@refinedev/core";
@@ -58,12 +37,12 @@ const PostShow: React.FC = () => {
       <Heading as="h5" size="sm">
         Id
       </Heading>
-      // highlight-next-line
+      {/* highlight-next-line */}
       <TextField value={record?.id} />
       <Heading as="h5" size="sm">
         Title
       </Heading>
-      // highlight-next-line
+      {/* highlight-next-line */}
       <TextField value={record?.title} />
     </Show>
   );
@@ -75,31 +54,42 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <RefineChakra.VStack alignItems="flex-start">
-              <RefineChakra.Text>This page is empty.</RefineChakra.Text>
-              <ShowButton colorScheme="black" recordItemId="123">
-                Show Item 123
-              </ShowButton>
-            </RefineChakra.VStack>
-          ),
+          show: "/posts/show/:id",
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+          <ReactRouter.Route
+            index
+            element={
+              <RefineChakra.VStack alignItems="flex-start">
+                <RefineChakra.Text>This page is empty.</RefineChakra.Text>
+                <RefineChakra.ShowButton colorScheme="black" recordItemId="123">
+                  Show Item 123
+                </RefineChakra.ShowButton>
+              </RefineChakra.VStack>
+            }
+          />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/chakra-ui/components/fields/url-field/index.md b/documentation/docs/ui-integrations/chakra-ui/components/fields/url-field/index.md
index c42e2724112b..7d59cbc553ea 100644
--- a/documentation/docs/ui-integrations/chakra-ui/components/fields/url-field/index.md
+++ b/documentation/docs/ui-integrations/chakra-ui/components/fields/url-field/index.md
@@ -3,25 +3,6 @@ title: Url
 swizzle: true
 ---
 
-```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  Layout: RefineChakra.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-```
-
 This field lets you embed a link. It uses Chakra UI's [`<Link>`](https://www.chakra-ui.com/docs/components/link#usage) component. You can pass a URL in its `value` prop and you can show a text in its place by passing any `children`.
 
 :::simple Good to know
@@ -34,9 +15,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use `<UrlField>` with an example:
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
 import {
@@ -140,19 +120,30 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      notificationProvider={RefineChakra.notificationProvider()}
-      resources={[{ name: "posts", list: PostList }]}
-    />
-  );
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineChakraDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineChakraDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/basic-views/create/index.md b/documentation/docs/ui-integrations/mantine/components/basic-views/create/index.md
index fac9d4b966c2..8188a3f4f850 100644
--- a/documentation/docs/ui-integrations/mantine/components/basic-views/create/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/basic-views/create/index.md
@@ -4,13 +4,18 @@ swizzle: true
 ---
 
 ```tsx live shared
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-});
+interface ICategory {
+  id: number;
+  title: string;
+}
+
+interface IPost {
+  id: number;
+  title: string;
+  content: string;
+  status: "published" | "draft" | "rejected";
+  category: { id: number };
+}
 
 const Wrapper = ({ children }) => {
   return (
@@ -26,30 +31,14 @@ const Wrapper = ({ children }) => {
     </MantineCore.MantineProvider>
   );
 };
-
-interface ICategory {
-  id: number;
-  title: string;
-}
-
-interface IPost {
-  id: number;
-  title: string;
-  content: string;
-  status: "published" | "draft" | "rejected";
-  category: { id: number };
-}
 ```
 
-`<Create>` provides us a layout to display the page. It does not contain any logic and just adds extra functionalities like action buttons and being able to give titles to the page.
+`<Create>` provides us a layout to display the page. It does not contain any logic but adds extra functionalities like action buttons and giving titles to the page.
 
 We will show what `<Create>` does using properties with examples.
 
 ```tsx live url=http://localhost:3000/posts/create previewHeight=420px hideCode
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
 
 // visible-block-start
 import { Create, useForm, useSelect } from "@refinedev/mantine";
@@ -110,29 +99,40 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <CreateButton />
-            </div>
-          ),
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -150,9 +150,6 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 ```tsx live url=http://localhost:3000/posts/create previewHeight=280px
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
 
 // visible-block-start
 import { Create } from "@refinedev/mantine";
@@ -160,37 +157,50 @@ import { Title } from "@mantine/core";
 
 const PostCreate: React.FC = () => {
   return (
-    /* highlight-next-line */
-    <Create title={<Title order={3}>Custom Title</Title>}>
+    <Create
+      // highlight-next-line
+      title={<Title order={3}>Custom Title</Title>}
+    >
       <p>Rest of your page here</p>
     </Create>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <CreateButton />
-            </div>
-          ),
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -200,46 +210,56 @@ render(
 
 ```tsx live url=http://localhost:3000/posts/create previewHeight=280px
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
 
 // visible-block-start
 import { Create } from "@refinedev/mantine";
 
 const PostCreate: React.FC = () => {
   return (
-    /* highlight-next-line */
-    <Create saveButtonProps={{ size: "xs" }}>
+    <Create
+      // highlight-next-line
+      saveButtonProps={{ size: "xs" }}
+    >
       <p>Rest of your page here</p>
     </Create>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <CreateButton />
-            </div>
-          ),
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -252,48 +272,38 @@ The `<Create>` component reads the `resource` information from the route by defa
 ```tsx live url=http://localhost:3000/custom previewHeight=280px
 setInitialRoutes(["/custom"]);
 
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import { Layout } from "@refinedev/mantine";
 // visible-block-start
 import { Create } from "@refinedev/mantine";
 
 const CustomPage: React.FC = () => {
   return (
-    /* highlight-next-line */
-    <Create resource="categories">
+    <Create
+      // highlight-start
+      resource="categories"
+      // highlight-end
+    >
       <p>Rest of your page here</p>
     </Create>
   );
 };
 // visible-block-end
 
-const App: React.FC = () => {
-  return (
-    <Refine
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom",
-          },
-        ],
-        // highlight-end
-      }}
-      Layout={Layout}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
+      resources={[
+        {
+          name: "categories",
+          list: "/categories",
+          create: "/categories/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/custom" element={<CustomPage />} />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -306,47 +316,58 @@ If you have multiple resources with the same name, you can pass the `identifier`
 To customize the back button or to disable it, you can use the `goBack` property. You can pass `false` or `null` to hide the back button.
 
 ```tsx live url=http://localhost:3000/posts/create previewHeight=280px
-setInitialRoutes(["/posts", "/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
+setInitialRoutes(["/posts/create"]);
 
 // visible-block-start
 import { Create } from "@refinedev/mantine";
 
 const PostCreate: React.FC = () => {
   return (
-    /* highlight-next-line */
-    <Create goBack="😊">
-      <p>Rest of your page here 2</p>
+    <Create
+      // highlight-start
+      goBack="😊"
+      // highlight-end
+    >
+      <p>Rest of your page here</p>
     </Create>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <CreateButton />
-            </div>
-          ),
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -356,58 +377,63 @@ To toggle the loading state of the `<Create/>` component, you can use the `isLoa
 
 ```tsx live url=http://localhost:3000/posts/create previewHeight=280px
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
 
 // visible-block-start
 import { Create } from "@refinedev/mantine";
 
 const PostCreate: React.FC = () => {
   return (
-    /* highlight-next-line */
-    <Create isLoading={true}>
+    <Create
+      // highlight-next-line
+      isLoading={true}
+    >
       <p>Rest of your page here</p>
     </Create>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <CreateButton />
-            </div>
-          ),
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-### breadcrumb <GlobalConfigBadge id="core/refine-component/#breadcrumb" />
-
-To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/mantine` package.
+### breadcrumb
 
 ```tsx live url=http://localhost:3000/posts/create previewHeight=280px
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
 
 // visible-block-start
 import { Create, Breadcrumb } from "@refinedev/mantine";
@@ -434,43 +460,49 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <CreateButton />
-            </div>
-          ),
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Breadcrumb` documentation &#8594](/docs/ui-integrations/mantine/components/breadcrumb)
-
 ### wrapperProps
 
 If you want to customize the wrapper of the `<Create/>` component, you can use the `wrapperProps` property. For `@refinedev/mantine` wrapper element is `<Card>`s and `wrapperProps` can get every attribute that `<Card>` can get.
 
 ```tsx live url=http://localhost:3000/posts/create previewHeight=280px
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
 
 // visible-block-start
 import { Create } from "@refinedev/mantine";
@@ -493,29 +525,40 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <CreateButton />
-            </div>
-          ),
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -527,9 +570,6 @@ If you want to customize the header of the `<Create/>` component, you can use th
 
 ```tsx live url=http://localhost:3000/posts/create previewHeight=280px
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
 
 // visible-block-start
 import { Create } from "@refinedev/mantine";
@@ -552,29 +592,40 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <CreateButton />
-            </div>
-          ),
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -584,11 +635,8 @@ render(
 
 If you want to customize the content of the `<Create/>` component, you can use the `contentProps` property.
 
-```tsx live url=http://localhost:3000/posts/create previewHeight=320px
+```tsx live url=http://localhost:3000/posts/create previewHeight=280px
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
 
 // visible-block-start
 import { Create } from "@refinedev/mantine";
@@ -611,43 +659,47 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <CreateButton />
-            </div>
-          ),
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Mantine &#8594](https://mantine.dev/core/box/)
-
 ### headerButtons
 
-You can customize the buttons at the header by using the `headerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
-
 ```tsx live url=http://localhost:3000/posts/create previewHeight=280px
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
 
 // visible-block-start
 import { Create } from "@refinedev/mantine";
@@ -671,41 +723,51 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <CreateButton />
-            </div>
-          ),
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
+> For more information, refer to the [`Box` documentation from Mantine &#8594](https://mantine.dev/core/box/)
+
 ### headerButtonProps
 
 You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property.
 
 ```tsx live url=http://localhost:3000/posts/create previewHeight=280px
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
 
 // visible-block-start
 import { Create } from "@refinedev/mantine";
@@ -721,8 +783,8 @@ const PostCreate: React.FC = () => {
           padding: "16px",
         },
       }}
-      // highlight-end
       headerButtons={<Button type="primary">Custom Button</Button>}
+      // highlight-end
     >
       <p>Rest of your page here</p>
     </Create>
@@ -730,45 +792,47 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <CreateButton />
-            </div>
-          ),
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Mantine &#8594](https://mantine.dev/core/group/)
-
 ### footerButtons
 
-By default, the `<Create/>` component has a [`<SaveButton>`][save-button] at the header.
-
-You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, saveButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
-
 ```tsx live url=http://localhost:3000/posts/create previewHeight=280px
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
 
 // visible-block-start
 import { Create } from "@refinedev/mantine";
@@ -792,100 +856,55 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <CreateButton />
-            </div>
-          ),
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-```
-
-Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `saveButtonProps` to utilize the default values of the [`<SaveButton>`][save-button] component.
-
-```tsx live url=http://localhost:3000/posts/create previewHeight=280px
-setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-
-// visible-block-start
-import { Create, SaveButton } from "@refinedev/mantine";
-import { Button } from "@mantine/core";
-
-const PostCreate: React.FC = () => {
-  return (
-    <Create
-      // highlight-start
-      footerButtons={({ saveButtonProps }) => (
-        <>
-          <SaveButton {...saveButtonProps} hideText />
-          <Button variant="gradient">Custom Button</Button>
-        </>
-      )}
-      // highlight-end
     >
-      <p>Rest of your page here</p>
-    </Create>
-  );
-};
-// visible-block-end
-
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      resources={[
-        {
-          name: "posts",
-          create: PostCreate,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <CreateButton />
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
             </div>
-          ),
-        },
-      ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
+> For more information, refer to the [`Group` documentation from Mantine &#8594](https://mantine.dev/core/group/)
+
 ### footerButtonProps
 
 You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property.
 
 ```tsx live url=http://localhost:3000/posts/create previewHeight=280px
 setInitialRoutes(["/posts/create"]);
-import { Refine } from "@refinedev/core";
-import { CreateButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
 
 // visible-block-start
 import { Create } from "@refinedev/mantine";
+import { Button } from "@mantine/core";
 
 const PostCreate: React.FC = () => {
   return (
@@ -909,33 +928,44 @@ const PostCreate: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          create: PostCreate,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <CreateButton />
-            </div>
-          ),
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Mantine &#8594](https://mantine.dev/core/group/)
+> For more information, refer to the [`Group` documentation from Mantine &#8594](https://mantine.dev/core/group/)
 
 ## API Reference
 
@@ -943,4 +973,4 @@ render(
 
 <PropsTable module="@refinedev/mantine/Create" goBack-default="`<IconArrowLeft />`" title-default="`<Title order={3}>Create {resource.name}</Title>`"/>
 
-[save-button]: /docs/ui-integrations/chakra-ui/components/buttons/save-button
+[save-button]: /docs/ui-integrations/mantine/components/buttons/save-button
diff --git a/documentation/docs/ui-integrations/mantine/components/basic-views/edit/index.md b/documentation/docs/ui-integrations/mantine/components/basic-views/edit/index.md
index d45b87f95064..b9dc5b265da4 100644
--- a/documentation/docs/ui-integrations/mantine/components/basic-views/edit/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/basic-views/edit/index.md
@@ -3,55 +3,12 @@ title: Edit
 swizzle: true
 ---
 
-```tsx live shared
-window.__refineAuthStatus = false;
-
-setRefineProps({
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
-
-interface ICategory {
-  id: number;
-  title: string;
-}
-
-interface IPost {
-  id: number;
-  title: string;
-  content: string;
-  status: "published" | "draft" | "rejected";
-  category: { id: number };
-}
-```
-
 `<Edit>` provides us a layout for displaying the page. It does not contain any logic and just adds extra functionalities like a refresh button.
 
 We will show what `<Edit>` does using properties with examples.
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=420px hideCode
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
-
 // visible-block-start
 import { Edit, useForm, useSelect } from "@refinedev/mantine";
 import { Select, TextInput } from "@mantine/core";
@@ -78,10 +35,9 @@ const PostEdit: React.FC = () => {
     },
   });
 
-  const postData = query?.data?.data;
   const { selectProps } = useSelect<ICategory>({
     resource: "categories",
-    defaultValue: postData?.category.id,
+    defaultValue: query?.data?.data?.category?.id,
   });
 
   return (
@@ -115,39 +71,50 @@ const PostEdit: React.FC = () => {
     </Edit>
   );
 };
+
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 :::simple Good to know
-
 You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-packages) to customize it.
-
 :::
 
 ## Properties
@@ -158,10 +125,6 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/mantine";
@@ -169,38 +132,52 @@ import { Title } from "@mantine/core";
 
 const PostEdit: React.FC = () => {
   return (
-    /* highlight-next-line */
-    <Edit title={<Title order={3}>Custom Title</Title>}>
+    <Edit
+      // highlight-next-line
+      title={<Title order={3}>Custom Title</Title>}
+    >
       <p>Rest of your page here</p>
     </Edit>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -210,10 +187,6 @@ render(
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/mantine";
@@ -228,47 +201,55 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`<SaveButton>` documentation &#8594](/docs/ui-integrations/mantine/components/buttons/save-button)
+For more information, refer to the `<SaveButton>` documentation →
 
 ### canDelete and deleteButtonProps
 
-`canDelete` allows us to add the delete button inside the `<Edit>` component. If the resource has the `canDelete` property,Refine adds the delete button by default. If you want to customize this button you can use the `deleteButtonProps` property like the code below.
+`canDelete` allows us to add the delete button inside the `<Edit>` component. If the resource has the `canDelete` property, Refine adds the delete button by default. If you want to customize this button you can use the `deleteButtonProps` property like the code below.
 
-When clicked on, the delete button executes the `useDelete` method provided by the `dataProvider`.
+When clicked on, the delete button executes the `useDelete` method provided by the dataProvider.
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/mantine";
@@ -290,87 +271,42 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      return {
-        data: {},
-      };
-    },
-  };
-
-  window.__refineAuthStatus = true;
-
-  const authProvider = {
-    login: async () => {
-      return {
-        success: true,
-        redirectTo: "/",
-      };
-    },
-    register: async () => {
-      return {
-        success: true,
-      };
-    },
-    forgotPassword: async () => {
-      return {
-        success: true,
-      };
-    },
-    updatePassword: async () => {
-      return {
-        success: true,
-      };
-    },
-    logout: async () => {
-      window.__refineAuthStatus = false;
-      return {
-        success: true,
-        redirectTo: "/",
-      };
-    },
-    check: async () => ({
-      authenticated: window.__refineAuthStatus ? true : false,
-      redirectTo: window.__refineAuthStatus ? undefined : "/login",
-    }),
-    onError: async (error) => {
-      console.error(error);
-      return { error };
-    },
-    getPermissions: async () => ["admin"],
-    getIdentity: async () => null,
-  };
-
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={customDataProvider}
-      authProvider={authProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -383,10 +319,6 @@ render(
 ```tsx live url=http://localhost:3000/custom/23 previewHeight=280px
 setInitialRoutes(["/custom/23"]);
 
-import { Refine } from "@refinedev/core";
-import { Layout } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 // visible-block-start
 import { Edit } from "@refinedev/mantine";
 
@@ -400,31 +332,22 @@ const CustomPage: React.FC = () => {
 };
 // visible-block-end
 
-const App: React.FC = () => {
-  return (
-    <Refine
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom/:id",
-          },
-        ],
-        // highlight-end
-      }}
-      Layout={Layout}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
+      resources={[
+        {
+          name: "categories",
+          list: "/categories",
+          edit: "/categories/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/custom/:id" element={<CustomPage />} />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -438,10 +361,6 @@ The `<Edit>` component reads the `id` information from the route by default. `re
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=350px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit, useModalForm } from "@refinedev/mantine";
@@ -476,30 +395,42 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="23">Edit Item 23</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="23">
+                  Edit Item 23
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -509,10 +440,6 @@ Determines which mode mutation will have while executing `<DeleteButton>`.
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit, useForm } from "@refinedev/mantine";
@@ -548,31 +475,42 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -588,21 +526,25 @@ import dataProvider from "@refinedev/simple-rest";
 
 import { Edit } from "@refinedev/mantine";
 
-// highlight-start
 const PostEdit = () => {
-  return <Edit dataProviderName="other">...</Edit>;
+  return (
+    <Edit
+      // highlight-start
+      dataProviderName="other"
+      // highlight-end
+    >
+      {/* ... */}
+    </Edit>
+  );
 };
-// highlight-end
 
 export const App: React.FC = () => {
   return (
     <Refine
-      // highlight-start
       dataProvider={{
         default: dataProvider("https://api.fake-rest.refine.dev/"),
         other: dataProvider("https://other-api.fake-rest.refine.dev/"),
       }}
-      // highlight-end
     >
       {/* ... */}
     </Refine>
@@ -615,11 +557,7 @@ export const App: React.FC = () => {
 To customize the back button or to disable it, you can use the `goBack` property. You can pass `false` or `null` to hide the back button.
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
-setInitialRoutes(["/posts", "/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
+setInitialRoutes(["/posts/edit/123"]);
 
 // visible-block-start
 import { Edit } from "@refinedev/mantine";
@@ -628,36 +566,48 @@ const PostEdit: React.FC = () => {
   return (
     /* highlight-next-line */
     <Edit goBack="😊">
-      <p>Rest of your page here 2</p>
+      <p>Rest of your page here</p>
     </Edit>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -667,10 +617,6 @@ To toggle the loading state of the `<Edit/>` component, you can use the `isLoadi
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/mantine";
@@ -685,43 +631,51 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-### breadcrumb <GlobalConfigBadge id="core/refine-component/#breadcrumb" />
+### breadcrumb
 
 To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/mantine` package.
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit, Breadcrumb } from "@refinedev/mantine";
@@ -729,7 +683,6 @@ import { Edit, Breadcrumb } from "@refinedev/mantine";
 const PostEdit: React.FC = () => {
   return (
     <Edit
-      // highlight-start
       breadcrumb={
         <div
           style={{
@@ -740,7 +693,6 @@ const PostEdit: React.FC = () => {
           <Breadcrumb />
         </div>
       }
-      // highlight-end
     >
       <p>Rest of your page here</p>
     </Edit>
@@ -748,30 +700,42 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -783,10 +747,6 @@ If you want to customize the wrapper of the `<Edit/>` component, you can use the
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/mantine";
@@ -809,30 +769,42 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -844,10 +816,6 @@ If you want to customize the header of the `<Edit/>` component, you can use the
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/mantine";
@@ -855,14 +823,12 @@ import { Edit } from "@refinedev/mantine";
 const PostEdit: React.FC = () => {
   return (
     <Edit
-      // highlight-start
       headerProps={{
         style: {
           border: "2px dashed cornflowerblue",
           padding: "16px",
         },
       }}
-      // highlight-end
     >
       <p>Rest of your page here</p>
     </Edit>
@@ -870,30 +836,42 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -905,10 +883,6 @@ If you want to customize the content of the `<Edit/>` component, you can use the
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/mantine";
@@ -916,14 +890,12 @@ import { Edit } from "@refinedev/mantine";
 const PostEdit: React.FC = () => {
   return (
     <Edit
-      // highlight-start
       contentProps={{
         style: {
           border: "2px dashed cornflowerblue",
           padding: "16px",
         },
       }}
-      // highlight-end
     >
       <p>Rest of your page here</p>
     </Edit>
@@ -931,30 +903,42 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -970,10 +954,6 @@ If "list" resource is not defined, the [`<ListButton>`][list-button] will not re
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/mantine";
@@ -999,30 +979,42 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1030,10 +1022,6 @@ Or, instead of using the `defaultButtons`, you can create your own buttons. If y
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit, RefreshButton, ListButton } from "@refinedev/mantine";
@@ -1062,30 +1050,42 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1095,10 +1095,6 @@ You can customize the wrapper element of the buttons at the header by using the
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/mantine";
@@ -1107,14 +1103,12 @@ import { Modal, Button } from "@mantine/core";
 const PostEdit: React.FC = () => {
   return (
     <Edit
-      // highlight-start
       headerButtonProps={{
         style: {
           border: "2px dashed cornflowerblue",
           padding: "16px",
         },
       }}
-      // highlight-end
       headerButtons={
         <Button variant="outline" type="primary">
           Custom Button
@@ -1127,30 +1121,42 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1166,10 +1172,6 @@ If [`canDelete`](#candelete-and-deletebuttonprops) is `false`, the [`<DeleteButt
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/mantine";
@@ -1193,30 +1195,42 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1224,10 +1238,6 @@ Or, instead of using the `defaultButtons`, you can create your own buttons. If y
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit, SaveButton, DeleteButton } from "@refinedev/mantine";
@@ -1236,7 +1246,6 @@ import { Button } from "@mantine/core";
 const PostEdit: React.FC = () => {
   return (
     <Edit
-      // highlight-start
       footerButtons={({ saveButtonProps, deleteButtonProps }) => (
         <>
           <SaveButton {...saveButtonProps} hideText />
@@ -1246,7 +1255,6 @@ const PostEdit: React.FC = () => {
           <Button variant="gradient">Custom Button</Button>
         </>
       )}
-      // highlight-end
     >
       <p>Rest of your page here</p>
     </Edit>
@@ -1254,30 +1262,42 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1287,10 +1307,6 @@ You can customize the wrapper element of the buttons at the footer by using the
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Edit } from "@refinedev/mantine";
@@ -1317,30 +1333,42 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1350,26 +1378,18 @@ render(
 
 You can use the auto save feature of the `<Edit/>` component by using the `autoSaveProps` property.
 
-```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=420px
+```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
+// visible-block-start
 import { Edit, useForm, useSelect } from "@refinedev/mantine";
 import { Select, TextInput } from "@mantine/core";
 
-// visible-block-start
 const PostEdit: React.FC = () => {
   const {
     saveButtonProps,
     getInputProps,
-    refineCore: {
-      query,
-      // highlight-next-line
-      autoSaveProps,
-    },
+    refineCore: { query, autoSaveProps },
   } = useForm<IPost>({
     initialValues: {
       title: "",
@@ -1394,18 +1414,13 @@ const PostEdit: React.FC = () => {
     // highlight-end
   });
 
-  const postData = query?.data?.data;
   const { selectProps } = useSelect<ICategory>({
     resource: "categories",
-    defaultValue: postData?.category.id,
+    defaultValue: query?.data?.data?.category?.id,
   });
 
   return (
-    <Edit
-      saveButtonProps={saveButtonProps}
-      // highlight-next-line
-      autoSaveProps={autoSaveProps}
-    >
+    <Edit saveButtonProps={saveButtonProps} autoSaveProps={autoSaveProps}>
       <form>
         <TextInput
           mt={8}
@@ -1437,30 +1452,42 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMantine.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/basic-views/list/index.md b/documentation/docs/ui-integrations/mantine/components/basic-views/list/index.md
index a378d02bb2cb..4ca4b31ec172 100644
--- a/documentation/docs/ui-integrations/mantine/components/basic-views/list/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/basic-views/list/index.md
@@ -3,51 +3,12 @@ title: List
 swizzle: true
 ---
 
-```tsx live shared
-setRefineProps({
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
-
-interface ICategory {
-  id: number;
-  title: string;
-}
-
-interface IPost {
-  id: number;
-  title: string;
-  content: string;
-  status: "published" | "draft" | "rejected";
-  category: { id: number };
-}
-```
-
 `<List>` provides us a layout to display the page. It does not contain any logic and just adds extra functionalities like a create button and being able to give titles to the page.
 
 We will show what `<List>` does using properties with examples.
 
 ```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { List, DateField } from "@refinedev/mantine";
@@ -136,24 +97,21 @@ const PostList: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -171,9 +129,6 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 ```tsx live url=http://localhost:3000/posts previewHeight=280px
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { List } from "@refinedev/mantine";
@@ -181,7 +136,7 @@ import { Title } from "@mantine/core";
 
 const PostList: React.FC = () => {
   return (
-    /* highlight-next-line */
+    // highlight-next-line
     <List title={<Title order={3}>Custom Title</Title>}>
       <p>Rest of your page here</p>
     </List>
@@ -189,24 +144,21 @@ const PostList: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -217,16 +169,11 @@ render(
 ```tsx live url=http://localhost:3000/custom previewHeight=280px
 setInitialRoutes(["/custom"]);
 
-import { Refine } from "@refinedev/core";
-import { Layout } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 // visible-block-start
 import { List } from "@refinedev/mantine";
 
 const CustomPage: React.FC = () => {
   return (
-    /* highlight-next-line */
     <List resource="categories">
       <p>Rest of your page here</p>
     </List>
@@ -236,28 +183,25 @@ const CustomPage: React.FC = () => {
 
 const App = () => {
   return (
-    <Refine
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom",
-          },
-        ],
-        // highlight-end
-      }}
-      Layout={Layout}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
+    <RefineMantineDemo
+      resources={[
+        {
+          name: "custom",
+          list: "/custom",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/custom" element={<CustomPage />} />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
   );
 };
+
 render(
-  <Wrapper>
+  <ReactRouter.BrowserRouter>
     <App />
-  </Wrapper>,
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -273,9 +217,6 @@ Create button redirects to the create page of the resource according to the valu
 
 ```tsx live url=http://localhost:3000/posts previewHeight=280px
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { List } from "@refinedev/mantine";
@@ -287,8 +228,8 @@ const PostList: React.FC = () => {
     <List
       /* highlight-start */
       canCreate={permissionsData?.includes("admin")}
-      createButtonProps={{ variant: "subtle" }}
       /* highlight-end */
+      createButtonProps={{ variant: "subtle" }}
     >
       <p>Rest of your page here</p>
     </List>
@@ -297,19 +238,6 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      return {
-        data: {},
-      };
-    },
-  };
-
   const authProvider = {
     login: async () => {
       return {
@@ -350,23 +278,26 @@ const App = () => {
   };
 
   return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={customDataProvider}
-      authProvider={authProvider}
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
+      authProvider={authProvider}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
   );
 };
+
 render(
-  <Wrapper>
+  <ReactRouter.BrowserRouter>
     <App />
-  </Wrapper>,
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -376,9 +307,6 @@ To customize or disable the breadcrumb, you can use the `breadcrumb` property. B
 
 ```tsx live url=http://localhost:3000/posts previewHeight=280px
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { List } from "@refinedev/mantine";
@@ -399,34 +327,38 @@ const CustomBreadcrumb: React.FC = () => {
 const PostList: React.FC = () => {
   return (
     <List
-      // highlight-start
+      /* highlight-start */
       breadcrumb={<CustomBreadcrumb />}
-      // highlight-end
+      /* highlight-end */
     >
       <p>Rest of your page here</p>
     </List>
   );
 };
+
 // visible-block-end
 
 const App = () => {
   return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
   );
 };
+
 render(
-  <Wrapper>
+  <ReactRouter.BrowserRouter>
     <App />
-  </Wrapper>,
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -438,9 +370,6 @@ If you want to customize the wrapper of the `<List/>` component, you can use the
 
 ```tsx live url=http://localhost:3000/posts previewHeight=280px
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { List } from "@refinedev/mantine";
@@ -448,14 +377,14 @@ import { List } from "@refinedev/mantine";
 const PostList: React.FC = () => {
   return (
     <List
-      // highlight-start
+      /* highlight-start */
       wrapperProps={{
         style: {
           border: "2px dashed cornflowerblue",
           padding: "16px",
         },
       }}
-      // highlight-end
+      /* highlight-end */
     >
       <p>Rest of your page here</p>
     </List>
@@ -465,22 +394,25 @@ const PostList: React.FC = () => {
 
 const App = () => {
   return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
   );
 };
+
 render(
-  <Wrapper>
+  <ReactRouter.BrowserRouter>
     <App />
-  </Wrapper>,
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -492,9 +424,6 @@ If you want to customize the header of the `<List/>` component, you can use the
 
 ```tsx live url=http://localhost:3000/posts previewHeight=280px
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { List } from "@refinedev/mantine";
@@ -502,14 +431,14 @@ import { List } from "@refinedev/mantine";
 const PostList: React.FC = () => {
   return (
     <List
-      // highlight-start
+      /* highlight-start */
       headerProps={{
         style: {
           border: "2px dashed cornflowerblue",
           padding: "16px",
         },
       }}
-      // highlight-end
+      /* highlight-end */
     >
       <p>Rest of your page here</p>
     </List>
@@ -519,22 +448,25 @@ const PostList: React.FC = () => {
 
 const App = () => {
   return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
   );
 };
+
 render(
-  <Wrapper>
+  <ReactRouter.BrowserRouter>
     <App />
-  </Wrapper>,
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -546,9 +478,6 @@ If you want to customize the content of the `<List/>` component, you can use the
 
 ```tsx live url=http://localhost:3000/posts previewHeight=280px
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { List } from "@refinedev/mantine";
@@ -556,14 +485,14 @@ import { List } from "@refinedev/mantine";
 const PostList: React.FC = () => {
   return (
     <List
-      // highlight-start
+      /* highlight-start */
       contentProps={{
         style: {
           border: "2px dashed cornflowerblue",
           padding: "16px",
         },
       }}
-      // highlight-end
+      /* highlight-end */
     >
       <p>Rest of your page here</p>
     </List>
@@ -573,22 +502,25 @@ const PostList: React.FC = () => {
 
 const App = () => {
   return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
   );
 };
+
 render(
-  <Wrapper>
+  <ReactRouter.BrowserRouter>
     <App />
-  </Wrapper>,
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -604,9 +536,6 @@ If "create" resource is not defined or [`canCreate`](#cancreate-and-createbutton
 
 ```tsx live url=http://localhost:3000/posts previewHeight=280px
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { List } from "@refinedev/mantine";
@@ -615,7 +544,7 @@ import { Button } from "@mantine/core";
 const PostList: React.FC = () => {
   return (
     <List
-      // highlight-start
+      /* highlight-start */
       headerButtons={({ defaultButtons }) => (
         <>
           {defaultButtons}
@@ -624,7 +553,7 @@ const PostList: React.FC = () => {
           </Button>
         </>
       )}
-      // highlight-end
+      /* highlight-end */
     >
       <p>Rest of your page here</p>
     </List>
@@ -634,22 +563,25 @@ const PostList: React.FC = () => {
 
 const App = () => {
   return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
   );
 };
+
 render(
-  <Wrapper>
+  <ReactRouter.BrowserRouter>
     <App />
-  </Wrapper>,
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -657,9 +589,6 @@ Or, instead of using the `defaultButtons`, you can create your own buttons. If y
 
 ```tsx live url=http://localhost:3000/posts previewHeight=280px
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { List, CreateButton } from "@refinedev/mantine";
@@ -668,7 +597,7 @@ import { Button } from "@mantine/core";
 const PostList: React.FC = () => {
   return (
     <List
-      // highlight-start
+      /* highlight-start */
       headerButtons={({ createButtonProps }) => (
         <>
           {createButtonProps && (
@@ -679,7 +608,7 @@ const PostList: React.FC = () => {
           </Button>
         </>
       )}
-      // highlight-end
+      /* highlight-end */
     >
       <p>Rest of your page here</p>
     </List>
@@ -689,22 +618,25 @@ const PostList: React.FC = () => {
 
 const App = () => {
   return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
   );
 };
+
 render(
-  <Wrapper>
+  <ReactRouter.BrowserRouter>
     <App />
-  </Wrapper>,
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -714,9 +646,6 @@ You can customize the wrapper element of the buttons at the header by using the
 
 ```tsx live url=http://localhost:3000/posts previewHeight=280px
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { List } from "@refinedev/mantine";
@@ -725,14 +654,14 @@ import { Button } from "@mantine/core";
 const PostList: React.FC = () => {
   return (
     <List
-      // highlight-start
+      /* highlight-start */
       headerButtonProps={{
         style: {
           border: "2px dashed cornflowerblue",
           padding: "16px",
         },
       }}
-      // highlight-end
+      /* highlight-end */
       headerButtons={
         <Button variant="outline" type="primary">
           Custom Button
@@ -747,22 +676,25 @@ const PostList: React.FC = () => {
 
 const App = () => {
   return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<PostList />} />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
   );
 };
+
 render(
-  <Wrapper>
+  <ReactRouter.BrowserRouter>
     <App />
-  </Wrapper>,
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/basic-views/show/index.md b/documentation/docs/ui-integrations/mantine/components/basic-views/show/index.md
index 5375f1f89645..ce96f55a272c 100644
--- a/documentation/docs/ui-integrations/mantine/components/basic-views/show/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/basic-views/show/index.md
@@ -3,52 +3,12 @@ title: Show
 swizzle: true
 ---
 
-```tsx live shared
-setRefineProps({
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-  notificationProvider: RefineMantine.useNotificationProvider,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={MantineCore.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
-
-interface ICategory {
-  id: number;
-  title: string;
-}
-
-interface IPost {
-  id: number;
-  title: string;
-  content: string;
-  status: "published" | "draft" | "rejected";
-  category: { id: number };
-}
-```
-
 `<Show>` provides us a layout for displaying the page. It does not contain any logic and just adds extra functionalities like a refresh button and being able to give titles to the page.
 
 We will show what `<Show>` does using properties with examples.
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { useShow } from "@refinedev/core";
@@ -56,8 +16,8 @@ import { Show, MarkdownField } from "@refinedev/mantine";
 import { Title, Text } from "@mantine/core";
 
 const PostShow: React.FC = () => {
-  const { queryResult } = useShow<IPost>();
-  const { data, isLoading } = queryResult;
+  const { query } = useShow<IPost>();
+  const { data, isLoading } = query;
   const record = data?.data;
 
   return (
@@ -79,37 +39,47 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 :::simple Good to know
-
 You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-packages) to customize it.
-
 :::
 
 ## Properties
@@ -118,12 +88,8 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 `title` allows the addition of titles inside the `<Show>` component. if you don't pass title props it uses the "Show" prefix and the singular resource name by default. For example, for the "posts" resource, it would be "Show post".
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/mantine";
@@ -131,59 +97,68 @@ import { Title } from "@mantine/core";
 
 const PostShow: React.FC = () => {
   return (
-    /* highlight-next-line */
-    <Show title={<Title order={3}>Custom Title</Title>}>
+    <Show
+      // highlight-next-line
+      title={<Title order={3}>Custom Title</Title>}
+    >
       <p>Rest of your page here</p>
     </Show>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 ### resource
 
-The `<Show>` component reads the `resource` information from the route by default. TIf you want to use a custom resource for the `<Show>` component, you can use the `resource` prop.
+The `<Show>` component reads the `resource` information from the route by default. If you want to use a custom resource for the `<Show>` component, you can use the `resource` prop.
 
 ```tsx live url=http://localhost:3000/custom/123 previewHeight=280px
 setInitialRoutes(["/custom/123"]);
 
-import { Refine } from "@refinedev/core";
-import { Layout } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
-
 // visible-block-start
 import { Show } from "@refinedev/mantine";
 
 const CustomPage: React.FC = () => {
   return (
-    /* highlight-next-line */
+    // highlight-next-line
     <Show resource="categories">
       <p>Rest of your page here</p>
     </Show>
@@ -191,31 +166,22 @@ const CustomPage: React.FC = () => {
 };
 // visible-block-end
 
-const App: React.FC = () => {
-  return (
-    <Refine
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom/:id",
-          },
-        ],
-        // highlight-end
-      }}
-      Layout={Layout}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
+      resources={[
+        {
+          name: "categories",
+          list: "/categories",
+          show: "/categories/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/custom/:id" element={<CustomPage />} />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -231,111 +197,69 @@ When clicked on, delete button executes the `useDelete` method provided by the [
 
 > For more information, refer to the [`<DeleteButton>`](/docs/ui-integrations/ant-design/components/buttons/delete-button) and the [`<EditButton>`](/docs/ui-integrations/ant-design/components/buttons/edit-button) documentation.
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/mantine";
 import { usePermissions } from "@refinedev/core";
-import { Title } from "@mantine/core";
 
 const PostShow: React.FC = () => {
   const { data: permissionsData } = usePermissions();
 
   return (
     <Show
-      /* highlight-start */
+      // highlight-start
       canDelete={permissionsData?.includes("admin")}
       canEdit={permissionsData?.includes("admin")}
-      /* highlight-end */
+      // highlight-end
     >
       <p>Rest of your page here</p>
     </Show>
   );
 };
-// visible-block-end
-
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
 
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      return {
-        data: {},
-      };
-    },
-  };
-
-  const authProvider = {
-    login: async () => {
-      return {
-        success: true,
-        redirectTo: "/",
-      };
-    },
-    register: async () => {
-      return {
-        success: true,
-      };
-    },
-    forgotPassword: async () => {
-      return {
-        success: true,
-      };
-    },
-    updatePassword: async () => {
-      return {
-        success: true,
-      };
-    },
-    logout: async () => {
-      return {
-        success: true,
-        redirectTo: "/",
-      };
-    },
-    check: async () => ({
-      authenticated: true,
-    }),
-    onError: async (error) => {
-      console.error(error);
-      return { error };
-    },
-    getPermissions: async () => ["admin"],
-    getIdentity: async () => null,
-  };
+// visible-block-end
 
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={customDataProvider}
-      authProvider={authProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+      authProvider={{
+        getPermissions: async () => ["admin"],
+      }}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -347,10 +271,6 @@ The `<Show>` component reads the `id` information from the route by default. `re
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=350px
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show, useModalForm } from "@refinedev/mantine";
@@ -370,13 +290,12 @@ const PostShow: React.FC = () => {
       <Modal
         opened={visible}
         onClose={close}
-        // hide-start
         size={700}
         withCloseButton={false}
-        // hide-end
       >
-        {/* highlight-next-line */}
+        {/* highlight-start */}
         <Show recordItemId={id}>
+          {/* highlight-end */}
           <p>Rest of your page here</p>
         </Show>
       </Modal>
@@ -385,30 +304,42 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -421,11 +352,16 @@ import { Refine } from "@refinedev/core";
 import { Show } from "@refinedev/mantine";
 import dataProvider from "@refinedev/simple-rest";
 
-// highlight-start
 const PostShow = () => {
-  return <Show dataProviderName="other">...</Show>;
+  return (
+    <Show
+      // highlight-next-line
+      dataProviderName="other"
+    >
+      <p>Rest of your page here</p>
+    </Show>
+  );
 };
-// highlight-end
 
 export const App: React.FC = () => {
   return (
@@ -448,100 +384,119 @@ export const App: React.FC = () => {
 To customize the back button or to disable it, you can use the `goBack` property. You can pass `false` or `null` to hide the back button.
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
-setInitialRoutes(["/posts", "/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import { Show } from "@refinedev/mantine";
 
 const PostShow: React.FC = () => {
   return (
-    /* highlight-next-line */
-    <Show goBack="😊">
+    <Show
+      // highlight-next-line
+      goBack="😊"
+    >
       <p>Rest of your page here</p>
     </Show>
   );
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 ### isLoading
 
-To toggle the loading state of the `<Edit/>` component, you can use the `isLoading` property.
+To toggle the loading state of the `<Show/>` component, you can use the `isLoading` property.
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/mantine";
 
+// highlight-start
 const PostShow: React.FC = () => {
   return (
-    /* highlight-next-line */
     <Show isLoading={true}>
       <p>Rest of your page here</p>
     </Show>
   );
 };
+// highlight-end
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -551,10 +506,6 @@ To customize or disable the breadcrumb, you can use the `breadcrumb` property. B
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/mantine";
@@ -575,9 +526,8 @@ const CustomBreadcrumb: React.FC = () => {
 const PostShow: React.FC = () => {
   return (
     <Show
-      // highlight-start
+      // highlight-next-line
       breadcrumb={<CustomBreadcrumb />}
-      // highlight-end
     >
       <p>Rest of your page here</p>
     </Show>
@@ -585,30 +535,42 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -620,10 +582,6 @@ If you want to customize the wrapper of the `<Show/>` component, you can use the
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/mantine";
@@ -632,6 +590,7 @@ const PostShow: React.FC = () => {
   return (
     <Show
       // highlight-start
+
       wrapperProps={{
         style: {
           border: "2px dashed cornflowerblue",
@@ -646,95 +605,46 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-```
-
-> For more information, refer to the [`Card` documentation from Mantine &#8594](https://mantine.dev/core/card/)
-
-### headerProps
-
-If you want to customize the header of the `<Show/>` component, you can use the `headerProps` property.
-
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
-setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
-
-// visible-block-start
-import { Show } from "@refinedev/mantine";
-
-const PostShow: React.FC = () => {
-  return (
-    <Show
-      // highlight-start
-      headerProps={{
-        style: {
-          border: "2px dashed cornflowerblue",
-          padding: "16px",
-        },
-      }}
-      // highlight-end
     >
-      <p>Rest of your page here</p>
-    </Show>
-  );
-};
-// visible-block-end
-
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[
-        {
-          name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
             </div>
-          ),
-        },
-      ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Group` documentation from Mantine &#8594](https://mantine.dev/core/group/)
+> For more information, refer to the [`Card` documentation from Mantine &#8594](https://mantine.dev/core/card/)
 
 ### contentProps
 
@@ -742,10 +652,6 @@ If you want to customize the content of the `<Show/>` component, you can use the
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/mantine";
@@ -768,30 +674,43 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -803,18 +722,8 @@ By default, the `<Show/>` component has a [`<ListButton>`][list-button], [`<Edit
 
 You can customize the buttons at the header by using the `headerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, deleteButtonProps, editButtonProps, listButtonProps, refreshButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
 
-If the "list" resource is not defined, the [`<ListButton>`][list-button] will not render and `listButtonProps` will be `undefined`.
-
-If [`canDelete`](#candelete-and-canedit) is `false`, the [`<DeleteButton>`][delete-button] will not render and `deleteButtonProps` will be `undefined`.
-
-If [`canEdit`](#candelete-and-canedit) is `false`, [`<EditButton>`][edit-button] will not render and `editButtonProps` will be `undefined`.
-
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/mantine";
@@ -838,32 +747,45 @@ const PostShow: React.FC = () => {
     </Show>
   );
 };
+
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -871,10 +793,6 @@ Or, instead of using the `defaultButtons`, you can create your own buttons. If y
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import {
@@ -920,30 +838,42 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -953,10 +883,6 @@ You can customize the wrapper element of the buttons at the header by using the
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/mantine";
@@ -983,32 +909,45 @@ const PostShow: React.FC = () => {
     </Show>
   );
 };
+
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1020,10 +959,6 @@ You can customize the buttons at the footer by using the `footerButtons` propert
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/mantine";
@@ -1047,30 +982,42 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1080,10 +1027,6 @@ You can customize the wrapper element of the buttons at the footer by using the
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { Show } from "@refinedev/mantine";
@@ -1095,10 +1038,8 @@ const PostShow: React.FC = () => {
       // highlight-start
       footerButtonProps={{
         style: {
-          // hide-start
           float: "right",
           marginRight: 24,
-          // hide-end
           border: "2px dashed cornflowerblue",
           padding: "16px",
         },
@@ -1116,30 +1057,42 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/clone-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/clone-button/index.md
index 1ad754c45230..7d4a28336d60 100644
--- a/documentation/docs/ui-integrations/mantine/components/buttons/clone-button/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/buttons/clone-button/index.md
@@ -4,42 +4,16 @@ swizzle: true
 ---
 
 ```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-  catchAll: <RefineMantine.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
-
 const ClonePage = () => {
   const { list } = RefineCore.useNavigation();
-  const params = RefineCore.useRouterContext().useParams();
+  const params = RefineCore.useParsed();
 
   return (
     <div>
       <MantineCore.Text italic color="dimmed" size="sm">
         URL Parameters:
       </MantineCore.Text>
-      <MantineCore.Code>{JSON.stringify(params)}</MantineCore.Code>
+      <MantineCore.Code>{JSON.stringify(params, null, 2)}</MantineCore.Code>
       <MantineCore.Space h="md" />
       <MantineCore.Button
         size="xs"
@@ -66,12 +40,10 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ```tsx live url=http://localhost:3000 previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
 import { List, CloneButton } from "@refinedev/mantine";
 import { Table, Pagination } from "@mantine/core";
-
 import { useTable } from "@refinedev/react-table";
 import { ColumnDef, flexRender } from "@tanstack/react-table";
 
@@ -166,23 +138,32 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
-          create: ClonePage,
+          list: "/posts",
+          clone: "/posts/clone/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+          <ReactRouter.Route path="clone/:id" element={<ClonePage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -193,8 +174,7 @@ render(
 `recordItemId` is used to append the record id to the end of the route path. By default `id` will be read from the route parameters.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { CloneButton } from "@refinedev/mantine";
@@ -204,24 +184,32 @@ const MyCloneComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          create: ClonePage,
-          list: MyCloneComponent,
+          list: "/posts",
+          clone: "/posts/clone/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyCloneComponent />} />
+          <ReactRouter.Route path="clone/:id" element={<ClonePage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -232,9 +220,7 @@ Clicking the button will trigger the `clone` method of [`useNavigation`](/docs/r
 It is used to redirect the app to the `clone` action of the given resource name. By default, the app redirects to the inferred resource's `clone` action path.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { CloneButton } from "@refinedev/mantine";
@@ -244,27 +230,40 @@ const MyCloneComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyCloneComponent,
+          list: "/posts",
+          clone: "/posts/clone/:id",
         },
         {
           name: "categories",
-          create: ClonePage,
+          list: "/categories",
+          clone: "/categories/clone/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyCloneComponent />} />
+        </ReactRouter.Route>
+        <ReactRouter.Route
+          path="/categories/clone/:id"
+          element={<ClonePage />}
+        />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -288,13 +287,11 @@ If you have multiple resources with the same name, you can pass the `identifier`
 
 ### hideText
 
-`hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
+It is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
 setInitialRoutes(["/"]);
 
-import { Refine } from "@refinedev/core";
-
 // visible-block-start
 import { CloneButton } from "@refinedev/mantine";
 
@@ -303,24 +300,31 @@ const MyCloneComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <RefineHeadlessDemo
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyCloneComponent,
-          create: ClonePage,
+          list: "/posts",
+          clone: "/posts/clone/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyCloneComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/create-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/create-button/index.md
index 61a522b57d87..9b5abc279aae 100644
--- a/documentation/docs/ui-integrations/mantine/components/buttons/create-button/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/buttons/create-button/index.md
@@ -4,42 +4,16 @@ swizzle: true
 ---
 
 ```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-  catchAll: <RefineMantine.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
-
 const CreatePage = () => {
   const { list } = RefineCore.useNavigation();
-  const params = RefineCore.useRouterContext().useParams();
+  const params = RefineCore.useParsed();
 
   return (
     <div>
       <MantineCore.Text italic color="dimmed" size="sm">
         URL Parameters:
       </MantineCore.Text>
-      <MantineCore.Code>{JSON.stringify(params)}</MantineCore.Code>
+      <MantineCore.Code>{JSON.stringify(params, null, 2)}</MantineCore.Code>
       <MantineCore.Space h="md" />
       <MantineCore.Button
         size="xs"
@@ -147,23 +121,32 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
-          create: CreatePage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+          <ReactRouter.Route path="create" element={<CreatePage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -174,9 +157,7 @@ render(
 It is used to redirect the app to the `create` action path of the given resource name. By default, the app redirects to the inferred resource's `create` action path.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { CreateButton } from "@refinedev/mantine";
@@ -186,28 +167,44 @@ const MyCreateComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyCreateComponent,
+          list: "/posts",
+          create: "/posts/create",
         },
         {
           name: "categories",
-          create: CreatePage,
+          list: "/categories",
+          create: "/categories/create",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyCreateComponent />} />
+        </ReactRouter.Route>
+        <ReactRouter.Route
+          path="/categories/create"
+          element={
+            <div style={{ padding: 16 }}>
+              <CreatePage />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -231,12 +228,10 @@ const MyComponent = () => {
 
 ### hideText
 
-`hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
+It is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { CreateButton } from "@refinedev/mantine";
@@ -246,25 +241,32 @@ const MyCreateComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      legacyRouterProvider={routerProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyCreateComponent,
-          create: CreatePage,
+          list: "/posts",
+          create: "/posts/create",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyCreateComponent />} />
+          <ReactRouter.Route path="create" element={<CreatePage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/delete-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/delete-button/index.md
index 664b0cc0aa76..a7fc03c7b1b1 100644
--- a/documentation/docs/ui-integrations/mantine/components/buttons/delete-button/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/buttons/delete-button/index.md
@@ -4,27 +4,25 @@ swizzle: true
 ---
 
 ```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-  catchAll: <RefineMantine.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
+const DeletePage = () => {
+  const { list } = RefineCore.useNavigation();
+  const params = RefineCore.useParsed();
+
   return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
+    <div>
+      <MantineCore.Text italic color="dimmed" size="sm">
+        URL Parameters:
+      </MantineCore.Text>
+      <MantineCore.Code>{JSON.stringify(params, null, 2)}</MantineCore.Code>
+      <MantineCore.Space h="md" />
+      <MantineCore.Button
+        size="xs"
+        variant="outline"
+        onClick={() => list("posts")}
+      >
+        Go back
+      </MantineCore.Button>
+    </div>
   );
 };
 ```
@@ -42,8 +40,6 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 ```tsx live url=http://localhost:3000 previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
 
 // visible-block-start
 import { List, DeleteButton } from "@refinedev/mantine";
@@ -136,23 +132,30 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -163,9 +166,7 @@ render(
 `recordItemId` allows us to manage which record will be deleted. By default, `recordItemId` is read from the route parameters.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { DeleteButton } from "@refinedev/mantine";
@@ -175,39 +176,41 @@ const MyDeleteComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      return {
-        data: {},
-      };
-    },
-  };
-
-  return (
-    <Refine
-      dataProvider={customDataProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
+      dataProvider={RefineSimpleRest.default(
+        "https://api.fake-rest.refine.dev",
+        {
+          custom: {
+            deleteOne: async ({ resource, id, variables }) => {
+              await new Promise((resolve) => setTimeout(resolve, 500));
+              return { data: {} };
+            },
+          },
+        },
+      )}
       resources={[
         {
           name: "posts",
-          list: MyDeleteComponent,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyDeleteComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -218,59 +221,59 @@ Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete)
 `resource` allows us to manage which resource's record is going to be deleted. By default, `resource` is read from the current route.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { DeleteButton } from "@refinedev/mantine";
 
 const MyDeleteComponent = () => {
-  return <DeleteButton resource="categories" recordItemId="2" />;
+  return <DeleteButton resource="categories" recordItemId="123" />;
 };
 // visible-block-end
 
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      return {
-        data: {},
-      };
-    },
-  };
-
-  return (
-    <Refine
-      dataProvider={customDataProvider}
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
+      dataProvider={RefineSimpleRest.default(
+        "https://api.fake-rest.refine.dev",
+        {
+          custom: {
+            deleteOne: async ({ resource, id, variables }) => {
+              await new Promise((resolve) => setTimeout(resolve, 500));
+              return { data: {} };
+            },
+          },
+        },
+      )}
       resources={[
         {
           name: "posts",
-          list: MyDeleteComponent,
+          list: "/posts",
         },
         {
           name: "categories",
+          list: "/categories",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyDeleteComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete) method and then the record whose resource is "categories" and whose id is "2" gets deleted.
+Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete) method and then the record whose resource is "categories" and whose id is "123" gets deleted.
 
 If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
 
@@ -283,9 +286,7 @@ If you have multiple resources with the same name, you can pass the `identifier`
 For example, let's `console.log` after deletion:
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { DeleteButton } from "@refinedev/mantine";
@@ -293,8 +294,7 @@ import { DeleteButton } from "@refinedev/mantine";
 const MyDeleteComponent = () => {
   return (
     <DeleteButton
-      resourceNameOrRouteName="posts"
-      recordItemId="1"
+      recordItemId="123"
       onSuccess={(value) => {
         console.log(value);
       }}
@@ -303,227 +303,94 @@ const MyDeleteComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      return {
-        message: "You have successfully deleted the record",
-      };
-    },
-  };
-
-  return (
-    <Refine
-      dataProvider={customDataProvider}
-      resources={[
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
+      dataProvider={RefineSimpleRest.default(
+        "https://api.fake-rest.refine.dev",
         {
-          name: "posts",
-          list: MyDeleteComponent,
+          custom: {
+            deleteOne: async ({ resource, id, variables }) => {
+              await new Promise((resolve) => setTimeout(resolve, 500));
+              return { data: {} };
+            },
+          },
         },
-      ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-```
-
-### mutationMode
-
-Determines which mode mutation will have while executing `<DeleteButton>`.
-
-> For more information, refer to the [mutation mode documentation &#8594](/advanced-tutorials/mutation-mode.md)
-
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
-
-// visible-block-start
-import { DeleteButton } from "@refinedev/mantine";
-
-const MyDeleteComponent = () => {
-  return <DeleteButton recordItemId="1" mutationMode="undoable" />;
-};
-// visible-block-end
-
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      return {
-        data: {},
-      };
-    },
-  };
-
-  return (
-    <Refine
-      dataProvider={customDataProvider}
+      )}
       resources={[
         {
           name: "posts",
-          list: MyDeleteComponent,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyDeleteComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 ### hideText
 
-`hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
+It is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { DeleteButton } from "@refinedev/mantine";
 
 const MyDeleteComponent = () => {
-  return <DeleteButton recordItemId="1" hideText />;
+  return <DeleteButton hideText recordItemId="1" />;
 };
 // visible-block-end
 
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      return {
-        data: {},
-      };
-    },
-  };
-
-  return (
-    <Refine
-      dataProvider={customDataProvider}
-      resources={[
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
+      dataProvider={RefineSimpleRest.default(
+        "https://api.fake-rest.refine.dev",
         {
-          name: "posts",
-          list: MyDeleteComponent,
+          custom: {
+            deleteOne: async ({ resource, id, variables }) => {
+              await new Promise((resolve) => setTimeout(resolve, 500));
+              return { data: {} };
+            },
+          },
         },
-      ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-```
-
-### accessControl
-
-`accessControl` prop can be used to skip the access control check with its `enabled` property or to hide the button when the user does not have the permission to access the resource with `hideIfUnauthorized` property. This is relevant only when an [`accessControlProvider`](/docs/authorization/access-control-provider) is provided to [`<Refine/>`](/docs/core/refine-component)
-
-```tsx
-import { DeleteButton } from "@refinedev/mantine";
-
-export const MyListComponent = () => {
-  return (
-    <DeleteButton accessControl={{ enabled: true, hideIfUnauthorized: true }} />
-  );
-};
-```
-
-### ~~resourceNameOrRouteName~~ <PropTag deprecated />
-
-Use `resource` prop instead.
-
-## How to override confirm texts?
-
-You can change the text that appears when you confirm a transaction with `confirmTitle` prop, as well as what 'ok' and 'cancel' buttons text look like with the `confirmOkText` and `confirmCancelText` props.
-
-```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
-import dataProvider from "@refinedev/simple-rest";
-
-// visible-block-start
-import { DeleteButton } from "@refinedev/mantine";
-
-const MyDeleteComponent = () => {
-  return (
-    <DeleteButton
-      //hide-start
-      recordItemId="1"
-      //hide-end
-      confirmTitle="Custom Title"
-      confirmOkText="Ok Text"
-      confirmCancelText="Delete Text"
-    />
-  );
-};
-// visible-block-end
-
-const App = () => {
-  const simpleRestDataProvider = dataProvider(
-    "https://api.fake-rest.refine.dev",
-  );
-
-  const customDataProvider = {
-    ...simpleRestDataProvider,
-    deleteOne: async ({ resource, id, variables }) => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      return {
-        data: {},
-      };
-    },
-  };
-
-  return (
-    <Refine
-      dataProvider={customDataProvider}
+      )}
       resources={[
         {
           name: "posts",
-          list: MyDeleteComponent,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyDeleteComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/edit-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/edit-button/index.md
index fe42e1db48da..0a5e74881536 100644
--- a/documentation/docs/ui-integrations/mantine/components/buttons/edit-button/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/buttons/edit-button/index.md
@@ -4,50 +4,26 @@ swizzle: true
 ---
 
 ```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-  catchAll: <RefineMantine.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
+import * as React from "react";
 
 const EditPage = () => {
   const { list } = RefineCore.useNavigation();
-  const params = RefineCore.useRouterContext().useParams();
+  const params = RefineCore.useParsed();
 
   return (
     <div>
-      <RefineMantine.Text italic color="dimmed" size="sm">
+      <MantineCore.Text italic color="dimmed" size="sm">
         URL Parameters:
-      </RefineMantine.Text>
-      <RefineMantine.Code>{JSON.stringify(params)}</RefineMantine.Code>
-      <RefineMantine.Space h="md" />
-      <RefineMantine.Button
+      </MantineCore.Text>
+      <MantineCore.Code>{JSON.stringify(params, null, 2)}</MantineCore.Code>
+      <MantineCore.Space h="md" />
+      <MantineCore.Button
         size="xs"
         variant="outline"
         onClick={() => list("posts")}
       >
         Go back
-      </RefineMantine.Button>
+      </MantineCore.Button>
     </div>
   );
 };
@@ -65,7 +41,7 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 ```tsx live url=http://localhost:3000 previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine, useNavigation, useRouterContext } from "@refinedev/core";
+import * as React from "react";
 
 // visible-block-start
 import { List, EditButton } from "@refinedev/mantine";
@@ -158,23 +134,32 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
-          edit: EditPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+          <ReactRouter.Route path="edit/:id" element={<EditPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -185,9 +170,8 @@ render(
 `recordItemId` is used to append the record id to the end of the route path.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
+import * as React from "react";
 
 // visible-block-start
 import { EditButton } from "@refinedev/mantine";
@@ -197,24 +181,32 @@ const MyEditComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyEditComponent,
-          edit: EditPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyEditComponent />} />
+          <ReactRouter.Route path="edit/:id" element={<EditPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -223,9 +215,8 @@ render(
 Redirection endpoint is defined by the `resource` property and its `edit` action path. By default, `<EditButton>` uses the inferred resource from the route.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
+import * as React from "react";
 
 // visible-block-start
 import { EditButton } from "@refinedev/mantine";
@@ -235,34 +226,50 @@ const MyEditComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyEditComponent,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
         {
           name: "categories",
-          edit: EditPage,
+          list: "/categories",
+          edit: "/categories/edit/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyEditComponent />} />
+        </ReactRouter.Route>
+        <ReactRouter.Route
+          path="/categories/edit/:id"
+          element={
+            <div style={{ padding: 16 }}>
+              <EditPage />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 Clicking the button will trigger the `edit` method of [`useNavigation`](/docs/routing/hooks/use-navigation) and then redirect the app to the `edit` action path of the resource, filling the necessary parameters in the route.
 
-If you have multiple resources with the same name, you can
-pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
+If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
 
 > For more information, refer to the [`identifier` section of the `<Refine/>` component documentation &#8594](/docs/core/refine-component#identifier)
 
@@ -283,36 +290,43 @@ const MyComponent = () => {
 `hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
+import * as React from "react";
 
 // visible-block-start
 import { EditButton } from "@refinedev/mantine";
 
 const MyEditComponent = () => {
-  return <EditButton recordItemId="123" hideText />;
+  return <EditButton hideText recordItemId="1" />;
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyEditComponent,
-          edit: EditPage,
+          list: "/posts",
+          edit: "/posts/edit/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyEditComponent />} />
+          <ReactRouter.Route path="edit/:id" element={<EditPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/export-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/export-button/index.md
index aefdaefc7a65..9d4e7decef45 100644
--- a/documentation/docs/ui-integrations/mantine/components/buttons/export-button/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/buttons/export-button/index.md
@@ -4,38 +4,44 @@ swizzle: true
 ---
 
 ```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-  catchAll: <RefineMantine.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
+import * as React from "react";
+
+const ListPage = () => {
+  const { list } = RefineCore.useNavigation();
+  const params = RefineCore.useParsed();
+
   return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
+    <div>
+      <MantineCore.Text italic color="dimmed" size="sm">
+        URL Parameters:
+      </MantineCore.Text>
+      <MantineCore.Code>{JSON.stringify(params, null, 2)}</MantineCore.Code>
+      <MantineCore.Space h="md" />
+      <MantineCore.Button
+        size="xs"
+        variant="outline"
+        onClick={() => list("posts")}
+      >
+        Go back
+      </MantineCore.Button>
+    </div>
   );
 };
 ```
 
-`<ExportButton>` is an Mantine [`<Button>`](https://mantine.dev/core/button) with a default export icon and a default text with "Export". It only has presentational value.
+`<ExportButton>` is a Mantine [`<Button>`](https://mantine.dev/core/button) with a default export icon and a default text with "Export". It only has presentational value.
+
+:::simple Good to know
+
+You can swizzle this component to customize it with the [**Refine CLI**](/docs/packages/list-of-packages)
+
+:::
+
+## Usage
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
+import * as React from "react";
 
 // visible-block-start
 //highlight-next-line
@@ -140,31 +146,33 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-:::simple Good to know
-
-You can swizzle this component to customize it with the [**Refine CLI**](/docs/packages/list-of-packages)
-
-:::
-
 ## Properties
 
 ### hideText
@@ -172,9 +180,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 `hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
+import * as React from "react";
 
 // visible-block-start
 import { ExportButton } from "@refinedev/mantine";
@@ -184,23 +191,30 @@ const MyExportComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyExportComponent,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyExportComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/import-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/import-button/index.md
index 09eeae5db938..7b1b8c95d817 100644
--- a/documentation/docs/ui-integrations/mantine/components/buttons/import-button/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/buttons/import-button/index.md
@@ -4,40 +4,46 @@ swizzle: true
 ---
 
 ```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-  catchAll: <RefineMantine.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
+import * as React from "react";
+
+const ListPage = () => {
+  const { list } = RefineCore.useNavigation();
+  const params = RefineCore.useParsed();
+
   return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
+    <div>
+      <MantineCore.Text italic color="dimmed" size="sm">
+        URL Parameters:
+      </MantineCore.Text>
+      <MantineCore.Code>{JSON.stringify(params, null, 2)}</MantineCore.Code>
+      <MantineCore.Space h="md" />
+      <MantineCore.Button
+        size="xs"
+        variant="outline"
+        onClick={() => list("posts")}
+      >
+        Go back
+      </MantineCore.Button>
+    </div>
   );
 };
 ```
 
-`<ImportButton>` is compatible with the [`useImport`][useimport] hook and is meant to be used as it's upload button.
+`<ImportButton>` is compatible with the [`useImport`][useimport] hook and is meant to be used as its upload button.
+
+It uses Mantine's [`<Button>`][button] component and native html [`<input>`][input] element. It wraps a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) with a [`<Button>`][button] component and [`<input>`][input] element and accepts its own properties separately.
+
+:::simple Good to know
+
+You can swizzle this component to customize it with the [**Refine CLI**](/docs/packages/list-of-packages)
+
+:::
 
-It uses Mantine's [`<Button>`][button] component and native html [`<input>`][input] element. It wraps a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) with a [`<Button>`][button] component and [`<input>`][input] element and accepts it's own properties for separately.
+## Usage
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
+import * as React from "react";
 
 // visible-block-start
 //highlight-next-line
@@ -142,31 +148,33 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-:::simple Good to know
-
-You can swizzle this component to customize it with the [**Refine CLI**](/docs/packages/list-of-packages)
-
-:::
-
 ## Properties
 
 ### hideText
@@ -174,9 +182,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 `hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
+import * as React from "react";
 
 // visible-block-start
 import { ImportButton } from "@refinedev/mantine";
@@ -186,23 +193,30 @@ const MyImportComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyImportComponent,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyImportComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/list-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/list-button/index.md
index f0071620da2d..bf129fcba69d 100644
--- a/documentation/docs/ui-integrations/mantine/components/buttons/list-button/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/buttons/list-button/index.md
@@ -4,34 +4,32 @@ swizzle: true
 ---
 
 ```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-  catchAll: <RefineMantine.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
+import * as React from "react";
+
+const ListPage = () => {
+  const { show } = RefineCore.useNavigation();
+  const params = RefineCore.useParsed();
+
   return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
+    <div>
+      <MantineCore.Text italic color="dimmed" size="sm">
+        URL Parameters:
+      </MantineCore.Text>
+      <MantineCore.Code>{JSON.stringify(params, null, 2)}</MantineCore.Code>
+      <MantineCore.Space h="md" />
+      <MantineCore.Button
+        size="xs"
+        variant="outline"
+        onClick={() => show("posts", "123")}
+      >
+        Go back
+      </MantineCore.Button>
+    </div>
   );
 };
 ```
 
-`<ListButton>` is uses Mantine's [`<Button>`](https://mantine.dev/core/button) component. It uses the `list` method from [`useNavigation`](/docs/routing/hooks/use-navigation) under the hood. It can be useful when redirecting the app to the list page route of resource.
+`<ListButton>` uses Mantine's [`<Button>`](https://mantine.dev/core/button) component. It uses the `list` method from [`useNavigation`](/docs/routing/hooks/use-navigation) under the hood. It can be useful when redirecting the app to the list page route of resource.
 
 :::simple Good to know
 
@@ -43,15 +41,14 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
+import * as React from "react";
 
 // visible-block-start
 import { useShow } from "@refinedev/core";
 import {
   Show,
   MarkdownField,
-  //highlight-next-line
+  // highlight-next-line
   ListButton,
 } from "@refinedev/mantine";
 import { Title, Text } from "@mantine/core";
@@ -79,35 +76,43 @@ const PostShow: React.FC = () => {
     </Show>
   );
 };
+
+interface IPost {
+  id: number;
+  title: string;
+  content: string;
+}
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<ListPage />} />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-The button text is defined automatically by Refine based on resource definition.
-
 ## Properties
 
 ### resource
@@ -115,10 +120,8 @@ The button text is defined automatically by Refine based on resource definition.
 Redirection endpoint is defined by the `resource`'s `list` action path. By default, `<ListButton>` uses the inferred resource from the route.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine, useRouterContext, useNavigation } from "@refinedev/core";
-import { Button, Code, Space, Text } from "@mantine/core";
+setInitialRoutes(["/posts"]);
+import * as React from "react";
 
 // visible-block-start
 import { ListButton } from "@refinedev/mantine";
@@ -128,45 +131,42 @@ const MyListComponent = () => {
 };
 // visible-block-end
 
-const ListPage = () => {
-  const { list } = useNavigation();
-  const params = useRouterContext().useParams();
-
-  return (
-    <div>
-      <Text italic color="dimmed" size="sm">
-        URL Parameters:
-      </Text>
-      <Code>{JSON.stringify(params)}</Code>
-      <Space h="md" />
-      <Button size="xs" variant="outline" onClick={() => list("posts")}>
-        Go back
-      </Button>
-    </div>
-  );
-};
-
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyListComponent,
+          list: "/posts",
         },
         {
           name: "categories",
-          list: ListPage,
+          list: "/categories",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyListComponent />} />
+        </ReactRouter.Route>
+        <ReactRouter.Route
+          path="/categories"
+          element={
+            <div style={{ padding: 16 }}>
+              <ListPage />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -181,9 +181,8 @@ If you have multiple resources with the same name, you can pass the `identifier`
 `hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
+import * as React from "react";
 
 // visible-block-start
 import { ListButton } from "@refinedev/mantine";
@@ -193,23 +192,30 @@ const MyListComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyListComponent,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyListComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/refresh-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/refresh-button/index.md
index 56f30686f67f..6501aaac2af1 100644
--- a/documentation/docs/ui-integrations/mantine/components/buttons/refresh-button/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/buttons/refresh-button/index.md
@@ -4,34 +4,32 @@ swizzle: true
 ---
 
 ```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-  catchAll: <RefineMantine.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
+import * as React from "react";
+
+const ShowPage = () => {
+  const { list } = RefineCore.useNavigation();
+  const params = RefineCore.useParsed();
+
   return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
+    <div>
+      <MantineCore.Text italic color="dimmed" size="sm">
+        URL Parameters:
+      </MantineCore.Text>
+      <MantineCore.Code>{JSON.stringify(params, null, 2)}</MantineCore.Code>
+      <MantineCore.Space h="md" />
+      <MantineCore.Button
+        size="xs"
+        variant="outline"
+        onClick={() => list("posts")}
+      >
+        Go back
+      </MantineCore.Button>
+    </div>
   );
 };
 ```
 
-`<RefreshButton>` uses Mantine [`<Button>`](https://mantine.dev/core/button) omponent to update the data shown on the page via the [`useInvalidate`][use-invalidate] hook.
+`<RefreshButton>` uses Mantine [`<Button>`](https://mantine.dev/core/button) component to update the data shown on the page via the [`useInvalidate`][use-invalidate] hook.
 
 :::simple Good to know
 
@@ -43,17 +41,11 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
 setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
+import * as React from "react";
 
 // visible-block-start
 import { useShow } from "@refinedev/core";
-import {
-  Show,
-  MarkdownField,
-  //highlight-next-line
-  RefreshButton,
-} from "@refinedev/mantine";
+import { Show, MarkdownField, RefreshButton } from "@refinedev/mantine";
 import { Title, Text } from "@mantine/core";
 
 const PostShow: React.FC = () => {
@@ -81,28 +73,52 @@ const PostShow: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+interface IPost {
+  id: number;
+  title: string;
+  content: string;
+}
+
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <MantineCore.Button
+                  component={RefineCore.Link}
+                  to="/posts/show/123"
+                  variant="light"
+                >
+                  Show Item 123
+                </MantineCore.Button>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -113,54 +129,61 @@ render(
 `recordItemId` allows us to manage which data is going to be refreshed. By default, it will read the record id from the route parameters.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
+import * as React from "react";
 
 // visible-block-start
 import { RefreshButton } from "@refinedev/mantine";
 
 const MyRefreshComponent = () => {
-  return <RefreshButton recordItemId="1" />;
+  return <RefreshButton recordItemId="123" />;
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyRefreshComponent,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyRefreshComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-Clicking the button will trigger the [`useInvalidate`][use-invalidate] hook and then fetch the record whose resource is "post" and whose id is "1".
+Clicking the button will trigger the [`useInvalidate`][use-invalidate] hook and then fetch the record whose resource is "post" and whose id is "123".
 
 ### resource
 
 `resource` allows us to manage which resource is going to be refreshed. By default, it will read the resource from the current route.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
+import * as React from "react";
 
 // visible-block-start
 import { RefreshButton } from "@refinedev/mantine";
 
 const MyRefreshComponent = () => {
   return (
-    <RefreshButton // highlight-next-line
+    <RefreshButton
+      // highlight-next-line
       resource="categories"
       // highlight-next-line
       recordItemId="2"
@@ -169,23 +192,34 @@ const MyRefreshComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyRefreshComponent,
+          list: "/posts",
+        },
+        {
+          name: "categories",
+          list: "/categories",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyRefreshComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -200,9 +234,8 @@ If you have multiple resources with the same name, you can pass the `identifier`
 `hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
+import * as React from "react";
 
 // visible-block-start
 import { RefreshButton } from "@refinedev/mantine";
@@ -212,23 +245,30 @@ const MyRefreshComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyRefreshComponent,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyRefreshComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/save-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/save-button/index.md
index 642c278f43a6..5ff5bbc0d145 100644
--- a/documentation/docs/ui-integrations/mantine/components/buttons/save-button/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/buttons/save-button/index.md
@@ -4,34 +4,32 @@ swizzle: true
 ---
 
 ```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-  catchAll: <RefineMantine.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
+import * as React from "react";
+
+const EditPage = () => {
+  const { list } = RefineCore.useNavigation();
+  const params = RefineCore.useParsed();
+
   return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
+    <div>
+      <MantineCore.Text italic color="dimmed" size="sm">
+        URL Parameters:
+      </MantineCore.Text>
+      <MantineCore.Code>{JSON.stringify(params, null, 2)}</MantineCore.Code>
+      <MantineCore.Space h="md" />
+      <MantineCore.Button
+        size="xs"
+        variant="outline"
+        onClick={() => list("posts")}
+      >
+        Go back
+      </MantineCore.Button>
+    </div>
   );
 };
 ```
 
-`<SaveButton>` uses Mantine [`<Button>`](https://mantine.dev/core/button) component. It uses it for presantation purposes only. Some of the hooks that Refine has adds features to this button.
+`<SaveButton>` uses Mantine [`<Button>`](https://mantine.dev/core/button) component. It uses it for presentation purposes only. Some of the hooks that Refine has adds features to this button.
 
 :::simple Good to know
 
@@ -45,8 +43,7 @@ For example, let's add logic to the `<SaveButton>` component with the `saveButto
 
 ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=420px hideCode
 setInitialRoutes(["/posts/edit/123"]);
-import { Refine } from "@refinedev/core";
-import { EditButton } from "@refinedev/mantine";
+import * as React from "react";
 
 // visible-block-start
 import { Edit, useForm, useSelect } from "@refinedev/mantine";
@@ -115,30 +112,6 @@ const PostEdit: React.FC = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
-      resources={[
-        {
-          name: "posts",
-          edit: PostEdit,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <EditButton recordItemId="123">Edit Item 123</EditButton>
-            </div>
-          ),
-        },
-      ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
-);
-
 interface ICategory {
   id: number;
   title: string;
@@ -150,6 +123,48 @@ interface IPost {
   status: "published" | "draft" | "rejected";
   category: { id: number };
 }
+
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <MantineCore.Button
+                  component={RefineCore.Link}
+                  to="/posts/edit/123"
+                  variant="light"
+                >
+                  Edit Item 123
+                </MantineCore.Button>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
+);
 ```
 
 ## Properties
@@ -159,9 +174,8 @@ interface IPost {
 `hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
+import * as React from "react";
 
 // visible-block-start
 import { SaveButton } from "@refinedev/mantine";
@@ -171,23 +185,30 @@ const MySaveComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MySaveComponent,
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MySaveComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/show-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/show-button/index.md
index fcc3793a2801..da333277d24c 100644
--- a/documentation/docs/ui-integrations/mantine/components/buttons/show-button/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/buttons/show-button/index.md
@@ -4,42 +4,18 @@ swizzle: true
 ---
 
 ```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-  catchAll: <RefineMantine.ErrorComponent />,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
+import * as React from "react";
 
 const ShowPage = () => {
   const { list } = RefineCore.useNavigation();
-  const params = RefineCore.useRouterContext().useParams();
+  const params = RefineCore.useParsed();
 
   return (
     <div>
       <MantineCore.Text italic color="dimmed" size="sm">
         URL Parameters:
       </MantineCore.Text>
-      <MantineCore.Code>{JSON.stringify(params)}</MantineCore.Code>
+      <MantineCore.Code>{JSON.stringify(params, null, 2)}</MantineCore.Code>
       <MantineCore.Space h="md" />
       <MantineCore.Button
         size="xs"
@@ -63,9 +39,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 ## Usage
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine, useNavigation, useRouterContext } from "@refinedev/core";
+import * as React from "react";
 
 // visible-block-start
 import { List, ShowButton } from "@refinedev/mantine";
@@ -91,11 +67,7 @@ const PostList: React.FC = () => {
         header: "Actions",
         accessorKey: "id",
         cell: function render({ getValue }) {
-          return (
-            // highlight-start
-            <ShowButton size="xs" recordItemId={getValue() as number} />
-            // highlight-end
-          );
+          return <ShowButton size="xs" recordItemId={getValue() as number} />;
         },
       },
     ],
@@ -158,23 +130,32 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: PostList,
-          show: ShowPage,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+          <ReactRouter.Route path="show/:id" element={<ShowPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -185,8 +166,8 @@ render(
 `recordItemId` is used to append the record id to the end of the route path. By default `id` will be read from the route parameters.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
+import * as React from "react";
 
 // visible-block-start
 import { ShowButton } from "@refinedev/mantine";
@@ -196,24 +177,32 @@ const MyShowComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: ShowPage,
-          list: MyShowComponent,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyShowComponent />} />
+          <ReactRouter.Route path="show/:id" element={<ShowPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -224,9 +213,8 @@ Clicking the button will trigger the `show` method of [`useNavigation`](/docs/ro
 Redirection endpoint is defined by the `resource`'s `show` action path. By default, `<ShowButton>` uses the inferred resource from the route.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
+import * as React from "react";
 
 // visible-block-start
 import { ShowButton } from "@refinedev/mantine";
@@ -236,27 +224,45 @@ const MyShowComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyShowComponent,
+          list: "/posts",
         },
         {
           name: "categories",
-          show: ShowPage,
+          list: "/categories",
+          show: "/categories/show/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyShowComponent />} />
+        </ReactRouter.Route>
+        <ReactRouter.Route
+          path="/categories"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route path="show/:id" element={<ShowPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -278,14 +284,13 @@ const MyComponent = () => {
 };
 ```
 
-###
+### hideText
 
 `hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live url=http://localhost:3000 previewHeight=200px
-setInitialRoutes(["/"]);
-
-import { Refine } from "@refinedev/core";
+setInitialRoutes(["/posts"]);
+import * as React from "react";
 
 // visible-block-start
 import { ShowButton } from "@refinedev/mantine";
@@ -295,24 +300,32 @@ const MyShowComponent = () => {
 };
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          list: MyShowComponent,
-          show: ShowPage,
+          list: "/posts",
+          show: "/posts/show/:id",
         },
       ]}
-    />
-  );
-};
-
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyShowComponent />} />
+          <ReactRouter.Route path="show/:id" element={<ShowPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/fields/boolean-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/boolean-field/index.md
index 6144395b78db..b96d3eb2929e 100644
--- a/documentation/docs/ui-integrations/mantine/components/fields/boolean-field/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/fields/boolean-field/index.md
@@ -3,33 +3,6 @@ title: Boolean
 swizzle: true
 ---
 
-```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
-```
-
 This field is used to display boolean values. It uses the [`<Tooltip>`](https://mantine.dev/core/tooltip) values from Mantine.
 
 :::simple Good to know
@@ -42,9 +15,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use `<BooleanField>` with the example in the post list.
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
 import { List, BooleanField } from "@refinedev/mantine";
@@ -145,14 +117,30 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return <Refine resources={[{ name: "posts", list: PostList }]} />;
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/fields/date-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/date-field/index.md
index 0d515b78ad50..e802b6ced352 100644
--- a/documentation/docs/ui-integrations/mantine/components/fields/date-field/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/fields/date-field/index.md
@@ -3,33 +3,6 @@ title: Date
 swizzle: true
 ---
 
-```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
-```
-
 This field is used to display dates. It uses [`Day.js`](https://day.js.org/docs/en/display/format) to display date format.
 
 :::simple Good to know
@@ -42,9 +15,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use `<DateField>` with the example in the post list.
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
 import { List, DateField } from "@refinedev/mantine";
@@ -137,14 +109,30 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return <Refine resources={[{ name: "posts", list: PostList }]} />;
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/fields/email-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/email-field/index.md
index b03a2b61765f..a90bacb3d364 100644
--- a/documentation/docs/ui-integrations/mantine/components/fields/email-field/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/fields/email-field/index.md
@@ -3,33 +3,6 @@ title: Email
 swizzle: true
 ---
 
-```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
-```
-
 This field is used to display email values. It uses the [`<Anchor>`](https://mantine.dev/core/anchor) component of Mantine.
 
 :::simple Good to know
@@ -44,7 +17,6 @@ Let's see how we can use `<EmailField>` with the example in the user list.
 
 ```tsx live url=http://localhost:3000/users previewHeight=420px hideCode
 setInitialRoutes(["/users"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
 import { List, EmailField } from "@refinedev/mantine";
@@ -143,14 +115,30 @@ interface IUser {
 }
 // visible-block-end
 
-const App = () => {
-  return <Refine resources={[{ name: "users", list: UserList }]} />;
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
+      resources={[
+        {
+          name: "users",
+          list: "/users",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/users"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<UserList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/fields/file-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/file-field/index.md
index 4eafeb61eab2..0a314cd13292 100644
--- a/documentation/docs/ui-integrations/mantine/components/fields/file-field/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/fields/file-field/index.md
@@ -3,33 +3,6 @@ title: File
 swizzle: true
 ---
 
-```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
-```
-
 This field is used to display files and it uses the [`<Anchor>`](https://mantine.dev/core/anchor) component of Mantine.
 
 :::simple Good to know
@@ -42,9 +15,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use `<FileField>` with the example in the list page.
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
 import { List, FileField } from "@refinedev/mantine";
@@ -137,14 +109,30 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return <Refine resources={[{ name: "posts", list: PostList }]} />;
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/fields/markdown-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/markdown-field/index.md
index 2c5dc1a990ba..8dd4f0a5864a 100644
--- a/documentation/docs/ui-integrations/mantine/components/fields/markdown-field/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/fields/markdown-field/index.md
@@ -3,33 +3,6 @@ title: Markdown
 swizzle: true
 ---
 
-```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
-```
-
 This field lets you display markdown content. It supports [GitHub Flavored Markdown](https://github.github.com/gfm/).
 
 :::simple Good to know
@@ -43,16 +16,14 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 Let's see how we can use `<MarkdownField>` in a show page.
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
-setInitialRoutes(["/samples", "/samples/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
+setInitialRoutes(["/posts", "/posts/show/123"]);
 
 // visible-block-start
 import { useShow } from "@refinedev/core";
 import { Show, MarkdownField } from "@refinedev/mantine";
 import { Title, Text } from "@mantine/core";
 
-const SampleShow: React.FC = () => {
+const PostShow: React.FC = () => {
   const { queryResult } = useShow<IPost>();
   const { data, isLoading } = queryResult;
   const record = data?.data;
@@ -75,28 +46,42 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
-          name: "samples",
-          show: SampleShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          name: "posts",
+          show: "/posts/show/:id",
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/fields/number-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/number-field/index.md
index 4cc3820cef68..1f2acceadc96 100644
--- a/documentation/docs/ui-integrations/mantine/components/fields/number-field/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/fields/number-field/index.md
@@ -3,33 +3,6 @@ title: Number
 swizzle: true
 ---
 
-```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
-```
-
 This field is used to display a number formatted according to the browser locale, right aligned. and uses [`Intl`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) to display date format.
 
 :::simple Good to know
@@ -44,9 +17,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 If Intl is not available, `<NumberField>` outputs numbers as is (and ignores the locales and options props).
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
 import { List, NumberField } from "@refinedev/mantine";
@@ -145,14 +117,30 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return <Refine resources={[{ name: "posts", list: PostList }]} />;
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/fields/tag-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/tag-field/index.md
index 469b8b2c42b0..d5f34dfa8f89 100644
--- a/documentation/docs/ui-integrations/mantine/components/fields/tag-field/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/fields/tag-field/index.md
@@ -3,33 +3,6 @@ title: Tag
 swizzle: true
 ---
 
-```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
-```
-
 This field lets you display a value in a tag. It uses Mantine [`<Chip>`](https://mantine.dev/core/chip) component.
 
 :::simple Good to know
@@ -42,9 +15,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use it in a basic list page:
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
 import { List, TagField } from "@refinedev/mantine";
@@ -137,14 +109,30 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return <Refine resources={[{ name: "posts", list: PostList }]} />;
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/fields/text-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/text-field/index.md
index 96547506de5b..9dd6e5b9734a 100644
--- a/documentation/docs/ui-integrations/mantine/components/fields/text-field/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/fields/text-field/index.md
@@ -3,33 +3,6 @@ title: Text
 swizzle: true
 ---
 
-```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
-```
-
 This field lets you show basic text. It uses Mantine [`<Text>`](https://mantine.dev/core/text/) component.
 
 :::simple Good to know
@@ -43,9 +16,7 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 Let's see how to use it in a basic show page:
 
 ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode
-setInitialRoutes(["/posts/show/123"]);
-import { Refine } from "@refinedev/core";
-import { ShowButton } from "@refinedev/mantine";
+setInitialRoutes(["/posts", "/posts/show/123"]);
 
 // visible-block-start
 import { useShow, useOne } from "@refinedev/core";
@@ -74,9 +45,11 @@ const PostShow: React.FC = () => {
       <Title mt="sm" order={5}>
         Category
       </Title>
+      {/* highlight-start */}
       <TextField
         value={categoryIsLoading ? "Loading..." : categoryData?.data?.title}
       />
+      {/* highlight-end */}
     </Show>
   );
 };
@@ -92,28 +65,42 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return (
-    <Refine
+render(
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
       resources={[
         {
           name: "posts",
-          show: PostShow,
-          list: () => (
-            <div>
-              <p>This page is empty.</p>
-              <ShowButton recordItemId="123">Show Item 123</ShowButton>
-            </div>
-          ),
+          show: "/posts/show/:id",
+          list: "/posts",
         },
       ]}
-    />
-  );
-};
-render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMantine.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMantine.ShowButton>
+              </div>
+            }
+          />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/mantine/components/fields/url-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/url-field/index.md
index 8b4a653d75fd..72e4a2043a12 100644
--- a/documentation/docs/ui-integrations/mantine/components/fields/url-field/index.md
+++ b/documentation/docs/ui-integrations/mantine/components/fields/url-field/index.md
@@ -3,33 +3,6 @@ title: Url
 swizzle: true
 ---
 
-```tsx live shared
-const { default: routerProvider } = LegacyRefineReactRouterV6;
-const { default: simpleRest } = RefineSimpleRest;
-setRefineProps({
-  legacyRouterProvider: routerProvider,
-  dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
-  notificationProvider: RefineMantine.useNotificationProvider,
-  Layout: RefineMantine.Layout,
-  Sider: () => null,
-});
-
-const Wrapper = ({ children }) => {
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <MantineNotifications.NotificationsProvider position="top-right">
-        {children}
-      </MantineNotifications.NotificationsProvider>
-    </MantineCore.MantineProvider>
-  );
-};
-```
-
 This field lets you embed a link. It uses Mantine [`<Anchor>`](https://mantine.dev/core/anchor) component. You can pass a URL in its `value` prop and you can show a text in its place by passing any `children`.
 
 :::simple Good to know
@@ -42,9 +15,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 
 Let's see how we can use `<UrlField>` with an example:
 
-```tsx live url=http://localhost:3000 previewHeight=420px hideCode
+```tsx live url=http://localhost:3000/posts previewHeight=420px hideCode
 setInitialRoutes(["/posts"]);
-import { Refine } from "@refinedev/core";
 
 // visible-block-start
 import { List, UrlField } from "@refinedev/mantine";
@@ -137,14 +109,30 @@ interface IPost {
 }
 // visible-block-end
 
-const App = () => {
-  return <Refine resources={[{ name: "posts", list: PostList }]} />;
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMantineDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMantineDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/basic-views/create/index.md b/documentation/docs/ui-integrations/material-ui/components/basic-views/create/index.md
index bab26cdc174c..49f9f6449385 100644
--- a/documentation/docs/ui-integrations/material-ui/components/basic-views/create/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/basic-views/create/index.md
@@ -8,12 +8,16 @@ swizzle: true
 We will show what `<Create>` does using properties with examples.
 
 ```tsx live hideCode url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
 import React from "react";
 import { Create, useAutocomplete } from "@refinedev/mui";
 import { Autocomplete, Box, TextField } from "@mui/material";
 import { useForm } from "@refinedev/react-hook-form";
 import { Controller } from "react-hook-form";
+import { Breadcrumb } from "@refinedev/mui";
+import { useState } from "react";
 
 const SampleCreate = () => {
   const {
@@ -104,16 +108,51 @@ const SampleCreate = () => {
           )}
         />
       </Box>
+      <Breadcrumb />
     </Create>
   );
 };
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/samples/create"]}
-    resources={[{ name: "samples", create: SampleCreate, list: SampleList }]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+        {
+          name: "categories",
+          list: "/categories",
+          create: "/categories/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<SampleCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -127,18 +166,19 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 ### title
 
-`title` allows the addition of titles inside the `<Create>` component. If you don't pass title props it uses "Create" prefix and singular resource name by default. For example, for the `/posts/create` resource, it would be "Create post".
+You can customize the title of the `<Create/>` component by using the `title` property.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
 import { Create } from "@refinedev/mui";
-import { Typography } from "@mui/material";
 
-const CreatePage: React.FC = () => {
+const PostCreate: React.FC = () => {
   return (
     <Create
       // highlight-next-line
-      title={<Typography variant="h5">Custom Title</Typography>}
+      title="Custom Title"
     >
       <span>Rest of your page here</span>
     </Create>
@@ -147,93 +187,127 @@ const CreatePage: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.CreateButton />
-          </div>
-        ),
-        create: CreatePage,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 ### resource
 
-The `<Create>` component reads the `resource` information from the route by default. If you want to use a custom resource for the `<Create>` component, you can use the `resource` prop.
+`resource` property determines which resource to use for the form. By default, it uses the resource from the route. If you want to use a different resource, you can use the `resource` property.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom
-// handle initial routes in new way
-setInitialRoutes(["/custom"]);
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
 
-import { Refine } from "@refinedev/core";
-import { Layout } from "@refinedev/mui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 // visible-block-start
 import { Create } from "@refinedev/mui";
 
-const CustomPage: React.FC = () => {
+const PostCreate: React.FC = () => {
   return (
-    /* highlight-next-line */
-    <Create resource="posts">
+    <Create
+      // highlight-next-line
+      resource="categories"
+    >
       <span>Rest of your page here</span>
     </Create>
   );
 };
 // visible-block-end
 
-const App: React.FC = () => {
-  return (
-    <Refine
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom",
-          },
-        ],
-        // highlight-end
-      }}
-      Layout={Layout}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+        {
+          name: "categories",
+          list: "/categories",
+          create: "/categories/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `<Refine/>` component.
-
-> For more information, refer to the [`identifier` section of the `<Refine/>` component documentation &#8594](/docs/core/refine-component#identifier)
-
 ### saveButtonProps
 
-The `<Create>` component has a default button that submits the form. If you want to customize this button you can use the `saveButtonProps` property like the code below:
+You can customize the save button by using the `saveButtonProps` property.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
 import { Create } from "@refinedev/mui";
 
 const PostCreate: React.FC = () => {
   return (
-    /* highlight-next-line */
-    <Create saveButtonProps={{ size: "small" }}>
+    <Create
+      // highlight-start
+      saveButtonProps={{
+        size: "large",
+        variant: "contained",
+        color: "secondary",
+      }}
+      // highlight-end
+    >
       <span>Rest of your page here</span>
     </Create>
   );
@@ -241,21 +315,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -263,44 +355,19 @@ render(
 
 ### goBack
 
-To customize the back button or to disable it, you can use the `goBack` property.
+`goBack` property determines whether to display a back button in the header. If you want to hide the back button, you can set `goBack` to `false`.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
-import { useNavigation } from "@refinedev/core";
-
-const RealBackButton = () => {
-  const { goBack } = useNavigation();
-
-  return <Button onClick={goBack}>BACK!</Button>;
-};
-
-const RealPostCreate: React.FC = () => {
-  return (
-    <Create
-      // highlight-next-line
-      goBack={<RealBackButton />}
-    >
-      <span>Rest of your page here</span>
-    </Create>
-  );
-};
+setInitialRoutes(["/posts/create"]);
 
 // visible-block-start
 import { Create } from "@refinedev/mui";
-import { Button } from "@mui/material";
-import { useBack } from "@refinedev/core";
-
-const BackButton = () => {
-  const goBack = useBack();
-
-  return <Button onClick={goBack}>BACK!</Button>;
-};
 
 const PostCreate: React.FC = () => {
   return (
     <Create
       // highlight-next-line
-      goBack={<BackButton />}
+      goBack={false}
     >
       <span>Rest of your page here</span>
     </Create>
@@ -309,34 +376,55 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.CreateButton />
-          </div>
-        ),
-        create: RealPostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 ### isLoading
 
-To toggle the loading state of the `<Create/>` component, you can use the `isLoading` property.
+To show a loading state, you can use the `isLoading` property.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
 import { Create } from "@refinedev/mui";
+import { useState } from "react";
 
 const PostCreate: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
+  const [loading, setLoading] = useState(true);
 
   return (
     <Create
@@ -350,31 +438,52 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-### breadcrumb <GlobalConfigBadge id="core/refine-component/#breadcrumb" />
+### breadcrumb
 
-To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/mui` package.
+To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default, it uses the `Breadcrumb` component from `@refinedev/mui` package.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
-import { Create, Breadcrumb } from "@refinedev/mui";
+import { Create } from "@refinedev/mui";
+import { Breadcrumb } from "@refinedev/mui";
 
 const PostCreate: React.FC = () => {
   return (
@@ -384,7 +493,7 @@ const PostCreate: React.FC = () => {
         <div
           style={{
             padding: "3px 6px",
-            border: "2px dashed cornflowerblue",
+            border: "2px dashed #888",
           }}
         >
           <Breadcrumb />
@@ -399,21 +508,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -424,12 +551,12 @@ render(
 If you want to customize the wrapper of the `<Create/>` component, you can use the `wrapperProps` property.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
 import { Create } from "@refinedev/mui";
 
 const PostCreate: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Create
       // highlight-start
@@ -447,21 +574,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -472,12 +617,12 @@ render(
 If you want to customize the header of the `<Create/>` component, you can use the `headerProps` property.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
 import { Create } from "@refinedev/mui";
 
 const PostCreate: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Create
       // highlight-start
@@ -495,21 +640,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -520,12 +683,12 @@ render(
 If you want to customize the content of the `<Create/>` component, you can use the `contentProps` property.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
 import { Create } from "@refinedev/mui";
 
 const PostCreate: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Create
       // highlight-start
@@ -543,21 +706,39 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -565,23 +746,32 @@ render(
 
 ### headerButtons
 
-You can customize the buttons at the header by using the `headerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
+You can customize the buttons at the header by using the `headerButtons` property. It accepts `false` or a function that returns `ReactNode`.
+
+By default, the `<Create/>` component has a `list` button in the header.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
 import { Create } from "@refinedev/mui";
 import { Button } from "@mui/material";
 
 const PostCreate: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Create
       // highlight-start
       headerButtons={({ defaultButtons }) => (
         <>
           {defaultButtons}
-          <Button type="primary">Custom Button</Button>
+          <Button
+            variant="contained"
+            onClick={() => {
+              console.log("Custom button clicked");
+            }}
+          >
+            Custom Button
+          </Button>
         </>
       )}
       // highlight-end
@@ -593,51 +783,64 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 ### headerButtonProps
 
-You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property.
+You can customize the list button at the header by using the `headerButtonProps` property.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
 import { Create } from "@refinedev/mui";
-import { Button } from "@mui/material";
 
 const PostCreate: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Create
       // highlight-start
       headerButtonProps={{
-        sx: {
-          backgroundColor: "lightsteelblue",
+        listButtonProps: {
+          size: "large",
+          variant: "contained",
+          color: "secondary",
         },
       }}
       // highlight-end
-      headerButtons={({ defaultButtons }) => (
-        <>
-          {defaultButtons}
-          <Button type="primary">Custom Button</Button>
-        </>
-      )}
     >
       <span>Rest of your page here</span>
     </Create>
@@ -646,47 +849,70 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Material UI &#8594](https://mui.com/material-ui/api/box/)
-
 ### footerButtons
 
-By default, the `<Create/>` component has a [`<SaveButton>`][save-button] at the header.
+You can customize the buttons at the footer by using the `footerButtons` property. It accepts `false` or a function that returns `ReactNode`.
 
-You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, saveButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
+By default, the `<Create/>` component has a `save` button at the footer.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
 import { Create } from "@refinedev/mui";
 import { Button } from "@mui/material";
 
 const PostCreate: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Create
       // highlight-start
       footerButtons={({ defaultButtons }) => (
         <>
           {defaultButtons}
-          <Button type="primary">Custom Button</Button>
+          <Button
+            variant="contained"
+            onClick={() => {
+              console.log("Custom button clicked");
+            }}
+          >
+            Custom Button
+          </Button>
         </>
       )}
       // highlight-end
@@ -698,49 +924,63 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `saveButtonProps` to utilize the default values of the [`<SaveButton>`][save-button] component.
+### footerButtonProps
+
+You can customize the save button at the footer by using the `footerButtonProps` property.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
-import { Create, SaveButton } from "@refinedev/mui";
-import { Button } from "@mui/material";
+import { Create } from "@refinedev/mui";
 
 const PostCreate: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Create
       // highlight-start
-      footerButtons={({ saveButtonProps }) => (
-        <>
-          <SaveButton
-            {...saveButtonProps}
-            type="primary"
-            sx={{ marginRight: 8 }}
-          >
-            Save
-          </SaveButton>
-          <Button type="primary">Custom Button</Button>
-        </>
-      )}
+      footerButtonProps={{
+        saveButtonProps: {
+          size: "large",
+          variant: "contained",
+          color: "secondary",
+        },
+      }}
       // highlight-end
     >
       <span>Rest of your page here</span>
@@ -750,51 +990,62 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-### footerButtonProps
+### footerProps
 
-You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property.
+If you want to customize the footer of the `<Create/>` component, you can use the `footerProps` property.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+setInitialRoutes(["/posts/create"]);
+
 // visible-block-start
 import { Create } from "@refinedev/mui";
-import { Button } from "@mui/material";
 
 const PostCreate: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Create
       // highlight-start
-      footerButtonProps={{
+      footerProps={{
         sx: {
           backgroundColor: "lightsteelblue",
         },
       }}
       // highlight-end
-      footerButtons={({ defaultButtons }) => (
-        <>
-          {defaultButtons}
-          <Button type="primary">Custom Button</Button>
-        </>
-      )}
     >
       <span>Rest of your page here</span>
     </Create>
@@ -803,26 +1054,42 @@ const PostCreate: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/create"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.CreateButton />
-          </div>
-        ),
-        create: PostCreate,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.CreateButton />
+              </div>
+            }
+          />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`CardActions` documentation from Material UI &#8594](https://mui.com/material-ui/api/card-actions/)
-
 ## API Reference
 
 ### Properties
@@ -892,18 +1159,6 @@ const SampleList = () => {
     </RefineMui.List>
   );
 };
-
-const Wrapper = ({ children }) => {
-  return (
-    <MuiMaterial.ThemeProvider theme={RefineMui.LightTheme}>
-      <MuiMaterial.CssBaseline />
-      <MuiMaterial.GlobalStyles
-        styles={{ html: { WebkitFontSmoothing: "auto" } }}
-      />
-      {children}
-    </MuiMaterial.ThemeProvider>
-  );
-};
 ```
 
 [save-button]: /docs/ui-integrations/material-ui/components/buttons/save-button
diff --git a/documentation/docs/ui-integrations/material-ui/components/basic-views/edit/index.md b/documentation/docs/ui-integrations/material-ui/components/basic-views/edit/index.md
index 65e6b74745ff..6991cea44d9e 100644
--- a/documentation/docs/ui-integrations/material-ui/components/basic-views/edit/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/basic-views/edit/index.md
@@ -8,6 +8,8 @@ swizzle: true
 We will show what `<Edit>` does using properties with examples.
 
 ```tsx live hideCode url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import React from "react";
 import { Edit, useAutocomplete } from "@refinedev/mui";
@@ -114,17 +116,46 @@ const SampleEdit = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/samples/edit/123"]}
-    resources={[{ name: "samples", edit: SampleEdit, list: SampleList }]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<SampleEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 :::simple Good to know
-
 You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-packages) to customize it.
-
 :::
 
 ## Properties
@@ -133,39 +164,59 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 `title` allows the addition of titles inside the `<Edit>` component. If you don't pass title props it uses "Edit" prefix and singular resource name by default. For example, for the `/posts/edit` resource, it will be "Edit post".
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import { Edit } from "@refinedev/mui";
 import { Typography } from "@mui/material";
 
-const EditPage: React.FC = () => {
+const PostEdit: React.FC = () => {
   return (
-    <Edit
-      // highlight-next-line
-      title={<Typography variant="h5">Custom Title</Typography>}
-    >
-      <span>Rest of your page here</span>
+    /* highlight-next-line */
+    <Edit title={<Typography variant="h5">Custom Title</Typography>}>
+      <p>Rest of your page here</p>
     </Edit>
   );
 };
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.EditButton recordItemId="123" />
-          </div>
-        ),
-        edit: EditPage,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -173,14 +224,9 @@ render(
 
 The `<Edit>` component reads the `resource` information from the route by default. If you want to use a custom resource for the `<Edit>` component, you can use the `resource` prop.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom
-// handle initial routes in new way
-setInitialRoutes(["/custom"]);
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-import { Refine } from "@refinedev/core";
-import { Layout } from "@refinedev/mui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 // visible-block-start
 import { Edit } from "@refinedev/mui";
 
@@ -188,38 +234,48 @@ const CustomPage: React.FC = () => {
   return (
     /* highlight-next-line */
     <Edit resource="posts" recordItemId={123}>
-      <span>Rest of your page here</span>
+      <p>Rest of your page here</p>
     </Edit>
   );
 };
 // visible-block-end
 
-const App: React.FC = () => {
-  return (
-    <Refine
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom",
-          },
-        ],
-        // highlight-end
-      }}
-      Layout={Layout}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
-// visible-block-end
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<CustomPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -229,9 +285,11 @@ If you have multiple resources with the same name, you can pass the `identifier`
 
 ### saveButtonProps
 
-The `<Edit>` component has a save button that submits the form by default. If you want to customize this button you can use the `saveButtonProps` property like the code below:
+The `<Edit>` component has a save button that submits the form by default. If you want to customize this button you can use the `saveButtonProps` property:
+
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
 // visible-block-start
 import { Edit } from "@refinedev/mui";
 
@@ -239,28 +297,48 @@ const PostEdit: React.FC = () => {
   return (
     /* highlight-next-line */
     <Edit saveButtonProps={{ size: "small" }}>
-      <span>Rest of your page here</span>
+      <p>Rest of your page here</p>
     </Edit>
   );
 };
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.EditButton recordItemId={123} />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -272,58 +350,8 @@ render(
 
 When clicked on, the delete button executes the [`useDelete`](/docs/data/hooks/use-delete) method provided by the [`dataProvider`](/docs/data/data-provider).
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
-const { default: simpleRest } = RefineSimpleRest;
-
-const dataProvider = simpleRest("https://api.fake-rest.refine.dev");
-
-const customDataProvider = {
-  ...dataProvider,
-  deleteOne: async ({ resource, id, variables }) => {
-    return {
-      data: {},
-    };
-  },
-};
-
-const authProvider = {
-  login: async () => {
-    return {
-      success: true,
-      redirectTo: "/",
-    };
-  },
-  register: async () => {
-    return {
-      success: true,
-    };
-  },
-  forgotPassword: async () => {
-    return {
-      success: true,
-    };
-  },
-  updatePassword: async () => {
-    return {
-      success: true,
-    };
-  },
-  logout: async () => {
-    return {
-      success: true,
-      redirectTo: "/",
-    };
-  },
-  check: async () => ({
-    authenticated: true,
-  }),
-  onError: async (error) => {
-    console.error(error);
-    return { error };
-  },
-  getPermissions: async () => ["admin"],
-  getIdentity: async () => null,
-};
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
 // visible-block-start
 import { Edit } from "@refinedev/mui";
@@ -346,43 +374,51 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    authProvider={authProvider}
-    dataProvider={customDataProvider}
-    initialRoutes={["/posts/edit/123"]}
-    Layout={RefineMui.Layout}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.EditButton recordItemId="123">
-              Edit Item 123
-            </RefineMui.EditButton>
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="/posts/edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`<DeleteButton>` &#8594](/docs/ui-integrations/material-ui/components/buttons/delete-button) and [`usePermission` &#8594](/docs/authentication/hooks/use-permissions) documentations
-
 ### recordItemId
 
 The `<Edit>` component reads the `id` information from the route by default. `recordItemId` is used when it cannot read from the URL, like when its used on a custom page, modal or drawer.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom
-// handle initial routes in new way
-setInitialRoutes(["/custom"]);
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
-import { Refine } from "@refinedev/core";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
-import { Layout } from "@refinedev/mui";
 // visible-block-start
 import { Edit } from "@refinedev/mui";
 
@@ -395,44 +431,57 @@ const CustomPage: React.FC = () => {
   );
 };
 // visible-block-end
-const App: React.FC = () => {
-  return (
-    <Refine
-      legacyRouterProvider={{
-        ...routerProvider,
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom",
-          },
-        ],
-      }}
-      Layout={Layout}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
 
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="/posts/edit/:id" element={<CustomPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-The `<Edit>` component needs the `id` information for the [`<RefreshButton>`](/docs/ui-integrations/material-ui/components/buttons/refresh-button) to work properly.
-
 ### mutationMode
 
 Determines which mode mutation will have while executing [`<DeleteButton>`](/docs/ui-integrations/material-ui/components/buttons/delete-button).
 
 ```tsx live hideCode url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import React from "react";
 import { Edit, useAutocomplete } from "@refinedev/mui";
 import { TextField, Autocomplete, Box } from "@mui/material";
-
 import { useForm } from "@refinedev/react-hook-form";
 import { Controller } from "react-hook-form";
 
@@ -540,15 +589,44 @@ const SampleEdit = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/samples/edit/123"]}
-    resources={[{ name: "samples", edit: SampleEdit, list: SampleList }]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<SampleEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [mutation mode documentation &#8594](/advanced-tutorials/mutation-mode.md)
-
 ### dataProviderName
 
 If not specified, Refine will use the default data provider. If you have multiple data providers and want to use a different one, you can use the `dataProviderName` property.
@@ -585,25 +663,8 @@ export const App: React.FC = () => {
 
 To customize the back button or to disable it, you can use the `goBack` property.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
-import { useNavigation } from "@refinedev/core";
-
-const RealBackButton = () => {
-  const { goBack } = useNavigation();
-
-  return <Button onClick={goBack}>BACK!</Button>;
-};
-
-const RealPostEdit: React.FC = () => {
-  return (
-    <Edit
-      // highlight-next-line
-      goBack={<RealBackButton />}
-    >
-      <span>Rest of your page here</span>
-    </Edit>
-  );
-};
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
 
 // visible-block-start
 import { Edit } from "@refinedev/mui";
@@ -629,21 +690,41 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.EditButton recordItemId={123} />
-          </div>
-        ),
-        edit: RealPostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -651,7 +732,9 @@ render(
 
 To toggle the loading state of the `<Edit/>` component, you can use the `isLoading` property.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import { Edit } from "@refinedev/mui";
 
@@ -670,29 +753,51 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.EditButton recordItemId={123} />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-### breadcrumb <GlobalConfigBadge id="core/refine-component/#breadcrumb" />
+### breadcrumb
 
 To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/mui` package.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import { Edit, Breadcrumb } from "@refinedev/mui";
 
@@ -719,37 +824,55 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.EditButton recordItemId={123} />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Breadcrumb` documentation &#8594](/docs/ui-integrations/material-ui/components/breadcrumb)
-
 ### wrapperProps
 
 If you want to customize the wrapper of the `<Edit/>` component, you can use the `wrapperProps` property.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import { Edit } from "@refinedev/mui";
 
 const PostEdit: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Edit
       // highlight-start
@@ -767,37 +890,55 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.EditButton recordItemId={123} />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Card` documentation from Material UI &#8594](https://mui.com/material-ui/api/card/)
-
 ### headerProps
 
 If you want to customize the header of the `<Edit/>` component, you can use the `headerProps` property.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import { Edit } from "@refinedev/mui";
 
 const PostEdit: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Edit
       // highlight-start
@@ -815,37 +956,55 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.EditButton recordItemId={123} />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`CardHeader` documentation from Material UI &#8594](https://mui.com/material-ui/api/card-header/)
-
 ### contentProps
 
 If you want to customize the content of the `<Edit/>` component, you can use the `contentProps` property.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import { Edit } from "@refinedev/mui";
 
 const PostEdit: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Edit
       // highlight-start
@@ -863,26 +1022,44 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.EditButton recordItemId={123} />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>{" "}
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`CardContent` documentation from Material UI &#8594](https://mui.com/material-ui/api/card-content/)
-
 ### headerButtons
 
 By default, the `<Edit/>` component has a [`<ListButton>`][list-button] and a [`<RefreshButton>`][refresh-button] at the header.
@@ -891,21 +1068,21 @@ You can customize the buttons at the header by using the `headerButtons` propert
 
 If "list" resource is not defined, the [`<ListButton>`][list-button] will not render and `listButtonProps` will be `undefined`.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import { Edit } from "@refinedev/mui";
 import { Button } from "@mui/material";
 
 const PostEdit: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Edit
       // highlight-start
       headerButtons={({ defaultButtons }) => (
         <>
           {defaultButtons}
-          <Button type="primary">Custom Button</Button>
+          <Button variant="contained">Custom Button</Button>
         </>
       )}
       // highlight-end
@@ -917,34 +1094,54 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.EditButton recordItemId={123} />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `refreshButtonProps` and `listButtonProps` to utilize the default values of the [`<ListButton>`][list-button] and [`<RefreshButton>`][refresh-button] components.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import { Edit, ListButton, RefreshButton } from "@refinedev/mui";
 import { Button } from "@mui/material";
 
 const PostEdit: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Edit
       // highlight-start
@@ -954,7 +1151,7 @@ const PostEdit: React.FC = () => {
           {listButtonProps && (
             <ListButton {...listButtonProps} meta={{ foo: "bar" }} />
           )}
-          <Button type="primary">Custom Button</Button>
+          <Button variant="contained">Custom Button</Button>
         </>
       )}
       // highlight-end
@@ -966,21 +1163,30 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.EditButton recordItemId={123} />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -988,14 +1194,14 @@ render(
 
 You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import { Edit } from "@refinedev/mui";
 import { Button } from "@mui/material";
 
 const PostEdit: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Edit
       // highlight-start
@@ -1019,21 +1225,41 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.EditButton recordItemId={123} />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1047,21 +1273,21 @@ You can customize the buttons at the footer by using the `footerButtons` propert
 
 If [`canDelete`](#candelete-and-deletebuttonprops) is `false`, the [`<DeleteButton>`][delete-button] will not render and `deleteButtonProps` will be `undefined`.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import { Edit } from "@refinedev/mui";
 import { Button } from "@mui/material";
 
 const PostEdit: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Edit
       // highlight-start
       footerButtons={({ defaultButtons }) => (
         <>
           {defaultButtons}
-          <Button type="primary">Custom Button</Button>
+          <Button variant="contained">Custom Button</Button>
         </>
       )}
       // highlight-end
@@ -1073,27 +1299,49 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.EditButton recordItemId={123} />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `saveButtonProps` and `deleteButtonProps` to utilize the default values of the [`<SaveButton>`][save-button] and [`<DeleteButton>`][delete-button] components.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import { Edit, SaveButton, DeleteButton } from "@refinedev/mui";
 import { Button } from "@mui/material";
@@ -1122,21 +1370,42 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.EditButton recordItemId={123} />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      initialRoutes={["/posts", "/posts/edit/123"]}
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1144,14 +1413,14 @@ render(
 
 You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property.
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/edit/123
+```tsx live disableScroll previewHeight=320px url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import { Edit } from "@refinedev/mui";
 import { Button } from "@mui/material";
 
 const PostEdit: React.FC = () => {
-  const [loading, setLoading] = React.useState(true);
-
   return (
     <Edit
       // highlight-start
@@ -1164,7 +1433,7 @@ const PostEdit: React.FC = () => {
       footerButtons={({ defaultButtons }) => (
         <>
           {defaultButtons}
-          <Button type="primary">Custom Button</Button>
+          <Button variant="contained">Custom Button</Button>
         </>
       )}
     >
@@ -1175,38 +1444,58 @@ const PostEdit: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.EditButton recordItemId={123} />
-          </div>
-        ),
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`CardActions` documentation from Material UI &#8594](https://mui.com/material-ui/api/card-actions/)
-
 ### autoSaveProps
 
 You can use the auto save feature of the `<Edit/>` component by using the `autoSaveProps` property.
 
 ```tsx live url=http://localhost:3000/posts/edit/123
+setInitialRoutes(["/posts/edit/123"]);
+
+// visible-block-start
 import React from "react";
 import { Edit, useAutocomplete } from "@refinedev/mui";
 import { TextField, Autocomplete, Box } from "@mui/material";
 import { useForm } from "@refinedev/react-hook-form";
 import { Controller } from "react-hook-form";
 
-// visible-block-start
 const SampleEdit = () => {
   const {
     saveButtonProps,
@@ -1322,10 +1611,41 @@ const SampleEdit = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/samples/edit/123"]}
-    resources={[{ name: "samples", edit: SampleEdit, list: SampleList }]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.EditButton recordItemId="123">
+                  Edit Item 123
+                </RefineMui.EditButton>
+              </div>
+            }
+          />
+          <ReactRouter.Route path="edit/:id" element={<SampleEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1348,98 +1668,6 @@ goBack-default="`<ArrowLeft />`"
 goBack-type="`ReactNode`"
 />
 
-```tsx live shared
-const SampleList = () => {
-  const { dataGridProps } = RefineMui.useDataGrid();
-
-  const { data: categoryData, isLoading: categoryIsLoading } =
-    RefineCore.useMany({
-      resource: "categories",
-      ids: dataGridProps?.rows?.map((item: any) => item?.category?.id) ?? [],
-      queryOptions: {
-        enabled: !!dataGridProps?.rows,
-      },
-    });
-
-  const columns = React.useMemo<GridColDef<any>[]>(
-    () => [
-      {
-        field: "id",
-        headerName: "Id",
-        type: "number",
-        minWidth: 50,
-      },
-      {
-        field: "title",
-        headerName: "Title",
-        minWidth: 200,
-      },
-      {
-        field: "category",
-        headerName: "Category",
-        valueGetter: ({ row }) => {
-          const value = row?.category?.id;
-
-          return value;
-        },
-        minWidth: 300,
-        display: "flex",
-        renderCell: function render({ value }) {
-          return categoryIsLoading ? (
-            <>Loading...</>
-          ) : (
-            categoryData?.data?.find((item) => item.id === value)?.title
-          );
-        },
-      },
-      {
-        field: "createdAt",
-        headerName: "Created At",
-        minWidth: 250,
-        display: "flex",
-        renderCell: function render({ value }) {
-          return <RefineMui.DateField value={value} />;
-        },
-      },
-      {
-        field: "actions",
-        headerName: "Actions",
-        display: "flex",
-        renderCell: function render({ row }) {
-          return (
-            <>
-              <RefineMui.EditButton hideText recordItemId={row.id} />
-            </>
-          );
-        },
-        align: "center",
-        headerAlign: "center",
-        minWidth: 80,
-      },
-    ],
-    [categoryData?.data],
-  );
-
-  return (
-    <RefineMui.List>
-      <MuiXDataGrid.DataGrid {...dataGridProps} columns={columns} />
-    </RefineMui.List>
-  );
-};
-
-const Wrapper = ({ children }) => {
-  return (
-    <MuiMaterial.ThemeProvider theme={RefineMui.LightTheme}>
-      <MuiMaterial.CssBaseline />
-      <MuiMaterial.GlobalStyles
-        styles={{ html: { WebkitFontSmoothing: "auto" } }}
-      />
-      {children}
-    </MuiMaterial.ThemeProvider>
-  );
-};
-```
-
 [list-button]: /docs/ui-integrations/material-ui/components/buttons/list-button
 [refresh-button]: /docs/ui-integrations/material-ui/components/buttons/refresh-button
 [save-button]: /docs/ui-integrations/material-ui/components/buttons/save-button
diff --git a/documentation/docs/ui-integrations/material-ui/components/basic-views/list/index.md b/documentation/docs/ui-integrations/material-ui/components/basic-views/list/index.md
index 66852db1fa22..83e159cfa3a9 100644
--- a/documentation/docs/ui-integrations/material-ui/components/basic-views/list/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/basic-views/list/index.md
@@ -8,11 +8,14 @@ swizzle: true
 We will show what `<List>` does using properties with examples.
 
 ```tsx live hideCode url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import React from "react";
 import { useMany } from "@refinedev/core";
 import { List, useDataGrid, DateField } from "@refinedev/mui";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import { Button } from "@mui/material";
 
 const SampleList = () => {
   const { dataGridProps } = useDataGrid();
@@ -48,7 +51,8 @@ const SampleList = () => {
         },
         minWidth: 300,
         display: "flex",
-        renderCell: function render({ value }) {
+        renderCell: function render({ row }) {
+          const value = row?.category?.id;
           return categoryIsLoading ? (
             <>Loading...</>
           ) : (
@@ -78,10 +82,29 @@ const SampleList = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/samples"]}
-    resources={[{ name: "samples", list: SampleList }]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<SampleList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -97,7 +120,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 `title` allows the addition of titles inside the `<List>` component. If you don't pass title props it uses the plural resource name by default. For example, for the `/posts` resource, it will be "Posts".
 
-```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts/create
+```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { List } from "@refinedev/mui";
 import { Typography } from "@mui/material";
@@ -115,15 +140,29 @@ const ListPage: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: ListPage,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<ListPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -132,13 +171,8 @@ render(
 The `<List>` component reads the `resource` information from the route by default. If you want to use a custom resource for the `<List>` component, you can use the `resource` prop.
 
 ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/custom
-// handle initial routes in new way
 setInitialRoutes(["/custom"]);
 
-import { Refine } from "@refinedev/core";
-import { Layout } from "@refinedev/mui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 // visible-block-start
 import { List } from "@refinedev/mui";
 
@@ -152,31 +186,28 @@ const CustomPage: React.FC = () => {
 };
 // visible-block-end
 
-const App: React.FC = () => {
-  return (
-    <Refine
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom",
-          },
-        ],
-        // highlight-end
-      }}
-      Layout={Layout}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/custom"
+          element={
+            <div style={{ padding: 16 }}>
+              <CustomPage />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -191,6 +222,7 @@ If you have multiple resources with the same name, you can pass the `identifier`
 Create button redirects to the create page of the resource according to the value it reads from the URL.
 
 ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
 const { default: simpleRest } = RefineSimpleRest;
 
 const dataProvider = simpleRest("https://api.fake-rest.refine.dev");
@@ -254,18 +286,31 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    authProvider={authProvider}
-    dataProvider={dataProvider}
-    initialRoutes={["/posts"]}
-    Layout={RefineMui.Layout}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      authProvider={authProvider}
+      dataProvider={dataProvider}
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -276,6 +321,8 @@ render(
 To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/mui` package.
 
 ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { List, Breadcrumb } from "@refinedev/mui";
 
@@ -290,7 +337,7 @@ const PostList: React.FC = () => {
             border: "2px dashed cornflowerblue",
           }}
         >
-          <Breadcrumb />
+          <Breadcrumb minItems={0} />
         </div>
       }
       // highlight-end
@@ -302,23 +349,30 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-    DashboardPage={() => {
-      return (
-        <div>
-          <p>This page is empty.</p>
-          <RefineMui.ListButton resource="posts" />
-        </div>
-      );
-    }}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -329,6 +383,8 @@ render(
 If you want to customize the wrapper of the `<List/>` component, you can use the `wrapperProps` property.
 
 ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { List } from "@refinedev/mui";
 
@@ -352,15 +408,29 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -371,6 +441,8 @@ render(
 If you want to customize the header of the `<List/>` component, you can use the `headerProps` property.
 
 ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { List } from "@refinedev/mui";
 
@@ -394,15 +466,29 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -413,6 +499,8 @@ render(
 If you want to customize the content of the `<List/>` component, you can use the `contentProps` property.
 
 ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { List } from "@refinedev/mui";
 
@@ -436,15 +524,29 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -459,6 +561,8 @@ You can customize the buttons at the header by using the `headerButtons` propert
 If "create" resource is not defined or [`canCreate`](#cancreate-and-createbuttonprops) is `false`, the [`<CreateButton>`][create-button] will not render and `createButtonProps` will be `undefined`.
 
 ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { List } from "@refinedev/mui";
 import { Button } from "@mui/material";
@@ -484,21 +588,37 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
 Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `createButtonProps` to utilize the default values of the [`<CreateButton>`][create-button] component.
 
 ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { List, CreateButton } from "@refinedev/mui";
 import { Button } from "@mui/material";
@@ -526,15 +646,29 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -543,6 +677,8 @@ render(
 You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property.
 
 ```tsx live disableScroll previewHeight=210px url=http://localhost:3000/posts
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { List } from "@refinedev/mui";
 import { Button } from "@mui/material";
@@ -573,15 +709,29 @@ const PostList: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts"]}
-    resources={[
-      {
-        name: "posts",
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -601,18 +751,4 @@ breadcrumb-default="[`<Breadcrumb/>`](/docs/ui-integrations/material-ui/componen
 createButtonProps-type="[`CreateButtonProps`](/docs/ui-integrations/material-ui/components/buttons/create-button/)"
 />
 
-```tsx live shared
-const Wrapper = ({ children }) => {
-  return (
-    <MuiMaterial.ThemeProvider theme={RefineMui.LightTheme}>
-      <MuiMaterial.CssBaseline />
-      <MuiMaterial.GlobalStyles
-        styles={{ html: { WebkitFontSmoothing: "auto" } }}
-      />
-      {children}
-    </MuiMaterial.ThemeProvider>
-  );
-};
-```
-
 [create-button]: /docs/ui-integrations/material-ui/components/buttons/create-button
diff --git a/documentation/docs/ui-integrations/material-ui/components/basic-views/show/index.md b/documentation/docs/ui-integrations/material-ui/components/basic-views/show/index.md
index 30cbc10d32be..1335c4704894 100644
--- a/documentation/docs/ui-integrations/material-ui/components/basic-views/show/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/basic-views/show/index.md
@@ -8,6 +8,8 @@ swizzle: true
 We will show what `<Show>` does using properties with examples.
 
 ```tsx live hideCode url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
+
 // visible-block-start
 import React from "react";
 import { useShow, useOne } from "@refinedev/core";
@@ -64,10 +66,41 @@ const SampleShow = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/samples/show/123"]}
-    resources={[{ name: "samples", show: SampleShow, list: SampleList }]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+          edit: "/posts/edit/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<SampleList />} />
+        </ReactRouter.Route>
+        <ReactRouter.Route
+          path="/posts/show/:id"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<SampleShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -83,7 +116,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 `title` allows the addition of titles inside the `<Show>` component. if you don't pass title props it uses the "Show" prefix and the singular resource name by default. For example, for the "posts" resource, it would be "Show post".
 
-```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/create
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
+
 // visible-block-start
 import { Show } from "@refinedev/mui";
 import { Typography } from "@mui/material";
@@ -101,21 +136,30 @@ const ShowPage: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts/show/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.ShowButton recordItemId="123" />
-          </div>
-        ),
-        show: ShowPage,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts/show/:id"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<ShowPage />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -124,13 +168,8 @@ render(
 The `<Show>` component reads the `resource` information from the route by default. If you want to use a custom resource for the `<Show>` component, you can use the `resource` prop.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom
-// handle initial routes in new way
 setInitialRoutes(["/custom"]);
 
-import { Refine } from "@refinedev/core";
-import { Layout } from "@refinedev/mui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 // visible-block-start
 import { Show } from "@refinedev/mui";
 
@@ -143,31 +182,30 @@ const CustomPage: React.FC = () => {
   );
 };
 // visible-block-end
-const App: React.FC = () => {
-  return (
-    <Refine
-      legacyRouterProvider={{
-        ...routerProvider,
-        // highlight-start
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom",
-          },
-        ],
-        // highlight-end
-      }}
-      Layout={Layout}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
 
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/custom"
+          element={
+            <div style={{ padding: 16 }}>
+              <CustomPage />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -182,6 +220,8 @@ If you have multiple resources with the same name, you can pass the `identifier`
 When clicked on, delete button executes the [`useDelete`](/docs/data/hooks/use-delete) method provided by the [`dataProvider`](/docs/data/data-provider) and the edit button redirects the user to the record edit page.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
+
 const { default: simpleRest } = RefineSimpleRest;
 
 const dataProvider = simpleRest("https://api.fake-rest.refine.dev");
@@ -257,24 +297,32 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    authProvider={authProvider}
-    dataProvider={customDataProvider}
-    initialRoutes={["/posts/show/123"]}
-    Layout={RefineMui.Layout}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.ShowButton recordItemId="123" />
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      authProvider={authProvider}
+      dataProvider={customDataProvider}
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts/show/:id"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -285,13 +333,8 @@ render(
 `<Show>` component reads the `id` information from the route by default. `recordItemId` is used when it cannot read from the URL (when used on a custom page, modal or drawer).
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/custom
-// handle initial routes in new way
 setInitialRoutes(["/custom"]);
 
-import { Refine } from "@refinedev/core";
-import { Layout } from "@refinedev/mui";
-import routerProvider from "@refinedev/react-router-v6/legacy";
-import dataProvider from "@refinedev/simple-rest";
 // visible-block-start
 import { Show } from "@refinedev/mui";
 
@@ -305,29 +348,29 @@ const CustomPage: React.FC = () => {
 };
 // visible-block-end
 
-const App: React.FC = () => {
-  return (
-    <Refine
-      legacyRouterProvider={{
-        ...routerProvider,
-        routes: [
-          {
-            element: <CustomPage />,
-            path: "/custom",
-          },
-        ],
-      }}
-      Layout={Layout}
-      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-      resources={[{ name: "posts" }]}
-    />
-  );
-};
-
 render(
-  <Wrapper>
-    <App />
-  </Wrapper>,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/custom"
+          element={
+            <div style={{ padding: 16 }}>
+              <CustomPage />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -370,24 +413,7 @@ export const App: React.FC = () => {
 To customize the back button or to disable it, you can use the `goBack` property.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
-import { useNavigation } from "@refinedev/core";
-
-const RealBackButton = () => {
-  const { goBack } = useNavigation();
-
-  return <Button onClick={goBack}>BACK!</Button>;
-};
-
-const RealPostShow: React.FC = () => {
-  return (
-    <Show
-      // highlight-next-line
-      goBack={<RealBackButton />}
-    >
-      <span>Rest of your page here</span>
-    </Show>
-  );
-};
+setInitialRoutes(["/posts/show/123"]);
 
 // visible-block-start
 import { Show } from "@refinedev/mui";
@@ -413,21 +439,35 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/show/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.ShowButton recordItemId={123} />
-          </div>
-        ),
-        show: RealPostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: () => (
+            <div>
+              <p>This page is empty.</p>
+              <ShowButton recordItemId="123" />
+            </div>
+          ),
+          show: PostShow,
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts/show/:id"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -705,27 +745,43 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/show/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.ShowButton recordItemId={123} />
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: () => (
+            <div>
+              <p>This page is empty.</p>
+              <ShowButton recordItemId="123" />
+            </div>
+          ),
+          show: PostShow,
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts/show/:id"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-Or, instead of using the `defaultButtons`, you can create your own buttons. If you want, you can use `createButtonProps` to utilize the default values of the [`<ListButton>`][list-button], [`<EditButton>`][edit-button], [`<DeleteButton>`][delete-button], and, [`<RefreshButton>`][refresh-button] components.
+Or, instead of using the `defaultButtons`, you can create your own buttons:
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
+
 // visible-block-start
 import {
   Show,
@@ -772,14 +828,13 @@ const PostShow: React.FC = () => {
 
 render(
   <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/show/123"]}
     resources={[
       {
         name: "posts",
         list: () => (
           <div>
             <p>This page is empty.</p>
-            <RefineMui.ShowButton recordItemId={123} />
+            <ShowButton recordItemId="123" />
           </div>
         ),
         show: PostShow,
@@ -794,6 +849,8 @@ render(
 You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
+
 // visible-block-start
 import { Show } from "@refinedev/mui";
 import { Button } from "@mui/material";
@@ -824,31 +881,45 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/show/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.ShowButton recordItemId={123} />
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: () => (
+            <div>
+              <p>This page is empty.</p>
+              <ShowButton recordItemId="123" />
+            </div>
+          ),
+          show: PostShow,
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts/show/:id"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-> For more information, refer to the [`Box` documentation from Material UI &#8594](https://mui.com/material-ui/api/box/)
-
 ### footerButtons
 
 You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons }) => React.ReactNode` which you can use to keep the existing buttons and add your own.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
+
 // visible-block-start
 import { Show } from "@refinedev/mui";
 import { Button } from "@mui/material";
@@ -874,21 +945,35 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/show/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.ShowButton recordItemId={123} />
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: () => (
+            <div>
+              <p>This page is empty.</p>
+              <ShowButton recordItemId="123" />
+            </div>
+          ),
+          show: PostShow,
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts/show/:id"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -897,6 +982,8 @@ render(
 You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property.
 
 ```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
+
 // visible-block-start
 import { Show } from "@refinedev/mui";
 import { Button } from "@mui/material";
@@ -927,21 +1014,35 @@ const PostShow: React.FC = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts", "/posts/show/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.ShowButton recordItemId={123} />
-          </div>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: () => (
+            <div>
+              <p>This page is empty.</p>
+              <ShowButton recordItemId="123" />
+            </div>
+          ),
+          show: PostShow,
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts/show/:id"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -1041,18 +1142,6 @@ const SampleList = () => {
     </RefineMui.List>
   );
 };
-
-const Wrapper = ({ children }) => {
-  return (
-    <MuiMaterial.ThemeProvider theme={RefineMui.LightTheme}>
-      <MuiMaterial.CssBaseline />
-      <MuiMaterial.GlobalStyles
-        styles={{ html: { WebkitFontSmoothing: "auto" } }}
-      />
-      {children}
-    </MuiMaterial.ThemeProvider>
-  );
-};
 ```
 
 [list-button]: /docs/ui-integrations/material-ui/components/buttons/list-button
diff --git a/documentation/docs/ui-integrations/material-ui/components/breadcrumb/index.md b/documentation/docs/ui-integrations/material-ui/components/breadcrumb/index.md
index cffcf08306fd..a2c7ca1670eb 100644
--- a/documentation/docs/ui-integrations/material-ui/components/breadcrumb/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/breadcrumb/index.md
@@ -5,7 +5,9 @@ swizzle: true
 
 A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy. `<Breadcrumb>` component built with Material UI [Breadcrumb][mui-breadcrumb] components using the [`useBreadcrumb`](/docs/core/hooks/utilities/use-breadcrumb) hook.
 
-```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px disableScroll
+```tsx live disableScroll previewHeight=280px url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
+
 // visible-block-start
 import { Show, Breadcrumb } from "@refinedev/mui";
 
@@ -13,7 +15,7 @@ const PostShow: React.FC = () => {
   return (
     <Show
       // highlight-next-line
-      breadcrumb={<Breadcrumb />}
+      breadcrumb={<Breadcrumb showHome={false} />}
     >
       <p>Content of your show page...</p>
     </Show>
@@ -29,41 +31,41 @@ const PostList = () => {
   );
 };
 
-const PostIcon = (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    className="icon icon-tabler icon-tabler-list"
-    width={18}
-    height={18}
-    viewBox="0 0 24 24"
-    strokeWidth="2"
-    stroke="currentColor"
-    fill="none"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    <line x1={9} y1={6} x2={20} y2={6}></line>
-    <line x1={9} y1={12} x2={20} y2={12}></line>
-    <line x1={9} y1={18} x2={20} y2={18}></line>
-    <line x1={5} y1={6} x2={5} y2="6.01"></line>
-    <line x1={5} y1={12} x2={5} y2="12.01"></line>
-    <line x1={5} y1={18} x2={5} y2="18.01"></line>
-  </svg>
-);
-
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts/show/123"]}
-    resources={[
-      {
-        name: "posts",
-        icon: PostIcon,
-        show: PostShow,
-        list: PostList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostList />} />
+        </ReactRouter.Route>
+        <ReactRouter.Route
+          path="/posts/show/:id"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/clone-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/clone-button/index.md
index cd06101f2eff..16b69bdacfe9 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/clone-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/clone-button/index.md
@@ -15,7 +15,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 ## Usage
 
-```tsx live url=http://localhost:3000/posts previewHeight=340px
+```tsx live previewHeight=340px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   useDataGrid,
@@ -58,18 +60,30 @@ interface IPost {
 }
 // visible-block-end
 
+const PostClone = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
+};
+
 render(
-  <RefineMuiDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostsList,
-        create: () => (
-          <RefineMui.Create>Rest of the page here...</RefineMui.Create>
-        ),
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          clone: "/posts/clone/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<PostsList />} />
+          <ReactRouter.Route path="clone/:id" element={<PostClone />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -79,33 +93,42 @@ render(
 
 `recordItemId` is used to append the record id to the end of the route path. By default, the `recordItemId` is inferred from the route params.
 
-```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+```tsx live  previewHeight=120px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { CloneButton } from "@refinedev/mui";
 
 const MyCloneComponent = () => {
-  return <CloneButton resource="posts" recordItemId="1" />;
+  return <CloneButton resource="posts" recordItemId="123" />;
 };
 
 // visible-block-end
 
-const ClonedPage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+const PostClone = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        create: ClonedPage,
-      },
-    ]}
-    DashboardPage={MyCloneComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          clone: "/posts/clone/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<MyCloneComponent />} />
+          <ReactRouter.Route path="clone/:id" element={<PostClone />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -115,37 +138,47 @@ Clicking the button will trigger the `clone` method of [`useNavigation`](/docs/r
 
 It is used to redirect the app to the `clone` action of the given resource name. By default, the app redirects to the inferred resource's `clone` action path.
 
-```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/categories"]);
 
 // visible-block-start
 import { CloneButton } from "@refinedev/mui";
 
 const MyCloneComponent = () => {
-  return <CloneButton resource="categories" recordItemId="2" />;
+  return <CloneButton resource="categories" recordItemId="123" />;
 };
 
 // visible-block-end
 
-const ClonedPage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+const CategoryClone = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-      },
-      {
-        name: "categories",
-        create: ClonedPage,
-      },
-    ]}
-    DashboardPage={MyCloneComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          clone: "/posts/clone/:id",
+        },
+        {
+          name: "categories",
+          list: "/categories",
+          clone: "/categories/clone/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/categories" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<MyCloneComponent />} />
+          <ReactRouter.Route path="clone/:id" element={<CategoryClone />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -172,38 +205,41 @@ const MyCloneComponent = () => {
 `hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { CloneButton } from "@refinedev/mui";
 
 const MyCloneComponent = () => {
-  return (
-    <CloneButton
-      // highlight-next-line
-      hideText={true}
-    />
-  );
+  return <CloneButton resourceNameOrRouteName="posts" hideText={true} />;
 };
 
 // visible-block-end
 
-const ClonedPage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+const PostClone = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MyCloneComponent,
-        create: ClonedPage,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          clone: "/posts/clone/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<MyCloneComponent />} />
+          <ReactRouter.Route path="clone/:id" element={<PostClone />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/create-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/create-button/index.md
index 812db2a03364..efc5b190a274 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/create-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/create-button/index.md
@@ -13,8 +13,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 ## Usage
 
-```tsx live url=http://localhost:3000/posts previewHeight=340px
-const { Create } = RefineMui;
+```tsx live previewHeight=340px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   useDataGrid,
@@ -46,16 +47,30 @@ interface IPost {
 }
 // visible-block-end
 
+const PostCreate = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
+};
+
 render(
-  <RefineMuiDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostsList,
-        create: () => <Create>Rest of the page here...</Create>,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<PostsList />} />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -65,8 +80,8 @@ render(
 
 It is used to redirect the app to the `create` action path of the given resource name. By default, the app redirects to the inferred resource's `create` action path.
 
-```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { CreateButton } from "@refinedev/mui";
@@ -82,25 +97,35 @@ const MyCreateComponent = () => {
 
 // visible-block-end
 
-const CreatePage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+const CategoriesCreate = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-      },
-      {
-        name: "categories",
-        create: CreatePage,
-      },
-    ]}
-    DashboardPage={MyCreateComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+        {
+          name: "categories",
+          create: "/categories/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<MyCreateComponent />} />
+
+        <ReactRouter.Route
+          path="/categories/create"
+          element={<CategoriesCreate />}
+        />
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -126,8 +151,8 @@ const MyComponent = () => {
 
 `hideText` is used to show or hide the text of the button. When `true`, only the button icon is visible.
 
-```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { CreateButton } from "@refinedev/mui";
@@ -143,22 +168,30 @@ const MyCreateComponent = () => {
 
 // visible-block-end
 
-const CreatePage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+const PostCreate = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MyCreateComponent,
-        create: CreatePage,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<MyCreateComponent />} />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/delete-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/delete-button/index.md
index 0277d338eafc..b9dfd047a48a 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/delete-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/delete-button/index.md
@@ -15,9 +15,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 ## Usage
 
-```tsx live url=http://localhost:3000/posts previewHeight=340px
-const { Create } = RefineMui;
-import dataProvider from "@refinedev/simple-rest";
+```tsx live previewHeight=340px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   useDataGrid,
@@ -60,29 +60,23 @@ interface IPost {
 }
 // visible-block-end
 
-const simpleRestDataProvider = dataProvider("https://api.fake-rest.refine.dev");
-
-const customDataProvider = {
-  ...simpleRestDataProvider,
-  deleteOne: async ({ resource, id, variables }) => {
-    await new Promise((resolve) => setTimeout(resolve, 500));
-
-    return {
-      message: "You have successfully deleted the record",
-    };
-  },
-};
-
 render(
-  <RefineMuiDemo
-    dataProvider={customDataProvider}
-    resources={[
-      {
-        name: "posts",
-        list: PostsList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<PostsList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -93,7 +87,7 @@ render(
 `recordItemId` allows us to manage which record will be deleted. By default, the `recordItemId` is inferred from the route params.
 
 ```tsx live disableScroll previewHeight=200px
-const { useRouterContext } = RefineCore;
+setInitialRoutes(["/posts"]);
 
 import dataProvider from "@refinedev/simple-rest";
 
@@ -101,35 +95,26 @@ import dataProvider from "@refinedev/simple-rest";
 import { DeleteButton } from "@refinedev/mui";
 
 const MyDeleteComponent = () => {
-  return <DeleteButton resource="posts" recordItemId="1" />;
+  return <DeleteButton resource="posts" recordItemId="123" />;
 };
 
 // visible-block-end
 
-const simpleRestDataProvider = dataProvider("https://api.fake-rest.refine.dev");
-
-const customDataProvider = {
-  ...simpleRestDataProvider,
-  deleteOne: async ({ resource, id, variables }) => {
-    await new Promise((resolve) => setTimeout(resolve, 500));
-
-    return {
-      message: "You have successfully deleted the record",
-    };
-  },
-};
-
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    dataProvider={customDataProvider}
-    resources={[
-      {
-        name: "posts",
-      },
-    ]}
-    DashboardPage={MyDeleteComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<MyDeleteComponent />} />
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -140,43 +125,38 @@ Clicking the button will trigger the [`useDelete`](/docs/data/hooks/use-delete)
 `resource` allows us to manage which resource's record is going to be deleted.
 
 ```tsx live disableScroll previewHeight=200px
-const { useRouterContext } = RefineCore;
-import dataProvider from "@refinedev/simple-rest";
+setInitialRoutes(["/categories"]);
 
 // visible-block-start
 import { DeleteButton } from "@refinedev/mui";
 
 const MyDeleteComponent = () => {
-  return <DeleteButton resource="categories" recordItemId="2" />;
+  return <DeleteButton resource="categories" recordItemId="123" />;
 };
-// visible-block-end
-const simpleRestDataProvider = dataProvider("https://api.fake-rest.refine.dev");
-
-const customDataProvider = {
-  ...simpleRestDataProvider,
-  deleteOne: async ({ resource, id, variables }) => {
-    await new Promise((resolve) => setTimeout(resolve, 500));
 
-    return {
-      message: "You have successfully deleted the record",
-    };
-  },
-};
+// visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    dataProvider={customDataProvider}
-    resources={[
-      {
-        name: "posts",
-      },
-      {
-        name: "categories",
-      },
-    ]}
-    DashboardPage={MyDeleteComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+        {
+          name: "categories",
+          list: "/categories",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/categories" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<MyDeleteComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -191,8 +171,7 @@ If you have multiple resources with the same name, you can pass the `identifier`
 For example, let's `console.log` after deletion:
 
 ```tsx live disableScroll previewHeight=200px
-const { useRouterContext } = RefineCore;
-import dataProvider from "@refinedev/simple-rest";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { DeleteButton } from "@refinedev/mui";
@@ -201,38 +180,33 @@ const MyDeleteComponent = () => {
   return (
     <DeleteButton
       resource="posts"
-      recordItemId="1"
+      recordItemId="123"
       onSuccess={(value) => {
         console.log(value);
       }}
     />
   );
 };
-// visible-block-end
-const simpleRestDataProvider = dataProvider("https://api.fake-rest.refine.dev");
-
-const customDataProvider = {
-  ...simpleRestDataProvider,
-  deleteOne: async ({ resource, id, variables }) => {
-    await new Promise((resolve) => setTimeout(resolve, 500));
 
-    return {
-      message: "You have successfully deleted the record",
-    };
-  },
-};
+// visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    dataProvider={customDataProvider}
-    resources={[
-      {
-        name: "posts",
-      },
-    ]}
-    DashboardPage={MyDeleteComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<MyDeleteComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -306,8 +280,7 @@ interface IPost {
 `hideText` is used to show or hide the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live disableScroll previewHeight=200px
-const { useRouterContext } = RefineCore;
-import dataProvider from "@refinedev/simple-rest";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { DeleteButton } from "@refinedev/mui";
@@ -320,31 +293,22 @@ const MyDeleteComponent = () => {
     />
   );
 };
-// visible-block-end
-const simpleRestDataProvider = dataProvider("https://api.fake-rest.refine.dev");
-
-const customDataProvider = {
-  ...simpleRestDataProvider,
-  deleteOne: async ({ resource, id, variables }) => {
-    await new Promise((resolve) => setTimeout(resolve, 500));
 
-    return {
-      message: "You have successfully deleted the record",
-    };
-  },
-};
+// visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    dataProvider={customDataProvider}
-    resources={[
-      {
-        name: "posts",
-        list: MyDeleteComponent,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <MyDeleteComponent />
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -371,8 +335,7 @@ Use `resource` prop instead.
 You can change the text that appears when you confirm a transaction with `confirmTitle` prop, as well as what 'ok' and 'cancel' buttons text look like with `confirmOkText` and `confirmCancelText` props.
 
 ```tsx live disableScroll previewHeight=200px
-const { useRouterContext } = RefineCore;
-import dataProvider from "@refinedev/simple-rest";
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { DeleteButton } from "@refinedev/mui";
@@ -380,40 +343,32 @@ import { DeleteButton } from "@refinedev/mui";
 const MyDeleteComponent = () => {
   return (
     <DeleteButton
-      // highlight-start
-      confirmTitle="Title"
-      confirmOkText="Ok Text"
-      confirmCancelText="Delete Text"
-      // highlight-end
+      resource="posts"
+      recordItemId="123"
+      confirmTitle="Are you sure?"
+      confirmOkText="Yes, delete"
+      confirmCancelText="No, cancel"
     />
   );
 };
-// visible-block-end
-
-const simpleRestDataProvider = dataProvider("https://api.fake-rest.refine.dev");
 
-const customDataProvider = {
-  ...simpleRestDataProvider,
-  deleteOne: async ({ resource, id, variables }) => {
-    await new Promise((resolve) => setTimeout(resolve, 500));
-
-    return {
-      message: "You have successfully deleted the record",
-    };
-  },
-};
+// visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    dataProvider={customDataProvider}
-    resources={[
-      {
-        name: "posts",
-        list: MyDeleteComponent,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<MyDeleteComponent />} />
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/edit-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/edit-button/index.md
index 95a98b9e3c21..9cbff2ba2b32 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/edit-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/edit-button/index.md
@@ -13,7 +13,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 ## Usage
 
-```tsx live url=http://localhost:3000/posts previewHeight=340px
+```tsx live previewHeight=340px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   useDataGrid,
@@ -56,16 +58,30 @@ interface IPost {
 }
 // visible-block-end
 
+const PostEdit = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
+};
+
 render(
-  <RefineMuiDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostsList,
-        edit: () => <RefineMui.Edit>Rest of the page here...</RefineMui.Edit>,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/:id/edit",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<PostsList />} />
+          <ReactRouter.Route path=":id/edit" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -76,7 +92,8 @@ render(
 `recordItemId` is used to append the record id to the end of the route path for the edit route. By default, the `recordItemId` is inferred from the route params.
 
 ```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { EditButton } from "@refinedev/mui";
 
@@ -85,29 +102,37 @@ const MyEditComponent = () => {
     <EditButton
       resource="posts"
       // highlight-next-line
-      recordItemId="1"
+      recordItemId="123"
     />
   );
 };
 
 // visible-block-end
 
-const EditPage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+const PostEdit = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        edit: EditPage,
-      },
-    ]}
-    DashboardPage={MyEditComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/:id/edit",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<MyEditComponent />} />
+          <ReactRouter.Route path=":id/edit" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -118,8 +143,6 @@ Clicking the button will trigger the `edit` method of [`useNavigation`](/docs/ro
 Redirection endpoint is defined by the `resource` property and its `edit` action path. By default, `<EditButton>` uses the inferred resource from the route.
 
 ```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
-
 // visible-block-start
 import { EditButton } from "@refinedev/mui";
 
@@ -128,32 +151,42 @@ const MyEditComponent = () => {
     <EditButton
       // highlight-next-line
       resource="categories"
-      recordItemId="2"
+      recordItemId="123"
     />
   );
 };
 
 // visible-block-end
 
-const EditPage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+const CategoryEdit = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-      },
-      {
-        name: "categories",
-        edit: EditPage,
-      },
-    ]}
-    DashboardPage={MyEditComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/:id/edit",
+        },
+        {
+          name: "categories",
+          list: "/categories",
+          edit: "/categories/:id/edit",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/categories" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<MyEditComponent />} />
+          <ReactRouter.Route path=":id/edit" element={<CategoryEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -180,7 +213,7 @@ const MyComponent = () => {
 It is used to show and not show the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { EditButton } from "@refinedev/mui";
@@ -188,6 +221,8 @@ import { EditButton } from "@refinedev/mui";
 const MyEditComponent = () => {
   return (
     <EditButton
+      resource="posts"
+      recordItemId="123"
       // highlight-next-line
       hideText={true}
     />
@@ -196,22 +231,30 @@ const MyEditComponent = () => {
 
 // visible-block-end
 
-const EditPage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+const PostEdit = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MyEditComponent,
-        edit: EditPage,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          edit: "/posts/:id/edit",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<MyEditComponent />} />
+          <ReactRouter.Route path=":id/edit" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/export-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/export-button/index.md
index 304aa438d1b1..4b2df65972a8 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/export-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/export-button/index.md
@@ -17,7 +17,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 Use it like any other Ant Design [`<Button>`][button]. You can use it with [useExport][useexport]:
 
-```tsx live url=http://localhost:3000/posts previewHeight=340px
+```tsx live previewHeight=340px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { useExport } from "@refinedev/core";
 import {
@@ -35,9 +37,7 @@ const columns: GridColDef[] = [
 
 const PostsList: React.FC = () => {
   const { dataGridProps } = useDataGrid<IPost>();
-
   const { triggerExport, isLoading: exportLoading } = useExport<IPost>();
-
   return (
     <List
       // highlight-start
@@ -58,14 +58,22 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostsList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<PostsList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -76,7 +84,7 @@ render(
 `hideText` is used to show or hide text of the button. When `true`, only the button icon is visible.
 
 ```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+setInitialRoutes(["/"]);
 
 // visible-block-start
 import { ExportButton } from "@refinedev/mui";
@@ -93,15 +101,20 @@ const MyExportComponent = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MyExportComponent,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route index element={<MyExportComponent />} />
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/import-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/import-button/index.md
index 209f2f553134..d9820078acef 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/import-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/import-button/index.md
@@ -17,9 +17,10 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 Use it like any other Material UI [`<LoadingButton>`][button]. You can use it with [useImport][useimport]:
 
-```tsx live url=http://localhost:3000/posts previewHeight=340px
+```tsx live previewHeight=340px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
-import { useImport } from "@refinedev/core";
 import {
   useDataGrid,
   List,
@@ -36,16 +37,9 @@ const columns: GridColDef[] = [
 const PostsList: React.FC = () => {
   const { dataGridProps } = useDataGrid<IPost>();
 
-  const { inputProps, isLoading } = useImport<IPost>();
-
   return (
-    <List
-      // highlight-start
-      headerButtons={
-        <ImportButton inputProps={inputProps} loading={isLoading} />
-      }
-      // highlight-end
-    >
+    <List>
+      <ImportButton />
       <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
@@ -58,14 +52,22 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostsList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<PostsList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -76,7 +78,7 @@ render(
 `hideText` is used to show and hide the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+setInitialRoutes(["/posts"]);
 
 // visible-block-start
 import { ImportButton } from "@refinedev/mui";
@@ -85,22 +87,30 @@ const MyImportComponent = () => {
   return (
     <ImportButton
       // highlight-next-line
-      hideText={true}
+      resource="posts"
     />
   );
 };
+
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MyImportComponent,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<MyImportComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/list-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/list-button/index.md
index 924fdd300c35..4b1dffd67ce9 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/list-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/list-button/index.md
@@ -11,60 +11,54 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 :::
 
+```tsx live shared
+const ListPage = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
+};
+```
+
 ## Usage
 
-```tsx live url=http://localhost:3000/posts previewHeight=340px
-// visible-block-start
-import { useShow } from "@refinedev/core";
-// highlight-next-line
-import { ListButton, Show } from "@refinedev/mui";
-import { Typography, Stack } from "@mui/material";
+```tsx live previewHeight=340px
+setInitialRoutes(["/posts/create"]);
 
-const PostShow: React.FC = () => {
-  const { queryResult } = useShow<IPost>();
-  const { data, isLoading } = queryResult;
-  const record = data?.data;
+// visible-block-start
+import { Create, ListButton } from "@refinedev/mui";
 
+const PostCreate: React.FC = () => {
   return (
-    <Show
-      isLoading={isLoading}
-      headerButtons={
-        // highlight-start
-        <ListButton />
-        // highlight-end
-      }
-    >
-      <Stack gap="10px">
-        <Typography fontWeight="bold">Id</Typography>
-        <Typography>{record?.id}</Typography>
-        <Typography fontWeight="bold">Title</Typography>
-        <Typography>{record?.title}</Typography>
-      </Stack>
-    </Show>
+    <Create headerButtons={<ListButton />}>Rest of the page here...</Create>
   );
 };
-
-interface IPost {
-  id: number;
-  title: string;
-}
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts/show/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <RefineMui.List>
-            <p>Rest of the page here...</p>
-          </RefineMui.List>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          create: "/posts/create",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<ListPage />} />
+          <ReactRouter.Route path="create" element={<PostCreate />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -77,34 +71,31 @@ The button text is defined automatically by Refine based on the `resource` defin
 Redirection endpoint is defined by the `resource`'s `list` action path. By default, `<ListButton>` uses the inferred resource from the route.
 
 ```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
-
 // visible-block-start
+setInitialRoutes(["/"]);
 import { ListButton } from "@refinedev/mui";
 
 const MyListComponent = () => {
-  return <ListButton resource="categories" recordItemId="2" />;
+  return <ListButton resource="categories" recordItemId="123" />;
 };
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-      },
-      {
-        name: "categories",
-        list: () => (
-          <RefineMui.List>
-            <p>Rest of the page here...</p>
-          </RefineMui.List>
-        ),
-      },
-    ]}
-    DashboardPage={MyListComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "categories",
+          list: "/categories",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/" element={<MyListComponent />} />
+        <ReactRouter.Route path="/categories" element={<ListPage />} />
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -131,38 +122,33 @@ const MyComponent = () => {
 `hideText` is used to show and hide the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
-
 // visible-block-start
 import { ListButton } from "@refinedev/mui";
+import { List } from "@refinedev/mui";
 
 const MyListComponent = () => {
-  return (
-    <ListButton
-      resourceNameOrRouteName="posts"
-      // highlight-next-line
-      hideText
-    />
-  );
+  return <ListButton resource="posts" hideText />;
 };
 
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <RefineMui.List>
-            <p>Rest of the page here...</p>
-          </RefineMui.List>
-        ),
-      },
-    ]}
-    DashboardPage={MyListComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      initialRoutes={["/"]}
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/" element={<MyListComponent />} />
+        <ReactRouter.Route path="/posts" element={<ListPage />} />
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/refresh-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/refresh-button/index.md
index eda8dce05725..cefedaf29914 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/refresh-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/refresh-button/index.md
@@ -13,7 +13,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 ## Usage
 
-```tsx live url=http://localhost:3000/posts previewHeight=340px
+```tsx live previewHeight=360px
+setInitialRoutes(["/posts/show/123"]);
+
 // visible-block-start
 import { useShow } from "@refinedev/core";
 // highlight-next-line
@@ -49,20 +51,31 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts/show/123"]}
-    resources={[
-      {
-        name: "posts",
-        list: () => (
-          <RefineMui.List>
-            <p>Rest of the page here...</p>
-          </RefineMui.List>
-        ),
-        show: PostShow,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/show/:id",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<div>List page here...</div>} />
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -70,10 +83,11 @@ render(
 
 ### recordItemId
 
-`recordItemId` allows us to manage which data is going to be refreshed. By default, `recordItemId` will be inferred from the route.
+`recordItemId` allows us to manage which data is going to be refreshed. By default, the `recordItemId` is inferred from the route params.
+
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
 
-```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
 // visible-block-start
 import { RefreshButton } from "@refinedev/mui";
 
@@ -82,33 +96,48 @@ const MyRefreshComponent = () => {
     <RefreshButton
       resource="posts"
       // highlight-next-line
-      recordItemId="1"
+      recordItemId="123"
     />
   );
 };
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-      },
-    ]}
-    DashboardPage={MyRefreshComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyRefreshComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-Clicking the button will trigger the [`useInvalidate`][use-invalidate] hook and then fetch the record whose resource is "post" and whose id is "1".
+Clicking the button will trigger the [`useInvalidate`][use-invalidate] hook and then fetch the record whose resource is "post" and whose id is "123".
 
 ### resource
 
-`resource` allows us to manage which resource is going to be refreshed. By default, `<RefreshButton>` uses the inferred resource from the route.
+`resource` allows us to manage which resource is going to be refreshed. By default, the `resource` is inferred from the route params.
+
+```tsx live previewHeight=120px
+setInitialRoutes(["/categories"]);
 
-```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
 // visible-block-start
 import { RefreshButton } from "@refinedev/mui";
 
@@ -118,22 +147,38 @@ const MyRefreshComponent = () => {
       // highlight-next-line
       resource="categories"
       // highlight-next-line
-      recordItemId="2"
+      recordItemId="123"
     />
   );
 };
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-      },
-    ]}
-    DashboardPage={MyRefreshComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+        {
+          name: "categories",
+          list: "/categories",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/categories"
+          element={
+            <div style={{ padding: 16 }}>
+              <MyRefreshComponent />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -147,33 +192,48 @@ If you have multiple resources with the same name, you can pass the `identifier`
 
 `hideText` is used to show and hide the text of the button. When `true`, only the button icon is visible.
 
-```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+```tsx live previewHeight=120px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import { RefreshButton } from "@refinedev/mui";
 
 const MyRefreshComponent = () => {
   return (
     <RefreshButton
+      resource="posts"
+      recordItemId="123"
       // highlight-next-line
       hideText
-      resourceNameOrRouteName="posts"
-      recordItemId="1"
     />
   );
 };
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-      },
-    ]}
-    DashboardPage={MyRefreshComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<MyRefreshComponent />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/save-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/save-button/index.md
index 48433e230e62..616ff56be3b3 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/save-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/save-button/index.md
@@ -16,6 +16,8 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 For example, let's add logic to the `<SaveButton>` component with the `saveButtonProps` returned by the [`useForm`](/docs/data/hooks/use-form) hook.
 
 ```tsx live url=http://localhost:3000/posts previewHeight=340px
+setInitialRoutes(["/posts/edit/123"]);
+
 // visible-block-start
 import { useForm } from "@refinedev/react-hook-form";
 import { Edit } from "@refinedev/mui";
@@ -60,15 +62,29 @@ interface ICategory {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/posts/edit/123"]}
-    resources={[
-      {
-        name: "posts",
-        edit: PostEdit,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          edit: PostEdit,
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route path="edit/:id" element={<PostEdit />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -81,7 +97,7 @@ The `useForm` hook exposes `saveButtonProps` to be passed to `<SaveButton>` comp
 `hideText` is used to show or hide the text of the button. When `true`, only the button icon is visible.
 
 ```tsx live disableScroll previewHeight=120px
-const { useRouterContext } = RefineCore;
+setInitialRoutes(["/"]);
 
 // visible-block-start
 import { SaveButton } from "@refinedev/mui";
@@ -97,16 +113,27 @@ const MySaveComponent = () => {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MySaveComponent,
-      },
-    ]}
-    DashboardPage={MySaveComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: MySaveComponent,
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/"
+          element={
+            <div style={{ padding: 16 }}>
+              <MySaveComponent />
+            </div>
+          }
+        />
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/show-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/show-button/index.md
index be34033efa42..83afed73089a 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/show-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/show-button/index.md
@@ -13,7 +13,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 ## Usage
 
-```tsx live url=http://localhost:3000/posts previewHeight=340px
+```tsx live previewHeight=340px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   useDataGrid,
@@ -56,16 +58,30 @@ interface IPost {
 }
 // visible-block-end
 
+const PostShow = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
+};
+
 render(
-  <RefineMuiDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostsList,
-        show: () => <RefineMui.Show>Rest of the page here...</RefineMui.Show>,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/:id/show",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<PostsList />} />
+          <ReactRouter.Route path=":id/show" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -85,34 +101,40 @@ const MyShowComponent = () => {
     <ShowButton
       resource="posts"
       // highlight-next-line
-      recordItemId="1"
+      recordItemId="123"
     />
   );
 };
 
 // visible-block-end
 
-const ShowPage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+const PostShow = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        show: ShowPage,
-      },
-    ]}
-    DashboardPage={MyShowComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/:id/show",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<MyShowComponent />} />
+          <ReactRouter.Route path=":id/show" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
-Clicking the button will trigger the `show` method of [`useNavigation`](/docs/routing/hooks/use-navigation) and then redirect the app to the `show` action path of the resource, filling the necessary parameters in the route.
-
 ### resource
 
 Redirection endpoint is defined by the `resource`'s `show` action path. By default, `<ShowButton>` uses the inferred resource from the route.
@@ -128,32 +150,42 @@ const MyShowComponent = () => {
     <ShowButton
       // highlight-next-line
       resource="categories"
-      recordItemId="2"
+      recordItemId="123"
     />
   );
 };
 
 // visible-block-end
 
-const ShowPage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+const CategoryShow = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-      },
-      {
-        name: "categories",
-        show: ShowPage,
-      },
-    ]}
-    DashboardPage={MyShowComponent}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/:id/show",
+        },
+        {
+          name: "categories",
+          list: "/categories",
+          show: "/categories/:id/show",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/categories" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<MyShowComponent />} />
+          <ReactRouter.Route path=":id/show" element={<CategoryShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
@@ -196,22 +228,30 @@ const MyShowComponent = () => {
 
 // visible-block-end
 
-const ShowPage = () => {
-  const params = useRouterContext().useParams();
-  return <div>{JSON.stringify(params)}</div>;
+const PostShow = () => {
+  const parsed = RefineCore.useParsed();
+  return <pre>{JSON.stringify(parsed, null, 2)}</pre>;
 };
 
 render(
-  <RefineMuiDemo
-    initialRoutes={["/"]}
-    resources={[
-      {
-        name: "posts",
-        list: MyShowComponent,
-        show: ShowPage,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+          show: "/posts/:id/show",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route path="/posts" element={<ReactRouter.Outlet />}>
+          <ReactRouter.Route index element={<MyShowComponent />} />
+          <ReactRouter.Route path=":id/show" element={<PostShow />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/boolean-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/boolean-field/index.md
index aa95b9dd8534..823c7cda0b9d 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/boolean-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/boolean-field/index.md
@@ -16,6 +16,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 Let's see how we can use `<BooleanField>` with the example in the post list:
 
 ```tsx live url=http://localhost:3000/posts previewHeight=340px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   useDataGrid,
@@ -71,14 +73,29 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostsList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostsList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/date-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/date-field/index.md
index eeadefbc6a13..80ad42efb8bc 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/date-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/date-field/index.md
@@ -16,6 +16,8 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 Let's see how we can use `<DateField>` with the example in the post list:
 
 ```tsx live url=http://localhost:3000/posts previewHeight=340px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   useDataGrid,
@@ -60,14 +62,29 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostsList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostsList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/email-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/email-field/index.md
index 5d53fad52c62..fd8184f6e8ed 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/email-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/email-field/index.md
@@ -15,7 +15,9 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 
 Let's see how we can use `<EmailField>` with the example in the user list:
 
-```tsx live url=http://localhost:3000/posts previewHeight=340px
+```tsx live url=http://localhost:3000/users previewHeight=340px
+setInitialRoutes(["/users"]);
+
 // visible-block-start
 import {
   useDataGrid,
@@ -62,14 +64,29 @@ interface IUser {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    resources={[
-      {
-        name: "users",
-        list: UsersList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "users",
+          list: "/users",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/users"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<UsersList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/file-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/file-field/index.md
index f4b24c20549c..d273863df8a7 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/file-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/file-field/index.md
@@ -16,6 +16,8 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 Let's see how we can use `<FileField>` with the example in the edit page:
 
 ```tsx live url=http://localhost:3000/posts previewHeight=340px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   useDataGrid,
@@ -66,14 +68,29 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostsList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostsList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/markdown-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/markdown-field/index.md
index 34fa6ffffc8a..645639b65f78 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/markdown-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/markdown-field/index.md
@@ -16,6 +16,8 @@ You can swizzle this component with the [**Refine CLI**](/docs/packages/list-of-
 Let's see how we can use `<MarkdownField>` in a show page.
 
 ```tsx live hideCode url=http://localhost:3000/posts/show/123
+setInitialRoutes(["/posts/show/123"]);
+
 // visible-block-start
 import React from "react";
 import { useShow } from "@refinedev/core";
@@ -27,7 +29,7 @@ import {
 } from "@refinedev/mui";
 import { Stack, Typography } from "@mui/material";
 
-const SampleShow = () => {
+const PostShow: React.FC = () => {
   const {
     queryResult: { data, isLoading },
   } = useShow();
@@ -51,26 +53,42 @@ const SampleShow = () => {
 };
 // visible-block-end
 
-Show.defaultProps = { breadcrumb: false };
-
 render(
-  <RefineMuiDemo
-    initialRoutes={["/samples", "/samples/show/123"]}
-    resources={[
-      {
-        name: "samples",
-        show: SampleShow,
-        list: () => (
-          <div>
-            <p>This page is empty.</p>
-            <RefineMui.ShowButton recordItemId="123">
-              Show Item 123
-            </RefineMui.ShowButton>
-          </div>
-        ),
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          show: "/posts/show/:id",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route path="show/:id" element={<PostShow />} />
+          <ReactRouter.Route
+            index
+            element={
+              <div>
+                <p>This page is empty.</p>
+                <RefineMui.ShowButton recordItemId="123">
+                  Show Item 123
+                </RefineMui.ShowButton>
+              </div>
+            }
+          />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/number-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/number-field/index.md
index 9061d9fbc83f..1934cf8c8214 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/number-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/number-field/index.md
@@ -20,6 +20,8 @@ See [Intl.NumberFormat documentation](https://developer.mozilla.org/en-US/docs/W
 If Intl is not available, `<NumberField>` outputs numbers as is (and ignores the locales and options props).
 
 ```tsx live url=http://localhost:3000/posts previewHeight=340px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   useDataGrid,
@@ -71,14 +73,29 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostsList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostsList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/tag-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/tag-field/index.md
index f3e950c3a282..11cf02f16262 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/tag-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/tag-field/index.md
@@ -16,6 +16,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 Let's see how we can use it in a basic list page:
 
 ```tsx live url=http://localhost:3000/posts previewHeight=340px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   useDataGrid,
@@ -60,14 +62,29 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostsList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostsList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/text-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/text-field/index.md
index 61a1bed922c2..01a57e7a0c7c 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/text-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/text-field/index.md
@@ -16,6 +16,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 Let's see how to use it in a basic list page:
 
 ```tsx live url=http://localhost:3000/posts previewHeight=340px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   useDataGrid,
@@ -58,14 +60,29 @@ interface IPost {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostsList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostsList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/url-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/url-field/index.md
index 0d1fd9c2221a..8f53eb659da1 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/url-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/url-field/index.md
@@ -16,6 +16,8 @@ You can swizzle this component to customize it with the [**Refine CLI**](/docs/p
 Let's see how we can use `<UrlField>` with an example:
 
 ```tsx live url=http://localhost:3000/posts previewHeight=340px
+setInitialRoutes(["/posts"]);
+
 // visible-block-start
 import {
   useDataGrid,
@@ -64,14 +66,29 @@ interface IImage {
 // visible-block-end
 
 render(
-  <RefineMuiDemo
-    resources={[
-      {
-        name: "posts",
-        list: PostsList,
-      },
-    ]}
-  />,
+  <ReactRouter.BrowserRouter>
+    <RefineMuiDemo
+      resources={[
+        {
+          name: "posts",
+          list: "/posts",
+        },
+      ]}
+    >
+      <ReactRouter.Routes>
+        <ReactRouter.Route
+          path="/posts"
+          element={
+            <div style={{ padding: 16 }}>
+              <ReactRouter.Outlet />
+            </div>
+          }
+        >
+          <ReactRouter.Route index element={<PostsList />} />
+        </ReactRouter.Route>
+      </ReactRouter.Routes>
+    </RefineMuiDemo>
+  </ReactRouter.BrowserRouter>,
 );
 ```
 
diff --git a/documentation/src/assets/integration-icons/chakra-v3.tsx b/documentation/src/assets/integration-icons/chakra-v3.tsx
new file mode 100644
index 000000000000..94edf21ddba2
--- /dev/null
+++ b/documentation/src/assets/integration-icons/chakra-v3.tsx
@@ -0,0 +1,44 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+
+const SvgChakrav3 = ({
+  withBrandColor = true,
+  ...props
+}: SVGProps<SVGSVGElement> & { withBrandColor?: boolean }) => (
+  <svg width="65" height="65" viewBox="0 0 36 36" {...props}>
+    <path
+      d="M34.5655 17.9244L28.0585 16.7206L27.3139 18.0099L25.4813 21.1828L20.7231 29.4212C20.5147 29.7819 19.9653 29.6335 19.9653 29.2166V22.2928V21.5412C19.9653 21.1509 19.6901 20.8153 19.3087 20.7404L11.8954 19.2841L5.25929 18.0708C5.26937 18.4155 5.35079 18.7586 5.50582 19.0761L10.9828 28.5803C11.7469 29.9063 13.1577 30.7221 14.6835 30.7201L25.1868 30.7061C26.7118 30.7041 28.1198 29.8854 28.8808 28.5585L34.2409 19.2113C34.4694 18.8138 34.5768 18.3679 34.5655 17.9244Z"
+      fill="url(#paint0_linear_:Rcpjajsrkq:)"
+    />
+    <path
+      d="M12.642 17.9885L14.4774 14.8034L19.2073 6.59529C19.4154 6.2342 19.9653 6.38242 19.9653 6.79963V14.471C19.9653 14.8617 20.2411 15.1976 20.6231 15.272L28.0585 16.7207L34.5655 17.9245C34.5572 17.5987 34.4841 17.2747 34.3464 16.9717C34.314 16.9004 34.2792 16.8299 34.2397 16.7613L28.8728 7.42387C28.1102 6.09724 26.7007 5.27994 25.1753 5.27994H14.6361C13.1082 5.27994 11.6968 6.09981 10.9352 7.42979L5.58357 16.7749C5.57125 16.7963 5.56056 16.8184 5.54894 16.8401C5.34348 17.2237 5.24692 17.6483 5.25929 18.0708L11.8954 19.2841L12.642 17.9885Z"
+      fill="url(#paint1_linear_:Rcpjajsrkq:)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_:Rcpjajsrkq:"
+        x1="33.9534"
+        y1="23.645"
+        x2="5.78627"
+        y2="23.9059"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#3585A3" />
+        <stop offset="1" stopColor="#00DEAE" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_:Rcpjajsrkq:"
+        x1="6.67767"
+        y1="12.4545"
+        x2="31.7007"
+        y2="11.8021"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#3585A3" />
+        <stop offset="1" stopColor="#00DEAE" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export default SvgChakrav3;
diff --git a/documentation/src/assets/integration-icons/index.ts b/documentation/src/assets/integration-icons/index.ts
index 67226bf9345c..2f32ef0cdacd 100644
--- a/documentation/src/assets/integration-icons/index.ts
+++ b/documentation/src/assets/integration-icons/index.ts
@@ -3,6 +3,7 @@ export { default as Airtable } from "./airtable";
 export { default as Antd } from "./antd";
 export { default as Appwrite } from "./appwrite";
 export { default as Chakra } from "./chakra";
+export { default as Chakrav3 } from "./chakra-v3";
 export { default as Directus } from "./directus";
 export { default as Dp } from "./dp";
 export { default as Elide } from "./elide";
diff --git a/documentation/src/assets/integrations.ts b/documentation/src/assets/integrations.ts
index b2d00e49b4c1..41119b6852ce 100644
--- a/documentation/src/assets/integrations.ts
+++ b/documentation/src/assets/integrations.ts
@@ -35,6 +35,7 @@ import {
   PocketBase,
   ShadCnUI,
   PostgREST,
+  Chakrav3,
 } from "./integration-icons";
 
 export const integrations: IntegrationsType = {
@@ -151,6 +152,22 @@ export const integrations: IntegrationsType = {
       status: "stable",
     },
   ],
+  "community-ui-framework-packages": [
+    {
+      name: "Chakra UI v3",
+      icon: Chakrav3,
+      description:
+        " <strong>Chakra UI v3</strong> Framework support. 20+ framework-specific components incl. Layout, Feedback, and CRUD components.",
+      url: "https://www.npmjs.com/package/@ffimnsr/refine-chakra-ui-v3",
+      status: "stable",
+      contributors: [
+        {
+          name: "ffimnsr",
+          url: "https://github.com/ffimnsr",
+        },
+      ],
+    },
+  ],
   "community-data-provider-packages": [
     {
       name: "Directus Data Provider",
diff --git a/documentation/src/components/sandpack/index.tsx b/documentation/src/components/sandpack/index.tsx
index 8f2a8497d4cd..1d9225e160b5 100644
--- a/documentation/src/components/sandpack/index.tsx
+++ b/documentation/src/components/sandpack/index.tsx
@@ -388,16 +388,17 @@ const SandpackBase = ({
         <div className={clsx(showConsole ? "block" : "hidden", "h-[200px]")} />
       </div>
       <section className="hidden max-w-0 max-h-0">
+        <h6>Code Example</h6>
         <p>{`Dependencies: ${Object.keys(dependencies ?? {}).map(
           (k) => `${k}@${dependencies[k]}`,
         )}`}</p>
-        <h3>{"Code Files"}</h3>
+        <div>{"Code Files"}</div>
         {Object.keys(files ?? {}).map((f) => (
           <div key={f}>
             <div>{`File: ${f}`}</div>
-            <div>
+            <pre>
               {`Content: ${"code" in files[f] ? files[f].code : files[f]}`}
-            </div>
+            </pre>
           </div>
         ))}
       </section>
diff --git a/documentation/src/pages/integrations/index.tsx b/documentation/src/pages/integrations/index.tsx
index 7c5771b565db..55f97e9fe396 100644
--- a/documentation/src/pages/integrations/index.tsx
+++ b/documentation/src/pages/integrations/index.tsx
@@ -47,6 +47,7 @@ const Integrations: React.FC = () => {
   const {
     communityPackages,
     dataProviderPackages,
+    communityUiFrameworkPackages,
     communityDataProviderPackages,
     frameworks,
     integrations,
@@ -56,6 +57,8 @@ const Integrations: React.FC = () => {
     return {
       uiPackages: integrationsData["ui-framework-packages"],
       dataProviderPackages: integrationsData["data-provider-packages"],
+      communityUiFrameworkPackages:
+        integrationsData["community-ui-framework-packages"],
       communityDataProviderPackages:
         integrationsData["community-data-provider-packages"],
       frameworks: integrationsData["frameworks"],
@@ -103,6 +106,9 @@ const Integrations: React.FC = () => {
       <Title className="mt-20">Data Provider Packages</Title>
       <List data={dataProviderPackages} />
 
+      <Title className="mt-20">UI Framework Packages by the Community ❤️</Title>
+      <List data={communityUiFrameworkPackages} />
+
       <Title className="mt-20">Data Provider Packages by the Community ❤️</Title>
       <List data={communityDataProviderPackages} />
 
diff --git a/documentation/src/refine-theme/common-admonition.tsx b/documentation/src/refine-theme/common-admonition.tsx
index bd9849b114e8..8bb1c51bfa18 100644
--- a/documentation/src/refine-theme/common-admonition.tsx
+++ b/documentation/src/refine-theme/common-admonition.tsx
@@ -115,7 +115,7 @@ export const Admonition = ({ type, title, children }: Props) => {
         )}
       >
         {(title || titles[type]) && (
-          <div
+          <h6
             className={clsx(
               "flex",
               "items-center",
@@ -128,7 +128,7 @@ export const Admonition = ({ type, title, children }: Props) => {
           >
             <Icon />
             <span className="uppercase">{title ?? titles[type] ?? ""}</span>
-          </div>
+          </h6>
         )}
         <div className={clsx("text-gray-0", "text-base", "last:mb-0")}>
           {children}
diff --git a/documentation/src/refine-theme/common-tab-item.tsx b/documentation/src/refine-theme/common-tab-item.tsx
index cf62eaf4fed3..b5dae2b7bcf4 100644
--- a/documentation/src/refine-theme/common-tab-item.tsx
+++ b/documentation/src/refine-theme/common-tab-item.tsx
@@ -1,9 +1,19 @@
 import React from "react";
 import clsx from "clsx";
 
-export default function CommonTabItem({ children, hidden, className }) {
+export default function CommonTabItem({
+  children,
+  hidden,
+  className,
+  label,
+  value,
+  ...props
+}) {
+  const tabHeading = label || value;
+
   return (
     <div role="tabpanel" className={clsx(className)} {...{ hidden }}>
+      <h5 className="hidden max-w-0 max-h-0">{tabHeading}</h5>
       {children}
     </div>
   );
diff --git a/documentation/tutorial/ui-libraries/intro/material-ui/react-router/sandpack.tsx b/documentation/tutorial/ui-libraries/intro/material-ui/react-router/sandpack.tsx
index 058f1ea9f913..022697e6b81e 100644
--- a/documentation/tutorial/ui-libraries/intro/material-ui/react-router/sandpack.tsx
+++ b/documentation/tutorial/ui-libraries/intro/material-ui/react-router/sandpack.tsx
@@ -240,6 +240,7 @@ export const dependencies = {
   "@mui/material": "^6.1.7",
   "@mui/x-data-grid": "^7.22.2",
   "@refinedev/mui": "5.0.0",
+  "@mui/system": "latest",
   "@refinedev/react-hook-form": "latest",
   "react-hook-form": "latest",
 };
diff --git a/packages/live-previews/next.config.js b/packages/live-previews/next.config.js
index 89e638ee5664..c3ad492a3370 100644
--- a/packages/live-previews/next.config.js
+++ b/packages/live-previews/next.config.js
@@ -14,7 +14,7 @@ const nextConfig = {
     return config;
   },
   output: "standalone",
-  transpilePackages: ["@uiw/react-md-editor"],
+  transpilePackages: ["@uiw/react-md-editor", "@ant-design/icons"],
 };
 
 module.exports = nextConfig;
diff --git a/packages/live-previews/package.json b/packages/live-previews/package.json
index a87673a59393..5d0820f871f7 100644
--- a/packages/live-previews/package.json
+++ b/packages/live-previews/package.json
@@ -40,7 +40,7 @@
     "@refinedev/nestjs-query": "^1.3.4",
     "@refinedev/nestjsx-crud": "^5.0.11",
     "@refinedev/react-hook-form": "^4.9.2",
-    "@refinedev/react-router-v6": "^4.6.1",
+    "@refinedev/react-router": "^1.0.0",
     "@refinedev/react-table": "^5.6.14",
     "@refinedev/simple-rest": "^5.0.9",
     "@refinedev/strapi-graphql": "^6.0.4",
@@ -67,7 +67,7 @@
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.43.5",
     "react-i18next": "^11.8.11",
-    "react-router-dom": "^6.8.1",
+    "react-router": "^7.0.2",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
diff --git a/packages/live-previews/src/scope/antd.tsx b/packages/live-previews/src/scope/antd.tsx
index 50e8ada88ca4..ff3fffc57032 100644
--- a/packages/live-previews/src/scope/antd.tsx
+++ b/packages/live-previews/src/scope/antd.tsx
@@ -20,36 +20,6 @@ import Icon, {
 
 const SIMPLE_REST_API_URL = "https://api.fake-rest.refine.dev";
 
-const RefineAntdDemo: React.FC<
-  Partial<RefineProps> & {
-    initialRoutes?: string[];
-  }
-> = ({ initialRoutes, ...rest }) => {
-  if (initialRoutes) {
-    RefineCommonScope.setInitialRoutes(initialRoutes);
-  }
-
-  return (
-    <RefineCommonScope.RefineCore.Refine
-      legacyRouterProvider={RefineCommonScope.LegacyRefineReactRouterV6.default}
-      dataProvider={RefineCommonScope.RefineSimpleRest.default(
-        SIMPLE_REST_API_URL,
-      )}
-      notificationProvider={RefineAntd.notificationProvider}
-      Layout={RefineAntd.Layout}
-      Sider={() => null}
-      catchAll={<RefineAntd.ErrorComponent />}
-      options={{
-        disableTelemetry: true,
-        reactQuery: {
-          devtoolConfig: false,
-        },
-      }}
-      {...rest}
-    />
-  );
-};
-
 const ThemedTitleV2 = ({
   collapsed,
   wrapperStyles,
@@ -164,6 +134,35 @@ const ConfigProvider = ({
   );
 };
 
+const RefineAntdDemo: React.FC<
+  Partial<RefineProps> & {
+    initialRoutes?: string[];
+  }
+> = ({ initialRoutes, ...rest }) => {
+  if (initialRoutes) {
+    RefineCommonScope.setInitialRoutes(initialRoutes);
+  }
+
+  return (
+    <ConfigProvider>
+      <RefineCommonScope.RefineCore.Refine
+        routerProvider={RefineCommonScope.RefineReactRouter.default}
+        dataProvider={RefineCommonScope.RefineSimpleRest.default(
+          SIMPLE_REST_API_URL,
+        )}
+        notificationProvider={RefineAntd.useNotificationProvider}
+        options={{
+          disableTelemetry: true,
+          reactQuery: {
+            devtoolConfig: false,
+          },
+        }}
+        {...rest}
+      />
+    </ConfigProvider>
+  );
+};
+
 const AntdScope = {
   RefineAntdDemo,
   RefineAntd: {
diff --git a/packages/live-previews/src/scope/chakra.tsx b/packages/live-previews/src/scope/chakra.tsx
index a1339d68cbb8..2f86e56d22fe 100644
--- a/packages/live-previews/src/scope/chakra.tsx
+++ b/packages/live-previews/src/scope/chakra.tsx
@@ -10,6 +10,52 @@ import axios from "axios";
 
 const SIMPLE_REST_API_URL = "https://api.fake-rest.refine.dev";
 
+const ChakraProvider = ({
+  children,
+  theme,
+}: {
+  children?: React.ReactNode;
+  theme: any;
+}) => {
+  const [themeFromWindow, setThemeFromWindow] = React.useState<
+    undefined | string
+  >();
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const messageListener = (event: MessageEvent) => {
+        if (event.data.type === "UPDATE_DYNAMIC_VALUES") {
+          if (event.data.payload.theme) {
+            setThemeFromWindow(event.data.payload.theme);
+          }
+        }
+      };
+
+      window.addEventListener("message", messageListener);
+
+      return () => {
+        window.removeEventListener("message", messageListener);
+      };
+    }
+
+    return () => undefined;
+  }, []);
+
+  return (
+    <ChakraUI.ChakraProvider
+      theme={
+        themeFromWindow && themeFromWindow in RefineChakra.RefineThemes
+          ? RefineChakra.RefineThemes[
+              themeFromWindow as keyof typeof RefineChakra.RefineThemes
+            ]
+          : theme
+      }
+    >
+      <div style={{ padding: 16 }}>{children}</div>
+    </ChakraUI.ChakraProvider>
+  );
+};
+
 const RefineChakraDemo: React.FC<
   Partial<RefineProps> & {
     initialRoutes?: string[];
@@ -20,18 +66,13 @@ const RefineChakraDemo: React.FC<
   }
 
   return (
-    <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
+    <ChakraProvider theme={RefineChakra.refineTheme}>
       <RefineCommonScope.RefineCore.Refine
-        legacyRouterProvider={
-          RefineCommonScope.LegacyRefineReactRouterV6.default
-        }
+        routerProvider={RefineCommonScope.RefineReactRouter.default}
         dataProvider={RefineCommonScope.RefineSimpleRest.default(
           SIMPLE_REST_API_URL,
         )}
         notificationProvider={RefineChakra.notificationProvider}
-        Layout={RefineChakra.Layout}
-        Sider={() => null}
-        catchAll={<RefineChakra.ErrorComponent />}
         options={{
           disableTelemetry: true,
           reactQuery: {
@@ -40,7 +81,7 @@ const RefineChakraDemo: React.FC<
         }}
         {...rest}
       />
-    </ChakraUI.ChakraProvider>
+    </ChakraProvider>
   );
 };
 
@@ -111,52 +152,6 @@ const ThemedTitleV2 = ({
   );
 };
 
-const ChakraProvider = ({
-  children,
-  theme,
-}: {
-  children?: React.ReactNode;
-  theme: any;
-}) => {
-  const [themeFromWindow, setThemeFromWindow] = React.useState<
-    undefined | string
-  >(undefined);
-
-  React.useEffect(() => {
-    if (typeof window !== "undefined") {
-      const messageListener = (event: MessageEvent) => {
-        if (event.data.type === "UPDATE_DYNAMIC_VALUES") {
-          if (event.data.payload.theme) {
-            setThemeFromWindow(event.data.payload.theme);
-          }
-        }
-      };
-
-      window.addEventListener("message", messageListener);
-
-      return () => {
-        window.removeEventListener("message", messageListener);
-      };
-    }
-
-    return () => undefined;
-  }, []);
-
-  return (
-    <ChakraUI.ChakraProvider
-      theme={
-        themeFromWindow && themeFromWindow in RefineChakra.RefineThemes
-          ? RefineChakra.RefineThemes[
-              themeFromWindow as keyof typeof RefineChakra.RefineThemes
-            ]
-          : theme
-      }
-    >
-      {children}
-    </ChakraUI.ChakraProvider>
-  );
-};
-
 const AntdScope = {
   // ...RefineCommonScope,
   // RefineAntdDemo,
diff --git a/packages/live-previews/src/scope/common.tsx b/packages/live-previews/src/scope/common.tsx
index 5978525b2f8b..6b9f0d2509e4 100644
--- a/packages/live-previews/src/scope/common.tsx
+++ b/packages/live-previews/src/scope/common.tsx
@@ -1,9 +1,7 @@
 import React from "react";
-import * as ReactRouterDom from "react-router-dom";
+import * as ReactRouter from "react-router";
 import type * as RefineCoreTypes from "@refinedev/core";
-import { MemoryRouterComponent } from "@refinedev/react-router-v6/legacy";
-import * as LegacyRefineReactRouterV6Base from "@refinedev/react-router-v6/legacy";
-import * as RefineReactRouterV6Base from "@refinedev/react-router-v6";
+import * as RefineReactRouter from "@refinedev/react-router";
 import * as RefineSimpleRest from "@refinedev/simple-rest";
 import * as RefineReactHookForm from "@refinedev/react-hook-form";
 import * as RefineReactTable from "@refinedev/react-table";
@@ -104,50 +102,17 @@ const setRefineProps = (
   }
 };
 
-const DemoMemoryRouterComponent = (
-  props: React.ComponentProps<typeof MemoryRouterComponent>,
-): JSX.Element => {
-  return (
-    <MemoryRouterComponent
-      {...props}
-      {...(typeof window !== "undefined" ? window.routerSettings : {})}
-    />
-  );
-};
-
 const DemoMemoryRouter = (
-  props: React.ComponentProps<typeof ReactRouterDom.MemoryRouter>,
+  props: React.ComponentProps<typeof ReactRouter.MemoryRouter>,
 ): JSX.Element => {
   return (
-    <ReactRouterDom.MemoryRouter
+    <ReactRouter.MemoryRouter
       {...props}
       {...(typeof window !== "undefined" ? window.routerSettings : {})}
     />
   );
 };
 
-const LegacyRefineReactRouterV6 = {
-  ...LegacyRefineReactRouterV6Base,
-  MemoryRouterComponent: DemoMemoryRouterComponent,
-  default: {
-    ...LegacyRefineReactRouterV6Base.default,
-    RouterComponent: DemoMemoryRouterComponent,
-  },
-};
-
-/**
- * @deprecated please use `setInitialRoutes` instead
- */
-const LegacyRefineDemoReactRouterV6 = (
-  initialRoutes?: string[],
-): RefineCoreTypes.IRouterProvider => {
-  if (initialRoutes) {
-    setInitialRoutes(initialRoutes);
-  }
-
-  return LegacyRefineReactRouterV6.default;
-};
-
 const RefineHeadlessDemo: React.FC<
   Partial<RefineCoreTypes.RefineProps> & {
     initialRoutes?: string[];
@@ -159,7 +124,7 @@ const RefineHeadlessDemo: React.FC<
 
   return (
     <Refine
-      legacyRouterProvider={LegacyRefineReactRouterV6.default}
+      routerProvider={RefineReactRouter.default}
       dataProvider={RefineSimpleRest.default(SIMPLE_REST_API_URL)}
       options={{
         disableTelemetry: true,
@@ -182,8 +147,8 @@ export const RefineCommonScope = {
     ExternalNavigationProvider,
     Refine,
   },
-  ReactRouterDom: {
-    ...ReactRouterDom,
+  ReactRouter: {
+    ...ReactRouter,
     BrowserRouter: DemoMemoryRouter,
   },
   // Data
@@ -191,9 +156,7 @@ export const RefineCommonScope = {
   // Utilities
   setInitialRoutes,
   setRefineProps,
-  RefineReactRouterV6: RefineReactRouterV6Base,
-  LegacyRefineReactRouterV6,
-  LegacyRefineDemoReactRouterV6,
+  RefineReactRouter,
   // UI
   RefineHeadlessDemo,
   // Other
diff --git a/packages/live-previews/src/scope/mantine.tsx b/packages/live-previews/src/scope/mantine.tsx
index 7ea9287b0917..7f21164bdbe6 100644
--- a/packages/live-previews/src/scope/mantine.tsx
+++ b/packages/live-previews/src/scope/mantine.tsx
@@ -12,45 +12,6 @@ import axios from "axios";
 
 const SIMPLE_REST_API_URL = "https://api.fake-rest.refine.dev";
 
-const RefineMantineDemo: React.FC<
-  Partial<RefineProps> & {
-    initialRoutes?: string[];
-  }
-> = ({ initialRoutes, ...rest }) => {
-  if (initialRoutes) {
-    RefineCommonScope.setInitialRoutes(initialRoutes);
-  }
-
-  return (
-    <MantineCore.MantineProvider
-      theme={RefineMantine.LightTheme}
-      withNormalizeCSS
-      withGlobalStyles
-    >
-      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
-      <RefineCommonScope.RefineCore.Refine
-        legacyRouterProvider={
-          RefineCommonScope.LegacyRefineReactRouterV6.default
-        }
-        dataProvider={RefineCommonScope.RefineSimpleRest.default(
-          SIMPLE_REST_API_URL,
-        )}
-        notificationProvider={RefineMantine.notificationProvider}
-        Layout={RefineMantine.Layout}
-        Sider={() => null}
-        catchAll={<RefineMantine.ErrorComponent />}
-        options={{
-          disableTelemetry: true,
-          reactQuery: {
-            devtoolConfig: false,
-          },
-        }}
-        {...rest}
-      />
-    </MantineCore.MantineProvider>
-  );
-};
-
 const ThemedTitleV2 = ({
   collapsed,
   wrapperStyles,
@@ -153,6 +114,8 @@ const MantineProvider = ({
   return (
     <MantineCore.MantineProvider
       {...restProps}
+      withNormalizeCSS
+      withGlobalStyles
       theme={{
         ...(themeFromWindow && themeFromWindow in RefineMantine.RefineThemes
           ? RefineMantine.RefineThemes[
@@ -162,11 +125,45 @@ const MantineProvider = ({
         colorScheme: theme?.colorScheme as any,
       }}
     >
-      {children}
+      <div style={{ padding: "16px" }}>{children}</div>
     </MantineCore.MantineProvider>
   );
 };
 
+const RefineMantineDemo: React.FC<
+  Partial<RefineProps> & {
+    initialRoutes?: string[];
+  }
+> = ({ initialRoutes, children, ...rest }) => {
+  if (initialRoutes) {
+    RefineCommonScope.setInitialRoutes(initialRoutes);
+  }
+
+  return (
+    <MantineProvider>
+      <MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
+      <MantineNotifications.NotificationsProvider position="top-right">
+        <RefineCommonScope.RefineCore.Refine
+          routerProvider={RefineCommonScope.RefineReactRouter.default}
+          dataProvider={RefineCommonScope.RefineSimpleRest.default(
+            SIMPLE_REST_API_URL,
+          )}
+          notificationProvider={RefineMantine.useNotificationProvider}
+          options={{
+            disableTelemetry: true,
+            reactQuery: {
+              devtoolConfig: false,
+            },
+          }}
+          {...rest}
+        >
+          {children}
+        </RefineCommonScope.RefineCore.Refine>
+      </MantineNotifications.NotificationsProvider>
+    </MantineProvider>
+  );
+};
+
 const MantineScope = {
   RefineMantine: {
     ...RefineMantine,
diff --git a/packages/live-previews/src/scope/map.tsx b/packages/live-previews/src/scope/map.tsx
index f92c3d6e258d..136d6e368b2a 100644
--- a/packages/live-previews/src/scope/map.tsx
+++ b/packages/live-previews/src/scope/map.tsx
@@ -2,9 +2,7 @@ export const packageMap: Record<string, string> = {
   "react-dom/client": "ReactDomClient",
   "./reportWebVitals": "ReportWebVitals",
   "@refinedev/core": "RefineCore",
-  "@refinedev/react-router-v6/legacy": "LegacyRefineReactRouterV6",
-  "@refinedev/react-router-v6": "RefineReactRouterV6",
-  "@refinedev/react-router": "RefineReactRouterV6",
+  "@refinedev/react-router": "RefineReactRouter",
   "@refinedev/antd": "RefineAntd",
   "@refinedev/mui": "RefineMui",
   "@refinedev/mantine": "RefineMantine",
@@ -31,8 +29,7 @@ export const packageMap: Record<string, string> = {
   "@auth0/auth0-react": "Auth0ReactScope",
   "keycloak-js": "KeycloakScope",
   "@react-keycloak/web": "ReactKeycloakWebScope",
-  "react-router-dom": "ReactRouterDom",
-  "react-router": "ReactRouterDom",
+  "react-router": "ReactRouter",
   antd: "AntdCore",
   "@ant-design/icons": "AntDesignIcons",
   "@mantine/core": "MantineCore",
diff --git a/packages/live-previews/src/scope/mui.tsx b/packages/live-previews/src/scope/mui.tsx
index c64264a87fcb..7f35e9460270 100644
--- a/packages/live-previews/src/scope/mui.tsx
+++ b/packages/live-previews/src/scope/mui.tsx
@@ -51,9 +51,7 @@ const RefineMuiDemo: React.FC<
       <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
       <RefineMui.RefineSnackbarProvider>
         <RefineCommonScope.RefineCore.Refine
-          legacyRouterProvider={
-            RefineCommonScope.LegacyRefineReactRouterV6.default
-          }
+          routerProvider={RefineCommonScope.RefineReactRouter.default}
           dataProvider={RefineCommonScope.RefineSimpleRest.default(
             SIMPLE_REST_API_URL,
           )}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e3867c598bb9..6b0604891aae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12440,9 +12440,9 @@ importers:
       '@refinedev/react-hook-form':
         specifier: ^4.9.2
         version: link:../react-hook-form
-      '@refinedev/react-router-v6':
-        specifier: ^4.6.1
-        version: link:../react-router-v6
+      '@refinedev/react-router':
+        specifier: ^1.0.0
+        version: link:../react-router
       '@refinedev/react-table':
         specifier: ^5.6.14
         version: link:../react-table
@@ -12521,9 +12521,9 @@ importers:
       react-i18next:
         specifier: ^11.8.11
         version: 11.18.6(i18next@20.6.1)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
-      react-router-dom:
-        specifier: ^6.8.1
-        version: 6.23.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+      react-router:
+        specifier: ^7.0.2
+        version: 7.0.2(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       uuid:
         specifier: ^9.0.1
         version: 9.0.1