Merge branch 'main' of github.com:nextui-org/nextui into canary

apps/docs/content/docs/components/accordion.mdx

@@ -20,7 +20,7 @@ Accordion display a list of high-level options that can expand/collapse to revea
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add accordion",
+    cli: "npx nextui-cli@latest add accordion",
     npm: "npm install @nextui-org/accordion",
     yarn: "yarn add @nextui-org/accordion",
     pnpm: "pnpm add @nextui-org/accordion",

apps/docs/content/docs/components/autocomplete.mdx

@@ -20,7 +20,7 @@ An autocomplete combines a text input with a listbox, allowing users to filter a
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add autocomplete",
+    cli: "npx nextui-cli@latest add autocomplete",
     npm: "npm install @nextui-org/autocomplete",
     yarn: "yarn add @nextui-org/autocomplete",
     pnpm: "pnpm add @nextui-org/autocomplete",
@@ -210,7 +210,6 @@ 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",
@@ -259,7 +258,6 @@ 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",
@@ -288,7 +286,6 @@ 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",

apps/docs/content/docs/components/avatar.mdx

@@ -21,7 +21,7 @@ The Avatar component is used to represent a user, and displays the profile pictu
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add avatar",
+    cli: "npx nextui-cli@latest add avatar",
     npm: "npm install @nextui-org/avatar",
     yarn: "yarn add @nextui-org/avatar",
     pnpm: "pnpm add @nextui-org/avatar",

apps/docs/content/docs/components/badge.mdx

@@ -20,7 +20,7 @@ Badges are used as a small numerical value or status descriptor for UI elements.
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add badge",
+    cli: "npx nextui-cli@latest add badge",
     npm: "npm install @nextui-org/badge",
     yarn: "yarn add @nextui-org/badge",
     pnpm: "pnpm add @nextui-org/badge",

apps/docs/content/docs/components/breadcrumbs.mdx

@@ -20,7 +20,7 @@ Breadcrumbs display a hierarchy of links to the current page or resource in an a
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add breadcrumbs",
+    cli: "npx nextui-cli@latest add breadcrumbs",
     npm: "npm install @nextui-org/breadcrumbs",
     yarn: "yarn add @nextui-org/breadcrumbs",
     pnpm: "pnpm add @nextui-org/breadcrumbs",

apps/docs/content/docs/components/button.mdx

@@ -20,7 +20,7 @@ Buttons allow users to perform actions and choose with a single tap.
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add button",
+    cli: "npx nextui-cli@latest add button",
     npm: "npm install @nextui-org/button",
     yarn: "yarn add @nextui-org/button",
     pnpm: "pnpm add @nextui-org/button",

apps/docs/content/docs/components/calendar.mdx

