diff --git a/docs/components/organization/create-organization.mdx b/docs/components/organization/create-organization.mdx
index b083ec1043..c32e40a38f 100644
--- a/docs/components/organization/create-organization.mdx
+++ b/docs/components/organization/create-organization.mdx
@@ -59,7 +59,7 @@ The following example includes a basic implementation of the `<CreateOrganizatio
 
 <Tabs items={["Next.js", "React", "Remix", "Astro"]}>
   <Tab>
-    ```jsx {{ filename: '/app/create-organization/[[...create-organization]]/page.tsx' }}
+    ```jsx {{ filename: 'app/create-organization/[[...create-organization]]/page.tsx' }}
     import { CreateOrganization } from '@clerk/nextjs'
 
     export default function CreateOrganizationPage() {
diff --git a/docs/components/organization/organization-list.mdx b/docs/components/organization/organization-list.mdx
index c11dcfaf9b..d97d8cf159 100644
--- a/docs/components/organization/organization-list.mdx
+++ b/docs/components/organization/organization-list.mdx
@@ -64,7 +64,7 @@ All props are optional.
 
 <Tabs items={["Next.js", "React", "Remix", "Astro"]}>
   <Tab>
-    ```jsx {{ filename: '/app/discover/page.tsx' }}
+    ```jsx {{ filename: 'app/discover/page.tsx' }}
     import { OrganizationList } from '@clerk/nextjs'
 
     export default function OrganizationListPage() {
diff --git a/docs/components/organization/organization-profile.mdx b/docs/components/organization/organization-profile.mdx
index 54f9c09a80..9dc549275b 100644
--- a/docs/components/organization/organization-profile.mdx
+++ b/docs/components/organization/organization-profile.mdx
@@ -56,7 +56,7 @@ All props are optional.
   <Tab>
     You can embed the `<OrganizationProfile />` component using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes). This allows you to redirect the user inside your application.
 
-    ```jsx {{ filename: '/app/organization-profile/[[...organization-profile]]/page.tsx' }}
+    ```jsx {{ filename: 'app/organization-profile/[[...organization-profile]]/page.tsx' }}
     import { OrganizationProfile } from '@clerk/nextjs'
 
     export default function OrganizationProfilePage() {
diff --git a/docs/components/organization/organization-switcher.mdx b/docs/components/organization/organization-switcher.mdx
index 734ae48d85..0edcfc5b1c 100644
--- a/docs/components/organization/organization-switcher.mdx
+++ b/docs/components/organization/organization-switcher.mdx
@@ -103,7 +103,7 @@ All props below are optional.
 
 <Tabs items={["Next.js", "React", "Remix", "Astro"]}>
   <Tab>
-    ```jsx {{ filename: '/app/organization-switcher/[[...organization-switcher]]/page.tsx' }}
+    ```jsx {{ filename: 'app/organization-switcher/[[...organization-switcher]]/page.tsx' }}
     import { OrganizationSwitcher } from '@clerk/nextjs'
 
     export default function OrganizationSwitcherPage() {
diff --git a/docs/components/protect.mdx b/docs/components/protect.mdx
index 44a9a497af..e9f90fe55e 100644
--- a/docs/components/protect.mdx
+++ b/docs/components/protect.mdx
@@ -158,7 +158,7 @@ The following example uses `<Protect>`'s `condition` prop to conditionally rende
 
 <Tabs items={["Next.js", "Astro"]}>
   <Tab>
-    ```tsx {{ filename: '/app/dashboard/settings/layout.tsx' }}
+    ```tsx {{ filename: 'app/dashboard/settings/layout.tsx' }}
     import type { PropsWithChildren } from 'react'
     import { Protect } from '@clerk/nextjs'
 
diff --git a/docs/components/user/user-profile.mdx b/docs/components/user/user-profile.mdx
index e303ba5be1..6c9f17b42d 100644
--- a/docs/components/user/user-profile.mdx
+++ b/docs/components/user/user-profile.mdx
@@ -53,7 +53,7 @@ All props are optional.
     You can embed the `<UserProfile />` component using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes). This allows you to redirect the user inside your application.
 
     <CodeBlockTabs options={["App Router", "Pages Router"]}>
-      ```jsx {{ filename: '/app/user-profile/[[...user-profile]]/page.tsx' }}
+      ```jsx {{ filename: 'app/user-profile/[[...user-profile]]/page.tsx' }}
       import { UserProfile } from '@clerk/nextjs'
 
       const UserProfilePage = () => <UserProfile path="/user-profile" />
diff --git a/docs/components/waitlist.mdx b/docs/components/waitlist.mdx
index ee5e0dafd2..e558b24b8e 100644
--- a/docs/components/waitlist.mdx
+++ b/docs/components/waitlist.mdx
@@ -53,7 +53,7 @@ The following example includes a basic implementation of the `<Waitlist />` comp
 
 <Tabs items={["Next.js", "React"]}>
   <Tab>
-    ```jsx {{ filename: '/app/waitlist/[[...waitlist]]/page.tsx' }}
+    ```jsx {{ filename: 'app/waitlist/[[...waitlist]]/page.tsx' }}
     import { Waitlist } from '@clerk/nextjs'
 
     export default function WaitlistPage() {
diff --git a/docs/custom-flows/email-password.mdx b/docs/custom-flows/email-password.mdx
index 37dfa805ef..91d7f95dda 100644
--- a/docs/custom-flows/email-password.mdx
+++ b/docs/custom-flows/email-password.mdx
@@ -34,7 +34,7 @@ This guide will walk you through how to build a custom email/password sign-up an
     <Tab>
       This example is written for Next.js App Router but it can be adapted for any React meta framework, such as Remix.
 
-      ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
+      ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
       'use client'
 
       import * as React from 'react'
@@ -478,7 +478,7 @@ This guide will walk you through how to build a custom email/password sign-up an
     <Tab>
       This example is written for Next.js App Router but it can be adapted for any React meta framework, such as Remix.
 
-      ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
+      ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
       'use client'
 
       import * as React from 'react'
diff --git a/docs/custom-flows/manage-sms-based-mfa.mdx b/docs/custom-flows/manage-sms-based-mfa.mdx
index a3f45b5d15..a16224c6fa 100644
--- a/docs/custom-flows/manage-sms-based-mfa.mdx
+++ b/docs/custom-flows/manage-sms-based-mfa.mdx
@@ -33,7 +33,7 @@ One of the options that Clerk supports for MFA is **SMS verification codes**. Th
 
   <Tabs items={["Manage MFA page", "Add phone number page"]}>
     <Tab>
-      ```tsx {{ filename: '/app/account/manage-mfa/page.tsx', collapsible: true }}
+      ```tsx {{ filename: 'app/account/manage-mfa/page.tsx', collapsible: true }}
       'use client'
 
       import * as React from 'react'
@@ -222,7 +222,7 @@ One of the options that Clerk supports for MFA is **SMS verification codes**. Th
     </Tab>
 
     <Tab>
-      ```tsx {{ filename: '/app/account/add-phone/page.tsx', collapsible: true }}
+      ```tsx {{ filename: 'app/account/add-phone/page.tsx', collapsible: true }}
       'use client'
 
       import * as React from 'react'
diff --git a/docs/custom-flows/manage-totp-based-mfa.mdx b/docs/custom-flows/manage-totp-based-mfa.mdx
index 3ddacb47e6..62acebef61 100644
--- a/docs/custom-flows/manage-totp-based-mfa.mdx
+++ b/docs/custom-flows/manage-totp-based-mfa.mdx
@@ -36,7 +36,7 @@ One of the options that Clerk supports for MFA is **Authenticator applications (
 
       <Tabs items={["Manage MFA page", "Add TOTP page"]}>
         <Tab>
-          ```tsx {{ filename: '/app/account/manage-mfa/page.tsx', collapsible: true }}
+          ```tsx {{ filename: 'app/account/manage-mfa/page.tsx', collapsible: true }}
           'use client'
 
           import * as React from 'react'
@@ -158,7 +158,7 @@ One of the options that Clerk supports for MFA is **Authenticator applications (
         </Tab>
 
         <Tab>
-          ```tsx {{ filename: '/app/account/manage-mfa/add/page.tsx', collapsible: true }}
+          ```tsx {{ filename: 'app/account/manage-mfa/add/page.tsx', collapsible: true }}
           'use client'
 
           import { useUser } from '@clerk/nextjs'
diff --git a/docs/custom-flows/sign-out.mdx b/docs/custom-flows/sign-out.mdx
index a0c1c889e3..732a57ebf8 100644
--- a/docs/custom-flows/sign-out.mdx
+++ b/docs/custom-flows/sign-out.mdx
@@ -20,7 +20,7 @@ The `signOut()` function signs a user out of all sessions in a [multi-session ap
 
     This example is written for Next.js App Router but can be adapted for any React meta framework, such as Remix.
 
-    ```jsx {{ filename: '/app/components/SignOutButton.tsx' }}
+    ```jsx {{ filename: 'app/components/SignOutButton.tsx' }}
     'use client'
 
     import { useClerk } from '@clerk/nextjs'
diff --git a/docs/customization/elements/examples/shadcn-ui.mdx b/docs/customization/elements/examples/shadcn-ui.mdx
index 33b2a88753..94a33ba20c 100644
--- a/docs/customization/elements/examples/shadcn-ui.mdx
+++ b/docs/customization/elements/examples/shadcn-ui.mdx
@@ -55,7 +55,7 @@ You must also configure the appropriate settings in Clerk:
   },
 ]}
 >
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
   'use client'
   import * as Clerk from '@clerk/elements/common'
   import * as SignUp from '@clerk/elements/sign-up'
@@ -321,7 +321,7 @@ You must also configure the appropriate settings in Clerk:
   },
 ]}
 >
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
   'use client'
   import * as Clerk from '@clerk/elements/common'
   import * as SignIn from '@clerk/elements/sign-in'
diff --git a/docs/customization/elements/examples/sign-in.mdx b/docs/customization/elements/examples/sign-in.mdx
index 0180ae75a2..e82ef39ba6 100644
--- a/docs/customization/elements/examples/sign-in.mdx
+++ b/docs/customization/elements/examples/sign-in.mdx
@@ -26,7 +26,7 @@ Before you build your sign-in flow, you need to configure the appropriate settin
   }
 ]}
 >
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -127,7 +127,7 @@ Before you build your sign-in flow, you need to configure the appropriate settin
   }
 ]}
 >
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -222,7 +222,7 @@ Before you build your sign-in flow, you need to configure the appropriate settin
   }
 ]}
 >
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -382,7 +382,7 @@ Before you build your sign-in flow, you need to configure the appropriate settin
   }
 ]}
 >
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
diff --git a/docs/customization/elements/examples/sign-up.mdx b/docs/customization/elements/examples/sign-up.mdx
index 8ade4df375..6f2ee7add0 100644
--- a/docs/customization/elements/examples/sign-up.mdx
+++ b/docs/customization/elements/examples/sign-up.mdx
@@ -25,7 +25,7 @@ Before you build your sign-up flow, you need to configure the appropriate settin
   }
 ]}
 >
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -175,7 +175,7 @@ Before you build your sign-up flow, you need to configure the appropriate settin
   }
 ]}
 >
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
diff --git a/docs/customization/elements/guides/sign-in.mdx b/docs/customization/elements/guides/sign-in.mdx
index 89c63d39af..a2d83b1440 100644
--- a/docs/customization/elements/guides/sign-in.mdx
+++ b/docs/customization/elements/guides/sign-in.mdx
@@ -38,7 +38,7 @@ description: Learn how to build a complete sign-in form with Clerk Elements.
 
   Create a new route in your Next.js application. The route needs to be an [optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments) so the sign-in flow can handled nested paths, as shown in the following example:
 
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx' }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -58,7 +58,7 @@ description: Learn how to build a complete sign-in form with Clerk Elements.
 
   The Clerk authentication flows are made up of **steps**. Steps handle rendering the UI for each part of the flow. To allow users to create a sign-in attempt, the `start` step needs to be rendered. The following example does so with the `<SignIn.Step>` component:
 
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', mark: [[9, 11]] }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[9, 11]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -79,7 +79,7 @@ description: Learn how to build a complete sign-in form with Clerk Elements.
 
   Make it functional by adding input fields. The following example uses the `<Clerk.Field>` component to render an `identifier` field, as well as the `<Connection>` component to allow users to sign in with a social connection, like Google:
 
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', mark: [[12, 20]] }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[12, 20]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -117,7 +117,7 @@ description: Learn how to build a complete sign-in form with Clerk Elements.
 
   The following example demonstrates how to conditionally render a form for the `email_code` strategy:
 
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', mark: [[23, 38]] }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[23, 38]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -167,7 +167,7 @@ description: Learn how to build a complete sign-in form with Clerk Elements.
 
   If your instance is configured to support authenticating with passwords, you must add a few additional steps and verification strategies. You can choose if you want to support providing a password in the `start` step with an additional field, or as an additional verification strategy. For this guide, add it as a standalone verification strategy.
 
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', mark: [[39, 65], [68, 94]] }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[39, 65], [68, 94]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
diff --git a/docs/customization/elements/guides/sign-up.mdx b/docs/customization/elements/guides/sign-up.mdx
index 5aed014cf7..eb9e04d147 100644
--- a/docs/customization/elements/guides/sign-up.mdx
+++ b/docs/customization/elements/guides/sign-up.mdx
@@ -38,7 +38,7 @@ description: Learn how to build a complete sign-up form with Clerk Elements.
 
   Create a new route in your Next.js application. The route needs to be an [optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments) so the sign-up flow can handled nested paths, as shown in the following example:
 
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx' }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx' }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -58,7 +58,7 @@ description: Learn how to build a complete sign-up form with Clerk Elements.
 
   The Clerk authentication flows are made up of **steps**. Steps handle rendering the UI for each part of the flow. To allow users to create a sign-up attempt, the `start` step needs to be rendered. The following example does so with the `<SignUp.Step>` component:
 
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', mark: [[9, 11]] }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', mark: [[9, 11]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -79,7 +79,7 @@ description: Learn how to build a complete sign-up form with Clerk Elements.
 
   Make it functional by adding input fields. The following example uses the `<Clerk.Field>` component to render the `emailAddress` and `username` fields, as well as the `<Connection>` component to allow users to sign up with a social connection, like Google:
 
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', mark: [[12, 34]] }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', mark: [[12, 34]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -128,7 +128,7 @@ description: Learn how to build a complete sign-up form with Clerk Elements.
 
   The following example demonstrates how to conditionally render a form for the `phone_code` and `email_code` strategies:
 
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', mark: [[35, 59]] }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', mark: [[35, 59]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -199,7 +199,7 @@ description: Learn how to build a complete sign-up form with Clerk Elements.
 
   Should a user attempt to sign up via Google while a username is a required field, the `continue` step will be necessary to accept the username. The `<SignUp.Step>` component will display any additional required fields.
 
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', mark: [[35, 45]] }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', mark: [[35, 45]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
diff --git a/docs/customization/elements/guides/styling.mdx b/docs/customization/elements/guides/styling.mdx
index 17aa48d8b8..2f20fb060f 100644
--- a/docs/customization/elements/guides/styling.mdx
+++ b/docs/customization/elements/guides/styling.mdx
@@ -13,7 +13,7 @@ You can style Clerk Elements components with the following props:
 
 This guide will demonstrate multiple different styling approaches using the following basic sign-in flow as a starting point:
 
-```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx' }}
+```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }}
 'use client'
 
 import * as Clerk from '@clerk/elements/common'
@@ -50,7 +50,7 @@ export default function SignInPage() {
 
 If you are already using [Tailwind CSS](https://tailwindcss.com/), no additional setup is required. Classes from Tailwind can be applied to most Clerk Elements components. Use your editor's IntelliSense to see if `className` is a valid prop on a component you want to style.
 
-```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx' }}
+```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }}
 'use client'
 
 import * as Clerk from '@clerk/elements/common'
@@ -97,7 +97,7 @@ export default function SignInPage() {
 
 Many of the Clerk Elements components accept an `asChild` prop that allows you to swap out the rendered element. This is useful if you have an existing design system or component library that you wish to use with Clerk Elements.
 
-```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx' }}
+```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }}
 'use client'
 
 import * as Clerk from '@clerk/elements/common'
@@ -161,7 +161,7 @@ const CustomInput = forwardRef(function CustomInput(props, forwardedRef) {
 
 Classes from an imported CSS module can be applied to most Clerk Elements components with `className`.
 
-```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx' }}
+```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }}
 'use client'
 
 import * as Clerk from '@clerk/elements/common'
@@ -205,7 +205,7 @@ export default function SignInPage() {
 
 You can also use inline styles with Clerk Elements. This is useful when you need to apply styles conditionally or  avoid creating a separate CSS file.
 
-```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx' }}
+```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }}
 'use client'
 
 import * as Clerk from '@clerk/elements/common'
diff --git a/docs/customization/organization-profile.mdx b/docs/customization/organization-profile.mdx
index 2c9576c876..3d51ea668c 100644
--- a/docs/customization/organization-profile.mdx
+++ b/docs/customization/organization-profile.mdx
@@ -65,7 +65,7 @@ To add a custom page to the `<OrganizationProfile />` component, use the `<Organ
 The following example demonstrates two ways that you can render content in the `<OrganizationSwitcher.OrganizationProfilePage />` or `<OrganizationProfile.Page />` component: as a component or as a direct child.
 
 <CodeBlockTabs options={["<OrganizationSwitcher />", "Dedicated page"]}>
