ci(changesets): version packages (#2903)

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

.changeset/config.json

@@ -8,7 +8,7 @@
   "fixed": [],
   "linked": [],
   "access": "public",
-  "baseBranch": "main",
+  "baseBranch": "canary",
   "updateInternalDependencies": "patch",
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true

.coderabbit.yaml

@@ -14,7 +14,7 @@ reviews:
       drafts: false
       base_branches:
         - "main"
-        - "develop"
+        - "canary"
         - "fix/.*"
         - "chore/.*"
         - "feat/.*"

.github/workflows/QA.yaml

@@ -3,7 +3,7 @@ name: QA
 on:
   pull_request:
     branches:
-      - main
+      - canary
 
 jobs:
   build:

.github/workflows/release.yaml

@@ -6,7 +6,7 @@ on:
       - ".changeset/**"
       - "packages/**"
     branches:
-      - main
+      - canary
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -41,12 +41,21 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Create @dev release
+      - name: Sync files from canary to main branch if a publish happens
+        if: steps.changesets.outputs.published == 'true'
+        run: |
+          curl -X POST \
+            -H "Accept: application/vnd.github.v3+json" \
+            -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+            https://api.github.com/repos/owner/repo/dispatches \
+            -d '{"event_type":"sync-canary-to-main"}'
+
+      - name: Create canary release
         if: steps.changesets.outputs.published != 'true'
         run: |
-          git checkout main
-          pnpm version:dev
-          pnpm release:dev
+          git checkout canary
+          pnpm version:canary
+          pnpm release:canary
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/sync-canary-to-main.yaml

@@ -0,0 +1,43 @@
+name: Sync Canary to Main
+
+on:
+  # triggered manually in Github
+  workflow_dispatch:
+  # triggered by the type "sync-canary-to-main" (e.g. from release action after publishing)
+  repository_dispatch:
+    types: [sync-canary-to-main]
+
+jobs:
+  create_pull_request:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0  # Ensure all history is fetched
+
+      - name: Create Pull Request
+        uses: repo-sync/pull-request@v2
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          source_branch: "canary"
+          destination_branch: "main"
+          pr_title: "Auto-sync Canary to Main"
+          pr_body: |
+            ## Automated: Sync from Canary to Main
+
+            This Pull Request is automatically generated to sync the changes from the Canary branch to the Main branch. Below are the included updates:
+
+            ###  Triggered by a Direct Push to Canary:
+            - Please check the recent commits on the Canary branch directly as this sync may include multiple changes.
+
+            ### Triggered by a Pull Request Merge:
+            - Merged Pull Request: [PR#${{ github.event.pull_request.number }}](${{ github.event.pull_request.html_url }}) - ${{ github.event.pull_request.title }}
+              - PR Description: ${{ github.event.pull_request.body }}
+              - Merged by: ${{ github.event.pull_request.merged_by.login }}
+
+            ### Action Required:
+            - Please review the changes carefully.
+            - Approve and merge the Pull Request if everything is in order.
+
+            Thank you for maintaining the Main branch updated and clean.

CONTRIBUTING.md

@@ -57,7 +57,7 @@ https://www.conventionalcommits.org/ or check out the
 
 ## Pull Request Guidelines
 
-- The `main` branch is basically a snapshot of the latest stable version. All development must be done in dedicated branches.
+- The `main` branch is basically a snapshot of the latest production version. All development must be done in dedicated branches and will be merged to `canary` branch.
 - Make sure that Github Actions are green
 - It is good to have multiple small commits while working on the PR. We'll let GitHub squash it automatically before the merge.
 - If you add a new feature:
@@ -73,14 +73,14 @@ https://www.conventionalcommits.org/ or check out the
 
 1. Fork of the nextui repository and clone your fork
 
-2. Create a new branch out of the `main` branch. We follow the convention
+2. Create a new branch out of the `canary` branch. We follow the convention
    `[type/scope]`. For example `fix/dropdown-hook` or `docs/menu-typo`. `type`
    can be either `docs`, `fix`, `feat`, `build`, or any other conventional
    commit type. `scope` is just a short id that describes the scope of work.
 
 3. Make and commit your changes following the
    [commit convention](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.md#commit-convention).
-   As you develop, you can run `pnpm build --filter=<module>` and
+   As you canary, you can run `pnpm build --filter=<module>` and
    `pnpm test packages/<module>/<pkg>` e.g. `pnpm build --filter=avatar & pnpm test packages/components/avatar` to make sure everything works as expected.
 
    > To know more about the `--filter` option, please check the turborepo [docs](https://turborepo.org/docs/core-concepts/filtering).
@@ -200,9 +200,9 @@ npm run build
 
 6. Send your pull request:
 
-- Send your pull request to the `main` branch
+- Send your pull request to the `canary` branch
 - Your pull request will be reviewed by the maintainers and the maintainers will decide if it is accepted or not
-- Once the pull request is accepted, the maintainers will merge it to the `main` branch
+- Once the pull request is accepted, the maintainers will merge it to the `canary` branch
 
 ## Visual Changes
 

apps/docs/components/cmdk.tsx

@@ -154,6 +154,16 @@ export const Cmdk: FC<{}> = () => {
     }
   };
 
+  const prioritizeFirstLevelItems = (a: SearchResultItem, b: SearchResultItem) => {
+    if (a.type === "lvl1") {
+      return -1;
+    } else if (b.type === "lvl1") {
+      return 1;
+    }
+
+    return 0;
+  };
+
   const results = useMemo<SearchResultItem[]>(
     function getResults() {
       if (query.length < 2) return [];
@@ -165,12 +175,22 @@ export const Cmdk: FC<{}> = () => {
       if (words.length === 1) {
         return matchSorter(data, query, {
           keys: MATCH_KEYS,
+          sorter: (matches) => {
+            matches.sort((a, b) => prioritizeFirstLevelItems(a.item, b.item));
+
+            return matches;
+          },
         }).slice(0, MAX_RESULTS);
       }
 
       const matchesForEachWord = words.map((word) =>
         matchSorter(data, word, {
           keys: MATCH_KEYS,
+          sorter: (matches) => {
+            matches.sort((a, b) => prioritizeFirstLevelItems(a.item, b.item));
+
+            return matches;
+          },
         }),
       );
 
@@ -410,8 +430,8 @@ export const Cmdk: FC<{}> = () => {
             </Kbd>
           </div>
           <Command.List ref={listRef} className={slots.list()} role="listbox">
-            {query.length > 0 && (
-              <Command.Empty>
+            <Command.Empty>
+              {query.length > 0 && (
                 <div className={slots.emptyWrapper()}>
                   <div>
                     <p>No results for &quot;{query}&quot;</p>
@@ -424,8 +444,8 @@ export const Cmdk: FC<{}> = () => {
                     )}
                   </div>
                 </div>
-              </Command.Empty>
-            )}
+              )}
+            </Command.Empty>
 
             {isEmpty(query) &&
               (isEmpty(recentSearches) ? (

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))"}
                               : {}),

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 {

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",
-        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>
+      )}
+    </>
   );
 };

apps/docs/components/marketing/hero/hero.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import NextLink from "next/link";
-import {Button, Link, Chip} from "@nextui-org/react";
+import {Button, Link, Chip, Snippet} from "@nextui-org/react";
 import {ArrowRightIcon} from "@nextui-org/shared-icons";
 import dynamic from "next/dynamic";
 
 import {FloatingComponents} from "./floating-components";
 
-import {title, subtitle} from "@/components/primitives";
 import {GithubIcon} from "@/components/icons";
+import {title, subtitle} from "@/components/primitives";
 import {trackEvent} from "@/utils/va";
 
 const BgLooper = dynamic(() => import("./bg-looper").then((mod) => mod.BgLooper), {
@@ -35,11 +35,11 @@ export const Hero = () => {
             color="default"
             href="/blog/v2.3.0"
             variant="dot"
-            onClick={() => handlePressAnnouncement("Introducing v2.3.0", "/blog/v2.3.0")}
+            onClick={() => handlePressAnnouncement("New version v2.4.0", "/blog/v2.4.0")}
           >
-            Introducing v2.3.0 
-            <span aria-label="tada emoji" role="img">
-              🎉
+            New version v2.4.0&nbsp;
+            <span aria-label="emoji" role="img">
+              🚀
             </span>
           </Chip>
         </div>
@@ -56,7 +56,7 @@ export const Hero = () => {
         <div className="flex flex-col md:flex-row items-center gap-4">
           <Button
             as={NextLink}
-            className="w-full md:w-auto"
+            className="w-full md:h-11 md:w-auto"
             color="primary"
             endContent={
               <ArrowRightIcon
@@ -78,12 +78,27 @@ export const Hero = () => {
           >
             Get Started
           </Button>
-
+          <Snippet
+            className="w-full rounded-full hidden md:flex sm:w-auto"
+            copyButtonProps={{
+              radius: "full",
+            }}
+            onCopy={() => {
+              trackEvent("Hero - Copy Install Command", {
+                name: "Copy",
+                action: "click",
+                category: "landing-page",
+                data: "npx nextui-cli@latest init",
+              });
+            }}
+          >
+            npx nextui-cli@latest init
+          </Snippet>
           <Button
             fullWidth
             isExternal
             as={Link}
-            className="w-full md:w-auto"
+            className="w-full md:hidden"
             href="https://github.com/nextui-org/nextui"
             radius="full"
             size="lg"

apps/docs/components/marketing/sponsors.tsx

@@ -1,7 +1,7 @@
 import {Button, Link} from "@nextui-org/react";
 
 import {sectionWrapper} from "@/components/primitives";
-import {RelumeLogo, Story2DesignLogo} from "@/components/icons/sponsors";
+import {Story2DesignLogo} from "@/components/icons/sponsors";
 import {HeartFilledIcon} from "@/components/icons";
 import {VercelIcon} from "@/components/icons/social";
 import {siteConfig} from "@/config/site";
@@ -9,20 +9,15 @@ import {Sponsor, SponsorItem} from "@/components/marketing/sponsor-item";
 
 const sponsors: Sponsor[] = [
   {
-    name: "Relume",
-    href: "https://library.relume.io/ai-site-builder?via=nextui",
-    logo: <RelumeLogo className="text-black dark:text-white" />,
+    name: "Vercel",
+    href: "https://www.vercel.com?utm_source=nextui&utm_marketing=oss",
+    logo: <VercelIcon className="text-black dark:text-white" height={24} />,
   },
   {
     name: "story.to.design",
     href: "https://story.to.design?utm_source=nextui&utm_marketing=partnership",
     logo: <Story2DesignLogo className="pt-1" />,
   },
-  {
-    name: "Vercel",
-    href: "https://www.vercel.com?utm_source=nextui&utm_marketing=oss",
-    logo: <VercelIcon className="text-black dark:text-white" height={24} />,
-  },
 ];
 
 export const Sponsors = () => {

apps/docs/components/navbar.tsx

@@ -312,13 +312,13 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
             as={NextLink}
             className="bg-default-100/50 hover:bg-default-100 border-default-200/80 dark:border-default-100/80 transition-colors cursor-pointer"
             color="default"
-            href="/blog/v2.3.0"
+            href="/blog/v2.4.0"
             variant="dot"
-            onClick={() => handlePressNavbarItem("Introducing v2.3.0", "/blog/v2.3.0")}
+            onClick={() => handlePressNavbarItem("New version v2.4.0", "/blog/v2.4.0")}
           >
-            Introducing v2.3.0&nbsp;
-            <span aria-label="tada emoji" role="img">
-              🎉
+            New version v2.4.0&nbsp;
+            <span aria-label="emoji" role="img">
+              🚀
             </span>
           </Chip>
         </NavbarItem>

apps/docs/config/routes.json

@@ -154,7 +154,8 @@
           "key": "badge",
           "title": "Badge",
           "keywords": "badge, markers, status indication, count display",
-          "path": "/docs/components/badge.mdx"
+          "path": "/docs/components/badge.mdx",
+          "updated": true
         },
         {
           "key": "button",
@@ -334,7 +335,8 @@
           "key": "skeleton",
           "title": "Skeleton",
           "keywords": "skeleton, loading state, placeholder, content preview",
-          "path": "/docs/components/skeleton.mdx"
+          "path": "/docs/components/skeleton.mdx",
+          "updated": true
         },
         {
           "key": "snippet",
@@ -415,13 +417,15 @@
           "key": "cli-api",
           "title": "NextUI CLI",
           "keywords": "api references, nextui, api, cli",
-          "path": "/docs/api-references/cli-api.mdx"
+          "path": "/docs/api-references/cli-api.mdx",
+          "updated": true
         },
         {
           "key": "nextui-provider",
           "title": "NextUI Provider",
           "keywords": "api references, nextui, api, nextui provider",
-          "path": "/docs/api-references/nextui-provider.mdx"
+          "path": "/docs/api-references/nextui-provider.mdx",
+          "updated": true
         }
       ]
     }

apps/docs/content/blog/v2.3.0.mdx

@@ -297,7 +297,9 @@ export function Providers({children}: ProvidersProps) {
 
 ## Breaking Changes
 
-In order to improve the performance and reduce the bundle size, we have removed the `units` creation from the 
+### Removal of the `units` creation
+
+To improve performance and reduce bundle size, we have removed the `units` creation from the 
 `nextui` plugin. [TailwindCSS v3.4](https://tailwindcss.com/blog/tailwindcss-v3-4) added support for `min-h-*` and `min-w-*` classes, so it is no longer needed.
 
 How to upgrade:
@@ -335,8 +337,28 @@ export const MyButton = () => {
 };
 ```
 
-That's it! Your project should now be using the latest version of TailwindCSS and NextUI.
+### Separation for `errorMessage` and `isInvalid`
 
+We are currently working on supporting multiple types of validation, including native HTML constraint validation, custom validation, and real-time validation. 
+Due to this reason, the requirements for displaying error messages have become more varied, and it is necessary to handle validation conditions separately from the `errorMessage`.
+
+How to upgrade:
+
+1. To display `errorMessage`, `isInvalid` must be set to `true`.
+
+```diff-jsx
+<Input
+  type="email"
+  label="Email"
+  variant="bordered"
+  defaultValue="junior2nextui.org"
++ isInvalid={true}
+  errorMessage="Please enter a valid email"
+  className="max-w-xs"
+/>
+```
+
+That's it! Your project should now be using the latest version of TailwindCSS and NextUI.
 
 <Spacer y={4} />
 

apps/docs/content/blog/v2.4.0.mdx

@@ -0,0 +1,333 @@
+---
+title: "Introducing v2.4.0"
+description: "NextUI v2.4.0 is here! includes tons of bug fixes, the possibility to globally disable the animations and improvements."
+date: "2024-05-27"
+image: "/blog/v2.4.0.jpg"
+tags: ["nextui", "v2.4.0", "release", "bug fixes", "improvements", "animations"]
+author:
+  name: "WK Wong"
+  username: "@wingkwong"
+  link: "https://github.com/wingkwong"
+  avatar: "https://avatars.githubusercontent.com/u/35857179?v=4"
+---
+
+<img
+  src="/blog/v2.4.0_2x.jpg"
+  width={700}
+  height={350}
+  alt="NextUI v2.4.0"
+  className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
+/>
+
+We are excited to announce the latest update to NextUI, version **2.4.0**! This release introduces 60+ bug fixes, dependencies upgrades, improvements in API and CLI and more.
+
+## What's New in v2.4.0?
+
+- [Disable Animations Globally](#disable-animations-globally) - Allows users to disable animation globally via NextUIProvider
+- [API Improvements](#api-improvements) - Includes several props like `disableRipple`, `skipFramerMotionAnimations` and `validationBehavior`
+- [CLI Improvements](#cli-improvements) - Includes new command options and optimizes performance
+- [React Aria Packages Upgrades](#react-aria-packages-upgrades) - Upgrades and fixes the exact versions of React Aria
+- [Other Changes](#other-changes) - Includes styling improvements, accessibility, usability enhancements and over 60 bug fixes across different component packages
+
+<Spacer y={4} />
+
+Upgrade today by running one of the following commands:
+
+<Spacer y={4} />
+
+<PackageManagers
+  commands={{
+    cli: "nextui upgrade",
+    npm: "npx nextui-cli@latest upgrade",
+  }}
+/>
+
+
+<Spacer y={4} />
+
+## Disable Animations Globally
+
+NextUI components are animated by default and can be disabled by setting the prop `disableAnimation` individually. Since v2.4.0, you can globally disable the animation by setting `disableAnimation` to `NextUIProvider`.
+
+```tsx
+"use client";
+
+import {type ReactNode} from "react";
+import {NextUIProvider} from "@nextui-org/react";
+
+export function AppProvider(props: AppProviderProps) {
+  const {children, className} = props;
+
+  return (
+    <NextUIProvider className={className} disableAnimation>
+      {children}
+    </NextUIProvider>
+  );
+}
+
+interface AppProviderProps {
+  children: ReactNode;
+  className?: string;
+}
+```
+
+<Spacer y={4} />
+
+## API Improvements
+
+### disableRipple
+
+By default, there is a ripple effect on press in Button and Card component and can be disabled by setting the prop `disableRipple` individually. Since v2.4.0, it can be disabled globally by setting `disableRipple` to `NextUIProvider`.
+
+```tsx
+"use client";
+
+import {type ReactNode} from "react";
+import {NextUIProvider} from "@nextui-org/react";
+
+export function AppProvider(props: AppProviderProps) {
+  const {children, className} = props;
+
+  return (
+    <NextUIProvider className={className} disableRipple>
+      {children}
+    </NextUIProvider>
+  );
+}
+
+interface AppProviderProps {
+  children: ReactNode;
+  className?: string;
+}
+```
+
+### skipFramerMotionAnimations
+
+We can control whether `framer-motion` animations are skipped within the application. This property is automatically enabled (`true`) when the `disableAnimation` prop is set to `true`, effectively skipping all `framer-motion` animations. To retain `framer-motion` animations while using the `disableAnimation` prop for other purposes, set this to `false`. However, note that animations in NextUI Components are still omitted if the `disableAnimation` prop is `true`.
+
+```tsx
+"use client";
+
+import {type ReactNode} from "react";
+import {NextUIProvider} from "@nextui-org/react";
+
+export function AppProvider(props: AppProviderProps) {
+  const {children, className} = props;
+
+  return (
+    <NextUIProvider className={className} skipFramerMotionAnimations>
+      {children}
+    </NextUIProvider>
+  );
+}
+
+interface AppProviderProps {
+  children: ReactNode;
+  className?: string;
+}
+```
+
+### validationBehavior
+
+We can set `validationBehavior` to either `native` or `aria` to control whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. If it is not specified, `aria` will be used by default.
+
+```tsx
+"use client";
+
+import {type ReactNode} from "react";
+import {NextUIProvider} from "@nextui-org/react";
+
+export function AppProvider(props: AppProviderProps) {
+  const {children, className} = props;
+
+  return (
+    <NextUIProvider className={className} validationBehavior="native">
+      {children}
+    </NextUIProvider>
+  );
+}
+
+interface AppProviderProps {
+  children: ReactNode;
+  className?: string;
+}
+```
+
+<Spacer y={4} />
+
+## CLI Improvements
+
+### Refactor Init Flow View
+
+We've refactored the init flow view to provide a better user experience.
+
+The latest flow view output:
+
+```bash
+┌  Create a new project
+│
+◇  Select a template (Enter to select)
+│  ● App (A Next.js 14 with app directory template pre-configured with NextUI (v2) and Tailwind CSS.)
+│  ○ Pages (A Next.js 14 with pages directory template pre-configured with NextUI (v2) and Tailwind CSS.)
+│  ○ Vite (A Vite template pre-configured with NextUI (v2) and Tailwind CSS.)
+│
+◇  New project name (Enter to skip with default name)
+│  my-nextui-app
+│
+◇  Select a package manager (Enter to select)
+│  ● npm
+│  ○ yarn
+│  ○ pnpm
+│  ○ bun
+│
+◇  Template created successfully!
+│
+◇  Next steps ───────╮
+│                    │
+│  cd my-nextui-app  │
+│  npm install       │
+│                    │
+├────────────────────╯
+│
+└  🚀 Get started with npm run dev
+```
+
+### Add Vite Template
+
+We've introduced a new Vite template pre-configured with NextUI v2 and TailwindCSS. The following command is to initialize a new Vite project named `my-vite-app`.
+
+```bash
+nextui init my-vite-app -t vite
+```
+
+### Package Manager Flag
+
+We've introduced a new flag `-p` (or `--package`) to init command to allow users to choose the package manager to use for the new project. By default, `npm` is used. For example, the following command will initialize a new NextUI project with the app template named my-nextui-app using pnpm package manager.
+
+```bash
+nextui init my-nextui-app -t app -p pnpm
+```
+
+### no-cache Flag
+
+We've introduced a new flag `--no-cache` to allow users to disable the cache. By default, the data will be cached for 30 mins after the first request. It is useful when the data is cached, and you wish to upgrade to the new version just released after the first request. In this way, you can run the following command
+
+```bash
+nextui --no-cache upgrade
+```
+
+### Upgrade Version Output
+
+You can now run the upgrade command and see the summary version of the package you are upgrading to.
+
+![image](https://github.com/nextui-org/nextui-cli/assets/96854855/2a5945dd-5187-4e20-81b8-4136e9791dde)
+
+### Upgrade And Remove Select View Optimization
+
+The disabled option(s) will be displayed in the bottom of the list.
+
+![image](https://github.com/nextui-org/nextui-cli/assets/96854855/c7ddf9e4-3054-4bf1-b8e3-dc2f6226091a)
+
+### Doctor Command add peerDependencies check
+
+The `doctor` command now checks for peerDependencies and displays the incorrect peerDependencies, relation: [nextui-org/nextui#2954](https://github.com/nextui-org/nextui/issues/2954).
+
+<Spacer y={4} />
+
+## React Aria Packages Upgrades
+
+We've upgraded and fixed React Aria packages dependencies across our components. This update focuses on enhancing accessibility, ensuring better compatibility with the latest versions of React Aria, and resolving previously reported bugs.
+
+<Spacer y={4} />
+
+## Breaking Changes
+
+### Export improved `cn` utility
+
+> If you are using it from `@nextui-org/react`, no changes are required.
+
+The new `cn` utility exported from the `@nextui-org/theme` package includes `tailwind-merge` to avoid conflicts between tailwindcss classes overrides and includes the config for NextUI custom classes.
+
+If you are using the `cn` utility from the `@nextui-org/system`, 
+
+```diff-tsx
+-import {cn} from "@nextui-org/system"
+```
+
+or `@nextui-org/system-rsc` package,
+
+```diff-tsx
+-import {cn} from "@nextui-org/system-rsc"
+```
+
+you need to update the import as follows:
+
+```diff-tsx
++ import {cn} from "@nextui-org/theme"
+```
+
+<Spacer y={4} />
+
+
+## Other Changes
+
+**Bug Fixes**:
+
+- Fixed popover-based focus behaviours. [PR](https://github.com/nextui-org/nextui/pull/2889) - [@wingkwong](https://github.com/wingkwong)
+- Fixed missing ref to input wrapper. [PR](https://github.com/nextui-org/nextui/pull/3008) - [@wingkwong](https://github.com/wingkwong)
+- Fixed react-hook-form uncontrolled switch component. [PR](https://github.com/nextui-org/nextui/pull/3008) - [@wingkwong](https://github.com/wingkwong)
+- Fixed focus on the first item when pressing Space / Enter key on dropdown menu open. [PR](https://github.com/nextui-org/nextui/pull/2970) - [@wingkwong](https://github.com/wingkwong)
+- Fixed inputting spaces in textarea inside a Table row. [PR](https://github.com/nextui-org/nextui/pull/3020) - [@wingkwong](https://github.com/wingkwong)
+- Fixed incorrect tailwind classnames. [PR](https://github.com/nextui-org/nextui/pull/3018) - [@wingkwong](https://github.com/wingkwong)
+- Fixed onSelectionChange can handle number [PR](https://github.com/nextui-org/nextui/pull/2937) - [@ryo-manba](https://github.com/ryo-manba)
+- Fixed update type definition to prevent primitive values as items [PR](https://github.com/nextui-org/nextui/pull/2938) - [@ryo-manba](https://github.com/ryo-manba)
+- Fixed display placeholder text when unselected for controlled. [PR](https://github.com/nextui-org/nextui/pull/3081) - [@ryo-manba](https://github.com/ryo-manba)
+- Fixed the inert attribute in `CalendarMonth` and `CalendarPicker`. [PR](https://github.com/nextui-org/nextui/pull/3054) - [@ShrinidhiUpadhyaya](https://github.com/ShrinidhiUpadhyaya)
+- Fixed hiding of unavailable dates in RangeCalendar. [PR](https://github.com/nextui-org/nextui/pull/3054) - [@ShrinidhiUpadhyaya](https://github.com/ShrinidhiUpadhyaya)
+- Fixed calendar header controlled state on DatePicker. [PR](https://github.com/nextui-org/nextui/pull/2845) - [@chirokas](https://github.com/chirokas)
+- Fixed 'Tap to click' behavior on macOS for Accordion and Tab. [PR](https://github.com/nextui-org/nextui/pull/2725) - [@ericfabreu](https://github.com/ericfabreu)
+- Fixed incorrect margin on labels for RTL required inputs. [PR](https://github.com/nextui-org/nextui/pull/2781) - [@mrbadri](https://github.com/mrbadri)
+- Fixed a type error in the onKeyDown event handler for the menu component. [PR](https://github.com/nextui-org/nextui/pull/3064) - [@Gaic4o](https://github.com/Gaic4o)
+
+**Improvements**
+
+- Added `destroyInactiveTabPanel` prop for Tabs component. [PR](https://github.com/nextui-org/nextui/pull/2973) - [@wingkwong](https://github.com/wingkwong)
+- Added pointer-events-none to skeleton base. [PR](https://github.com/nextui-org/nextui/pull/2972) - [@wingkwong](https://github.com/wingkwong)
+- Revised isInvalid input styles. [PR](https://github.com/nextui-org/nextui/pull/3010) - [@wingkwong](https://github.com/wingkwong)
+- Revised slider styles. [PR](https://github.com/nextui-org/nextui/pull/2883) - [@wingkwong](https://github.com/wingkwong)
+- Removed unnecessary origin-bottom in button. [PR](https://github.com/nextui-org/nextui/pull/2990) - [@wingkwong](https://github.com/wingkwong)
+- Set overflow visible after skeleton loaded. [PR](https://github.com/nextui-org/nextui/pull/2986) - [@wingkwong](https://github.com/wingkwong)
+- Kept date picker style consistent for different variants. [PR](https://github.com/nextui-org/nextui/pull/2901) - [@wingkwong](https://github.com/wingkwong)
+- Calculated the correct value on mark click. [PR](https://github.com/nextui-org/nextui/pull/3017) - [@wingkwong](https://github.com/wingkwong)
+- Removed scrolling display during month change animation. [PR](https://github.com/nextui-org/nextui/pull/2949) - [@novsource](https://github.com/novsource)
+- Added the correct peerDep version [PR](https://github.com/nextui-org/nextui/pull/3014) - [@winchesHe](https://github.com/winchesHe)
+- Added missing export of TableRowProps type. [PR](https://github.com/nextui-org/nextui/pull/2866) - [@sapkra](https://github.com/sapkra)
+- Changed validationBehavior from native to aria by default, with the option to change via props. [PR](https://github.com/nextui-org/nextui/pull/2987) - [@ryo-manba](https://github.com/ryo-manba)
+- Made the VisuallyHidden elementType as span when the default parent element accepts only phrasing elements. [PR](https://github.com/nextui-org/nextui/pull/3013) - [@kosmotema](https://github.com/kosmotema)
+- Refactored the useScrollPosition hook to improve performance and stability by using useCallback for the handler function and useRef for throttleTimeout. [PR](https://github.com/nextui-org/nextui/pull/3049) - [@Gaic4o](https://github.com/Gaic4o)
+
+**Documentation**:
+- Updated documentation to reflect the new features and changes in the components, API references, and CLI.
+
+Special thanks to NextUI Team members [@kuri-sun](https://github.com/kuri-sun), [@ryo-manba](https://github.com/ryo-manba), 
+[@sudongyuer](https://github.com/sudongyuer), [@winchesHe](https://github.com/winchesHe), [@wingkwong](https://github.com/wingkwong), 
+[@tianenpang](https://github.com/tianenpang), [@smultar](https://github.com/smultar) and contributors for their contributions to this release.
+
+For a full list of changes, please refer to the [release notes](https://github.com/nextui-org/nextui/releases/tag/%40nextui-org%2Freact%402.4.0).
+
+<Spacer y={6} />
+
+Thanks for reading and happy coding! 🚀
+
+---
+
+## Community
+
+We're excited to see the community adopt NextUI, raise issues, and provide feedback.
+Whether it's a feature request, bug report, or a project to showcase, please get involved!
+
+<Community />
+
+## Contributing
+
+PR's on NextUI are always welcome, please see our [contribution guidelines](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.md) to learn how you can contribute to this project.

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">

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>

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>

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>

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>

apps/docs/content/components/date-input/description.ts

@@ -7,7 +7,7 @@ export default function App() {
       <DateInput 
         label={"Birth date"} 
         placeholderValue={new CalendarDate(1995, 11, 6)} 
-        description={"Thiis is my birth date."}
+        description={"This is my birth date."}
       />
     </div>
   );

apps/docs/content/components/date-input/readonly.ts

@@ -1,5 +1,5 @@
 const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
+import {CalendarDate, parseDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-input/required.ts

@@ -1,5 +1,5 @@
 const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
+import {CalendarDate, parseDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-input/start-end-content.ts

@@ -55,7 +55,7 @@ export default function App() {
 
 const react = {
   "/App.jsx": App,
-  "/MailIcon.jsx": CalendarIcon,
+  "/CalendarIcon.jsx": CalendarIcon,
 };
 
 export default {

apps/docs/content/components/date-input/time-zones.ts

@@ -1,5 +1,5 @@
-const AppTs = `import {DateInput} from "@nextui-org/react";
-import {parseZonedDateTime} from "@internationalized/date";
+const App = `import {DateInput} from "@nextui-org/react";
+import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
   return (
@@ -19,7 +19,7 @@ export default function App() {
 }`;
 
 const react = {
-  "/App.tsx": AppTs,
+  "/App.jsx": App,
 };
 
 export default {

apps/docs/content/components/date-input/variants.ts

@@ -1,4 +1,5 @@
 const App = `import {DateInput} from "@nextui-org/react";
+import {CalendarDate} from "@internationalized/date";
 
 export default function App() {
   const variants = ["flat", "bordered", "underlined", "faded"];

apps/docs/content/components/date-picker/description.ts

@@ -1,5 +1,4 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/disabled.ts

@@ -1,5 +1,4 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/error-message.ts

@@ -1,5 +1,4 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/min-and-max-date.ts

@@ -1,5 +1,5 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {getLocalTimeZone, parseDate, today} from "@internationalized/date";
+import {getLocalTimeZone, today} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/preset.ts

@@ -1,6 +1,6 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-import {now, useLocale, startOfWeek, startOfMonth, useDateFormatter, getLocalTimeZone} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
+const App = `import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react";
+import {startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
   let defaultDate = today(getLocalTimeZone());
@@ -91,9 +91,9 @@ export default function App() {
   );
 }`;
 
-const AppTs = `import {DatePicker} from "@nextui-org/react";
-import {DateValue, now, useLocale, startOfWeek, startOfMonth, useDateFormatter, getLocalTimeZone} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
+const AppTs = `import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react";
+import {DateValue, startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
   let defaultDate = today(getLocalTimeZone());

apps/docs/content/components/date-picker/readonly.ts

@@ -1,5 +1,4 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/required.ts

@@ -1,5 +1,4 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/time-zones.ts

@@ -1,5 +1,5 @@
-const AppTs = `import {DatePicker} from "@nextui-org/react";
-import {parseZonedDateTime} from "@internationalized/date";
+const App = `import {DatePicker} from "@nextui-org/react";
+import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
   return (
@@ -21,7 +21,7 @@ export default function App() {
 }`;
 
 const react = {
-  "/App.tsx": AppTs,
+  "/App.jsx": App,
 };
 
 export default {

apps/docs/content/components/date-picker/with-time-field.ts

@@ -1,4 +1,5 @@
 const App = `import {DatePicker} from "@nextui-org/react";
+import {now, getLocalTimeZone} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-range-picker/controlled.ts

@@ -1,5 +1,5 @@
 const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
+import {parseDate, getLocalTimeZone} from "@internationalized/date";
 import {useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
@@ -40,7 +40,7 @@ export default function App() {
 }`;
 
 const AppTs = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
+import {parseDate, getLocalTimeZone} from "@internationalized/date";
 import {useDateFormatter} from "@react-aria/i18n";
 import {RangeValue} from "@react-types/shared";
 import {DateValue} from "@react-types/datepicker";

apps/docs/content/components/date-range-picker/time-zones.ts

@@ -1,4 +1,4 @@
-const AppTs = `import {DateRangePicker} from "@nextui-org/react";
+const App = `import {DateRangePicker} from "@nextui-org/react";
 import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
@@ -9,6 +9,7 @@ export default function App() {
           start: parseZonedDateTime("2024-04-01T00:45[America/Los_Angeles]"),
           end: parseZonedDateTime("2024-04-14T11:15[America/Los_Angeles]"),
         }}
+        label="Stay duration"
         labelPlacement="outside"
       />
       <DateRangePicker
@@ -16,14 +17,15 @@ export default function App() {
           start: parseAbsoluteToLocal("2024-04-01T07:45:00Z"),
           end: parseAbsoluteToLocal("2024-04-14T19:15:00Z"),
         }}
+        label="Stay duration"
         labelPlacement="outside"
       />
-  </div>
+    </div>
   );
 }`;
 
 const react = {
-  "/App.tsx": AppTs,
+  "/App.jsx": App,
 };
 
 export default {

apps/docs/content/components/date-range-picker/with-time-field.ts

@@ -1,4 +1,6 @@
 const App = `import {DateRangePicker} from "@nextui-org/react";
+import {parseZonedDateTime} from "@internationalized/date";
+
 export default function App() {
   return (
     <div className="w-full max-w-xl flex flex-row gap-4">

apps/docs/content/components/input/custom-styles.ts

@@ -52,8 +52,8 @@ export default function App() {
             "backdrop-saturate-200",
             "hover:bg-default-200/70",
             "dark:hover:bg-default/70",
-            "group-data-[focused=true]:bg-default-200/50",
-            "dark:group-data-[focused=true]:bg-default/60",
+            "group-data-[focus=true]:bg-default-200/50",
+            "dark:group-data-[focus=true]:bg-default/60",
             "!cursor-text",
           ],
         }}

apps/docs/content/components/input/regex-validation.ts

@@ -19,7 +19,7 @@ export default function App() {
       variant="bordered"
       isInvalid={isInvalid}
       color={isInvalid ? "danger" : "success"}
-      errorMessage={isInvalid && "Please enter a valid email"}
+      errorMessage="Please enter a valid email"
       onValueChange={setValue}
       className="max-w-xs"
     />

apps/docs/content/components/popover/placements.ts

@@ -31,7 +31,7 @@ export default function App() {
         <Popover key={placement} placement={placement} color="secondary">
           <PopoverTrigger>
             <Button color="secondary" variant="flat" className="capitalize">
-              {placement?.replace("-", " ")}
+              {placement.replace("-", " ")}
             </Button>
           </PopoverTrigger>
           {content}

apps/docs/content/components/select/colors.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -51,7 +39,7 @@ export default function App() {
           className="max-w-xs"
         >
           {animals.map((animal) => (
-            <SelectItem key={animal.value} value={animal.value}>
+            <SelectItem key={animal.key}>
               {animal.label}
             </SelectItem>
           ))}

apps/docs/content/components/select/custom-selector-icon.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const SelectorIcon = `export const SelectorIcon = (props) => (
@@ -62,7 +50,7 @@ export default function App() {
       selectorIcon={<SelectorIcon />}
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

apps/docs/content/components/select/description.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -39,7 +27,7 @@ export default function App() {
       className="max-w-xs"
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

apps/docs/content/components/select/disabled-items.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -38,7 +26,7 @@ export default function App() {
       className="max-w-xs"
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

apps/docs/content/components/select/disabled.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -39,7 +27,7 @@ export default function App() {
       className="max-w-xs"
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

apps/docs/content/components/select/dynamic.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -37,7 +25,7 @@ export default function App() {
       placeholder="Select an animal"
       className="max-w-xs"
     >
-      {(animal) => <SelectItem key={animal.value}>{animal.label}</SelectItem>}
+      {(animal) => <SelectItem>{animal.label}</SelectItem>}
     </Select>
   );
 }`;

apps/docs/content/components/select/error-message.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -49,7 +37,7 @@ export default function App() {
       onClose={() => setTouched(true)}
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

apps/docs/content/components/select/label-placements.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -48,7 +36,7 @@ export default function App() {
               className="max-w-xs"
             >
               {animals.map((animal) => (
-                <SelectItem key={animal.value} value={animal.value}>
+                <SelectItem key={animal.key}>
                   {animal.label}
                 </SelectItem>
               ))}
@@ -67,7 +55,7 @@ export default function App() {
               className="max-w-xs"
             >
               {animals.map((animal) => (
-                <SelectItem key={animal.value} value={animal.value}>
+                <SelectItem key={animal.key}>
                   {animal.label}
                 </SelectItem>
               ))}

apps/docs/content/components/select/multiple-controlled-onchange.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -47,7 +35,7 @@ export default function App() {
         onChange={handleSelectionChange}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}
@@ -78,7 +66,7 @@ export default function App() {
         onChange={handleSelectionChange}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}

apps/docs/content/components/select/multiple-controlled.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -43,7 +31,7 @@ export default function App() {
         onSelectionChange={setValues}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}
@@ -70,7 +58,7 @@ export default function App() {
         onSelectionChange={setValues}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}

apps/docs/content/components/select/multiple.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -38,7 +26,7 @@ export default function App() {
       className="max-w-xs"
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

apps/docs/content/components/select/open-state.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem, Button} from "@nextui-org/react";
@@ -43,7 +31,7 @@ export default function App() {
         className="max-w-xs"
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}

apps/docs/content/components/select/radius.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -50,7 +38,7 @@ export default function App() {
           className="max-w-[45%]"
         >
           {animals.map((animal) => (
-            <SelectItem key={animal.value} value={animal.value}>
+            <SelectItem key={animal.key}>
               {animal.label}
             </SelectItem>
           ))}

apps/docs/content/components/select/required.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -39,7 +27,7 @@ export default function App() {
       className="max-w-xs"
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

apps/docs/content/components/select/single-controlled-onchange.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -47,7 +35,7 @@ export default function App() {
         onChange={handleSelectionChange}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}
@@ -78,7 +66,7 @@ export default function App() {
         onChange={handleSelectionChange}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}

apps/docs/content/components/select/single-controlled.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react";
@@ -43,7 +31,7 @@ export default function App() {
         onSelectionChange={setValue}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}
@@ -70,7 +58,7 @@ export default function App() {
         onSelectionChange={setValue}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}

apps/docs/content/components/select/sizes.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -42,7 +30,7 @@ export default function App() {
             className="max-w-xs" 
           >
             {animals.map((animal) => (
-              <SelectItem key={animal.value} value={animal.value}>
+              <SelectItem key={animal.key}>
                 {animal.label}
               </SelectItem>
             ))}
@@ -54,7 +42,7 @@ export default function App() {
             className="max-w-xs"
           >
             {animals.map((animal) => (
-              <SelectItem key={animal.value} value={animal.value}>
+              <SelectItem key={animal.key}>
                 {animal.label}
               </SelectItem>
             ))}

apps/docs/content/components/select/start-content.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const PetIcon = `export const PetIcon = (props) => (
@@ -67,20 +55,19 @@ import {animals} from "./data";
 export default function App() {
   return (
     <Select
+      className="max-w-xs"
+      defaultSelectedKeys={["cat"]}
       label="Favorite Animal"
       placeholder="Select an animal"
       startContent={<PetIcon />}
-      defaultSelectedKeys={["cat"]}
-      className="max-w-xs"
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
-          {animal.label}
-        </SelectItem>
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
       ))}
     </Select>
   );
-}`;
+}
+`;
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/select/usage.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -37,7 +25,7 @@ export default function App() {
         className="max-w-xs" 
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}
@@ -48,7 +36,7 @@ export default function App() {
         className="max-w-xs"
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}

apps/docs/content/components/select/variants.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -42,7 +30,7 @@ export default function App() {
             className="max-w-xs" 
           >
             {animals.map((animal) => (
-              <SelectItem key={animal.value} value={animal.value}>
+              <SelectItem key={animal.key}>
                 {animal.label}
               </SelectItem>
             ))}
@@ -54,7 +42,7 @@ export default function App() {
             className="max-w-xs"
           >
             {animals.map((animal) => (
-              <SelectItem key={animal.value} value={animal.value}>
+              <SelectItem key={animal.key}>
                 {animal.label}
               </SelectItem>
             ))}

apps/docs/content/components/select/without-scroll-shadow.ts

@@ -1,29 +1,17 @@
 const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -41,7 +29,7 @@ export default function App() {
       }}
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

apps/docs/content/components/tabs/form.ts

@@ -69,7 +69,7 @@ export default function App() {
 const AppTs = `import {Tabs, Tab, Input, Link, Button, Card, CardBody, CardHeader} from "@nextui-org/react";
 
 export default function App() {
-  const [selected, setSelected] = React.useState<string | number>("login");
+  const [selected, setSelected] = React.useState<React.Key>("login");
 
   return (
     <div className="flex flex-col w-full">

apps/docs/content/components/time-input/timezones.ts

@@ -1,5 +1,5 @@
 const App = `import {TimeInput} from "@nextui-org/react";
-import {Time, parseZonedDateTime} from "@internationalized/date";
+import {Time, parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/docs/api-references/cli-api.mdx

@@ -28,6 +28,7 @@ Usage: nextui [command]
 
 Options:
   -v, --version  Show the version number
+  --no-cache     Disable cache, by default data will be cached for 30m after the first request
   -h, --help     Display help for commands
 
 Commands:
@@ -51,6 +52,7 @@ nextui init [projectName] [options]
 ### Options
 
 - `-t --template [string]` The template to use for the new project e.g. app, pages
+- `-p --package [string]` The package manager to use for the new project (default: `npm`)
 
 ### Example
 
@@ -58,6 +60,39 @@ nextui init [projectName] [options]
 nextui init my-nextui-app -t app
 ```
 
+output:
+
+```codeBlock bash
+NextUI CLI v0.2.1
+
+┌  Create a new project
+│
+◇  Select a template (Enter to select)
+│  ● App (A Next.js 14 with app directory template pre-configured with NextUI (v2) and Tailwind CSS.)
+│  ○ Pages (A Next.js 14 with pages directory template pre-configured with NextUI (v2) and Tailwind CSS.)
+│  ○ Vite (A Vite template pre-configured with NextUI (v2) and Tailwind CSS.)
+│
+◇  New project name (Enter to skip with default name)
+│  my-nextui-app
+│
+◇  Select a package manager (Enter to select)
+│  ● npm
+│  ○ yarn
+│  ○ pnpm
+│  ○ bun
+│
+◇  Template created successfully!
+│
+◇  Next steps ───────╮
+│                    │
+│  cd my-nextui-app  │
+│  npm install       │
+│                    │
+├────────────────────╯
+│
+└  🚀 Get started with npm run dev
+```
+
 ## add
 
 > 1. Auto add the missing required `dependencies` to your project
@@ -79,7 +114,6 @@ nextui add [components...] [options]
 - `--prettier` [boolean] Add prettier format in the add content which required installed prettier - (default: false)
 - `--addApp` [boolean] Add App.tsx file content which required provider (default: `false`)
 
-
 ### Example
 
 Without setting a specific component, the `add` command will show a list of available components.
@@ -91,27 +125,22 @@ nextui add
 Output:
 
 ```codeBlock bash
-NextUI CLI v0.1.2
+NextUI CLI v0.2.1
 
-? Which components would you like to add? › - Space to select. Return to submit
-Instructions:
-    ↑/↓: Highlight option
-    ←/→/[space]: Toggle selection
-    [a,b,c]/delete: Filter choices
-    enter/return: Complete answer
+? Which components would you like to add? › - Space to select. Return to submit 
 
 Filtered results for: Enter something to filter
 
-◉  accordion
-◯  autocomplete
-◯  avatar
-◯  badge
-◯  breadcrumbs
-◯  button
-◯  card
-◯  checkbox
-◯  chip
-◯  code
+◯   accordion
+◯   autocomplete
+◯   avatar
+◯   badge
+◯   breadcrumbs
+◯   button
+◯   calendar
+◯   card
+◯   checkbox
+◯ ↓ chip
 ```
 
 If you want to add a specific component, you can specify the component name.
@@ -123,7 +152,7 @@ nextui add button input
 Output:
 
 ```bash
-NextUI CLI v0.1.2
+NextUI CLI v0.2.1
 
 Adding the required dependencies: @nextui-org/button
 
@@ -142,7 +171,6 @@ Tailwind CSS settings have been updated in: /project-path/tailwind.config.js
 ✅ Components added successfully
 ```
 
-
 ## upgrade
 
 Upgrade the NextUI components to the latest version.
@@ -157,27 +185,33 @@ nextui upgrade [components...] [options]
 - `-a --all` [boolean] Upgrade all the NextUI components (default: `false`).
 - `-h, --help` Display help for commands.
 
-
 ### Example
 
 ```codeBlock bash
 nextui upgrade button
 ```
 
-
 Output:
 
 ```bash
-NextUI CLI v0.1.2
+NextUI CLI v0.2.1
+
+╭───────────────────────── Component ─────────────────────────╮
+│  @nextui-org/button              ^2.0.11  ->  ^2.0.31       │
+╰─────────────────────────────────────────────────────────────╯
+
+Required min version: @nextui-org/theme>=2.1.0, tailwindcss>=3.4.0
+╭───────────────────── PeerDependencies ─────────────────────╮
+│  @nextui-org/theme               2.0.1    ->  2.1.0        │
+│  tailwindcss                     ^3.2.3   ->  ^3.4.0       │
+╰────────────────────────────────────────────────────────────╯
+2 minor, 1 patch
 
-╭───────────────────────────────────────────────────────────╮
-│  @nextui-org/button              2.0.24  ->  2.0.27   │
-╰───────────────────────────────────────────────────────────╯
 ? Would you like to proceed with the upgrade? › - Use arrow-keys. Return to submit.
 ❯   Yes
     No
 
-pnpm add  @nextui-org/button@2.0.27
+pnpm add @nextui-org/button@2.0.31 @nextui-org/theme@2.1.0 tailwindcss@3.4.0
 Already up to date
 Progress: resolved 474, reused 465, downloaded 0, added 0, done
 Done in 2.9s
@@ -195,7 +229,6 @@ Remove NextUI components from your project.
   nextui remove [components...] [options]
   ```
 
-
 ### Options
 
 - `-p --packagePath` [string] The path to the package.json file.
@@ -213,7 +246,7 @@ nextui remove button
 Output:
 
 ```bash
-NextUI CLI v0.1.2
+NextUI CLI v0.2.1
 
 ❗️ Components slated for removal:
 ╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
@@ -249,8 +282,8 @@ nextui list [options]
 
 ### Options
 
-- `-p --packagePath` [string] The path to the package.json file.
-- `-c --current` List the current installed components.
+- `-p --packagePath` [string] The path to the package.json file
+- `-r --remote` List all components available remotely
 
 ### Example
 
@@ -261,7 +294,7 @@ nextui list
 Output:
 
 ```codeBlock bash
-NextUI CLI v0.1.2
+NextUI CLI v0.2.1
 
 Current installed components:
 
@@ -283,6 +316,7 @@ Diagnose problems in your project.
 > 2. Check whether the NextUI components `required dependencies are installed` in the project
 > 3. Check the required `tailwind.config.js` file and the content is correct
 > 4. Check `.npmrc` is correct when using `pnpm`
+> 5. Check `peerDependencies with required version` are installed in the project
 
 ```codeBlock bash
 nextui doctor [options]
@@ -310,7 +344,7 @@ Output:
 If there is a problem in your project, the `doctor` command will display the problem information.
 
 ```codeBlock bash
-NextUI CLI v0.1.2
+NextUI CLI v0.2.1
 
 NextUI CLI: ❌ Your project has 1 issue that require attention
 
@@ -322,7 +356,7 @@ Missing tailwind.config.(j|t)s file. To set up, visit: https://nextui.org/docs/g
 Otherwise, the `doctor` command will display the following message.
 
 ```codeBlock bash
-NextUI CLI v0.1.2
+NextUI CLI v0.2.1
 
 ✅ Your project has no detected issues.
 ```
@@ -348,7 +382,7 @@ nextui env
 Output:
 
 ```codeBlock bash
-NextUI CLI 0.1.0
+NextUI CLI 0.2.1
 
 Current installed components:
 

apps/docs/content/docs/api-references/nextui-provider.mdx

@@ -5,80 +5,176 @@ description: API References for NextUI Provider
 
 # NextUI Provider
 
+API reference for the `NextUIProvider`. 
+
 ------
 
-Here's the API reference for the `NextUIProvider`.
+## Import
 
-## Props
+<ImportTabs
+  commands={{
+    main: 'import {NextUIProvider} from "@nextui-org/react";',
+    individual: 'import {NextUIProvider} from "@nextui-org/system";',
+  }}
+/>
 
-### navigate
+## Usage
 
-`navigate` provides a client side router to all nested components such as Link, Menu, Tabs, Table, etc.
+```jsx
+import * as React from "react";
+import {NextUIProvider} from "@nextui-org/react";
 
-**type**: `((path: string) => void) | undefined`
-
-### locale
-
-The locale to apply to the children. The [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code for the locale. By default, It is `en-US`. 
-
-**type**: `string | undefined`
-
-### defaultDates
-
-The default dates range that can be selected in the calendar.
-
-**type**: `{ minDate?: CalendarDate | undefined; maxDate?: CalendarDate | undefined; }`
-
-- minDate
-
-    The minimum date that can be selected in the calendar.
-
-    **type**: `CalendarDate | undefined`
-
-    **default**: `new CalendarDate(1900, 1, 1)`
-
-- maxDate
-
-    The maximum date that can be selected in the calendar.
-
-    **type**: `CalendarDate | undefined`
-
-    **default**: `new CalendarDate(2099, 12, 31)`
-
-### createCalendar
-
-This function helps to reduce the bundle size by providing a custom calendar system.
-
-By default, this includes all calendar systems supported by `@internationalized/date`. However,
-if your application supports a more limited set of regions, or you know you will only be picking dates
-in a certain calendar system, you can reduce your bundle size by providing your own implementation
-of `createCalendar` that includes a subset of these Calendar implementations.
-
-For example, if your application only supports Gregorian dates, you could implement a `createCalendar`
-function like this:
-
-```tsx
-import {GregorianCalendar} from '@internationalized/date';
-
-function createCalendar(identifier) {
- switch (identifier) {
-   case 'gregory':
-     return new GregorianCalendar();
-   default:
-     throw new Error(`Unsupported calendar ${identifier}`);
- }
+function App() {
+  return (
+    <NextUIProvider>
+      <YourApplication />
+    </NextUIProvider>
+  );
 }
 ```
 
-This way, only GregorianCalendar is imported, and the other calendar implementations can be tree-shaken.
+## Props
 
-**type**: `((calendar: SupportedCalendars) => Calendar | null) | undefined`
+<Spacer y={6}/>
+
+`navigate`
+
+- **Description**: Provides a client side router to all nested components such as Link, Menu, Tabs, Table, etc.
+- **Type**: `((path: string) => void) | undefined`
+
+<Spacer y={2}/>
+
+`locale`
+
+- **Description**: The locale to apply to the children.
+- **Type**: `string | undefined`
+- **Default**: `en-US`
+
+
+Here's the supported locales. By default, It is `en-US`.
+
+```tsx
+const localeValues = [
+  'fr-FR', 'fr-CA', 'de-DE', 'en-US', 'en-GB', 'ja-JP',
+  'da-DK', 'nl-NL', 'fi-FI', 'it-IT', 'nb-NO', 'es-ES', 
+  'sv-SE', 'pt-BR', 'zh-CN', 'zh-TW', 'ko-KR', 'bg-BG', 
+  'hr-HR', 'cs-CZ', 'et-EE', 'hu-HU', 'lv-LV', 'lt-LT', 
+  'pl-PL', 'ro-RO', 'ru-RU', 'sr-SP', 'sk-SK', 'sl-SI', 
+  'tr-TR', 'uk-UA', 'ar-AE', 'ar-DZ', 'AR-EG', 'ar-SA', 
+  'el-GR', 'he-IL', 'fa-AF', 'am-ET', 'hi-IN', 'th-TH'
+];
+```
+
+Here's an example to set a Spanish locale.
+
+```tsx
+"use client";
+
+import {type ReactNode} from "react";
+import {NextUIProvider} from "@nextui-org/react";
+
+export function AppProvider(props: AppProviderProps) {
+  const {children, className} = props;
+
+  return (
+    <NextUIProvider locale="es-ES" className={className}>
+      {children}
+    </NextUIProvider>
+  );
+}
+
+interface AppProviderProps {
+  children: ReactNode;
+  className?: string;
+}
+```
+
+<Spacer y={2}/>
+
+`defaultDates`
+
+- **Description**: The default dates range that can be selected in the calendar.
+- **Type**: `{ minDate?: CalendarDate | undefined; maxDate?: CalendarDate | undefined; }`
+- **Default**: `{ minDate: new CalendarDate(1900, 1, 1), maxDate: new CalendarDate(2099, 12, 31) }`
+
+<Spacer y={2}/>
+
+`createCalendar`
+
+- **Description**: 
+    This function helps to reduce the bundle size by providing a custom calendar system.
+
+    By default, this includes all calendar systems supported by `@internationalized/date`. However,
+    if your application supports a more limited set of regions, or you know you will only be picking dates
+    in a certain calendar system, you can reduce your bundle size by providing your own implementation
+    of `createCalendar` that includes a subset of these Calendar implementations.
+
+    For example, if your application only supports Gregorian dates, you could implement a `createCalendar`
+    function like this:
+
+    ```tsx
+    import {GregorianCalendar} from '@internationalized/date';
+
+    function createCalendar(identifier) {
+    switch (identifier) {
+      case 'gregory':
+        return new GregorianCalendar();
+      default:
+        throw new Error(`Unsupported calendar ${identifier}`);
+    }
+    }
+    ```
+
+    This way, only GregorianCalendar is imported, and the other calendar implementations can be tree-shaken.
+
+- **Type**: `((calendar: SupportedCalendars) => Calendar | null) | undefined`
+
+<Spacer y={2}/>
+
+`disableAnimation`
+
+- **Description**: Disables animations globally. This will also avoid `framer-motion` features to be loaded in the bundle which can potentially reduce the bundle size.
+- **Type**: `boolean`
+- **Default**: `false`
+
+<Spacer y={2}/>
+
+`disableRipple`
+
+- **Description**: Disables ripple effect globally.
+- **Type**: `boolean`
+- **Default**: `false`
+
+<Spacer y={2}/>
+
+`skipFramerMotionAnimations`
+
+- **Description**:
+  Controls whether `framer-motion` animations are skipped within the application.
+  This property is automatically enabled (`true`) when the `disableAnimation` prop is set to `true`,
+  effectively skipping all `framer-motion` animations. To retain `framer-motion` animations while
+  using the `disableAnimation` prop for other purposes, set this to `false`. However, note that
+  animations in NextUI Components are still omitted if the `disableAnimation` prop is `true`.
+- **Type**: `boolean`
+- **Default**: Same as `disableAnimation`
+
+<Spacer y={2}/>
+
+`validationBehavior`
+
+- **Description**: Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, 
+or mark the field as required or invalid via ARIA.
+- **Type**: `native | aria`
+- **Default**: `aria`
+
+---
 
 ## Types
 
-### CalendarDate
+`CalendarDate`
 
-A [CalendarDate](https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html) represents a date without any time components in a specific calendar system from `@internationalized/date`. 
+- **Description**: A [CalendarDate](https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html) represents a date without any time components in a specific calendar system from `@internationalized/date`.
+- **Type**: `import {CalendarDate} from '@internationalized/date';`
 
 ### SupportedCalendars
 

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

@@ -13,13 +13,13 @@ Accordion display a list of high-level options that can expand/collapse to revea
 
 ---
 
-<CarbonAd />
 
 ## Installation
 
 <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",
@@ -219,21 +219,22 @@ Here's an example of how to customize the accordion styles:
 
 ### Accordion Item Props
 
-| Attribute                 | Type                                              | Description                                                                                           | Default |
-| ------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------- |
-| children                  | `ReactNode` \| `string`                           | The content of the component.                                                                         |         |
-| title                     | `ReactNode` \| `string`                           | The accordion item title.                                                                             |         |
-| subtitle                  | `ReactNode` \| `string`                           | The accordion item subtitle.                                                                          |         |
-| indicator                 | [IndicatorProps](#accordion-item-indicator-props) | The accordion item `expanded` indicator, usually an arrow icon.                                       |         |
-| startContent              | `ReactNode`                                       | The accordion item start content, usually an icon or avatar.                                          |         |
-| motionProps               | [MotionProps](#motion-props)                      | The props to modify the framer motion animation. Use the `variants` API to create your own animation. |         |
-| isCompact                 | `boolean`                                         | Whether the AccordionItem is compact.                                                                 | `false` |
-| isDisabled                | `boolean`                                         | The current disabled status.                                                                          | `false` |
-| keepContentMounted        | `boolean`                                         | Whether the AccordionItem content is kept mounted when closed.                                        | `false` |
-| hideIndicator             | `boolean`                                         | Whether the AccordionItem indicator is hidden.                                                        | `false` |
-| disableAnimation          | `boolean`                                         | Whether the AccordionItem animation is disabled.                                                      | `false` |
-| disableIndicatorAnimation | `boolean`                                         | Whether the AccordionItem indicator animation is disabled.                                            | `false` |
-| classNames                | [Classnames](#accordion-item-classnames)          | Allows to set custom class names for the accordion item slots.                                        | -       |
+| Attribute                 | Type                                              | Description                                                                                                                  | Default |
+|---------------------------|---------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------|---------|
+| children                  | `ReactNode` \| `string`                           | The content of the component.                                                                                                |         |
+| title                     | `ReactNode` \| `string`                           | The accordion item title.                                                                                                    |         |
+| subtitle                  | `ReactNode` \| `string`                           | The accordion item subtitle.                                                                                                 |         |
+| indicator                 | [IndicatorProps](#accordion-item-indicator-props) | The accordion item `expanded` indicator, usually an arrow icon.                                                              |         |
+| startContent              | `ReactNode`                                       | The accordion item start content, usually an icon or avatar.                                                                 |         |
+| motionProps               | [MotionProps](#motion-props)                      | The props to modify the framer motion animation. Use the `variants` API to create your own animation.                        |         |
+| isCompact                 | `boolean`                                         | Whether the AccordionItem is compact.                                                                                        | `false` |
+| isDisabled                | `boolean`                                         | The current disabled status.                                                                                                 | `false` |
+| keepContentMounted        | `boolean`                                         | Whether the AccordionItem content is kept mounted when closed.                                                               | `false` |
+| hideIndicator             | `boolean`                                         | Whether the AccordionItem indicator is hidden.                                                                               | `false` |
+| disableAnimation          | `boolean`                                         | Whether the AccordionItem animation is disabled.                                                                             | `false` |
+| disableIndicatorAnimation | `boolean`                                         | Whether the AccordionItem indicator animation is disabled.                                                                   | `false` |
+| HeadingComponent          | `React.ElementType`                               | Customizable heading tag for Web accessibility. Use headings to describe content and use them consistently and semantically. | `h2`    |
+| classNames                | [Classnames](#accordion-item-classnames)          | Allows to set custom class names for the accordion item slots.                                                               | -       |
 
 ### Accordion Item Events
 

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

@@ -13,13 +13,14 @@ An autocomplete combines a text input with a listbox, allowing users to filter a
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <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",
@@ -427,6 +428,7 @@ properties to customize the popover, listbox and input components.
 | disabledKeys                | `all` \| `React.Key[]`                                                                                                                | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.                                                       | -                        |
 | errorMessage                | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                                                 | An error message to display below the field.                                                                                                                  | -                        |
 | validate                    | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined`                              | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                           | -                        |
+| validationBehavior          | `native` \| `aria`                                                                                                                    | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`                   |
 | startContent                | `ReactNode`                                                                                                                           | Element to be rendered in the left side of the Autocomplete.                                                                                                  | -                        |
 | endContent                  | `ReactNode`                                                                                                                           | Element to be rendered in the right side of the Autocomplete.                                                                                                 | -                        |
 | autoFocus                   | `boolean`                                                                                                                             | Whether the Autocomplete should be focused on render.                                                                                                         | `false`                  |

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

@@ -14,13 +14,14 @@ The Avatar component is used to represent a user, and displays the profile pictu
 
 ---
 
-<CarbonAd/>
+
 
 ## Installation
 
 <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

@@ -9,17 +9,18 @@ import {badgeContent} from "@/content/components/badge";
 
 Badges are used as a small numerical value or status descriptor for UI elements.
 
-<ComponentLinks component="badge" rscCompatible />
+<ComponentLinks component="badge" />
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <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

@@ -13,13 +13,14 @@ Breadcrumbs display a hierarchy of links to the current page or resource in an a
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <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

@@ -13,13 +13,14 @@ Buttons allow users to perform actions and choose with a single tap.
 
 ---
 
-<CarbonAd/>
+
 
 ## Installation
 
 <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

@@ -13,21 +13,21 @@ A calendar consists of a grouping element containing one or more date grids (e.g
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <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",
-    bun: "bun add @nextui-org/calendar"
+    bun: "bun add @nextui-org/calendar",
   }}
 />
 
-
 ## Import
 
 <ImportTabs
@@ -209,6 +209,7 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 | visibleMonths           | `number`                                                                                                                                                                                                                                                                                                                                                                                      | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop                                    | `1`                 |
 | focusedValue            | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | Controls the currently focused date within the calendar.                                                                                                                                  | -                   |
 | defaultFocusedValue     | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The date that is focused when the calendar first mounts (uncountrolled).                                                                                                                  | -                   |
+| calendarWidth           | `number` \| `string`                                                                                                                                                                                                                                                                                                                                                                          | The width to be applied to the calendar component. This value is multiplied by the `visibleMonths` number to determine the total width of the calendar.                                   | `256`               |
 | pageBehavior            | `single` \| `visible`                                                                                                                                                                                                                                                                                                                                                                         | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.                                       | `visible`           |
 | weekdayStyle            | `narrow` \|`short` \| `long` \| `undefined`                                                                                                                                                                                                                                                                                                                                                   | The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name.                                                                    | `narrow`            |
 | showMonthAndYearPickers | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the label should be crossed out.                                                                                                                                                  | `false`             |
@@ -225,10 +226,9 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 | isDateUnavailable       | `(date: DateValue) => boolean`                                                                                                                                                                                                                                                                                                                                                                | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                                                  | -                   |
 | createCalendar          | `(calendar: SupportedCalendars) => Calendar \| null`                                                                                                                                                                                                                                                                                                                                          | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all<br> calendars` |
 | errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                                                                                                                                                                                                                                                             | An error message for the field.                                                                                                                                                           | -                   |
-| validate                | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                                                                                                                                                                                                     | Validate time input values when committing (e.g. on blur), and return error messages for invalid values.                                                                                  | -                   |
 | hideDisabledDates       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to hide the disabled or invalid dates.                                                                                                                                            | `false`             |
 | disableAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to disable the animation of the calendar.                                                                                                                                         | `false`             |
-| classNames              | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots.                                                                                                                                  | -                   |
+| classNames              | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>`  | Allows to set custom class names for the calendar slots.                                                                                                                                  | -                   |
 
 ### Calendar Events
 

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

@@ -13,13 +13,14 @@ Card is a container for text, photos, and actions in the context of a single sub
 
 ---
 
-<CarbonAd/>
+
 
 ## Installation
 
 <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

@@ -13,13 +13,14 @@ A CheckboxGroup allows users to select one or more items from a list of choices.
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <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",
@@ -92,28 +93,29 @@ In case you need to customize the checkbox even further, you can use the `useChe
 
 ### Checkbox Group Props
 
-| Attribute        | Type                                                                        | Description                                                                                                            | Default    |
-| ---------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ---------- |
-| children         | `ReactNode[]` \| `ReactNode[]`                                              | The checkboxes items.                                                                                                  | -          |
-| orientation      | `vertical` \| `horizontal`                                                  | The axis the checkbox group items should align with.                                                                   | `vertical` |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkboxes.                                                                                           | `primary`  |
-| size             | `xs` \| `sm` \| `md` \| `lg` \| `xl`                                        | The size of the checkboxes.                                                                                            | `md`       |
-| radius           | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full`          | The radius of the checkboxes.                                                                                          | `md`       |
-| name             | `string`                                                                    | The name of the CheckboxGroup, used when submitting an HTML form.                                                      | -          |
-| label            | `string`                                                                    | The label of the CheckboxGroup.                                                                                        | -          |
-| value            | `string[]`                                                                  | The current selected values. (controlled).                                                                             | -          |
-| lineThrough      | `boolean`                                                                   | Whether the checkboxes label should be crossed out.                                                                    | `false`    |
-| defaultValue     | `string[]`                                                                  | The default selected values. (uncontrolled).                                                                           | -          |
-| isInvalid        | `boolean`                                                                   | Whether the checkbox group is invalid.                                                                                 | `false`    |
-| validationState  | `valid` \| `invalid`                                                        | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | -          |
-| description      | `ReactNode`                                                                 | The checkbox group description.                                                                                        | -          |
-| errorMessage     | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                       | The checkbox group error message.                                                                                      | -          |
-| validate         | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined`          | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                    | -          |
-| isDisabled       | `boolean`                                                                   | Whether the checkbox group is disabled.                                                                                | `false`    |
-| isRequired       | `boolean`                                                                   | Whether user checkboxes are required on the input before form submission.                                              | `false`    |
-| isReadOnly       | `boolean`                                                                   | Whether the checkboxes can be selected but not changed by the user.                                                    | -          |
-| disableAnimation | `boolean`                                                                   | Whether the animation should be disabled.                                                                              | `false`    |
-| classNames       | `Record<"base"｜ "wrapper"｜ "label", string>`                              | Allows to set custom class names for the checkbox group slots.                                                         | -          |
+| Attribute          | Type                                                                        | Description                                                                                                                                                   | Default    |
+| ------------------ | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| children           | `ReactNode[]` \| `ReactNode[]`                                              | The checkboxes items.                                                                                                                                         | -          |
+| orientation        | `vertical` \| `horizontal`                                                  | The axis the checkbox group items should align with.                                                                                                          | `vertical` |
+| color              | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkboxes.                                                                                                                                  | `primary`  |
+| size               | `xs` \| `sm` \| `md` \| `lg` \| `xl`                                        | The size of the checkboxes.                                                                                                                                   | `md`       |
+| radius             | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full`          | The radius of the checkboxes.                                                                                                                                 | `md`       |
+| name               | `string`                                                                    | The name of the CheckboxGroup, used when submitting an HTML form.                                                                                             | -          |
+| label              | `string`                                                                    | The label of the CheckboxGroup.                                                                                                                               | -          |
+| value              | `string[]`                                                                  | The current selected values. (controlled).                                                                                                                    | -          |
+| lineThrough        | `boolean`                                                                   | Whether the checkboxes label should be crossed out.                                                                                                           | `false`    |
+| defaultValue       | `string[]`                                                                  | The default selected values. (uncontrolled).                                                                                                                  | -          |
+| isInvalid          | `boolean`                                                                   | Whether the checkbox group is invalid.                                                                                                                        | `false`    |
+| validationState    | `valid` \| `invalid`                                                        | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                        | -          |
+| description        | `ReactNode`                                                                 | The checkbox group description.                                                                                                                               | -          |
+| errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                       | The checkbox group error message.                                                                                                                             | -          |
+| validate           | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined`          | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                           | -          |
+| validationBehavior | `native` \| `aria`                                                          | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`     |
+| isDisabled         | `boolean`                                                                   | Whether the checkbox group is disabled.                                                                                                                       | `false`    |
+| isRequired         | `boolean`                                                                   | Whether user checkboxes are required on the input before form submission.                                                                                     | `false`    |
+| isReadOnly         | `boolean`                                                                   | Whether the checkboxes can be selected but not changed by the user.                                                                                           | -          |
+| disableAnimation   | `boolean`                                                                   | Whether the animation should be disabled.                                                                                                                     | `false`    |
+| classNames         | `Record<"base"｜ "wrapper"｜ "label", string>`                              | Allows to set custom class names for the checkbox group slots.                                                                                                | -          |
 
 ### Checkbox Group Events
 

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

@@ -13,13 +13,14 @@ Checkboxes allow users to select multiple items from a list of individual items,
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <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

@@ -13,13 +13,14 @@ A Chip is a small block of essential information that represent an input, attrib
 
 ---
 
-<CarbonAd/>
+
 
 ## Installation
 
 <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

@@ -13,13 +13,14 @@ Circular progress indicators are utilized to indicate an undetermined wait perio
 
 ---
 
-<CarbonAd/>
+
 
 ## Installation
 
 <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

@@ -13,13 +13,14 @@ Code is a component used to display inline code.
 
 ---
 
-<CarbonAd/>
+
 
 ## Installation
 
 <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

@@ -14,13 +14,14 @@ Each part of a date value is displayed in an individually editable segment.
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <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",
@@ -283,39 +284,40 @@ import {parseZonedDateTime} from "@internationalized/date";
 
 ### DateInput Props
 
-| Attribute               | Type                                                                                                                              | Description                                                                                                                          | Default   |
-| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | --------- |
-| label                   | `ReactNode`                                                                                                                       | The content to display as the label.                                                                                                 | -         |
-| value                   | `DateValue`                                                                                                                       | The current value of the date input (controlled).                                                                                    | -         |
-| defaultValue            | `DateValue`                                                                                                                       | The default value of the date input (uncontrolled).                                                                                  | -         |
-| variant                 | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                   | The variant of the date input.                                                                                                       | `flat`    |
-| color                   | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                       | The color of the date input.                                                                                                         | `default` |
-| size                    | `sm` \| `md` \| `lg`                                                                                                              | The size of the date input.                                                                                                          | `md`      |
-| radius                  | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                          | The radius of the date input.                                                                                                        | -         |
-| placeholderValue        | `DateValue`                                                                                                                       | A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults current date at midnight. | -         |
-| minValue                | `DateValue`                                                                                                                       | The minimum allowed date that a user may select.                                                                                     | -         |
-| maxValue                | `DateValue`                                                                                                                       | The maximum allowed date that a user may select.                                                                                     | -         |
-| locale                  | `string`                                                                                                                          | The locale to display and edit the value according to.                                                                               | -         |
-| description             | `ReactNode`                                                                                                                       | A description for the date input. Provides a hint such as specific requirements for what to choose.                                  | -         |
-| errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                 | An error message for the date input.                                                                                                 | -         |
-| startContent            | `ReactNode`                                                                                                                       | Element to be rendered in the left side of the date input.                                                                           | -         |
-| endContent              | `ReactNode`                                                                                                                       | Element to be rendered in the right side of the date input.                                                                          | -         |
-| labelPlacement          | `inside` \| `outside` \| `outside-left`                                                                                           | The position of the label.                                                                                                           | `inside`  |
-| isRequired              | `boolean`                                                                                                                         | Whether user input is required on the input before form submission.                                                                  | `false`   |
-| isReadOnly              | `boolean`                                                                                                                         | Whether the input can be selected but not changed by the user.                                                                       | -         |
-| isDisabled              | `boolean`                                                                                                                         | Whether the input is disabled.                                                                                                       | `false`   |
-| isInvalid               | `boolean`                                                                                                                         | Whether the input value is invalid.                                                                                                  | `false`   |
-| inputRef                | `ReactRef<HTMLInputElement \| null>`                                                                                              | A ref for the hidden input element for HTML form submission.                                                                         | -         |
-| validate                | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined`                         | Validate input values when committing (e.g., on blur), and return error messages for invalid values.                                 | -         |
-| createCalendar          | `(name: string) => Calendar`                                                                                                      | A function that creates a Calendar object for a given calendar identifier.                                                           | -         |
-| isDateUnavailable       | `(date: DateValue) => boolean`                                                                                                    | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                             | -         |
-| autoFocus               | `boolean`                                                                                                                         | Whether the element should receive focus on render.                                                                                  | `false`   |
-| hourCycle               | `12` \| `24`                                                                                                                      | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale.                                        | -         |
-| granularity             | `day` \| `hour` \| `minute` \| `second`                                                                                           | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates.                                        | -         |
-| hideTimeZone            | `boolean`                                                                                                                         | Whether to hide the time zone abbreviation.                                                                                          | `false`   |
-| shouldForceLeadingZeros | `boolean`                                                                                                                         | Whether to always show leading zeros in the month, day, and hour fields.                                                             | `true`    |
-| disableAnimation        | `boolean`                                                                                                                         | Whether to disable animations.                                                                                                       | `false`   |
-| classNames              | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "input"｜ "helperWrapper"｜ "description"｜ "errorMessage", string>` | Allows to set custom class names for the date input slots.                                                                           | -         |
+| Attribute               | Type                                                                                                                              | Description                                                                                                                                                   | Default   |
+| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
+| label                   | `ReactNode`                                                                                                                       | The content to display as the label.                                                                                                                          | -         |
+| value                   | `DateValue`                                                                                                                       | The current value of the date input (controlled).                                                                                                             | -         |
+| defaultValue            | `DateValue`                                                                                                                       | The default value of the date input (uncontrolled).                                                                                                           | -         |
+| variant                 | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                   | The variant of the date input.                                                                                                                                | `flat`    |
+| color                   | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                       | The color of the date input.                                                                                                                                  | `default` |
+| size                    | `sm` \| `md` \| `lg`                                                                                                              | The size of the date input.                                                                                                                                   | `md`      |
+| radius                  | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                          | The radius of the date input.                                                                                                                                 | -         |
+| placeholderValue        | `DateValue`                                                                                                                       | A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults current date at midnight.                          | -         |
+| minValue                | `DateValue`                                                                                                                       | The minimum allowed date that a user may select.                                                                                                              | -         |
+| maxValue                | `DateValue`                                                                                                                       | The maximum allowed date that a user may select.                                                                                                              | -         |
+| locale                  | `string`                                                                                                                          | The locale to display and edit the value according to.                                                                                                        | -         |
+| description             | `ReactNode`                                                                                                                       | A description for the date input. Provides a hint such as specific requirements for what to choose.                                                           | -         |
+| errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                 | An error message for the date input.                                                                                                                          | -         |
+| validate                | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                              | Validate input values when committing (e.g., on blur), and return error messages for invalid values.                                                          | -         |
+| validationBehavior      | `native` \| `aria`                                                                                                                | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`    |
+| startContent            | `ReactNode`                                                                                                                       | Element to be rendered in the left side of the date input.                                                                                                    | -         |
+| endContent              | `ReactNode`                                                                                                                       | Element to be rendered in the right side of the date input.                                                                                                   | -         |
+| labelPlacement          | `inside` \| `outside` \| `outside-left`                                                                                           | The position of the label.                                                                                                                                    | `inside`  |
+| isRequired              | `boolean`                                                                                                                         | Whether user input is required on the input before form submission.                                                                                           | `false`   |
+| isReadOnly              | `boolean`                                                                                                                         | Whether the input can be selected but not changed by the user.                                                                                                | -         |
+| isDisabled              | `boolean`                                                                                                                         | Whether the input is disabled.                                                                                                                                | `false`   |
+| isInvalid               | `boolean`                                                                                                                         | Whether the input value is invalid.                                                                                                                           | `false`   |
+| inputRef                | `ReactRef<HTMLInputElement \| null>`                                                                                              | A ref for the hidden input element for HTML form submission.                                                                                                  | -         |
+| createCalendar          | `(name: string) => Calendar`                                                                                                      | A function that creates a Calendar object for a given calendar identifier.                                                                                    | -         |
+| isDateUnavailable       | `(date: DateValue) => boolean`                                                                                                    | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                      | -         |
+| autoFocus               | `boolean`                                                                                                                         | Whether the element should receive focus on render.                                                                                                           | `false`   |
+| hourCycle               | `12` \| `24`                                                                                                                      | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale.                                                                 | -         |
+| granularity             | `day` \| `hour` \| `minute` \| `second`                                                                                           | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates.                                                                 | -         |
+| hideTimeZone            | `boolean`                                                                                                                         | Whether to hide the time zone abbreviation.                                                                                                                   | `false`   |
+| shouldForceLeadingZeros | `boolean`                                                                                                                         | Whether to always show leading zeros in the month, day, and hour fields.                                                                                      | `true`    |
+| disableAnimation        | `boolean`                                                                                                                         | Whether to disable animations.                                                                                                                                | `false`   |
+| classNames              | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "input"｜ "helperWrapper"｜ "description"｜ "errorMessage", string>`   | Allows to set custom class names for the date input slots.                                                                                                    | -         |
 
 ### DateInput Events
 

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

@@ -13,13 +13,14 @@ DatePickers combine a DateInput and a Calendar popover to allow users to enter o
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <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",
@@ -300,46 +301,47 @@ import {I18nProvider} from "@react-aria/i18n";
 
 ### DatePicker Props
 
-| Attribute               | Type                                                                                                                                                     | Description                                                                                                                                             | Default                                                              |
-| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
-| label                   | `ReactNode`                                                                                                                                              | The content to display as the label.                                                                                                                    | -                                                                    |
-| value                   | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null`                                                                         | The current value of the date-picker (controlled).                                                                                                      | -                                                                    |
-| variant                 | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                          | The variant of the date input.                                                                                                                          | `flat`                                                               |
-| color                   | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                              | The color of the date input.                                                                                                                            | `default`                                                            |
-| size                    | `sm` \| `md` \| `lg`                                                                                                                                     | The size of the date input.                                                                                                                             | `md`                                                                 |
-| radius                  | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                                 | The radius of the date input.                                                                                                                           | -                                                                    |
-| defaultValue            | `string` \| undefined                                                                                                                                    | The default value of the date-picker (uncontrolled).                                                                                                    | -                                                                    |
-| placeholderValue        | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null`                                                                         | The placeholder of the date-picker.                                                                                                                     | -                                                                    |
-| description             | `ReactNode`                                                                                                                                              | A description for the date-picker. Provides a hint such as specific requirements for what to choose.                                                    | -                                                                    |
-| errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                        | An error message for the date input.                                                                                                                    | -                                                                    |
-| startContent            | `ReactNode`                                                                                                                                              | Element to be rendered in the left side of the date-picker.                                                                                             | -                                                                    |
-| endContent              | `ReactNode`                                                                                                                                              | Element to be rendered in the right side of the date-picker.                                                                                            | -                                                                    |
-| labelPlacement          | `inside` \| `outside` \| `outside-left`                                                                                                                  | The position of the label.                                                                                                                              | `inside`                                                             |
-| isRequired              | `boolean`                                                                                                                                                | Whether user input is required on the date-picker before form submission.                                                                               | `false`                                                              |
-| isReadOnly              | `boolean`                                                                                                                                                | Whether the date-picker can be selected but not changed by the user.                                                                                    |                                                                      |
-| isDisabled              | `boolean`                                                                                                                                                | Whether the date-picker is disabled.                                                                                                                    | `false`                                                              |
-| isInvalid               | `boolean`                                                                                                                                                | Whether the date-picker is invalid.                                                                                                                     | `false`                                                              |
-| visibleMonths           | `number` \| `undefined`                                                                                                                                  | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop. | `1`                                                                  |
-| selectorIcon            | `ReactNode`                                                                                                                                              | The icon to toggle the date picker popover. Usually a calendar icon.                                                                                    |                                                                      |
-| pageBehavior            | `PageBehavior` \| `undefined`                                                                                                                            | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.     | `visible`                                                            |
-| visibleMonths           | `number` \| `undefined`                                                                                                                                  | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop. | `1`                                                                  |
-| calendarWidth           | `number`                                                                                                                                                 | The width to be applied to the calendar component.                                                                                                      | `256`                                                                |
-| CalendarTopContent      | `ReactNode`                                                                                                                                              | Top content to be rendered in the calendar component.                                                                                                   |                                                                      |
-| validate                | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined`                                                | Validate input values when committing (e.g., on blur), and return error messages for invalid values.                                                    | -                                                                    |
-| isDateUnavailable       | `((date: DateValue) => boolean)` \| `undefined`                                                                                                          | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                |
-| autoFocus               | `boolean`                                                                                                                                                | Whether the element should receive focus on render.                                                                                                     | `false`                                                              |
-| hourCycle               | `12` \| `24`                                                                                                                                             | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale.                                                           | -                                                                    |
-| granularity             | `day` \| `hour` \| `minute` \| `second`                                                                                                                  | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates.                                                           | -                                                                    |
-| hideTimeZone            | `boolean`                                                                                                                                                | Whether to hide the time zone abbreviation.                                                                                                             | `false`                                                              |
-| shouldForceLeadingZeros | `boolean`                                                                                                                                                | Whether to always show leading zeros in the month, day, and hour fields.                                                                                | `true`                                                               |
-| CalendarBottomContent   | `ReactNode`                                                                                                                                              | Bottom content to be rendered in the calendar component.                                                                                                |                                                                      |
-| showMonthAndYearPickers | `boolean` \| `undefined`                                                                                                                                 | Whether the calendar should show month and year pickers.                                                                                                | false                                                                |
-| popoverProps            | `PopoverProps` \| `undefined`                                                                                                                            | Props to be passed to the popover component.                                                                                                            | `{ placement: "bottom", triggerScaleOnOpen: false, offset: 13 }`     |
-| selectorButtonProps     | `ButtonProps` \| `undefined`                                                                                                                             | Props to be passed to the selector button component.                                                                                                    | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
-| calendarProps           | `CalendarProps` \| `undefined`                                                                                                                           | Props to be passed to the selector button component.                                                                                                    | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
-| timeInputProps          | `TimeInputProps`                                                                                                                                         | Props to be passed to the time input component.                                                                                                         | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
-| disableAnimation        | `boolean`                                                                                                                                                | Whether to disable all animations in the date picker. Including the DateInput, Button, Calendar, and Popover.                                           | `false`                                                              |
-| classNames              | `Record<"base" \| "selectorButton" \| "selectorIcon" \| "popoverContent" \| "calendar" \| "calendarContent" \| "timeInputLabel" \| "timeInput", string>` | Allows to set custom class names for the date-picker slots.                                                                                             | -                                                                    |
+| Attribute               | Type                                                                                                                                                     | Description                                                                                                                                                   | Default                                                              |
+| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------       | -------------------------------------------------------------------- |
+| label                   | `ReactNode`                                                                                                                                              | The content to display as the label.                                                                                                                          | -                                                                    |
+| value                   | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null`                                                                         | The current value of the date-picker (controlled).                                                                                                            | -                                                                    |
+| variant                 | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                          | The variant of the date input.                                                                                                                                | `flat`                                                               |
+| color                   | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                              | The color of the date input.                                                                                                                                  | `default`                                                            |
+| size                    | `sm` \| `md` \| `lg`                                                                                                                                     | The size of the date input.                                                                                                                                   | `md`                                                                 |
+| radius                  | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                                 | The radius of the date input.                                                                                                                                 | -                                                                    |
+| defaultValue            | `string` \| undefined                                                                                                                                    | The default value of the date-picker (uncontrolled).                                                                                                          | -                                                                    |
+| placeholderValue        | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null`                                                                         | The placeholder of the date-picker.                                                                                                                           | -                                                                    |
+| description             | `ReactNode`                                                                                                                                              | A description for the date-picker. Provides a hint such as specific requirements for what to choose.                                                          | -                                                                    |
+| errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                        | An error message for the date input.                                                                                                                          | -                                                                    |
+| validate                | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                                                     | Validate input values when committing (e.g., on blur), and return error messages for invalid values.                                                          | -                                                                    |
+| validationBehavior      | `native` \| `aria`                                                                                                                                       | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`                                                               |
+| startContent            | `ReactNode`                                                                                                                                              | Element to be rendered in the left side of the date-picker.                                                                                                   | -                                                                    |
+| endContent              | `ReactNode`                                                                                                                                              | Element to be rendered in the right side of the date-picker.                                                                                                  | -                                                                    |
+| labelPlacement          | `inside` \| `outside` \| `outside-left`                                                                                                                  | The position of the label.                                                                                                                                    | `inside`                                                             |
+| isRequired              | `boolean`                                                                                                                                                | Whether user input is required on the date-picker before form submission.                                                                                     | `false`                                                              |
+| isReadOnly              | `boolean`                                                                                                                                                | Whether the date-picker can be selected but not changed by the user.                                                                                          |                                                                      |
+| isDisabled              | `boolean`                                                                                                                                                | Whether the date-picker is disabled.                                                                                                                          | `false`                                                              |
+| isInvalid               | `boolean`                                                                                                                                                | Whether the date-picker is invalid.                                                                                                                           | `false`                                                              |
+| visibleMonths           | `number` \| `undefined`                                                                                                                                  | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop.       | `1`                                                                  |
+| selectorIcon            | `ReactNode`                                                                                                                                              | The icon to toggle the date picker popover. Usually a calendar icon.                                                                                          |                                                                      |
+| pageBehavior            | `PageBehavior` \| `undefined`                                                                                                                            | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.           | `visible`                                                            |
+| visibleMonths           | `number` \| `undefined`                                                                                                                                  | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop.       | `1`                                                                  |
+| calendarWidth           | `number`                                                                                                                                                 | The width to be applied to the calendar component.                                                                                                            | `256`                                                                |
+| CalendarTopContent      | `ReactNode`                                                                                                                                              | Top content to be rendered in the calendar component.                                                                                                         |                                                                      |
+| isDateUnavailable       | `((date: DateValue) => boolean)` \| `undefined`                                                                                                          | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                      |
+| autoFocus               | `boolean`                                                                                                                                                | Whether the element should receive focus on render.                                                                                                           | `false`                                                              |
+| hourCycle               | `12` \| `24`                                                                                                                                             | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale.                                                                 | -                                                                    |
+| granularity             | `day` \| `hour` \| `minute` \| `second`                                                                                                                  | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates.                                                                 | -                                                                    |
+| hideTimeZone            | `boolean`                                                                                                                                                | Whether to hide the time zone abbreviation.                                                                                                                   | `false`                                                              |
+| shouldForceLeadingZeros | `boolean`                                                                                                                                                | Whether to always show leading zeros in the month, day, and hour fields.                                                                                      | `true`                                                               |
+| CalendarBottomContent   | `ReactNode`                                                                                                                                              | Bottom content to be rendered in the calendar component.                                                                                                      |                                                                      |
+| showMonthAndYearPickers | `boolean` \| `undefined`                                                                                                                                 | Whether the calendar should show month and year pickers.                                                                                                      | false                                                                |
+| popoverProps            | `PopoverProps` \| `undefined`                                                                                                                            | Props to be passed to the popover component.                                                                                                                  | `{ placement: "bottom", triggerScaleOnOpen: false, offset: 13 }`     |
+| selectorButtonProps     | `ButtonProps` \| `undefined`                                                                                                                             | Props to be passed to the selector button component.                                                                                                          | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
+| calendarProps           | `CalendarProps` \| `undefined`                                                                                                                           | Props to be passed to the selector button component.                                                                                                          | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
+| timeInputProps          | `TimeInputProps`                                                                                                                                         | Props to be passed to the time input component.                                                                                                               | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
+| disableAnimation        | `boolean`                                                                                                                                                | Whether to disable all animations in the date picker. Including the DateInput, Button, Calendar, and Popover.                                                 | `false`                                                              |
+| classNames              | `Record<"base" \| "selectorButton" \| "selectorIcon" \| "popoverContent" \| "calendar" \| "calendarContent" \| "timeInputLabel" \| "timeInput", string>` | Allows to set custom class names for the date-picker slots.                                                                                                   | -                                                                    |
 
 ### DatePicker Events
 

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

@@ -13,13 +13,14 @@ Date Range Picker combines two DateInputs and a RangeCalendar popover to allow u
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <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",
@@ -340,7 +341,7 @@ import {I18nProvider} from "@react-aria/i18n";
 ### DateRangePicker Props
 
 | Attribute                 | Type                                                                                                                                                     | Description                                                                                                                                                             | Default                                                              |
-| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
+|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------|
 | label                     | `ReactNode`                                                                                                                                              | The content to display as the label.                                                                                                                                    | -                                                                    |
 | value                     | `RangeValue<CalendarDate \| CalendarDateTime \| ZonedDateTime>` \| `undefined` \| `null`                                                                 | The current value of the date-range-picker (controlled).                                                                                                                | -                                                                    |
 | variant                   | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                          | The variant of the date input.                                                                                                                                          | `flat`                                                               |
@@ -353,6 +354,8 @@ import {I18nProvider} from "@react-aria/i18n";
 | placeholderValue          | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null`                                                                         | The placeholder of the date-range-picker.                                                                                                                               | -                                                                    |
 | description               | `ReactNode`                                                                                                                                              | A description for the date-range-picker. Provides a hint such as specific requirements for what to choose.                                                              | -                                                                    |
 | errorMessage              | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                        | An error message for the date input.                                                                                                                                    | -                                                                    |
+| validate                  | `(value: RangeValue<MappedDateValue<DateValue>>) => ValidationError ｜ true ｜ null ｜ undefined`                                                         | Validate input values when committing (e.g., on blur), and return error messages for invalid values.                                                                    | -                                                                    |
+| validationBehavior        | `native` \| `aria`                                                                                                                                       | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.          | `aria`                                                               |
 | startContent              | `ReactNode`                                                                                                                                              | Element to be rendered in the left side of the date-range-picker.                                                                                                       | -                                                                    |
 | endContent                | `ReactNode`                                                                                                                                              | Element to be rendered in the right side of the date-range-picker.                                                                                                      | -                                                                    |
 | startName                 | `string`                                                                                                                                                 | The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname) | -                                                                    |
@@ -366,8 +369,7 @@ import {I18nProvider} from "@react-aria/i18n";
 | isInvalid                 | `boolean`                                                                                                                                                | Whether the date-range-picker is invalid.                                                                                                                               | `false`                                                              |
 | selectorIcon              | `ReactNode`                                                                                                                                              | The icon to toggle the date picker popover. Usually a calendar icon.                                                                                                    |                                                                      |
 | pageBehavior              | `single` \| `visible`                                                                                                                                    | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.                     | `visible`                                                            |
-| validate                  | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined`                                                | Validate input values when committing (e.g., on blur), and return error messages for invalid values.                                                                    | -                                                                    |
-| visibleMonths             | `number`                                                                                                                                                 | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop.                 | `1`                                                                  |
+| visibleMonths             | `number`                                                                                                                                                 | The number of months to display at once. Up to 3 months are supported.                                                                                                  | `1`                                                                  |
 | autoFocus                 | `boolean`                                                                                                                                                | Whether the element should receive focus on render.                                                                                                                     | `false`                                                              |
 | hourCycle                 | `12` \| `24`                                                                                                                                             | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale.                                                                           | -                                                                    |
 | granularity               | `day` \| `hour` \| `minute` \| `second`                                                                                                                  | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates.                                                                           | -                                                                    |

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

@@ -13,13 +13,14 @@ Divider is a component that separates content in a page.
 
 ---
 
-<CarbonAd/>
+
 
 ## Installation
 
 <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

@@ -13,13 +13,14 @@ Displays a list of actions or options that a user can choose.
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <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

@@ -13,13 +13,14 @@ The Image component is used to display images with support for fallback.
 
 ---
 
-<CarbonAd/>
+
 
 ## Installation
 
 <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

@@ -13,13 +13,14 @@ Input is a component that allows users to enter text. It can be used to get user
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <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",
@@ -107,7 +108,7 @@ You can add a description to the input by passing the `description` property.
 
 ### With Error Message
 
-You can combine the `isInvalid` and `errorMessage` properties to show an invalid input.
+You can combine the `isInvalid` and `errorMessage` properties to show an invalid input. `errorMessage` is only shown when `isInvalid` is set to `true`.
 
 <CodeDemo title="With Error Message" files={inputContent.errorMessage} />
 
@@ -193,33 +194,34 @@ In case you need to customize the input even further, you can use the `useInput`
 
 ### Input Props
 
-| Attribute        | Type                                                                                                                                                                   | Description                                                                                                           | Default   |
-| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | --------- |
-| children         | `ReactNode`                                                                                                                                                            | The content of the input.                                                                                             | -         |
-| variant          | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                                        | The variant of the input.                                                                                             | `flat`    |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                            | The color of the input.                                                                                               | `default` |
-| size             | `sm` \| `md` \| `lg`                                                                                                                                                   | The size of the input.                                                                                                | `md`      |
-| radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                                               | The radius of the input.                                                                                              | -         |
-| label            | `ReactNode`                                                                                                                                                            | The content to display as the label.                                                                                  | -         |
-| value            | `string`                                                                                                                                                               | The current value of the input (controlled).                                                                          | -         |
-| defaultValue     | `string`                                                                                                                                                               | The default value of the input (uncontrolled).                                                                        | -         |
-| placeholder      | `string`                                                                                                                                                               | The placeholder of the input.                                                                                         | -         |
-| description      | `ReactNode`                                                                                                                                                            | A description for the input. Provides a hint such as specific requirements for what to choose.                        | -         |
-| errorMessage     | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                                                                                  | An error message for the input.                                                                                       | -         |
-| validate         | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                       | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                   | -         |
-| startContent     | `ReactNode`                                                                                                                                                            | Element to be rendered in the left side of the input.                                                                 | -         |
-| endContent       | `ReactNode`                                                                                                                                                            | Element to be rendered in the right side of the input.                                                                | -         |
-| labelPlacement   | `inside` \| `outside` \| `outside-left`                                                                                                                                | The position of the label.                                                                                            | `inside`  |
-| fullWidth        | `boolean`                                                                                                                                                              | Whether the input should take up the width of its parent.                                                             | `true`    |
-| isClearable      | `boolean`                                                                                                                                                              | Whether the input should have a clear button.                                                                         | `false`   |
-| isRequired       | `boolean`                                                                                                                                                              | Whether user input is required on the input before form submission.                                                   | `false`   |
-| isReadOnly       | `boolean`                                                                                                                                                              | Whether the input can be selected but not changed by the user.                                                        |           |
-| isDisabled       | `boolean`                                                                                                                                                              | Whether the input is disabled.                                                                                        | `false`   |
-| isInvalid        | `boolean`                                                                                                                                                              | Whether the input is invalid.                                                                                         | `false`   |
-| baseRef          | `RefObject<HTMLDivElement>`                                                                                                                                            | The ref to the base element.                                                                                          | -         |
-| validationState  | `valid` \| `invalid`                                                                                                                                                   | Whether the input should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | -         |
-| disableAnimation | `boolean`                                                                                                                                                              | Whether the input should be animated.                                                                                 | `false`   |
-| classNames       | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "mainWrapper" ｜ "input" ｜ "clearButton" ｜ "helperWrapper" ｜ "description" ｜ "errorMessage", string>`    | Allows to set custom class names for the Input slots.                                                              | -         |
+| Attribute          | Type                                                                                                                                                                   | Description                                                                                                                                                   | Default   |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
+| children           | `ReactNode`                                                                                                                                                            | The content of the input.                                                                                                                                     | -         |
+| variant            | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                                        | The variant of the input.                                                                                                                                     | `flat`    |
+| color              | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                            | The color of the input.                                                                                                                                       | `default` |
+| size               | `sm` \| `md` \| `lg`                                                                                                                                                   | The size of the input.                                                                                                                                        | `md`      |
+| radius             | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                                               | The radius of the input.                                                                                                                                      | -         |
+| label              | `ReactNode`                                                                                                                                                            | The content to display as the label.                                                                                                                          | -         |
+| value              | `string`                                                                                                                                                               | The current value of the input (controlled).                                                                                                                  | -         |
+| defaultValue       | `string`                                                                                                                                                               | The default value of the input (uncontrolled).                                                                                                                | -         |
+| placeholder        | `string`                                                                                                                                                               | The placeholder of the input.                                                                                                                                 | -         |
+| description        | `ReactNode`                                                                                                                                                            | A description for the input. Provides a hint such as specific requirements for what to choose.                                                                | -         |
+| errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                                                                                  | An error message for the input. It is only shown when `isInvalid` is set to `true`                                                                            | -         |
+| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                       | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                           | -         |
+| validationBehavior | `native` \| `aria`                                                                                                                                                     | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`    |
+| startContent       | `ReactNode`                                                                                                                                                            | Element to be rendered in the left side of the input.                                                                                                         | -         |
+| endContent         | `ReactNode`                                                                                                                                                            | Element to be rendered in the right side of the input.                                                                                                        | -         |
+| labelPlacement     | `inside` \| `outside` \| `outside-left`                                                                                                                                | The position of the label.                                                                                                                                    | `inside`  |
+| fullWidth          | `boolean`                                                                                                                                                              | Whether the input should take up the width of its parent.                                                                                                     | `true`    |
+| isClearable        | `boolean`                                                                                                                                                              | Whether the input should have a clear button.                                                                                                                 | `false`   |
+| isRequired         | `boolean`                                                                                                                                                              | Whether user input is required on the input before form submission.                                                                                           | `false`   |
+| isReadOnly         | `boolean`                                                                                                                                                              | Whether the input can be selected but not changed by the user.                                                                                                |           |
+| isDisabled         | `boolean`                                                                                                                                                              | Whether the input is disabled.                                                                                                                                | `false`   |
+| isInvalid          | `boolean`                                                                                                                                                              | Whether the input is invalid.                                                                                                                                 | `false`   |
+| baseRef            | `RefObject<HTMLDivElement>`                                                                                                                                            | The ref to the base element.                                                                                                                                  | -         |
+| validationState    | `valid` \| `invalid`                                                                                                                                                   | Whether the input should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                         | -         |
+| disableAnimation   | `boolean`                                                                                                                                                              | Whether the input should be animated.                                                                                                                         | `false`   |
+| classNames         | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "mainWrapper" ｜ "input" ｜ "clearButton" ｜ "helperWrapper" ｜ "description" ｜ "errorMessage", string>`    | Allows to set custom class names for the Input slots.                                                                                                         | -         |
 
 ### Input Events
 

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

@@ -13,13 +13,14 @@ Keyboard key is a component to display which key or combination of keys performs
 
 ---
 
-<CarbonAd/>
+
 
 ## Installation
 
 <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

@@ -13,13 +13,14 @@ Links allow users to click their way from page to page. This component is styled
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <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

@@ -13,13 +13,14 @@ A listbox displays a list of options and allows a user to select one or more of
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <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

@@ -13,13 +13,14 @@ Displays a dialog with a custom content that requires attention or provides addi
 
 ---
 
-<CarbonAd/>
+
 
 ## Installation
 
 <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",

apps/docs/content/docs/components/navbar.mdx

@@ -13,13 +13,14 @@ A responsive navigation header positioned on top side of your page that includes
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
-    cli: "nextui add navbar",
+    cli: "npx nextui-cli@latest add navbar",
     npm: "npm install @nextui-org/navbar",
     yarn: "yarn add @nextui-org/navbar",
     pnpm: "pnpm add @nextui-org/navbar",

apps/docs/content/docs/components/pagination.mdx

@@ -13,13 +13,14 @@ The Pagination component allows you to display active page and navigate between
 
 ---
 
-<CarbonAd/>
+
 
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
-    cli: "nextui add pagination",
+    cli: "npx nextui-cli@latest add pagination",
     npm: "npm install @nextui-org/pagination",
     yarn: "yarn add @nextui-org/pagination",
     pnpm: "pnpm add @nextui-org/pagination",

apps/docs/content/docs/components/popover.mdx

@@ -14,13 +14,14 @@ additional rich content on top of something.
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
-    cli: "nextui add popover",
+    cli: "npx nextui-cli@latest add popover",
     npm: "npm install @nextui-org/popover",
     yarn: "yarn add @nextui-org/popover",
     pnpm: "pnpm add @nextui-org/popover",

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

@@ -13,13 +13,14 @@ The Progress component allows you to view the progress of any activity.
 
 ---
 
-<CarbonAd/>
+
 
 ## Installation
 
 <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/radio-group.mdx

@@ -13,13 +13,14 @@ Radio Group allow users to select a single option from a list of mutually exclus
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
-    cli: "nextui add radio",
+    cli: "npx nextui-cli@latest add radio",
     npm: "npm install @nextui-org/radio",
     yarn: "yarn add @nextui-org/radio",
     pnpm: "pnpm add @nextui-org/radio",
@@ -146,26 +147,27 @@ In case you need to customize the radio group even further, you can use the `use
 
 ### RadioGroup Props
 
-| Attribute        | Type                                                                        | Description                                                                                                                                                       | Default    |
-| ---------------- | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| children         | `ReactNode` \| `ReactNode[]`                                                | The list of radio elements.                                                                                                                                       | -          |
-| label            | `ReactNode`                                                                 | The label of the radio group.                                                                                                                                     | -          |
-| size             | `sm` \| `md` \| `lg`                                                        | The size of the radios.                                                                                                                                           | `md`       |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the radios.                                                                                                                                          | `primary`  |
-| orientation      | `horizontal` \| `vertical`                                                  | The orientation of the radio group.                                                                                                                               | `vertical` |
-| name             | `string`                                                                    | The name of the RadioGroup, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons). | -          |
-| value            | `string[]`                                                                  | The current selected value. (controlled).                                                                                                                         | -          |
-| defaultValue     | `string[]`                                                                  | The default selected value. (uncontrolled).                                                                                                                       | -          |
-| description      | `ReactNode`                                                                 | Radio group description .                                                                                                                                         | -          |
-| errorMessage     | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                       | Radio group error message.                                                                                                                                        | -          |
-| validate         | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`            | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                               | -          |
-| isDisabled       | `boolean`                                                                   | Whether the radio group is disabled.                                                                                                                              | `false`    |
-| isRequired       | `boolean`                                                                   | Whether user checkboxes are required on the input before form submission.                                                                                         | `false`    |
-| isReadOnly       | `boolean`                                                                   | Whether the checkboxes can be selected but not changed by the user.                                                                                               | -          |
-| isInvalid        | `boolean`                                                                   | Whether the radio group is invalid.                                                                                                                               | `false`    |
-| validationState  | `valid` \| `invalid`                                                        | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                            | `false`    |
-| disableAnimation | `boolean`                                                                   | Whether the animation should be disabled.                                                                                                                         | `false`    |
-| classNames       | `Record<"base"｜ "wrapper"｜ "label", string>`                              | Allows to set custom class names for the radio group slots.                                                                                                       | -          |
+| Attribute          | Type                                                                        | Description                                                                                                                                                                                                             | Default    |
+| ------------------ | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| children           | `ReactNode` \| `ReactNode[]`                                                | The list of radio elements.                                                                                                                                                                                             | -          |
+| label              | `ReactNode`                                                                 | The label of the radio group.                                                                                                                                                                                           | -          |
+| size               | `sm` \| `md` \| `lg`                                                        | The size of the radios.                                                                                                                                                                                                 | `md`       |
+| color              | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the radios.                                                                                                                                                                                                | `primary`  |
+| orientation        | `horizontal` \| `vertical`                                                  | The orientation of the radio group.                                                                                                                                                                                     | `vertical` |
+| name               | `string`                                                                    | The name of the RadioGroup, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons).                                                       | -          |
+| value              | `string[]`                                                                  | The current selected value. (controlled).                                                                                                                                                                               | -          |
+| defaultValue       | `string[]`                                                                  | The default selected value. (uncontrolled).                                                                                                                                                                             | -          |
+| description        | `ReactNode`                                                                 | Radio group description .                                                                                                                                                                                               | -          |
+| errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                       | Radio group error message.                                                                                                                                                                                              | -          |
+| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`            | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                                                                                     | -          |
+| validationBehavior | `native` \| `aria`                                                                                                                    | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`     |
+| isDisabled         | `boolean`                                                                   | Whether the radio group is disabled.                                                                                                                                                                                    | `false`    |
+| isRequired         | `boolean`                                                                   | Whether user checkboxes are required on the input before form submission.                                                                                                                                               | `false`    |
+| isReadOnly         | `boolean`                                                                   | Whether the checkboxes can be selected but not changed by the user.                                                                                                                                                     | -          |
+| isInvalid          | `boolean`                                                                   | Whether the radio group is invalid.                                                                                                                                                                                     | `false`    |
+| validationState    | `valid` \| `invalid`                                                        | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                                                                                  | `false`    |
+| disableAnimation   | `boolean`                                                                   | Whether the animation should be disabled.                                                                                                                                                                               | `false`    |
+| classNames         | `Record<"base"｜ "wrapper"｜ "label", string>`                              | Allows to set custom class names for the radio group slots.                                                                                                                                                             | -          |
 
 ### RadioGroup Events
 

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

@@ -13,17 +13,18 @@ A range calendar consists of a grouping element containing one or more date grid
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <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",
-    bun: "bun add @nextui-org/calendar"
+    bun: "bun add @nextui-org/calendar",
   }}
 />
 
@@ -200,37 +201,35 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 
 ### RangeCalendar Props
 
-| Attribute                 | Type                                                                                                                                                                                                                                                                                                                                                                                          | Description                                                                                                                                                                               | Default                           |     |
-| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | --- |
-| value                     | `RangeValue                                                                                                                                                                                                                                                                                                                                                                                   | null`                                                                                                                                                                                     | The current value (controlled).   | -   |
-| defaultValue              | `RangeValue                                                                                                                                                                                                                                                                                                                                                                                   | null`                                                                                                                                                                                     | The default value (uncontrolled). | -   |
-| minValue                  | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The minimum allowed date that a user may select.                                                                                                                                          | -                                 |     |
-| maxValue                  | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The maximum allowed date that a user may select.                                                                                                                                          | -                                 |     |
-| color                     | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                                                                                                                                                                                                                                                   | The color of the time input.                                                                                                                                                              | `default`                         |
-| visibleMonths             | `number`                                                                                                                                                                                                                                                                                                                                                                                      | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop                                    | `1`                               |     |
-| focusedValue              | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | Controls the currently focused date within the calendar.                                                                                                                                  | -                                 |     |
-| defaultFocusedValue       | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The date that is focused when the calendar first mounts (uncountrolled).                                                                                                                  | -                                 |     |
-| pageBehavior              | `PageBehavior`                                                                                                                                                                                                                                                                                                                                                                                | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.                                       | `visible`                         |     |
-| weekdayStyle              | `"narrow" \|"short" \| "long" \| undefined`                                                                                                                                                                                                                                                                                                                                                   | The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name.                                                                    | `narrow`                          |     |
-| allowsNonContiguousRanges | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.                                              | `false`                           |     |
-| showMonthAndYearPickers   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the label should be crossed out.                                                                                                                                                  | `false`                           |     |
-| isDisabled                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar is disabled.                                                                                                                                                         | `false`                           |     |
-| isReadOnly                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar value is immutable.                                                                                                                                                  | `false`                           |     |
-| isInvalid                 | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the current selection is invalid according to application logic.                                                                                                                  | -                                 |     |
-| autoFocus                 | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to automatically focus the calendar when it mounts.                                                                                                                               | `false`                           |     |
-| showHelper                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to show the description or error message.                                                                                                                                         | `false`                           |     |
-| showShadow                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to show the shadow in the selected dates.                                                                                                                                         | `false`                           |
-| isHeaderExpanded          | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar header is expanded. This is only available if the `showMonthAndYearPickers` prop is set to `true`.                                                                   | `false`                           |     |
-| isHeaderDefaultExpanded   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar header should be expanded by default.This is only available if the `showMonthAndYearPickers` prop is set to `true`.                                                  | `false`                           |     |
-| topContent                | `ReactNode`                                                                                                                                                                                                                                                                                                                                                                                   | Custom content to be included in the top of the calendar.                                                                                                                                 | -                                 |     |
-| bottomContent             | `ReactNode`                                                                                                                                                                                                                                                                                                                                                                                   | Custom content to be included in the bottom of the calendar.                                                                                                                              | -                                 |     |
-| isDateUnavailable         | `(date: DateValue) => boolean`                                                                                                                                                                                                                                                                                                                                                                | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                                                  | -                                 |     |
-| createCalendar            | `(calendar: SupportedCalendars) => Calendar \| null`                                                                                                                                                                                                                                                                                                                                          | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all<br> calendars`               |     |
-| errorMessage              | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                                                                                                                                                                                                                                                             | An error message for the field.                                                                                                                                                           | -                                 |
-| validate                  | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                                                                                                                                                                                                     | Validate time input values when committing (e.g. on blur), and return error messages for invalid values.                                                                                  | -                                 |
-| hideDisabledDates         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to hide the disabled or invalid dates.                                                                                                                                            | `false`                           |
-| disableAnimation          | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to disable the animation of the calendar.                                                                                                                                         | `false`                           |
-| classNames                | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots.                                                                                                                                  | -                                 |     |
+| Attribute                 | Type                                                                                                                                                                                                                                                                                                                                                                                          | Description                                                                                                                                                                               | Default                           |   |
+|---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|---|
+| value                     | `RangeValue                                                                                                                                                                                                                                                                                                                                                                                   | null`                                                                                                                                                                                     | The current value (controlled).   | - |
+| defaultValue              | `RangeValue                                                                                                                                                                                                                                                                                                                                                                                   | null`                                                                                                                                                                                     | The default value (uncontrolled). | - |
+| minValue                  | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The minimum allowed date that a user may select.                                                                                                                                          | -                                 |   |
+| maxValue                  | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The maximum allowed date that a user may select.                                                                                                                                          | -                                 |   |
+| color                     | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                                                                                                                                                                                                                                                   | The color of the time input.                                                                                                                                                              | `default`                         |   |
+| visibleMonths             | `number`                                                                                                                                                                                                                                                                                                                                                                                      | The number of months to display at once. Up to 3 months are supported.                                                                                                                    | `1`                               |   |
+| focusedValue              | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | Controls the currently focused date within the calendar.                                                                                                                                  | -                                 |   |
+| defaultFocusedValue       | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The date that is focused when the calendar first mounts (uncountrolled).                                                                                                                  | -                                 |   |
+| calendarWidth             | `number` \| `string`                                                                                                                                                                                                                                                                                                                                                                          | The width to be applied to the calendar component. This value is multiplied by the `visibleMonths` number to determine the total width of the calendar.                                   | `256`                             |   |
+| pageBehavior              | `PageBehavior`                                                                                                                                                                                                                                                                                                                                                                                | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.                                       | `visible`                         |   |
+| weekdayStyle              | `"narrow" \|"short" \| "long" \| undefined`                                                                                                                                                                                                                                                                                                                                                   | The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name.                                                                    | `narrow`                          |   |
+| allowsNonContiguousRanges | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.                                              | `false`                           |   |
+| isDisabled                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar is disabled.                                                                                                                                                         | `false`                           |   |
+| isReadOnly                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar value is immutable.                                                                                                                                                  | `false`                           |   |
+| isInvalid                 | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the current selection is invalid according to application logic.                                                                                                                  | -                                 |   |
+| autoFocus                 | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to automatically focus the calendar when it mounts.                                                                                                                               | `false`                           |   |
+| showHelper                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to show the description or error message.                                                                                                                                         | `false`                           |   |
+| showShadow                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to show the shadow in the selected dates.                                                                                                                                         | `false`                           |   |
+| topContent                | `ReactNode`                                                                                                                                                                                                                                                                                                                                                                                   | Custom content to be included in the top of the calendar.                                                                                                                                 | -                                 |   |
+| bottomContent             | `ReactNode`                                                                                                                                                                                                                                                                                                                                                                                   | Custom content to be included in the bottom of the calendar.                                                                                                                              | -                                 |   |
+| isDateUnavailable         | `(date: DateValue) => boolean`                                                                                                                                                                                                                                                                                                                                                                | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                                                  | -                                 |   |
+| createCalendar            | `(calendar: SupportedCalendars) => Calendar \| null`                                                                                                                                                                                                                                                                                                                                          | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all<br> calendars`               |   |
+| errorMessage              | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                                                                                                                                                                                                                                                             | An error message for the field.                                                                                                                                                           | -                                 |   |
+| validate                  | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                                                                                                                                                                                                     | Validate time input values when committing (e.g. on blur), and return error messages for invalid values.                                                                                  | -                                 |   |
+| hideDisabledDates         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to hide the disabled or invalid dates.                                                                                                                                            | `false`                           |   |
+| disableAnimation          | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to disable the animation of the calendar.                                                                                                                                         | `false`                           |   |
+| classNames                | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots.                                                                                                                                  | -                                 |   |
 
 ### RangeCalendar Events
 
@@ -238,7 +237,6 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 | ---------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | onFocusChange          | `(date: CalendarDate) => void`  | Handler that is called when the focused date changes.                                                                                    |
 | onChange               | `(value: RangeValue>) => void`  | Handler that is called when the value changes.                                                                                           |
-| onHeaderExpandedChange | `(isExpanded: boolean) => void` | The event handler for the calendar header expanded state. This is only available if the `showMonthAndYearPickers` prop is set to `true`. |
 
 #### Supported Calendars
 

apps/docs/content/docs/components/scroll-shadow.mdx

@@ -13,13 +13,14 @@ Applies top and bottom shadows when content overflows on scroll.
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
-    cli: "nextui add scroll-shadow",
+    cli: "npx nextui-cli@latest add scroll-shadow",
     npm: "npm install @nextui-org/scroll-shadow",
     yarn: "yarn add @nextui-org/scroll-shadow",
     pnpm: "pnpm add @nextui-org/scroll-shadow",

apps/docs/content/docs/components/select.mdx

@@ -13,13 +13,14 @@ A select displays a collapsible list of options and allows a user to select one
 
 ---
 
-<CarbonAd />
+
 
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
-    cli: "nextui add select",
+    cli: "npx nextui-cli@latest add select",
     npm: "npm install @nextui-org/select",
     yarn: "yarn add @nextui-org/select",
     pnpm: "pnpm add @nextui-org/select",
@@ -69,7 +70,7 @@ You can use the `selectionMode="multiple"` property to allow multiple selection.
 
 You can disable specific items by using the `disabledKeys` property.
 
-<CodeDemo title="Disabled Items" highlightedLines="8" files={selectContent.disabledItems} />
+<CodeDemo title="Disabled Items" highlightedLines="10" files={selectContent.disabledItems} />
 
 ### Required
 
@@ -80,7 +81,7 @@ the end of the label and the select will be required.
 
 ### Sizes
 
-<CodeDemo title="Sizes" highlightedLines="13,26" files={selectContent.sizes} />
+<CodeDemo title="Sizes" highlightedLines="13,24" files={selectContent.sizes} />
 
 ### Colors
 
@@ -98,7 +99,7 @@ the end of the label and the select will be required.
 
 You can change the position of the label by setting the `labelPlacement` property to `inside`, `outside` or `outside-left`.
 
-<CodeDemo title="Label Placements" highlightedLines="20,37" files={selectContent.labelPlacements} />
+<CodeDemo title="Label Placements" highlightedLines="19,37" files={selectContent.labelPlacements} />
 
 > **Note**: If the `label` is not passed, the `labelPlacement` property will be `outside` by default.
 
@@ -107,7 +108,7 @@ You can change the position of the label by setting the `labelPlacement` propert
 You can use the `startContent` and `endContent` properties to add content to the start and end of
 the select.
 
-<CodeDemo title="Start Content" highlightedLines="9" files={selectContent.startContent} />
+<CodeDemo title="Start Content" highlightedLines="13" files={selectContent.startContent} />
 
 ### Item Start & End Content
 

apps/docs/content/docs/components/skeleton.mdx

@@ -9,17 +9,18 @@ import {skeletonContent} from "@/content/components/skeleton";
 
 Skeleton is a placeholder to show a loading state and the expected shape of a component.
 
-<ComponentLinks component="skeleton" rscCompatible />
+<ComponentLinks component="skeleton" />
 
 ---
 
-<CarbonAd/>
+
 
 ## Installation
 
 <PackageManagers
+  showGlobalInstallWarning
   commands={{
-    cli: "nextui add skeleton",
+    cli: "npx nextui-cli@latest add skeleton",
     npm: "npm install @nextui-org/skeleton",
     yarn: "yarn add @nextui-org/skeleton",
     pnpm: "pnpm add @nextui-org/skeleton",