@@ -20,7 +20,7 @@ A calendar consists of a grouping element containing one or more date grids (e.g
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add calendar",
+    cli: "npx nextui-cli@latest add calendar",
     npm: "npm install @nextui-org/calendar",
     yarn: "yarn add @nextui-org/calendar",
     pnpm: "pnpm add @nextui-org/calendar",

apps/docs/content/docs/components/card.mdx

@@ -20,7 +20,7 @@ Card is a container for text, photos, and actions in the context of a single sub
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add card",
+    cli: "npx nextui-cli@latest add card",
     npm: "npm install @nextui-org/card",
     yarn: "yarn add @nextui-org/card",
     pnpm: "pnpm add @nextui-org/card",

apps/docs/content/docs/components/checkbox-group.mdx

@@ -20,7 +20,7 @@ A CheckboxGroup allows users to select one or more items from a list of choices.
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add checkbox",
+    cli: "npx nextui-cli@latest add checkbox",
     npm: "npm install @nextui-org/checkbox",
     yarn: "yarn add @nextui-org/checkbox",
     pnpm: "pnpm add @nextui-org/checkbox",

apps/docs/content/docs/components/checkbox.mdx

@@ -20,7 +20,7 @@ Checkboxes allow users to select multiple items from a list of individual items,
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add checkbox",
+    cli: "npx nextui-cli@latest add checkbox",
     npm: "npm install @nextui-org/checkbox",
     yarn: "yarn add @nextui-org/checkbox",
     pnpm: "pnpm add @nextui-org/checkbox",

apps/docs/content/docs/components/chip.mdx

@@ -20,7 +20,7 @@ A Chip is a small block of essential information that represent an input, attrib
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add chip",
+    cli: "npx nextui-cli@latest add chip",
     npm: "npm install @nextui-org/chip",
     yarn: "yarn add @nextui-org/chip",
     pnpm: "pnpm add @nextui-org/chip",

apps/docs/content/docs/components/circular-progress.mdx

@@ -20,7 +20,7 @@ Circular progress indicators are utilized to indicate an undetermined wait perio
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add progress",
+    cli: "npx nextui-cli@latest add progress",
     npm: "npm install @nextui-org/progress",
     yarn: "yarn add @nextui-org/progress",
     pnpm: "pnpm add @nextui-org/progress",

apps/docs/content/docs/components/code.mdx

@@ -20,7 +20,7 @@ Code is a component used to display inline code.
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add code",
+    cli: "npx nextui-cli@latest add code",
     npm: "npm install @nextui-org/code",
     yarn: "yarn add @nextui-org/code",
     pnpm: "pnpm add @nextui-org/code",

apps/docs/content/docs/components/date-input.mdx

@@ -21,7 +21,7 @@ Each part of a date value is displayed in an individually editable segment.
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add date-input",
+    cli: "npx nextui-cli@latest add date-input",
     npm: "npm install @nextui-org/date-input",
     yarn: "yarn add @nextui-org/date-input",
     pnpm: "pnpm add @nextui-org/date-input",
@@ -99,7 +99,6 @@ 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",
@@ -125,7 +124,6 @@ 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",
@@ -150,7 +148,6 @@ 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",
@@ -175,7 +172,6 @@ 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",
@@ -199,7 +195,6 @@ 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",
@@ -223,7 +218,6 @@ 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",

apps/docs/content/docs/components/date-picker.mdx

@@ -20,7 +20,7 @@ DatePickers combine a DateInput and a Calendar popover to allow users to enter o
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add date-picker",
+    cli: "npx nextui-cli@latest add date-picker",
     npm: "npm install @nextui-org/date-picker",
     yarn: "yarn add @nextui-org/date-picker",
     pnpm: "pnpm add @nextui-org/date-picker",
@@ -106,7 +106,6 @@ 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",
@@ -132,7 +131,6 @@ 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",
@@ -157,7 +155,6 @@ 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",
@@ -182,7 +179,6 @@ 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",
@@ -205,7 +201,6 @@ 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",
@@ -238,7 +233,6 @@ 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",

apps/docs/content/docs/components/date-range-picker.mdx

@@ -20,7 +20,7 @@ Date Range Picker combines two DateInputs and a RangeCalendar popover to allow u
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add date-picker",
+    cli: "npx nextui-cli@latest add date-picker",
     npm: "npm install @nextui-org/date-picker",
     yarn: "yarn add @nextui-org/date-picker",
     pnpm: "pnpm add @nextui-org/date-picker",
@@ -119,7 +119,6 @@ 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",
@@ -145,7 +144,6 @@ 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",
@@ -170,7 +168,6 @@ 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",
@@ -195,7 +192,6 @@ 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",
@@ -218,7 +214,6 @@ 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",
@@ -244,7 +239,6 @@ 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",
@@ -265,7 +259,6 @@ 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",

apps/docs/content/docs/components/divider.mdx

@@ -20,7 +20,7 @@ Divider is a component that separates content in a page.
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add divider",
+    cli: "npx nextui-cli@latest add divider",
     npm: "npm install @nextui-org/divider",
     yarn: "yarn add @nextui-org/divider",
     pnpm: "pnpm add @nextui-org/divider",

apps/docs/content/docs/components/dropdown.mdx

@@ -20,7 +20,7 @@ Displays a list of actions or options that a user can choose.
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add dropdown",
+    cli: "npx nextui-cli@latest add dropdown",
     npm: "npm install @nextui-org/dropdown",
     yarn: "yarn add @nextui-org/dropdown",
     pnpm: "pnpm add @nextui-org/dropdown",

apps/docs/content/docs/components/image.mdx

@@ -20,7 +20,7 @@ The Image component is used to display images with support for fallback.
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add image",
+    cli: "npx nextui-cli@latest add image",
     npm: "npm install @nextui-org/image",
     yarn: "yarn add @nextui-org/image",
     pnpm: "pnpm add @nextui-org/image",

apps/docs/content/docs/components/input.mdx

@@ -20,7 +20,7 @@ Input is a component that allows users to enter text. It can be used to get user
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add input",
+    cli: "npx nextui-cli@latest add input",
     npm: "npm install @nextui-org/input",
     yarn: "yarn add @nextui-org/input",
     pnpm: "pnpm add @nextui-org/input",

apps/docs/content/docs/components/kbd.mdx

@@ -20,7 +20,7 @@ Keyboard key is a component to display which key or combination of keys performs
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add kbd",
+    cli: "npx nextui-cli@latest add kbd",
     npm: "npm install @nextui-org/kbd",
     yarn: "yarn add @nextui-org/kbd",
     pnpm: "pnpm add @nextui-org/kbd",

apps/docs/content/docs/components/link.mdx

@@ -20,7 +20,7 @@ Links allow users to click their way from page to page. This component is styled
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add link",
+    cli: "npx nextui-cli@latest add link",
     npm: "npm install @nextui-org/link",
     yarn: "yarn add @nextui-org/link",
     pnpm: "pnpm add @nextui-org/link",

apps/docs/content/docs/components/listbox.mdx

@@ -20,7 +20,7 @@ A listbox displays a list of options and allows a user to select one or more of
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add listbox",
+    cli: "npx nextui-cli@latest add listbox",
     npm: "npm install @nextui-org/listbox",
     yarn: "yarn add @nextui-org/listbox",
     pnpm: "pnpm add @nextui-org/listbox",

apps/docs/content/docs/components/modal.mdx

@@ -20,7 +20,7 @@ Displays a dialog with a custom content that requires attention or provides addi
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add modal",
+    cli: "npx nextui-cli@latest add modal",
     npm: "npm install @nextui-org/modal",
     yarn: "yarn add @nextui-org/modal",
     pnpm: "pnpm add @nextui-org/modal",