diff --git a/apps/docs/components/docs/components/codeblock.tsx b/apps/docs/components/docs/components/codeblock.tsx
index 6acdf53c31..8d4f61cbf1 100644
--- a/apps/docs/components/docs/components/codeblock.tsx
+++ b/apps/docs/components/docs/components/codeblock.tsx
@@ -188,9 +188,11 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
                           style={{
                             ...props.style,
                             ...(highlightStyleToken.some((t) => {
+                              const content = token.content.trim();
+
                               const regex = t instanceof RegExp ? t : new RegExp(t);
 
-                              return regex.test(token.content.trim());
+                              return regex.test(content);
                             })
                               ? {color: "rgb(var(--code-function))"}
                               : {}),
diff --git a/apps/docs/components/docs/components/import-tabs.tsx b/apps/docs/components/docs/components/import-tabs.tsx
index 251f35fc48..796ac45dc6 100644
--- a/apps/docs/components/docs/components/import-tabs.tsx
+++ b/apps/docs/components/docs/components/import-tabs.tsx
@@ -8,14 +8,14 @@ type PackageManager = {
 };
 
 const importTabs: PackageManager[] = [
-  {
-    key: "main",
-    name: "Main",
-  },
   {
     key: "individual",
     name: "Individual",
   },
+  {
+    key: "main",
+    name: "Global",
+  },
 ];
 
 export interface ImportTabsProps {
diff --git a/apps/docs/components/docs/components/package-managers.tsx b/apps/docs/components/docs/components/package-managers.tsx
index 47d5ffa136..0c4920a230 100644
--- a/apps/docs/components/docs/components/package-managers.tsx
+++ b/apps/docs/components/docs/components/package-managers.tsx
@@ -1,7 +1,8 @@
-import {Tabs, Tab, Snippet} from "@nextui-org/react";
+import {Tabs, Tab, Snippet, Code} from "@nextui-org/react";
 import {Key, useState} from "react";
 
 import Codeblock from "./codeblock";
+import {Blockquote} from "./blockquote";
 
 import {YarnIcon, NpmSmallIcon, PnpmIcon, BunIcon, CLIBoldIcon} from "@/components/icons";
 
@@ -9,8 +10,8 @@ type PackageManagerName = "cli" | "npm" | "yarn" | "pnpm" | "bun";
 
 type PackageManager = {
   icon: JSX.Element;
-  label?: string;
   name: PackageManagerName;
+  label?: string;
 };
 
 const packageManagers: PackageManager[] = [
@@ -39,9 +40,13 @@ const packageManagers: PackageManager[] = [
 
 export interface PackageManagersProps {
   commands: Partial<Record<PackageManagerName, React.Key>>;
+  showGlobalInstallWarning?: boolean;
 }
 
-export const PackageManagers = ({commands}: PackageManagersProps) => {
+export const PackageManagers = ({
+  commands,
+  showGlobalInstallWarning = false,
+}: PackageManagersProps) => {
   const [selectedManager, setSelectedManager] = useState<PackageManagerName>(
     commands.cli ? "cli" : "npm",
   );
@@ -51,44 +56,52 @@ export const PackageManagers = ({commands}: PackageManagersProps) => {
   };
 
   return (
-    <Tabs
-      aria-label="NextUI installation commands"
-      classNames={{
-        base: "group mt-4 min-w-[300px] w-full overflow-x-auto",
-        tabList: "h-10",
-      }}
-      selectedKey={selectedManager}
-      variant="underlined"
-      onSelectionChange={handleSelectionChange}
-    >
-      {packageManagers.map(({name, label, icon}) => {
-        if (!commands[name]) return null;
+    <>
+      <Tabs
+        aria-label="NextUI installation commands"
+        classNames={{
+          base: "group mt-4 min-w-[300px] w-full overflow-x-auto",
+          tabList: "h-10",
+        }}
+        selectedKey={selectedManager}
+        variant="underlined"
+        onSelectionChange={handleSelectionChange}
+      >
+        {packageManagers.map(({name, label, icon}) => {
+          if (!commands[name]) return null;
 
-        return (
-          <Tab
-            key={name}
-            title={
-              <div className="flex items-center space-x-2">
-                {icon}
-                <span>{label || name}</span>
-              </div>
-            }
-          >
-            <Snippet
-              disableTooltip
-              fullWidth
-              hideSymbol
-              classNames={{
-                base: "bg-code-background text-code-foreground",
-                pre: "font-light text-base",
-                copyButton: "text-lg text-zinc-500 mr-2",
-              }}
+          return (
+            <Tab
+              key={name}
+              title={
+                <div className="flex items-center space-x-2">
+                  {icon}
+                  <span>{label || name}</span>
+                </div>
+              }
             >
-              <Codeblock removeIndent codeString={commands[name] as string} language="bash" />
-            </Snippet>
-          </Tab>
-        );
-      })}
-    </Tabs>
+              <Snippet
+                disableTooltip
+                fullWidth
+                hideSymbol
+                classNames={{
+                  base: "bg-code-background text-code-foreground",
+                  pre: "font-light text-base",
+                  copyButton: "text-lg text-zinc-500 mr-2",
+                }}
+              >
+                <Codeblock removeIndent codeString={commands[name] as string} language="bash" />
+              </Snippet>
+            </Tab>
+          );
+        })}
+      </Tabs>
+      {showGlobalInstallWarning && (
+        <Blockquote className="my-2">
+          No need to install this package if <Code>@nextui-org/react</Code> is already installed
+          globally.
+        </Blockquote>
+      )}
+    </>
   );
 };
diff --git a/apps/docs/content/components/card/blurred-footer.ts b/apps/docs/content/components/card/blurred-footer.ts
index a0472807b7..ba3e83bd87 100644
--- a/apps/docs/content/components/card/blurred-footer.ts
+++ b/apps/docs/content/components/card/blurred-footer.ts
@@ -11,7 +11,7 @@ export default function App() {
         alt="Woman listing to music"
         className="object-cover"
         height={200}
-        src="/images/hero-card.jpeg"
+        src="https://nextui.org/images/hero-card.jpeg"
         width={200}
       />
       <CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
diff --git a/apps/docs/content/components/card/blurred.ts b/apps/docs/content/components/card/blurred.ts
index 063702b5d5..8ba66a5acc 100644
--- a/apps/docs/content/components/card/blurred.ts
+++ b/apps/docs/content/components/card/blurred.ts
@@ -165,7 +165,7 @@ export default function App() {
               className="object-cover"
               height={200}
               shadow="md"
-              src="/images/album-cover.png"
+              src="https://nextui.org/images/album-cover.png"
               width="100%"
             />
           </div>
diff --git a/apps/docs/content/components/card/composition.ts b/apps/docs/content/components/card/composition.ts
index d211611138..821d5a8bf8 100644
--- a/apps/docs/content/components/card/composition.ts
+++ b/apps/docs/content/components/card/composition.ts
@@ -7,7 +7,7 @@ export default function App() {
     <Card className="max-w-[340px]">
       <CardHeader className="justify-between">
         <div className="flex gap-5">
-          <Avatar isBordered radius="full" size="md" src="/avatars/avatar-1.png" />
+          <Avatar isBordered radius="full" size="md" src="https://nextui.org/avatars/avatar-1.png" />
           <div className="flex flex-col gap-1 items-start justify-center">
             <h4 className="text-small font-semibold leading-none text-default-600">Zoey Lang</h4>
             <h5 className="text-small tracking-tight text-default-400">@zoeylang</h5>
diff --git a/apps/docs/content/components/card/cover-image.ts b/apps/docs/content/components/card/cover-image.ts
index 93a01e67fd..795f955142 100644
--- a/apps/docs/content/components/card/cover-image.ts
+++ b/apps/docs/content/components/card/cover-image.ts
@@ -12,7 +12,7 @@ export default function App() {
         removeWrapper
         alt="Card background"
         className="z-0 w-full h-full object-cover"
-        src="/images/card-example-4.jpeg"
+        src="https://nextui.org/images/card-example-4.jpeg"
       />
     </Card>
     <Card className="col-span-12 sm:col-span-4 h-[300px]">
@@ -24,7 +24,7 @@ export default function App() {
         removeWrapper
         alt="Card background"
         className="z-0 w-full h-full object-cover"
-        src="/images/card-example-3.jpeg"
+        src="https://nextui.org/images/card-example-3.jpeg"
       />
     </Card>
     <Card className="col-span-12 sm:col-span-4 h-[300px]">
@@ -36,7 +36,7 @@ export default function App() {
         removeWrapper
         alt="Card background"
         className="z-0 w-full h-full object-cover"
-        src="/images/card-example-2.jpeg"
+        src="https://nextui.org/images/card-example-2.jpeg"
       />
     </Card>
     <Card isFooterBlurred className="w-full h-[300px] col-span-12 sm:col-span-5">
@@ -48,7 +48,7 @@ export default function App() {
         removeWrapper
         alt="Card example background"
         className="z-0 w-full h-full scale-125 -translate-y-6 object-cover"
-        src="/images/card-example-6.jpeg"
+        src="https://nextui.org/images/card-example-6.jpeg"
       />
       <CardFooter className="absolute bg-white/30 bottom-0 border-t-1 border-zinc-100/50 z-10 justify-between">
         <div>
@@ -69,14 +69,14 @@ export default function App() {
         removeWrapper
         alt="Relaxing app background"
         className="z-0 w-full h-full object-cover"
-        src="/images/card-example-5.jpeg"
+        src="https://nextui.org/images/card-example-5.jpeg"
       />
       <CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t-1 border-default-600 dark:border-default-100">
         <div className="flex flex-grow gap-2 items-center">
           <Image
             alt="Breathing app icon"
             className="rounded-full w-10 h-11 bg-black"
-            src="/images/breathing-app-icon.jpeg"
+            src="https://nextui.org/images/breathing-app-icon.jpeg"
           />
           <div className="flex flex-col">
             <p className="text-tiny text-white/60">Breathing App</p>
diff --git a/apps/docs/content/components/card/image.ts b/apps/docs/content/components/card/image.ts
index 90b87ab5ac..08e2d16c15 100644
--- a/apps/docs/content/components/card/image.ts
+++ b/apps/docs/content/components/card/image.ts
@@ -12,7 +12,7 @@ export default function App() {
         <Image
           alt="Card background"
           className="object-cover rounded-xl"
-          src="/images/hero-card-complete.jpeg"
+          src="https://nextui.org/images/hero-card-complete.jpeg"
           width={270}
         />
       </CardBody>
diff --git a/apps/docs/content/docs/components/accordion.mdx b/apps/docs/content/docs/components/accordion.mdx
index e3e63c79f2..0b95f6e804 100644
--- a/apps/docs/content/docs/components/accordion.mdx
+++ b/apps/docs/content/docs/components/accordion.mdx
@@ -18,6 +18,7 @@ Accordion display a list of high-level options that can expand/collapse to revea
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add accordion",
     npm: "npm install @nextui-org/accordion",
diff --git a/apps/docs/content/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx
index 290e2b3a60..a483949b2b 100644
--- a/apps/docs/content/docs/components/autocomplete.mdx
+++ b/apps/docs/content/docs/components/autocomplete.mdx
@@ -18,6 +18,7 @@ An autocomplete combines a text input with a listbox, allowing users to filter a
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add autocomplete",
     npm: "npm install @nextui-org/autocomplete",
@@ -209,6 +210,7 @@ The following example shows how you would create a controlled `Autocomplete`, co
 We recommend using the `useFilter` hook from [@react-aria/i18n](https://react-spectrum.adobe.com/react-aria/useFilter.html#usefilter) to manage the filtering of the items.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @react-aria/i18n",
     yarn: "yarn add @react-aria/i18n",
@@ -257,6 +259,7 @@ Autocomplete supports asynchronous filtering, in the example below we are using
 from [react-aria](https://react-spectrum.adobe.com) to handle asynchronous loading and filtering of data from a server.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @react-stately/data",
     yarn: "yarn add @react-stately/data",
@@ -285,6 +288,7 @@ Autocomplete supports asynchronous loading, in the example below we are using a
 The `isLoading` prop is used to show a loading indicator instead of the selector icon when the data is being fetched.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @nextui-org/use-infinite-scroll",
     yarn: "yarn add @nextui-org/use-infinite-scroll",
diff --git a/apps/docs/content/docs/components/avatar.mdx b/apps/docs/content/docs/components/avatar.mdx
index 715d0e9d45..7e991614bf 100644
--- a/apps/docs/content/docs/components/avatar.mdx
+++ b/apps/docs/content/docs/components/avatar.mdx
@@ -19,6 +19,7 @@ The Avatar component is used to represent a user, and displays the profile pictu
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add avatar",
     npm: "npm install @nextui-org/avatar",
diff --git a/apps/docs/content/docs/components/badge.mdx b/apps/docs/content/docs/components/badge.mdx
index 5c4f6f300e..3d5a0e6a69 100644
--- a/apps/docs/content/docs/components/badge.mdx
+++ b/apps/docs/content/docs/components/badge.mdx
@@ -18,6 +18,7 @@ Badges are used as a small numerical value or status descriptor for UI elements.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add badge",
     npm: "npm install @nextui-org/badge",
diff --git a/apps/docs/content/docs/components/breadcrumbs.mdx b/apps/docs/content/docs/components/breadcrumbs.mdx
index 16578c09b5..702be87cba 100644
--- a/apps/docs/content/docs/components/breadcrumbs.mdx
+++ b/apps/docs/content/docs/components/breadcrumbs.mdx
@@ -18,6 +18,7 @@ Breadcrumbs display a hierarchy of links to the current page or resource in an a
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add breadcrumbs",
     npm: "npm install @nextui-org/breadcrumbs",
diff --git a/apps/docs/content/docs/components/button.mdx b/apps/docs/content/docs/components/button.mdx
index a8adab6004..ada09219d3 100644
--- a/apps/docs/content/docs/components/button.mdx
+++ b/apps/docs/content/docs/components/button.mdx
@@ -18,6 +18,7 @@ Buttons allow users to perform actions and choose with a single tap.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add button",
     npm: "npm install @nextui-org/button",
diff --git a/apps/docs/content/docs/components/calendar.mdx b/apps/docs/content/docs/components/calendar.mdx
index 2de2f607fe..d2117ad959 100644
--- a/apps/docs/content/docs/components/calendar.mdx
+++ b/apps/docs/content/docs/components/calendar.mdx
@@ -18,6 +18,7 @@ A calendar consists of a grouping element containing one or more date grids (e.g
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add calendar",
     npm: "npm install @nextui-org/calendar",
diff --git a/apps/docs/content/docs/components/card.mdx b/apps/docs/content/docs/components/card.mdx
index 5fbfcefa7c..e84f9428ed 100644
--- a/apps/docs/content/docs/components/card.mdx
+++ b/apps/docs/content/docs/components/card.mdx
@@ -18,6 +18,7 @@ Card is a container for text, photos, and actions in the context of a single sub
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add card",
     npm: "npm install @nextui-org/card",
diff --git a/apps/docs/content/docs/components/checkbox-group.mdx b/apps/docs/content/docs/components/checkbox-group.mdx
index ff5bddf731..5ef571288a 100644
--- a/apps/docs/content/docs/components/checkbox-group.mdx
+++ b/apps/docs/content/docs/components/checkbox-group.mdx
@@ -18,6 +18,7 @@ A CheckboxGroup allows users to select one or more items from a list of choices.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add checkbox",
     npm: "npm install @nextui-org/checkbox",
diff --git a/apps/docs/content/docs/components/checkbox.mdx b/apps/docs/content/docs/components/checkbox.mdx
index ba56b2d0af..b65b7a6280 100644
--- a/apps/docs/content/docs/components/checkbox.mdx
+++ b/apps/docs/content/docs/components/checkbox.mdx
@@ -18,6 +18,7 @@ Checkboxes allow users to select multiple items from a list of individual items,
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add checkbox",
     npm: "npm install @nextui-org/checkbox",
diff --git a/apps/docs/content/docs/components/chip.mdx b/apps/docs/content/docs/components/chip.mdx
index f7f258d143..8d62063a07 100644
--- a/apps/docs/content/docs/components/chip.mdx
+++ b/apps/docs/content/docs/components/chip.mdx
@@ -18,6 +18,7 @@ A Chip is a small block of essential information that represent an input, attrib
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add chip",
     npm: "npm install @nextui-org/chip",
diff --git a/apps/docs/content/docs/components/circular-progress.mdx b/apps/docs/content/docs/components/circular-progress.mdx
index c0eca8fa43..c3f7d6d175 100644
--- a/apps/docs/content/docs/components/circular-progress.mdx
+++ b/apps/docs/content/docs/components/circular-progress.mdx
@@ -18,6 +18,7 @@ Circular progress indicators are utilized to indicate an undetermined wait perio
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add progress",
     npm: "npm install @nextui-org/progress",
diff --git a/apps/docs/content/docs/components/code.mdx b/apps/docs/content/docs/components/code.mdx
index fad01547d7..2b22d9f6fe 100644
--- a/apps/docs/content/docs/components/code.mdx
+++ b/apps/docs/content/docs/components/code.mdx
@@ -18,6 +18,7 @@ Code is a component used to display inline code.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add code",
     npm: "npm install @nextui-org/code",
diff --git a/apps/docs/content/docs/components/date-input.mdx b/apps/docs/content/docs/components/date-input.mdx
index 6276cb2094..515bf812a2 100644
--- a/apps/docs/content/docs/components/date-input.mdx
+++ b/apps/docs/content/docs/components/date-input.mdx
@@ -19,6 +19,7 @@ Each part of a date value is displayed in an individually editable segment.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add date-input",
     npm: "npm install @nextui-org/date-input",
@@ -98,6 +99,7 @@ and time zone concerns such as daylight saving time are taken into account when
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date",
     yarn: "yarn add @internationalized/date",
@@ -123,6 +125,7 @@ and `CalendarDateTime` and `ZonedDateTime` values are displayed with "minute" gr
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date @react-aria/i18n",
     yarn: "yarn add @internationalized/date @react-aria/i18n",
@@ -147,6 +150,7 @@ The minValue and maxValue props can also be used to ensure the value is within a
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date",
     yarn: "yarn add @internationalized/date",
@@ -171,6 +175,7 @@ passed to the [I18nProvider](https://react-spectrum.adobe.com/react-aria/I18nPro
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date @react-aria/i18n",
     yarn: "yarn add @internationalized/date @react-aria/i18n",
@@ -194,6 +199,7 @@ However, if this is displayed elsewhere or implicit based on the usecase, it can
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date",
     yarn: "yarn add @internationalized/date",
@@ -217,6 +223,7 @@ This example forces DateInput to use 24-hour time, regardless of the locale.
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date",
     yarn: "yarn add @internationalized/date",
diff --git a/apps/docs/content/docs/components/date-picker.mdx b/apps/docs/content/docs/components/date-picker.mdx
index 47862b7826..c3936cc3f9 100644
--- a/apps/docs/content/docs/components/date-picker.mdx
+++ b/apps/docs/content/docs/components/date-picker.mdx
@@ -18,6 +18,7 @@ DatePickers combine a DateInput and a Calendar popover to allow users to enter o
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add date-picker",
     npm: "npm install @nextui-org/date-picker",
@@ -105,6 +106,7 @@ and time zone concerns such as daylight saving time are taken into account when
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date",
     yarn: "yarn add @internationalized/date",
@@ -130,6 +132,7 @@ and `CalendarDateTime` and `ZonedDateTime` values are displayed with "minute" gr
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date @react-aria/i18n",
     yarn: "yarn add @internationalized/date @react-aria/i18n",
@@ -154,6 +157,7 @@ The minValue and maxValue props can also be used to ensure the value is within a
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date",
     yarn: "yarn add @internationalized/date",
@@ -178,6 +182,7 @@ passed to the [I18nProvider](https://react-spectrum.adobe.com/react-aria/I18nPro
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date @react-aria/i18n",
     yarn: "yarn add @internationalized/date @react-aria/i18n",
@@ -200,6 +205,7 @@ DatePicker supports marking certain dates as unavailable. These dates cannot be
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date @react-aria/i18n",
     yarn: "yarn add @internationalized/date @react-aria/i18n",
@@ -232,6 +238,7 @@ By default, when pressing the next or previous buttons, pagination will advance
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date @react-aria/i18n",
     yarn: "yarn add @internationalized/date @react-aria/i18n",
diff --git a/apps/docs/content/docs/components/date-range-picker.mdx b/apps/docs/content/docs/components/date-range-picker.mdx
index fe73390510..3d0a576e3f 100644
--- a/apps/docs/content/docs/components/date-range-picker.mdx
+++ b/apps/docs/content/docs/components/date-range-picker.mdx
@@ -18,6 +18,7 @@ Date Range Picker combines two DateInputs and a RangeCalendar popover to allow u
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add date-picker",
     npm: "npm install @nextui-org/date-picker",
@@ -118,6 +119,7 @@ and time zone concerns such as daylight saving time are taken into account when
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date",
     yarn: "yarn add @internationalized/date",
@@ -143,6 +145,7 @@ and `CalendarDateTime` and `ZonedDateTime` values are displayed with "minute" gr
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date @react-aria/i18n",
     yarn: "yarn add @internationalized/date @react-aria/i18n",
@@ -167,6 +170,7 @@ The minValue and maxValue props can also be used to ensure the value is within a
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date",
     yarn: "yarn add @internationalized/date",
@@ -191,6 +195,7 @@ passed to the [I18nProvider](https://react-spectrum.adobe.com/react-aria/I18nPro
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date @react-aria/i18n",
     yarn: "yarn add @internationalized/date @react-aria/i18n",
@@ -213,6 +218,7 @@ DateRangePicker supports marking certain dates as unavailable. These dates canno
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date @react-aria/i18n",
     yarn: "yarn add @internationalized/date @react-aria/i18n",
@@ -238,6 +244,7 @@ It is up to applications to split the full selected range into multiple as neede
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date @react-aria/i18n",
     yarn: "yarn add @internationalized/date @react-aria/i18n",
@@ -258,6 +265,7 @@ import {useLocale} from "@react-aria/i18n";
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date @react-aria/i18n",
     yarn: "yarn add @internationalized/date @react-aria/i18n",
diff --git a/apps/docs/content/docs/components/divider.mdx b/apps/docs/content/docs/components/divider.mdx
index 464b00af44..9aed017e81 100644
--- a/apps/docs/content/docs/components/divider.mdx
+++ b/apps/docs/content/docs/components/divider.mdx
@@ -18,6 +18,7 @@ Divider is a component that separates content in a page.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add divider",
     npm: "npm install @nextui-org/divider",
diff --git a/apps/docs/content/docs/components/dropdown.mdx b/apps/docs/content/docs/components/dropdown.mdx
index 9003494129..f8d93d37c8 100644
--- a/apps/docs/content/docs/components/dropdown.mdx
+++ b/apps/docs/content/docs/components/dropdown.mdx
@@ -18,6 +18,7 @@ Displays a list of actions or options that a user can choose.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add dropdown",
     npm: "npm install @nextui-org/dropdown",
diff --git a/apps/docs/content/docs/components/image.mdx b/apps/docs/content/docs/components/image.mdx
index 17b10281e2..518fd874af 100644
--- a/apps/docs/content/docs/components/image.mdx
+++ b/apps/docs/content/docs/components/image.mdx
@@ -18,6 +18,7 @@ The Image component is used to display images with support for fallback.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add image",
     npm: "npm install @nextui-org/image",
diff --git a/apps/docs/content/docs/components/input.mdx b/apps/docs/content/docs/components/input.mdx
index b3d28f7ecb..f519bf42c1 100644
--- a/apps/docs/content/docs/components/input.mdx
+++ b/apps/docs/content/docs/components/input.mdx
@@ -18,6 +18,7 @@ Input is a component that allows users to enter text. It can be used to get user
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add input",
     npm: "npm install @nextui-org/input",
diff --git a/apps/docs/content/docs/components/kbd.mdx b/apps/docs/content/docs/components/kbd.mdx
index 9495f077a4..3e5eeed4dd 100644
--- a/apps/docs/content/docs/components/kbd.mdx
+++ b/apps/docs/content/docs/components/kbd.mdx
@@ -18,6 +18,7 @@ Keyboard key is a component to display which key or combination of keys performs
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add kbd",
     npm: "npm install @nextui-org/kbd",
diff --git a/apps/docs/content/docs/components/link.mdx b/apps/docs/content/docs/components/link.mdx
index 6dd25e7cb4..ce10d3d5bb 100644
--- a/apps/docs/content/docs/components/link.mdx
+++ b/apps/docs/content/docs/components/link.mdx
@@ -18,6 +18,7 @@ Links allow users to click their way from page to page. This component is styled
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add link",
     npm: "npm install @nextui-org/link",
diff --git a/apps/docs/content/docs/components/listbox.mdx b/apps/docs/content/docs/components/listbox.mdx
index 52960c6bbd..5211345ea7 100644
--- a/apps/docs/content/docs/components/listbox.mdx
+++ b/apps/docs/content/docs/components/listbox.mdx
@@ -18,6 +18,7 @@ A listbox displays a list of options and allows a user to select one or more of
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add listbox",
     npm: "npm install @nextui-org/listbox",
diff --git a/apps/docs/content/docs/components/modal.mdx b/apps/docs/content/docs/components/modal.mdx
index e7d2c86b29..0e47fea664 100644
--- a/apps/docs/content/docs/components/modal.mdx
+++ b/apps/docs/content/docs/components/modal.mdx
@@ -18,6 +18,7 @@ Displays a dialog with a custom content that requires attention or provides addi
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add modal",
     npm: "npm install @nextui-org/modal",
diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index 7997c68278..91dc1ce29a 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -18,6 +18,7 @@ A responsive navigation header positioned on top side of your page that includes
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add navbar",
     npm: "npm install @nextui-org/navbar",
diff --git a/apps/docs/content/docs/components/pagination.mdx b/apps/docs/content/docs/components/pagination.mdx
index e1524a2dac..f6fa8b48c7 100644
--- a/apps/docs/content/docs/components/pagination.mdx
+++ b/apps/docs/content/docs/components/pagination.mdx
@@ -18,6 +18,7 @@ The Pagination component allows you to display active page and navigate between
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add pagination",
     npm: "npm install @nextui-org/pagination",
diff --git a/apps/docs/content/docs/components/popover.mdx b/apps/docs/content/docs/components/popover.mdx
index 447ce4684e..fe5aeb3026 100644
--- a/apps/docs/content/docs/components/popover.mdx
+++ b/apps/docs/content/docs/components/popover.mdx
@@ -19,6 +19,7 @@ additional rich content on top of something.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add popover",
     npm: "npm install @nextui-org/popover",
diff --git a/apps/docs/content/docs/components/progress.mdx b/apps/docs/content/docs/components/progress.mdx
index 2de6bea2e8..4873bdcaf1 100644
--- a/apps/docs/content/docs/components/progress.mdx
+++ b/apps/docs/content/docs/components/progress.mdx
@@ -18,6 +18,7 @@ The Progress component allows you to view the progress of any activity.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add progress",
     npm: "npm install @nextui-org/progress",
diff --git a/apps/docs/content/docs/components/radio-group.mdx b/apps/docs/content/docs/components/radio-group.mdx
index a0578360a6..f5df923519 100644
--- a/apps/docs/content/docs/components/radio-group.mdx
+++ b/apps/docs/content/docs/components/radio-group.mdx
@@ -18,6 +18,7 @@ Radio Group allow users to select a single option from a list of mutually exclus
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add radio",
     npm: "npm install @nextui-org/radio",
diff --git a/apps/docs/content/docs/components/range-calendar.mdx b/apps/docs/content/docs/components/range-calendar.mdx
index 8349f85a50..4bbba55128 100644
--- a/apps/docs/content/docs/components/range-calendar.mdx
+++ b/apps/docs/content/docs/components/range-calendar.mdx
@@ -18,6 +18,7 @@ A range calendar consists of a grouping element containing one or more date grid
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add calendar",
     npm: "npm install @nextui-org/calendar",
diff --git a/apps/docs/content/docs/components/scroll-shadow.mdx b/apps/docs/content/docs/components/scroll-shadow.mdx
index 61e5b1844a..a04eabfb7e 100644
--- a/apps/docs/content/docs/components/scroll-shadow.mdx
+++ b/apps/docs/content/docs/components/scroll-shadow.mdx
@@ -18,6 +18,7 @@ Applies top and bottom shadows when content overflows on scroll.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add scroll-shadow",
     npm: "npm install @nextui-org/scroll-shadow",
diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx
index 2537767965..4bcd6a25da 100644
--- a/apps/docs/content/docs/components/select.mdx
+++ b/apps/docs/content/docs/components/select.mdx
@@ -18,6 +18,7 @@ A select displays a collapsible list of options and allows a user to select one
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add select",
     npm: "npm install @nextui-org/select",
@@ -187,6 +188,7 @@ Select supports asynchronous loading, in the example below we are using a custom
 The `isLoading` prop is used to show a loading indicator instead of the selector icon when the data is being fetched.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @nextui-org/use-infinite-scroll",
     yarn: "yarn add @nextui-org/use-infinite-scroll",
diff --git a/apps/docs/content/docs/components/skeleton.mdx b/apps/docs/content/docs/components/skeleton.mdx
index dbf755a63f..f1bb8ef206 100644
--- a/apps/docs/content/docs/components/skeleton.mdx
+++ b/apps/docs/content/docs/components/skeleton.mdx
@@ -18,6 +18,7 @@ Skeleton is a placeholder to show a loading state and the expected shape of a co
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add skeleton",
     npm: "npm install @nextui-org/skeleton",
diff --git a/apps/docs/content/docs/components/slider.mdx b/apps/docs/content/docs/components/slider.mdx
index b6b5c89fe8..9b5f471726 100644
--- a/apps/docs/content/docs/components/slider.mdx
+++ b/apps/docs/content/docs/components/slider.mdx
@@ -18,6 +18,7 @@ A slider allows a user to select one or more values within a range.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add slider",
     npm: "npm install @nextui-org/slider",
diff --git a/apps/docs/content/docs/components/snippet.mdx b/apps/docs/content/docs/components/snippet.mdx
index ea155045db..c3661a6466 100644
--- a/apps/docs/content/docs/components/snippet.mdx
+++ b/apps/docs/content/docs/components/snippet.mdx
@@ -18,6 +18,7 @@ Snippet is a component that can be used to display inline or multiline code snip
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add snippet",
     npm: "npm install @nextui-org/snippet",
diff --git a/apps/docs/content/docs/components/spacer.mdx b/apps/docs/content/docs/components/spacer.mdx
index 80bc4eee9d..204c145381 100644
--- a/apps/docs/content/docs/components/spacer.mdx
+++ b/apps/docs/content/docs/components/spacer.mdx
@@ -18,6 +18,7 @@ Spacer is a component used to add space between components.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add spacer",
     npm: "npm install @nextui-org/spacer",
diff --git a/apps/docs/content/docs/components/spinner.mdx b/apps/docs/content/docs/components/spinner.mdx
index 93941f9999..cba84e7ce0 100644
--- a/apps/docs/content/docs/components/spinner.mdx
+++ b/apps/docs/content/docs/components/spinner.mdx
@@ -18,6 +18,7 @@ Spinner express an unspecified wait time or display the length of a process.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add spinner",
     npm: "npm install @nextui-org/spinner",
diff --git a/apps/docs/content/docs/components/switch.mdx b/apps/docs/content/docs/components/switch.mdx
index 1ea96d526c..9b199c32ff 100644
--- a/apps/docs/content/docs/components/switch.mdx
+++ b/apps/docs/content/docs/components/switch.mdx
@@ -18,6 +18,7 @@ The Switch component is used as an alternative between checked and not checked s
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add switch",
     npm: "npm install @nextui-org/switch",
diff --git a/apps/docs/content/docs/components/table.mdx b/apps/docs/content/docs/components/table.mdx
index c339a19d88..60252e8d5a 100644
--- a/apps/docs/content/docs/components/table.mdx
+++ b/apps/docs/content/docs/components/table.mdx
@@ -18,6 +18,7 @@ Tables are used to display tabular data using rows and columns. They allow users
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add table",
     npm: "npm install @nextui-org/table",
@@ -218,6 +219,7 @@ We recommend using the `useAsyncList` hook from [@react-stately/data](https://re
 sure to install it before using the sorting feature.
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     npm: "npm install @react-stately/data",
     yarn: "yarn add @react-stately/data",
diff --git a/apps/docs/content/docs/components/tabs.mdx b/apps/docs/content/docs/components/tabs.mdx
index e47fbb4afb..63718e7358 100644
--- a/apps/docs/content/docs/components/tabs.mdx
+++ b/apps/docs/content/docs/components/tabs.mdx
@@ -18,6 +18,7 @@ Tabs organize content into multiple sections and allow users to navigate between
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add tabs",
     npm: "npm install @nextui-org/tabs",
diff --git a/apps/docs/content/docs/components/textarea.mdx b/apps/docs/content/docs/components/textarea.mdx
index 96f2f7c113..9fe3cafadd 100644
--- a/apps/docs/content/docs/components/textarea.mdx
+++ b/apps/docs/content/docs/components/textarea.mdx
@@ -18,6 +18,7 @@ Textarea component is a multi-line Input which allows you to write large texts.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add input",
     npm: "npm install @nextui-org/input",
diff --git a/apps/docs/content/docs/components/time-input.mdx b/apps/docs/content/docs/components/time-input.mdx
index e973d72797..a8859ce390 100644
--- a/apps/docs/content/docs/components/time-input.mdx
+++ b/apps/docs/content/docs/components/time-input.mdx
@@ -18,6 +18,7 @@ The `TimeInput` component consists of a label, and a group of segments represent
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add date-input",
     npm: "npm install @nextui-org/date-input",
diff --git a/apps/docs/content/docs/components/tooltip.mdx b/apps/docs/content/docs/components/tooltip.mdx
index d9723e5730..022760e6ec 100644
--- a/apps/docs/content/docs/components/tooltip.mdx
+++ b/apps/docs/content/docs/components/tooltip.mdx
@@ -18,6 +18,7 @@ Tooltips display a brief, informative message that appears when a user interacts
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add tooltip",
     npm: "npm install @nextui-org/tooltip",
diff --git a/apps/docs/content/docs/components/user.mdx b/apps/docs/content/docs/components/user.mdx
index e334f792a8..7759abe1bc 100644
--- a/apps/docs/content/docs/components/user.mdx
+++ b/apps/docs/content/docs/components/user.mdx
@@ -18,6 +18,7 @@ Display user information with avatar and name.
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
     cli: "nextui add user",
     npm: "npm install @nextui-org/user",
diff --git a/apps/docs/content/docs/guide/introduction.mdx b/apps/docs/content/docs/guide/introduction.mdx
index 5e92213bc1..19b1ca2024 100644
--- a/apps/docs/content/docs/guide/introduction.mdx
+++ b/apps/docs/content/docs/guide/introduction.mdx
@@ -9,7 +9,7 @@ Welcome to the NextUI documentation!
 
 <NextImage
   priority
-  src="/nextui-banner.png"
+  src="https://nextui.org/nextui-banner.png"
   quality={100}
   width={700}
   height={350}
diff --git a/apps/docs/content/landing/index.tsx b/apps/docs/content/landing/index.tsx
index 15e7f29fb8..39baba856f 100644
--- a/apps/docs/content/landing/index.tsx
+++ b/apps/docs/content/landing/index.tsx
@@ -335,7 +335,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               }}
               height={200}
               shadow="lg"
-              src="/images/album-cover.png"
+              src="https://nextui.org/images/album-cover.png"
               width="100%"
             />
           </div>