-  ```tsx {{ filename: '/app/components/Header.tsx' }}
+  ```tsx {{ filename: 'app/components/Header.tsx' }}
   'use client'
 
   import { OrganizationSwitcher } from '@clerk/nextjs'
@@ -117,7 +117,7 @@ The following example demonstrates two ways that you can render content in the `
   export default Header
   ```
 
-  ```tsx {{ filename: '/app/organization-profile/[[...organization-profile]]/page.tsx' }}
+  ```tsx {{ filename: 'app/organization-profile/[[...organization-profile]]/page.tsx' }}
   'use client'
 
   import { OrganizationProfile } from '@clerk/nextjs'
@@ -247,7 +247,7 @@ You can add external links to the `<OrganizationProfile />` navigation sidebar u
 The following example adds a link to the homepage in the navigation sidebar of the `<OrganizationProfile />` component.
 
 <CodeBlockTabs options={["<OrganizationSwitcher />", "Dedicated page"]}>
-  ```tsx {{ filename: '/app/components/Header.tsx' }}
+  ```tsx {{ filename: 'app/components/Header.tsx' }}
   'use client'
 
   import { OrganizationSwitcher } from '@clerk/nextjs'
@@ -275,7 +275,7 @@ The following example adds a link to the homepage in the navigation sidebar of t
   export default Header
   ```
 
-  ```tsx {{ filename: '/app/organization-profile/[[...organization-profile]]/page.tsx' }}
+  ```tsx {{ filename: 'app/organization-profile/[[...organization-profile]]/page.tsx' }}
   'use client'
 
   import { OrganizationProfile } from '@clerk/nextjs'
@@ -306,7 +306,7 @@ Note that when reordering default routes, the first item in the navigation sideb
 
 <Tabs items={["<OrganizationSwitcher />", "Dedicated Page"]}>
   <Tab>
-    ```tsx {{ filename: '/app/components/Header.tsx' }}
+    ```tsx {{ filename: 'app/components/Header.tsx' }}
     'use client'
 
     import { OrganizationSwitcher } from '@clerk/nextjs'
@@ -358,7 +358,7 @@ Note that when reordering default routes, the first item in the navigation sideb
 
     In the following example, `path` is set to `/organization-profile`, so the `<CustomPage />` is rendered under the `/organization-profile` path.
 
-    ```tsx {{ filename: '/app/organization-profile/[[...organization-profile]]/page.tsx' }}
+    ```tsx {{ filename: 'app/organization-profile/[[...organization-profile]]/page.tsx' }}
     'use client'
 
     import { OrganizationProfile } from '@clerk/nextjs'
diff --git a/docs/customization/themes.mdx b/docs/customization/themes.mdx
index c9a3b5bf6f..650029a450 100644
--- a/docs/customization/themes.mdx
+++ b/docs/customization/themes.mdx
@@ -490,7 +490,7 @@ To apply a theme to a single Clerk component, pass the `appearance` prop to the
 <Tabs items={["Next.js", "React", "Remix", "Astro"]}>
   <Tab>
     <CodeBlockTabs options={["App Router", "Pages Router"]}>
-      ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', mark: [2, [7, 9]] }}
+      ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [2, [7, 9]] }}
       import { SignIn } from '@clerk/nextjs'
       import { dark } from '@clerk/themes'
 
diff --git a/docs/customization/user-profile.mdx b/docs/customization/user-profile.mdx
index 4cd67fe367..1fc4d377b3 100644
--- a/docs/customization/user-profile.mdx
+++ b/docs/customization/user-profile.mdx
@@ -65,7 +65,7 @@ The following example demonstrates two ways that you can render content in the `
 <Tabs items={["Next.js", "Astro"]}>
   <Tab>
     <CodeBlockTabs options={["<UserButton />", "Dedicated page"]}>
-      ```tsx {{ filename: '/app/page.tsx' }}
+      ```tsx {{ filename: 'app/page.tsx' }}
       'use client'
 
       import { UserButton } from '@clerk/nextjs'
@@ -109,7 +109,7 @@ The following example demonstrates two ways that you can render content in the `
       }
       ```
 
-      ```tsx {{ filename: '/app/user-profile/[[...user-profile]]/page.tsx' }}
+      ```tsx {{ filename: 'app/user-profile/[[...user-profile]]/page.tsx' }}
       'use client'
 
       import { UserProfile } from '@clerk/nextjs'
@@ -295,7 +295,7 @@ The following example adds a link to the homepage in the navigation sidebar of t
 <Tabs items={["Next.js", "Astro"]}>
   <Tab>
     <CodeBlockTabs options={["<UserButton />", "Dedicated page"]}>
-      ```tsx {{ filename: '/app/page.tsx' }}
+      ```tsx {{ filename: 'app/page.tsx' }}
       'use client'
 
       import { UserButton } from '@clerk/nextjs'
@@ -319,7 +319,7 @@ The following example adds a link to the homepage in the navigation sidebar of t
       }
       ```
 
-      ```tsx {{ filename: '/app/user-profile/[[...user-profile]]/page.tsx' }}
+      ```tsx {{ filename: 'app/user-profile/[[...user-profile]]/page.tsx' }}
       'use client'
 
       import { UserProfile } from '@clerk/nextjs'
@@ -398,7 +398,7 @@ Note that when reordering default routes, the first item in the navigation sideb
   <Tab>
     <Tabs items={["<UserButton />", "Dedicated page"]}>
       <Tab>
-        ```tsx {{ filename: '/app/page.tsx' }}
+        ```tsx {{ filename: 'app/page.tsx' }}
         'use client'
 
         import { UserButton } from '@clerk/nextjs'
@@ -442,7 +442,7 @@ Note that when reordering default routes, the first item in the navigation sideb
 
         In the following example, `path` is set to `/user-profile`, so the `<CustomPage />` is rendered under the `/user-profile` path.
 
-        ```tsx {{ filename: '/app/user-profile/[[...user-profile]]/page.tsx' }}
+        ```tsx {{ filename: 'app/user-profile/[[...user-profile]]/page.tsx' }}
         'use client'
 
         import { UserProfile } from '@clerk/nextjs'
diff --git a/docs/customization/variables.mdx b/docs/customization/variables.mdx
index a1616d461a..f84a42f886 100644
--- a/docs/customization/variables.mdx
+++ b/docs/customization/variables.mdx
@@ -460,7 +460,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
 <Tabs items={["Next.js", "React", "Remix", "Astro"]}>
   <Tab>
     <CodeBlockTabs options={["App Router", "Pages Router"]}>
-      ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', mark: [[6, 11]] }}
+      ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[6, 11]] }}
       import { SignIn } from '@clerk/nextjs'
 
       export default function Page() {
diff --git a/docs/guides/reverification.mdx b/docs/guides/reverification.mdx
index 31235d932d..c4d1fdac9e 100644
--- a/docs/guides/reverification.mdx
+++ b/docs/guides/reverification.mdx
@@ -22,7 +22,7 @@ To handle reverification server-side, use the [`auth.has()`](/docs/references/ne
   <Tab>
     The following example uses the [`has()`](/docs/references/nextjs/auth-object#has) helper to check if the user has verified their credentials within a specific time period. The `strict` configuration sets the time period to 10 minutes. If the user hasn't verified their credentials within 10 minutes, the `reverificationError` utility is used to return an error.
 
-    ```ts {{ filename: '/app/actions.ts' }}
+    ```ts {{ filename: 'app/actions.ts' }}
     'use server'
 
     import { auth, reverificationError } from '@clerk/nextjs/server'
@@ -128,7 +128,7 @@ The following example demonstrates how to use the [`useReverification()`](/docs/
 
 <Tabs items={["Next.js Server Action", "Next.js Route Handler", "React"]}>
   <Tab>
-    ```tsx {{ filename: '/app/perform-action/page.tsx' }}
+    ```tsx {{ filename: 'app/perform-action/page.tsx' }}
     'use client'
 
     import { useReverification } from '@clerk/nextjs'
@@ -150,7 +150,7 @@ The following example demonstrates how to use the [`useReverification()`](/docs/
   </Tab>
 
   <Tab>
-    ```tsx {{ filename: '/app/transfer/page.tsx' }}
+    ```tsx {{ filename: 'app/transfer/page.tsx' }}
     'use client'
 
     import { useReverification } from '@clerk/nextjs'
diff --git a/docs/guides/waitlist.mdx b/docs/guides/waitlist.mdx
index 0f3bffa54d..cff59729a3 100644
--- a/docs/guides/waitlist.mdx
+++ b/docs/guides/waitlist.mdx
@@ -70,7 +70,7 @@ In [**Waitlist** mode](/docs/authentication/configuration/restrictions#waitlist)
 
   The following example includes a basic implementation of the `<Waitlist />` component hosted on the `/` route (the home page). You can use this as a starting point for your own implementation.
 
-  ```jsx {{ filename: '/app/page.tsx' }}
+  ```jsx {{ filename: 'app/page.tsx' }}
   import { Waitlist } from '@clerk/nextjs'
 
   export default function Page() {
diff --git a/docs/organizations/verify-user-permissions.mdx b/docs/organizations/verify-user-permissions.mdx
index 1d0063c620..b46651b529 100644
--- a/docs/organizations/verify-user-permissions.mdx
+++ b/docs/organizations/verify-user-permissions.mdx
@@ -24,7 +24,7 @@ The following examples work for both SSR and CSR.
   <Tab>
     The following example uses the `<Protect>` component to only render the form for users with the correct permission. The example uses the `fallback` prop to render a different UI if the user is not authorized.
 
-    ```tsx {{ filename: '/app/dashboard/settings/form.tsx' }}
+    ```tsx {{ filename: 'app/dashboard/settings/form.tsx' }}
     'use client'
     import { Protect } from '@clerk/nextjs'
 
@@ -44,7 +44,7 @@ The following examples work for both SSR and CSR.
   <Tab>
     The following example uses `has()` to inspect a user's permissions granularly. If the user doesn't have the permission, `has()` returns `false`, causing the component to return `null` instead of rendering its children.
 
-    ```tsx {{ filename: '/app/dashboard/settings/form.tsx' }}
+    ```tsx {{ filename: 'app/dashboard/settings/form.tsx' }}
     'use client'
     import { useAuth } from '@clerk/nextjs'
 
@@ -76,7 +76,7 @@ The following examples work for both SSR and CSR.
     > [!WARNING]
     > Be cautious when doing authorization checks in layouts, as these don't re-render on navigation, meaning the user session won't be checked on every route change. [Read more in the Next.js docs](https://nextjs.org/docs/app/building-your-application/authentication#layouts-and-auth-checks).
 
-    ```tsx {{ filename: '/app/dashboard/settings/layout.tsx' }}
+    ```tsx {{ filename: 'app/dashboard/settings/layout.tsx' }}
     import type { PropsWithChildren } from 'react'
     import { Protect } from '@clerk/nextjs'
 
@@ -92,7 +92,7 @@ The following examples work for both SSR and CSR.
     > [!WARNING]
     > Be cautious when doing authorization checks in layouts, as these don't re-render on navigation, meaning the user session won't be checked on every route change. [Read more in the Next.js docs](https://nextjs.org/docs/app/building-your-application/authentication#layouts-and-auth-checks).
 
-    ```tsx {{ filename: '/app/dashboard/settings/layout.tsx' }}
+    ```tsx {{ filename: 'app/dashboard/settings/layout.tsx' }}
     import type { PropsWithChildren } from 'react'
     import { auth } from '@clerk/nextjs/server'
 
@@ -121,7 +121,7 @@ The following examples work for both SSR and CSR.
     - If the user is authenticated but is not authorized (as in, does not have the `org:team_settings:read` permission), `auth.protect()` will throw a `404` error.
     - If the user is both authenticated and authorized, `auth.protect()` will return the user's `userId`.
 
-    ```tsx {{ filename: '/app/dashboard/settings/page.tsx' }}
+    ```tsx {{ filename: 'app/dashboard/settings/page.tsx' }}
     import { auth } from '@clerk/nextjs/server'
 
     export default async function Page() {
@@ -322,7 +322,7 @@ You can pass a `role` the same way you can pass a `permission` in all the exampl
   <Tab>
     The following example uses `<Protect>`'s `condition` prop to conditionally render its children if the user has the correct role.
 
-    ```tsx {{ filename: '/app/dashboard/settings/Page.tsx' }}
+    ```tsx {{ filename: 'app/dashboard/settings/Page.tsx' }}
     import { Protect } from '@clerk/nextjs'
 
     export default function Page() {
@@ -347,7 +347,7 @@ You can pass a `role` the same way you can pass a `permission` in all the exampl
     - If the user is authenticated but is not authorized (as in, does not have the `org:admin` or `org:billing_manager` role), `auth.protect()` will throw a `404` error.
     - If the user is both authenticated and authorized, `auth.protect()` will return the user's `userId`.
 
-    ```tsx {{ filename: '/app/dashboard/settings/page.tsx' }}
+    ```tsx {{ filename: 'app/dashboard/settings/page.tsx' }}
     import { auth } from '@clerk/nextjs/server'
 
     export default async function Page() {
@@ -363,7 +363,7 @@ You can pass a `role` the same way you can pass a `permission` in all the exampl
   <Tab>
     The following example uses `has()` to inspect a user's roles granularly. If the user doesn't have the correct role, `has()` returns `false`, causing the component to return `null` instead of rendering its children.
 
-    ```tsx {{ filename: '/app/dashboard/settings/form.tsx' }}
+    ```tsx {{ filename: 'app/dashboard/settings/form.tsx' }}
     'use client'
     import { useAuth } from '@clerk/nextjs'
 
diff --git a/docs/references/expo/local-credentials.mdx b/docs/references/expo/local-credentials.mdx
index 75ff945425..ecd1ce0080 100644
--- a/docs/references/expo/local-credentials.mdx
+++ b/docs/references/expo/local-credentials.mdx
@@ -41,7 +41,7 @@ This guide shows you how to use the `useLocalCredentials()` hook to enhance your
 
   The following example demonstrates how to use `useLocalCredentials()` in a custom flow for signing users in.
 
-  ```tsx {{ filename: '/app/sign-in.tsx' }}
+  ```tsx {{ filename: 'app/sign-in.tsx' }}
   import { useSignIn } from '@clerk/clerk-expo'
   import { useLocalCredentials } from '@clerk/clerk-expo/local-credentials'
   import { Link, Stack, useRouter } from 'expo-router'
@@ -117,7 +117,7 @@ This guide shows you how to use the `useLocalCredentials()` hook to enhance your
 
   The following example demonstrates how to use the `userOwnsCredentials` and `clearCredentials` properties of the `useLocalCredentials()` hook in order to remove the stored credentials if those belong to the signed in user.
 
-  ```tsx {{ filename: '/app/user.tsx' }}
+  ```tsx {{ filename: 'app/user.tsx' }}
   import { useUser, useClerk } from '@clerk/clerk-expo'
   import { useLocalCredentials } from '@clerk/clerk-expo/local-credentials'
 
@@ -143,7 +143,7 @@ This guide shows you how to use the `useLocalCredentials()` hook to enhance your
 
   The following example demonstrates how to use `userOwnsCredentials` and `setCredentials` properties of the `useLocalCredentials()` hook in order to update the stored credentials if those belong to the signed in user.
 
-  ```tsx {{ filename: '/app/update-user.tsx' }}
+  ```tsx {{ filename: 'app/update-user.tsx' }}
   import { useUser, useClerk } from '@clerk/clerk-expo'
   import { useLocalCredentials } from '@clerk/clerk-expo/local-credentials'