diff --git a/apps/docs/components/copy-button.tsx b/apps/docs/components/copy-button.tsx
index 72a4b871ff..d6c32efc7d 100644
--- a/apps/docs/components/copy-button.tsx
+++ b/apps/docs/components/copy-button.tsx
@@ -1,7 +1,8 @@
-import {FC} from "react";
-import {Button, ButtonProps} from "@nextui-org/react";
+import {ButtonProps} from "@nextui-org/react";
 import {useClipboard} from "@nextui-org/use-clipboard";
-import {clsx} from "@nextui-org/shared-utils";
+import {memo} from "react";
+
+import {PreviewButton} from "./preview-button";
 
 import {CheckLinearIcon, CopyLinearIcon} from "@/components/icons";
 
@@ -9,35 +10,28 @@ export interface CopyButtonProps extends ButtonProps {
   value?: string;
 }
 
-export const CopyButton: FC<CopyButtonProps> = ({value, className, ...buttonProps}) => {
+export const CopyButton = memo<CopyButtonProps>(({value, className, ...buttonProps}) => {
   const {copy, copied} = useClipboard();
 
+  const icon = copied ? (
+    <CheckLinearIcon
+      className="opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+      data-visible={copied}
+      size={16}
+    />
+  ) : (
+    <CopyLinearIcon
+      className="opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+      data-visible={!copied}
+      size={16}
+    />
+  );
+
   const handleCopy = () => {
     copy(value);
   };
 
-  return (
-    <Button
-      isIconOnly
-      className={clsx(
-        "absolute z-50 right-3 text-zinc-300 top-8 border-1 border-transparent bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100 before:rounded-lg",
-        className,
-      )}
-      size="sm"
-      variant="bordered"
-      onPress={handleCopy}
-      {...buttonProps}
-    >
-      <CheckLinearIcon
-        className="absolute opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
-        data-visible={copied}
-        size={16}
-      />
-      <CopyLinearIcon
-        className="absolute opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
-        data-visible={!copied}
-        size={16}
-      />
-    </Button>
-  );
-};
+  return <PreviewButton className={className} icon={icon} onPress={handleCopy} {...buttonProps} />;
+});
+
+CopyButton.displayName = "CopyButton";
diff --git a/apps/docs/components/docs/components/code-demo/react-live-demo.tsx b/apps/docs/components/docs/components/code-demo/react-live-demo.tsx
index 74332d7636..de8813491a 100644
--- a/apps/docs/components/docs/components/code-demo/react-live-demo.tsx
+++ b/apps/docs/components/docs/components/code-demo/react-live-demo.tsx
@@ -10,6 +10,8 @@ import {SandpackFiles} from "@codesandbox/sandpack-react/types";
 import {BgGridContainer} from "@/components/bg-grid-container";
 import {GradientBox, GradientBoxProps} from "@/components/gradient-box";
 import {CopyButton} from "@/components/copy-button";
+import {StackblitzButton} from "@/components/stackblitz-button";
+import {PreviewButton} from "@/components/preview-button";
 
 export interface ReactLiveDemoProps {
   code: string;
@@ -21,6 +23,7 @@ export interface ReactLiveDemoProps {
   className?: string;
   gradientColor?: GradientBoxProps["color"];
   overflow?: "auto" | "visible" | "hidden";
+  typescriptStrict?: boolean;
 }
 
 // 🚨 Do not pass react-hook-form to scope, it will break the live preview since
@@ -49,11 +52,18 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
   height,
   className,
   noInline,
+  typescriptStrict = false,
 }) => {
   const content = (
     <>
       {files?.[DEFAULT_FILE] && (
-        <div className="absolute top-[-28px] right-[-8px] z-50">
+        <div className="absolute top-[-26px] right-[3px] z-50 flex items-center">
+          <StackblitzButton
+            button={<PreviewButton icon={undefined} />}
+            className="before:hidden opacity-0 group-hover/code-demo:opacity-100 transition-opacity text-zinc-400"
+            files={files}
+            typescriptStrict={typescriptStrict}
+          />
           <CopyButton
             className="before:hidden opacity-0 group-hover/code-demo:opacity-100 transition-opacity text-zinc-400"
             value={files?.[DEFAULT_FILE] as string}
diff --git a/apps/docs/components/icons/social.tsx b/apps/docs/components/icons/social.tsx
index 744420efa4..8799f93ae4 100644
--- a/apps/docs/components/icons/social.tsx
+++ b/apps/docs/components/icons/social.tsx
@@ -423,6 +423,23 @@ const CodeSandboxIcon: React.FC<IconSvgProps> = ({width = "1em", height = "1em",
   );
 };
 
+const StackblitzIcon: React.FC<IconSvgProps> = ({...props}) => {
+  return (
+    <svg
+      height={16}
+      viewBox="0 0 1024 1024"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7M378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
 const JavascriptIcon: React.FC<IconSvgProps> = ({width = "1em", height = "1em", ...props}) => {
   return (
     <svg
@@ -470,6 +487,7 @@ export {
   NewNextJSIcon,
   StorybookIcon,
   CodeSandboxIcon,
+  StackblitzIcon,
   JavascriptIcon,
   TypescriptIcon,
   BunIcon,
diff --git a/apps/docs/components/preview-button.tsx b/apps/docs/components/preview-button.tsx
new file mode 100644
index 0000000000..5efe91cecb
--- /dev/null
+++ b/apps/docs/components/preview-button.tsx
@@ -0,0 +1,31 @@
+import {forwardRef} from "react";
+import {Button, ButtonProps} from "@nextui-org/react";
+import {clsx} from "@nextui-org/shared-utils";
+
+export interface PreviewButtonProps extends ButtonProps {
+  icon: React.ReactNode;
+}
+
+export const PreviewButton = forwardRef<HTMLButtonElement | null, PreviewButtonProps>(
+  (props, ref) => {
+    const {icon, className, ...buttonProps} = props;
+
+    return (
+      <Button
+        ref={ref}
+        isIconOnly
+        className={clsx(
+          "relative z-50 text-zinc-300 top-8 border-1 border-transparent bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100 before:rounded-lg",
+          className,
+        )}
+        size="sm"
+        variant="light"
+        {...buttonProps}
+      >
+        {icon}
+      </Button>
+    );
+  },
+);
+
+PreviewButton.displayName = "PreviewButton";
diff --git a/apps/docs/components/sandpack/sandpack.tsx b/apps/docs/components/sandpack/sandpack.tsx
index b818331151..030f949639 100644
--- a/apps/docs/components/sandpack/sandpack.tsx
+++ b/apps/docs/components/sandpack/sandpack.tsx
@@ -3,6 +3,8 @@
 import {FC, useRef} from "react";
 import {SandpackProvider, SandpackLayout, SandpackPreview} from "@codesandbox/sandpack-react";
 
+import {StackblitzButton} from "../stackblitz-button";
+
 import {SandpackCodeViewer} from "./code-viewer";
 import {nextuiTheme} from "./theme";
 import {UseSandpackProps, useSandpack} from "./use-sandpack";
@@ -72,6 +74,18 @@ export const Sandpack: FC<SandpackProps> = ({
               {showReportBug && <BugReportButton />}
               {showCopyCode && <CopyButton />}
               {!showPreview && showOpenInCodeSandbox && <CodeSandboxButton />}
+              {!showPreview && showOpenInCodeSandbox && (
+                <StackblitzButton
+                  isIconOnly
+                  as="span"
+                  className="dark:text-zinc-500 text-white"
+                  files={files}
+                  size="sm"
+                  title="Open in Stackblitz"
+                  typescriptStrict={typescriptStrict}
+                  variant="light"
+                />
+              )}
             </div>
             {hasTypescript && sandpackTemplate && (
               <LanguageSelector template={sandpackTemplate} onChange={setCurrentTemplate} />
diff --git a/apps/docs/components/stackblitz-button.tsx b/apps/docs/components/stackblitz-button.tsx
new file mode 100644
index 0000000000..e639984cac
--- /dev/null
+++ b/apps/docs/components/stackblitz-button.tsx
@@ -0,0 +1,58 @@
+import React, {forwardRef} from "react";
+import stackblitzSdk from "@stackblitz/sdk";
+import {SandpackFiles} from "@codesandbox/sandpack-react/types";
+
+import {StackblitzIcon} from "./icons";
+
+import {useStackblitz} from "@/hooks/use-stackblitz";
+import {Tooltip} from "@/../../packages/components/tooltip/src";
+import {Button, ButtonProps} from "@/../../packages/components/button/src";
+
+export interface StackblitzButtonProps extends ButtonProps {
+  files: SandpackFiles;
+  typescriptStrict?: boolean;
+  className?: string;
+  button?: React.ReactElement;
+  icon?: React.ReactNode;
+}
+
+export const StackblitzButton = forwardRef<HTMLButtonElement, StackblitzButtonProps>(
+  (props, ref) => {
+    const {
+      files,
+      typescriptStrict = false,
+      className,
+      button = <Button />,
+      icon = (
+        <StackblitzIcon
+          data-visible
+          className="opacity-0 data-[visible=true]:opacity-100 transition-transform-opacity"
+        />
+      ),
+      ...rest
+    } = props;
+    const {stackblitzPrefillConfig, entryFile} = useStackblitz({
+      files,
+      typescriptStrict,
+    });
+
+    return (
+      <Tooltip closeDelay={0} content="Open in Stackblitz">
+        {React.cloneElement(button, {
+          ref,
+          className,
+          icon,
+          onPress: () => {
+            stackblitzSdk.openProject(stackblitzPrefillConfig, {
+              openFile: [entryFile],
+            });
+          },
+          children: icon,
+          ...rest,
+        })}
+      </Tooltip>
+    );
+  },
+);
+
+StackblitzButton.displayName = "StackblitzButton";
diff --git a/apps/docs/config/routes.json b/apps/docs/config/routes.json
index 5f080986d7..6dbda33f6f 100644
--- a/apps/docs/config/routes.json
+++ b/apps/docs/config/routes.json
@@ -81,6 +81,13 @@
           "title": "Astro",
           "keywords": "astro, nextui",
           "path": "/docs/frameworks/astro.mdx"
+        },
+        {
+          "key": "laravel",
+          "title": "Laravel",
+          "keywords": "laravel, nextui",
+          "path": "/docs/frameworks/laravel.mdx",
+          "newPost": true
         }
       ]
     },
@@ -515,4 +522,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/apps/docs/content/docs/components/input.mdx b/apps/docs/content/docs/components/input.mdx
index bd2997ce14..c65d6f1c3d 100644
--- a/apps/docs/content/docs/components/input.mdx
+++ b/apps/docs/content/docs/components/input.mdx
@@ -331,7 +331,7 @@ In case you need to customize the input even further, you can use the `useInput`
     },
     {
       attribute: "type",
-      type: "text | email | url | password | tel | search",
+      type: "text | email | url | password | tel | search | file",
       description: "The type of the input.",
       default: "text"
     },
diff --git a/apps/docs/content/docs/frameworks/laravel.mdx b/apps/docs/content/docs/frameworks/laravel.mdx
new file mode 100644
index 0000000000..bab544ce68
--- /dev/null
+++ b/apps/docs/content/docs/frameworks/laravel.mdx
@@ -0,0 +1,238 @@
+---
+title: Laravel
+description: How to use NextUI with Laravel
+---
+
+# Laravel
+
+Requirements:
+
+- [Laravel 11](https://laravel.com/)
+- [PHP v8.2](https://www.php.net/)
+- [React 18](https://reactjs.org/) or later
+- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/vite#react) or later
+- [Framer Motion 11.9](https://www.framer.com/motion/) or later
+
+------
+
+<CarbonAd/>
+
+To use NextUI in your Laravel project, you need to follow the following steps:
+
+### Using NextUI + Laravel template
+
+If you are starting a new project, you can run one of the following commands to create a Laravel project pre-configured with NextUI:
+
+<PackageManagers
+  commands={{
+    npm: 'npx create-laravel@latest --template https://github.com/nextui-org/laravel-template',
+    yarn: 'yarn create laravel --template https://github.com/nextui-org/laravel-template',
+    pnpm: 'pnpm create laravel --template https://github.com/nextui-org/laravel-template',
+    bun: 'bunx create-laravel@latest --template https://github.com/nextui-org/laravel-template',
+  }}
+/>
+
+### Automatic Installation
+
+You can add individual components using the CLI. For example, to add a button component:
+
+```codeBlock bash
+nextui add button
+```
+
+This command adds the Button component to your project and manages all related dependencies.
+
+You can also add multiple components at once:
+
+```codeBlock bash
+nextui add button input
+```
+
+Or you can add the main library `@nextui-org/react` by running the following command:
+
+```codeBlock bash
+nextui add --all
+```
+
+If you leave out the component name, the CLI will prompt you to select the components you want to add.
+
+```codeBlock bash
+? 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
+
+Filtered results for: Enter something to filter
+
+◯  accordion
+◯  autocomplete
+◯  avatar
+◯  badge
+◯  breadcrumbs
+◉  button
+◯  card
+◯  checkbox
+◯  chip
+◯  code
+```
+
+You still need to add the provider to your app manually (we are working on automating this step).
+
+```jsx {3,7,9}
+// app/providers.tsx
+
+import {NextUIProvider} from '@nextui-org/react'
+
+export function Providers({children}: { children: React.ReactNode }) {
+  return (
+    <NextUIProvider>
+      {children}
+    </NextUIProvider>
+  )
+}
+```
+
+<Spacer y={4} />
+
+```jsx {8,23,25}
+// app.tsx or app.jsx
+import '../css/app.css';
+import './bootstrap';
+
+import { createInertiaApp } from '@inertiajs/react';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { createRoot } from 'react-dom/client';
+import {NextUIProvider} from "@nextui-org/react";
+
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
+createInertiaApp({
+    title: (title) => `${title} - ${appName}`,
+    resolve: (name) =>
+        resolvePageComponent(
+            `./Pages/${name}.tsx`,
+            import.meta.glob('./Pages/**/*.tsx'),
+        ),
+    setup({ el, App, props }) {
+        const root = createRoot(el);
+
+        root.render(
+            <NextUIProvider>
+                <App {...props} />
+            </NextUIProvider>
+        );
+    },
+    progress: {
+        color: '#4B5563',
+    },
+});
+```
+
+### Manual Installation
+
+<Steps>
+
+### Add dependencies
+
+In your Laravel project, run one of the following command to install NextUI:
+
+<PackageManagers
+  commands={{
+    npm: 'npm i @nextui-org/react framer-motion',
+    yarn: 'yarn add @nextui-org/react framer-motion',
+    pnpm: 'pnpm add @nextui-org/react framer-motion',
+    bun: "bun add @nextui-org/react framer-motion"
+  }}
+/>
+
+### Hoisted Dependencies Setup
+
+<Blockquote color="primary">
+**Note**: This step is only for those who use `pnpm` to install. If you install NextUI using other package managers, you may skip this step.
+</Blockquote>
+
+If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
+
+```bash
+public-hoist-pattern[]=*@nextui-org/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
+
+### Tailwind CSS Setup
+
+NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
+[installation guide](https://tailwindcss.com/docs/guides/vite#react) to install Tailwind CSS. Then you need to add
+the following code to your `tailwind.config.js` file:
+
+<Blockquote color="primary">
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
+</Blockquote>
+
+```js {2,8,13-14}
+// tailwind.config.js
+const { nextui } = require("@nextui-org/react");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    // ...
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
+  ],
+  theme: {
+    extend: {},
+  },
+  darkMode: "class",
+  plugins: [nextui()]
+}
+```
+
+### Provider Setup
+
+After installing NextUI, you need to set up the `NextUIProvider` at the `root` of your application.
+
+Go to the src directory and inside `app.jsx` or `app.tsx`, wrap `NextUIProvider` around App:
+
+```jsx {8,23,25}
+// app.tsx or app.jsx
+import '../css/app.css';
+import './bootstrap';
+
+import { createInertiaApp } from '@inertiajs/react';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { createRoot } from 'react-dom/client';
+import {NextUIProvider} from "@nextui-org/react";
+
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
+createInertiaApp({
+    title: (title) => `${title} - ${appName}`,
+    resolve: (name) =>
+        resolvePageComponent(
+            `./Pages/${name}.tsx`,
+            import.meta.glob('./Pages/**/*.tsx'),
+        ),
+    setup({ el, App, props }) {
+        const root = createRoot(el);
+
+        root.render(
+            <NextUIProvider>
+                <App {...props} />
+            </NextUIProvider>
+        );
+    },
+    progress: {
+        color: '#4B5563',
+    },
+});
+```
+
+</Steps>
+
+<Blockquote
+ color="warning"
+>
+  Version 2 is only compatible with React 18 or later. If you are using React 17 or earlier, please use <Link href="https://v1.nextui.org/docs/getting-started" isExternal>version 1 of NextUI</Link>.
+</Blockquote>
diff --git a/apps/docs/hooks/use-stackblitz.ts b/apps/docs/hooks/use-stackblitz.ts
new file mode 100644
index 0000000000..4a3357c8b6
--- /dev/null
+++ b/apps/docs/hooks/use-stackblitz.ts
@@ -0,0 +1,88 @@
+import {Project} from "@stackblitz/sdk";
+import {SandpackFiles} from "@codesandbox/sandpack-react/types";
+
+import {mapKeys, omit} from "@/../../packages/utilities/shared-utils/src";
+import {useSandpack} from "@/components/sandpack/use-sandpack";
+
+export interface UseSandpackProps {
+  files: SandpackFiles;
+  typescriptStrict?: boolean;
+}
+
+const viteConfig = `import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
+`;
+
+function transformSandpackFiles(files: SandpackFiles) {
+  return Object.fromEntries(
+    Object.entries(files).map(([key, value]) => [
+      key,
+      typeof value === "string" ? value : value.code,
+    ]),
+  );
+}
+
+export function useStackblitz(props: UseSandpackProps) {
+  const {files, typescriptStrict = false} = props;
+
+  const {
+    customSetup,
+    files: filesData,
+    entryFile,
+  } = useSandpack({
+    files: transformSandpackFiles(files),
+    typescriptStrict,
+  });
+
+  const transformFiles = mapKeys(filesData, (_, key) => key.replace(/^\//, ""));
+
+  const dependencies = {...customSetup.dependencies, ...customSetup.devDependencies};
+
+  const packageJson = `{
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    ${Object.entries(omit(dependencies as any, ["react", "react-dom"]))
+      .map(([key, value]) => `"${key}": "${value}"`)
+      .join(",\n    ")}
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "4.3.4",
+    "vite": "6.0.6",
+    "autoprefixer": "10.4.20",
+    "postcss": "8.4.49",
+    "tailwindcss": "3.4.17"
+  },
+  "main": "/index.jsx"
+}`;
+
+  const stackblitzPrefillConfig: Project = {
+    files: {
+      ...transformSandpackFiles(transformFiles),
+      "vite.config.js": viteConfig,
+      "package.json": packageJson,
+    },
+    dependencies,
+    title: "NextUI",
+    template: "node",
+  };
+
+  const findEntryFile = Object.keys(stackblitzPrefillConfig.files).find((key) =>
+    key.includes("App"),
+  );
+
+  return {
+    entryFile: findEntryFile ?? entryFile,
+    stackblitzPrefillConfig,
+  };
+}
diff --git a/apps/docs/package.json b/apps/docs/package.json
index eb4c555a86..a9f469a3e6 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -39,7 +39,6 @@
     "@nextui-org/use-clipboard": "workspace:*",
     "@nextui-org/use-infinite-scroll": "workspace:*",
     "@nextui-org/use-is-mobile": "workspace:*",
-    "clsx": "^1.2.1",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@react-aria/focus": "3.19.0",
     "@react-aria/i18n": "3.12.4",
@@ -53,8 +52,10 @@
     "@react-stately/layout": "4.1.0",
     "@react-stately/tree": "3.8.6",
     "@rehooks/local-storage": "^2.4.5",
-    "@tanstack/react-virtual": "3.10.9",
+    "@stackblitz/sdk": "^1.11.0",
+    "@tanstack/react-virtual": "3.11.2",
     "canvas-confetti": "^1.9.2",
+    "clsx": "^1.2.1",
     "cmdk": "^0.2.0",
     "color2k": "2.0.3",
     "contentlayer2": "0.5.3",
diff --git a/packages/components/accordion/CHANGELOG.md b/packages/components/accordion/CHANGELOG.md
index f91e73f545..349db4f0a1 100644
--- a/packages/components/accordion/CHANGELOG.md
+++ b/packages/components/accordion/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @nextui-org/accordion
 
+## 2.2.7
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/divider@2.2.5
+  - @nextui-org/aria-utils@2.2.7
+  - @nextui-org/framer-utils@2.1.6
+
 ## 2.2.6
 
 ### Patch Changes
diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
index 88f2c60d96..43e42baccc 100644
--- a/packages/components/accordion/package.json
+++ b/packages/components/accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
   "keywords": [
     "react",
diff --git a/packages/components/alert/CHANGELOG.md b/packages/components/alert/CHANGELOG.md
index b8f5f084b2..e70a13226e 100644
--- a/packages/components/alert/CHANGELOG.md
+++ b/packages/components/alert/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @nextui-org/alert
 
+## 2.2.9
+
+### Patch Changes
+
+- [#4447](https://github.com/nextui-org/nextui/pull/4447) [`a83388a`](https://github.com/nextui-org/nextui/commit/a83388aaf4521f0ed8dfed99a54998156df1868b) Thanks [@wingkwong](https://github.com/wingkwong)! - mark description prop as optional (#4445)
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/button@2.2.9
+
 ## 2.2.8
 
 ### Patch Changes
diff --git a/packages/components/alert/package.json b/packages/components/alert/package.json
index 6f10b0e113..79e1424114 100644
--- a/packages/components/alert/package.json
+++ b/packages/components/alert/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/alert",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "description": "Alerts are temporary notifications that provide concise feedback about an action or event.",
   "keywords": [
     "alert"
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
index cb66ebc684..5c24fd1e03 100644
--- a/packages/components/alert/src/use-alert.ts
+++ b/packages/components/alert/src/use-alert.ts
@@ -19,9 +19,9 @@ interface Props extends HTMLNextUIProps<"div"> {
    */
   title?: string;
   /**
-   * Main body of the alert message
+   * description of the alert message
    */
-  description: ReactNode;
+  description?: ReactNode;
   /**
    * Icon to be displayed in the alert - overrides the default icon
    */
diff --git a/packages/components/autocomplete/CHANGELOG.md b/packages/components/autocomplete/CHANGELOG.md
index d778033614..e39927826f 100644
--- a/packages/components/autocomplete/CHANGELOG.md
+++ b/packages/components/autocomplete/CHANGELOG.md
@@ -1,5 +1,28 @@
 # @nextui-org/autocomplete
 
+## 2.3.9
+
+### Patch Changes
+
+- [#4458](https://github.com/nextui-org/nextui/pull/4458) [`7c2bc4a`](https://github.com/nextui-org/nextui/commit/7c2bc4a18ef01424c7ff464cad3401dd6596e7b3) Thanks [@wingkwong](https://github.com/wingkwong)! - clear autocomplete value when pressing clear button (#4402)
+
+- [#4452](https://github.com/nextui-org/nextui/pull/4452) [`0401f25`](https://github.com/nextui-org/nextui/commit/0401f2548f525fc4194186b54f563cb91c6ccd0c) Thanks [@Peterl561](https://github.com/Peterl561)! - fixed autocomplete validate prop not working after hovering when validation behavior is native
+
+- [#4462](https://github.com/nextui-org/nextui/pull/4462) [`16c57ec`](https://github.com/nextui-org/nextui/commit/16c57ece6467d755645f109b8de810c9063e5665) Thanks [@vinroger](https://github.com/vinroger)! - add support for dataset with section, add support for scrollshadow
+
+- [#4496](https://github.com/nextui-org/nextui/pull/4496) [`0c45fed`](https://github.com/nextui-org/nextui/commit/0c45fed420747b41a4d2a7bb07e9582f6f609287) Thanks [@wingkwong](https://github.com/wingkwong)! - fix missing popover props except content (#4484)
+
+- Updated dependencies [[`d92468a`](https://github.com/nextui-org/nextui/commit/d92468aa1e35d5022c071b5d2674f5bfb6408001), [`33e0418`](https://github.com/nextui-org/nextui/commit/33e0418d08c29f829b00ee3bc41972dfce6a3370), [`16c57ec`](https://github.com/nextui-org/nextui/commit/16c57ece6467d755645f109b8de810c9063e5665), [`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2), [`fb46df2`](https://github.com/nextui-org/nextui/commit/fb46df2430f95cddef0c25fce4639c2078b34f62)]:
+  - @nextui-org/listbox@2.3.9
+  - @nextui-org/popover@2.3.9
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/button@2.2.9
+  - @nextui-org/form@2.1.8
+  - @nextui-org/input@2.4.8
+  - @nextui-org/scroll-shadow@2.3.5
+  - @nextui-org/spinner@2.2.6
+  - @nextui-org/aria-utils@2.2.7
+
 ## 2.3.8
 
 ### Patch Changes
diff --git a/packages/components/autocomplete/__tests__/autocomplete.test.tsx b/packages/components/autocomplete/__tests__/autocomplete.test.tsx
index 55a050d64c..09160db838 100644
--- a/packages/components/autocomplete/__tests__/autocomplete.test.tsx
+++ b/packages/components/autocomplete/__tests__/autocomplete.test.tsx
@@ -235,6 +235,49 @@ describe("Autocomplete", () => {
     expect(autocomplete).toHaveFocus();
   });
 
+  it("should clear arbitrary value after clicking clear button", async () => {
+    const wrapper = render(
+      <Autocomplete aria-label="Favorite Animal" data-testid="autocomplete" label="Favorite Animal">
+        <AutocompleteItem key="penguin" value="penguin">
+          Penguin
+        </AutocompleteItem>
+        <AutocompleteItem key="zebra" value="zebra">
+          Zebra
+        </AutocompleteItem>
+        <AutocompleteItem key="shark" value="shark">
+          Shark
+        </AutocompleteItem>
+      </Autocomplete>,
+    );
+
+    const autocomplete = wrapper.getByTestId("autocomplete");
+
+    // open the select listbox
+    await user.click(autocomplete);
+
+    // assert that the autocomplete listbox is open
+    expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+
+    await user.keyboard("pe");
+
+    const {container} = wrapper;
+
+    const clearButton = container.querySelector(
+      "[data-slot='inner-wrapper'] button:nth-of-type(1)",
+    )!;
+
+    expect(clearButton).not.toBeNull();
+
+    // click the clear button
+    await user.click(clearButton);
+
+    // assert that the input has empty value
+    expect(autocomplete).toHaveValue("");
+
+    // assert that input is focused
+    expect(autocomplete).toHaveFocus();
+  });
+
   it("should keep the ListBox open after clicking clear button", async () => {
     const wrapper = render(
       <Autocomplete aria-label="Favorite Animal" data-testid="autocomplete" label="Favorite Animal">
@@ -739,6 +782,60 @@ describe("Autocomplete", () => {
         expect(input).not.toHaveAttribute("aria-describedby");
         expect(input.validity.valid).toBe(true);
       });
+
+      // this test is to cover a case where hovering over the combobox causes the validation from use-input to overwrite the validation from use-autocomplete if not handled properly
+      // this causes the first form submit after initial render to always succeed even if the validate function returns an error
+      it("should work with validate after hovering", async () => {
+        const onSubmit = jest.fn((e) => {
+          e.preventDefault();
+        });
+
+        const {getByTestId, findByRole} = render(
+          <Form validationBehavior="native" onSubmit={onSubmit}>
+            <AutocompleteExample
+              data-testid="combobox"
+              name="animal"
+              validate={(value) => {
+                if (!value?.selectedKey) {
+                  return "Please select an animal";
+                }
+              }}
+              validationBehavior="native"
+            />
+            <button data-testid="submit" type="submit">
+              Submit
+            </button>
+          </Form>,
+        );
+
+        const combobox = getByTestId("combobox") as HTMLInputElement;
+        const submit = getByTestId("submit");
+
+        expect(combobox).not.toHaveAttribute("aria-describedby");
+        expect(combobox.validity.valid).toBe(false);
+
+        await user.hover(combobox);
+        await user.click(submit);
+
+        expect(onSubmit).toHaveBeenCalledTimes(0);
+        expect(combobox).toHaveAttribute("aria-describedby");
+        expect(
+          document.getElementById(combobox.getAttribute("aria-describedby")!),
+        ).toHaveTextContent("Please select an animal");
+
+        await user.click(combobox);
+        await user.keyboard("pe");
+
+        const listbox = await findByRole("listbox");
+        const items = within(listbox).getAllByRole("option");
+
+        await user.click(items[0]);
+        expect(combobox).toHaveAttribute("aria-describedby");
+
+        await user.click(submit);
+        expect(onSubmit).toHaveBeenCalledTimes(1);
+        expect(combobox).not.toHaveAttribute("aria-describedby");
+      });
     });
 
     describe("validationBehavior=aria", () => {
diff --git a/packages/components/autocomplete/package.json b/packages/components/autocomplete/package.json
index b34fa7546a..e3feb19520 100644
--- a/packages/components/autocomplete/package.json
+++ b/packages/components/autocomplete/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/autocomplete",
-  "version": "2.3.8",
+  "version": "2.3.9",
   "description": "An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.",
   "keywords": [
     "autocomplete"
diff --git a/packages/components/autocomplete/src/use-autocomplete.ts b/packages/components/autocomplete/src/use-autocomplete.ts
index 381809b85b..47ce1dfad4 100644
--- a/packages/components/autocomplete/src/use-autocomplete.ts
+++ b/packages/components/autocomplete/src/use-autocomplete.ts
@@ -418,13 +418,9 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
       onPress: (e: PressEvent) => {
         slotsProps.clearButtonProps?.onPress?.(e);
         if (state.selectedItem) {
-          state.setInputValue("");
           state.setSelectedKey(null);
-        } else {
-          if (allowsCustomValue) {
-            state.setInputValue("");
-          }
         }
+        state.setInputValue("");
         state.open();
       },
       "data-visible": !!state.selectedItem || state.inputValue?.length > 0,
@@ -433,12 +429,19 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
       }),
     } as ButtonProps);
 
+  // prevent use-input's useFormValidation hook from overwriting use-autocomplete's useFormValidation hook when there are uncommitted validation errors
+  // see https://github.com/nextui-org/nextui/pull/4452
+  const hasUncommittedValidation =
+    validationBehavior === "native" &&
+    state.displayValidation.isInvalid === false &&
+    state.realtimeValidation.isInvalid === true;
+
   const getInputProps = () =>
     ({
       ...otherProps,
       ...inputProps,
       ...slotsProps.inputProps,
-      isInvalid,
+      isInvalid: hasUncommittedValidation ? undefined : isInvalid,
       validationBehavior,
       errorMessage:
         typeof errorMessage === "function"
@@ -461,6 +464,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
             itemHeight,
           }
         : undefined,
+      scrollShadowProps: slotsProps.scrollShadowProps,
       ...mergeProps(slotsProps.listboxProps, listBoxProps, {
         shouldHighlightOnFocus: true,
       }),
@@ -478,6 +482,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
       triggerType: "listbox",
       ...popoverProps,
       classNames: {
+        ...slotsProps.popoverProps?.classNames,
         content: slots.popoverContent({
           class: clsx(
             classNames?.popoverContent,
diff --git a/packages/components/autocomplete/stories/autocomplete.stories.tsx b/packages/components/autocomplete/stories/autocomplete.stories.tsx
index a63fdf61b4..9c48731f5e 100644
--- a/packages/components/autocomplete/stories/autocomplete.stories.tsx
+++ b/packages/components/autocomplete/stories/autocomplete.stories.tsx
@@ -1187,3 +1187,23 @@ export const CustomItemHeight = {
     itemHeight: 40,
   },
 };
+
+export const PopoverTopOrBottom = {
+  args: {
+    ...defaultProps,
+  },
+  render: (args) => (
+    <div className="relative h-screen w-screen">
+      <div className="absolute top-0 p-8">
+        <div className="w-48">
+          <Template {...args} />
+        </div>
+      </div>
+      <div className="absolute top-1/2 p-8">
+        <div className="w-48">
+          <Template {...args} />
+        </div>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/components/avatar/CHANGELOG.md b/packages/components/avatar/CHANGELOG.md
index c96dfaaf25..99323dcb25 100644
--- a/packages/components/avatar/CHANGELOG.md
+++ b/packages/components/avatar/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/avatar
 
+## 2.2.6
+
+### Patch Changes
+
+- Updated dependencies [[`5d0fc9f`](https://github.com/nextui-org/nextui/commit/5d0fc9f786ef522d74333f2dc9384626fd8cad3b), [`ef916ea`](https://github.com/nextui-org/nextui/commit/ef916ead525414d7b62c01f26ae5580fd9ba7f14), [`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2), [`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/use-image@2.1.2
+  - @nextui-org/react-utils@2.1.3
+
 ## 2.2.5
 
 ### Patch Changes
diff --git a/packages/components/avatar/package.json b/packages/components/avatar/package.json
index a23a5d6e8c..e01e979014 100644
--- a/packages/components/avatar/package.json
+++ b/packages/components/avatar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/avatar",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
   "keywords": [
     "avatar"
diff --git a/packages/components/badge/CHANGELOG.md b/packages/components/badge/CHANGELOG.md
index 92bba2630e..988a7cd232 100644
--- a/packages/components/badge/CHANGELOG.md
+++ b/packages/components/badge/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/badge
 
+## 2.2.5
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+
 ## 2.2.4
 
 ### Patch Changes
diff --git a/packages/components/badge/package.json b/packages/components/badge/package.json
index 8f2286d6ff..e31dc119a9 100644
--- a/packages/components/badge/package.json
+++ b/packages/components/badge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/badge",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "Badges are used as a small numerical value or status descriptor for UI elements.",
   "keywords": [
     "badge"
diff --git a/packages/components/breadcrumbs/CHANGELOG.md b/packages/components/breadcrumbs/CHANGELOG.md
index b38ea38b6e..8da5d1579f 100644
--- a/packages/components/breadcrumbs/CHANGELOG.md
+++ b/packages/components/breadcrumbs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/breadcrumbs
 
+## 2.2.6
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+
 ## 2.2.5
 
 ### Patch Changes
diff --git a/packages/components/breadcrumbs/package.json b/packages/components/breadcrumbs/package.json
index c788135144..c0e72cd1a6 100644
--- a/packages/components/breadcrumbs/package.json
+++ b/packages/components/breadcrumbs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/breadcrumbs",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "Breadcrumbs display a hierarchy of links to the current page or resource in an application.",
   "keywords": [
     "breadcrumbs"
diff --git a/packages/components/button/CHANGELOG.md b/packages/components/button/CHANGELOG.md
index a40ef59fee..a689695204 100644
--- a/packages/components/button/CHANGELOG.md
+++ b/packages/components/button/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @nextui-org/button
 
+## 2.2.9
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/ripple@2.2.7
+  - @nextui-org/spinner@2.2.6
+
 ## 2.2.8
 
 ### Patch Changes
diff --git a/packages/components/button/package.json b/packages/components/button/package.json
index d9a8349204..f9bb0d87c8 100644
--- a/packages/components/button/package.json
+++ b/packages/components/button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/button",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "description": "Buttons allow users to perform actions and choose with a single tap.",
   "keywords": [
     "button"
diff --git a/packages/components/calendar/CHANGELOG.md b/packages/components/calendar/CHANGELOG.md
index d6338eee53..6d20712003 100644
--- a/packages/components/calendar/CHANGELOG.md
+++ b/packages/components/calendar/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @nextui-org/calendar
 
+## 2.2.9
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/button@2.2.9
+  - @nextui-org/framer-utils@2.1.6
+
 ## 2.2.8
 
 ### Patch Changes
diff --git a/packages/components/calendar/package.json b/packages/components/calendar/package.json
index 06d90caa39..6c1aa03a64 100644
--- a/packages/components/calendar/package.json
+++ b/packages/components/calendar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/calendar",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "description": "A calendar displays one or more date grids and allows users to select a single date.",
   "keywords": [
     "calendar"
diff --git a/packages/components/card/CHANGELOG.md b/packages/components/card/CHANGELOG.md
index 3934ff3f33..53c995dcd7 100644
--- a/packages/components/card/CHANGELOG.md
+++ b/packages/components/card/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/card
 
+## 2.2.9
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/ripple@2.2.7
+
 ## 2.2.8
 
 ### Patch Changes
diff --git a/packages/components/card/package.json b/packages/components/card/package.json
index dd799d3d8b..ad2bcb70ca 100644
--- a/packages/components/card/package.json
+++ b/packages/components/card/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/card",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "description": "Card is a container for text, photos, and actions in the context of a single subject.",
   "keywords": [
     "card"
diff --git a/packages/components/checkbox/CHANGELOG.md b/packages/components/checkbox/CHANGELOG.md
index 795d1be454..1a7a26ff45 100644
--- a/packages/components/checkbox/CHANGELOG.md
+++ b/packages/components/checkbox/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/checkbox
 
+## 2.3.8
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/form@2.1.8
+
 ## 2.3.7
 
 ### Patch Changes
diff --git a/packages/components/checkbox/package.json b/packages/components/checkbox/package.json
index 4e4a8606ae..dbfb9813c0 100644
--- a/packages/components/checkbox/package.json
+++ b/packages/components/checkbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/checkbox",
-  "version": "2.3.7",
+  "version": "2.3.8",
   "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
   "keywords": [
     "checkbox"
diff --git a/packages/components/chip/CHANGELOG.md b/packages/components/chip/CHANGELOG.md
index 76bf969e08..100c23f1d0 100644
--- a/packages/components/chip/CHANGELOG.md
+++ b/packages/components/chip/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/chip
 
+## 2.2.6
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+
 ## 2.2.5
 
 ### Patch Changes
diff --git a/packages/components/chip/package.json b/packages/components/chip/package.json
index 5def33723c..8378e176ef 100644
--- a/packages/components/chip/package.json
+++ b/packages/components/chip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/chip",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "Chips help people enter information, make selections, filter content, or trigger actions.",
   "keywords": [
     "chip"
diff --git a/packages/components/code/CHANGELOG.md b/packages/components/code/CHANGELOG.md
index 895ae6428c..3e066c01bf 100644
--- a/packages/components/code/CHANGELOG.md
+++ b/packages/components/code/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/code
 
+## 2.2.6
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/system-rsc@2.3.5
+
 ## 2.2.5
 
 ### Patch Changes
diff --git a/packages/components/code/package.json b/packages/components/code/package.json
index 398b845d65..ac103bbaa0 100644
--- a/packages/components/code/package.json
+++ b/packages/components/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/code",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "Code is a component used to display inline code.",
   "keywords": [
     "code"
diff --git a/packages/components/date-input/CHANGELOG.md b/packages/components/date-input/CHANGELOG.md
index 10b3683884..23aaf0bce6 100644
--- a/packages/components/date-input/CHANGELOG.md
+++ b/packages/components/date-input/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/date-input
 
+## 2.3.8
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/form@2.1.8
+
 ## 2.3.7
 
 ### Patch Changes
diff --git a/packages/components/date-input/package.json b/packages/components/date-input/package.json
index 51e496763c..edddaff3d7 100644
--- a/packages/components/date-input/package.json
+++ b/packages/components/date-input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/date-input",
-  "version": "2.3.7",
+  "version": "2.3.8",
   "description": "A date input allows users to enter and edit date and time values using a keyboard.",
   "keywords": [
     "date-field"
diff --git a/packages/components/date-picker/CHANGELOG.md b/packages/components/date-picker/CHANGELOG.md
index ce8b2ec697..3ed054327a 100644
--- a/packages/components/date-picker/CHANGELOG.md
+++ b/packages/components/date-picker/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @nextui-org/date-picker
 
+## 2.3.9
+
+### Patch Changes
+
+- Updated dependencies [[`33e0418`](https://github.com/nextui-org/nextui/commit/33e0418d08c29f829b00ee3bc41972dfce6a3370), [`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2), [`fb46df2`](https://github.com/nextui-org/nextui/commit/fb46df2430f95cddef0c25fce4639c2078b34f62)]:
+  - @nextui-org/popover@2.3.9
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/button@2.2.9
+  - @nextui-org/calendar@2.2.9
+  - @nextui-org/date-input@2.3.8
+  - @nextui-org/form@2.1.8
+  - @nextui-org/aria-utils@2.2.7
+
 ## 2.3.8
 
 ### Patch Changes
diff --git a/packages/components/date-picker/package.json b/packages/components/date-picker/package.json
index 775882c7d1..d5e29c5ac1 100644
--- a/packages/components/date-picker/package.json
+++ b/packages/components/date-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/date-picker",
-  "version": "2.3.8",
+  "version": "2.3.9",
   "description": "A date picker combines a DateInput and a Calendar popover to allow users to enter or select a date and time value.",
   "keywords": [
     "date-picker"
diff --git a/packages/components/drawer/CHANGELOG.md b/packages/components/drawer/CHANGELOG.md
index a3745c769e..fd490a27fb 100644
--- a/packages/components/drawer/CHANGELOG.md
+++ b/packages/components/drawer/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @nextui-org/drawer
 
+## 2.2.7
+
+### Patch Changes
+
+- [#4438](https://github.com/nextui-org/nextui/pull/4438) [`07780a7`](https://github.com/nextui-org/nextui/commit/07780a75a2747405e16af99c1692aef496f54175) Thanks [@wingkwong](https://github.com/wingkwong)! - use top-level type-only import instead of inline type specifiers
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/modal@2.2.7
+  - @nextui-org/framer-utils@2.1.6
+
 ## 2.2.6
 
 ### Patch Changes
diff --git a/packages/components/drawer/package.json b/packages/components/drawer/package.json
index 193322c0dc..ea0d2d0931 100644
--- a/packages/components/drawer/package.json
+++ b/packages/components/drawer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/drawer",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "Used to render a content that slides in from the side of the screen.",
   "keywords": [
     "drawer"
diff --git a/packages/components/drawer/src/index.ts b/packages/components/drawer/src/index.ts
index 51f10ef054..96b0483407 100644
--- a/packages/components/drawer/src/index.ts
+++ b/packages/components/drawer/src/index.ts
@@ -1,14 +1,12 @@
-import {
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  ModalContent,
-  type ModalContentProps,
-  type ModalHeaderProps,
-  type ModalBodyProps,
-  type ModalFooterProps,
+import type {
+  ModalContentProps,
+  ModalHeaderProps,
+  ModalBodyProps,
+  ModalFooterProps,
 } from "@nextui-org/modal";
 
+import {ModalHeader, ModalBody, ModalFooter, ModalContent} from "@nextui-org/modal";
+
 import Drawer from "./drawer";
 
 // export types
diff --git a/packages/components/dropdown/CHANGELOG.md b/packages/components/dropdown/CHANGELOG.md
index 1b2413c745..0e9ca76bdb 100644
--- a/packages/components/dropdown/CHANGELOG.md
+++ b/packages/components/dropdown/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @nextui-org/dropdown
 
+## 2.3.9
+
+### Patch Changes
+
+- [#4498](https://github.com/nextui-org/nextui/pull/4498) [`33e0418`](https://github.com/nextui-org/nextui/commit/33e0418d08c29f829b00ee3bc41972dfce6a3370) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Fix incorrect initial popover animation and arrow display (#4466)
+
+- Updated dependencies [[`33e0418`](https://github.com/nextui-org/nextui/commit/33e0418d08c29f829b00ee3bc41972dfce6a3370), [`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2), [`fb46df2`](https://github.com/nextui-org/nextui/commit/fb46df2430f95cddef0c25fce4639c2078b34f62)]:
+  - @nextui-org/popover@2.3.9
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/menu@2.2.9
+  - @nextui-org/aria-utils@2.2.7
+
 ## 2.3.8
 
 ### Patch Changes
diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json
index b11eb53fd7..bd351d537a 100644
--- a/packages/components/dropdown/package.json
+++ b/packages/components/dropdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/dropdown",
-  "version": "2.3.8",
+  "version": "2.3.9",
   "description": "A dropdown displays a list of actions or options that a user can choose.",
   "keywords": [
     "dropdown"
@@ -48,7 +48,6 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@react-aria/focus": "3.19.0",
     "@react-aria/menu": "3.16.0",
-    "@react-aria/overlays": "3.24.0",
     "@react-aria/utils": "3.26.0",
     "@react-stately/menu": "3.9.0",
     "@react-types/menu": "3.9.13"
diff --git a/packages/components/dropdown/src/use-dropdown.ts b/packages/components/dropdown/src/use-dropdown.ts
index df74fed07b..4deb06b42b 100644
--- a/packages/components/dropdown/src/use-dropdown.ts
+++ b/packages/components/dropdown/src/use-dropdown.ts
@@ -9,12 +9,11 @@ import {useMenuTrigger} from "@react-aria/menu";
 import {dropdown} from "@nextui-org/theme";
 import {clsx} from "@nextui-org/shared-utils";
 import {ReactRef, mergeRefs} from "@nextui-org/react-utils";
-import {ariaShouldCloseOnInteractOutside, toReactAriaPlacement} from "@nextui-org/aria-utils";
+import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
 import {useMemo, useRef} from "react";
 import {mergeProps} from "@react-aria/utils";
 import {MenuProps} from "@nextui-org/menu";
 import {CollectionElement} from "@react-types/shared";
-import {useOverlayPosition} from "@react-aria/overlays";
 
 interface Props extends HTMLNextUIProps<"div"> {
   /**
@@ -78,8 +77,6 @@ const getCloseOnSelect = <T extends object>(
   return props?.closeOnSelect;
 };
 
-const DEFAULT_PLACEMENT = "bottom";
-
 export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
   const globalContext = useProviderContext();
 
@@ -92,17 +89,13 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
     isDisabled,
     type = "menu",
     trigger = "press",
-    placement: placementProp = DEFAULT_PLACEMENT,
+    placement = "bottom",
     closeOnSelect = true,
     shouldBlockScroll = true,
     classNames: classNamesProp,
     disableAnimation = globalContext?.disableAnimation ?? false,
     onClose,
     className,
-    containerPadding = 12,
-    offset = 7,
-    crossOffset = 0,
-    shouldFlip = true,
     ...otherProps
   } = props;
 
@@ -139,17 +132,6 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
     [className],
   );
 
-  const {placement} = useOverlayPosition({
-    isOpen: state.isOpen,
-    targetRef: triggerRef,
-    overlayRef: popoverRef,
-    placement: toReactAriaPlacement(placementProp),
-    offset,
-    crossOffset,
-    shouldFlip,
-    containerPadding,
-  });
-
   const onMenuAction = (menuCloseOnSelect?: boolean) => {
     if (menuCloseOnSelect !== undefined && !menuCloseOnSelect) {
       return;
@@ -164,7 +146,7 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
 
     return {
       state,
-      placement: placement || DEFAULT_PLACEMENT,
+      placement,
       ref: popoverRef,
       disableAnimation,
       shouldBlockScroll,
diff --git a/packages/components/dropdown/stories/dropdown.stories.tsx b/packages/components/dropdown/stories/dropdown.stories.tsx
index d2364b0b84..0c95aa4c62 100644
--- a/packages/components/dropdown/stories/dropdown.stories.tsx
+++ b/packages/components/dropdown/stories/dropdown.stories.tsx
@@ -835,3 +835,28 @@ export const WithShouldBlockScroll = {
     ...defaultProps,
   },
 };
+
+export const Placements = {
+  args: {
+    ...defaultProps,
+  },
+  render: (args) => (
+    <div className="inline-grid grid-cols-3 gap-4">
+      <Template {...args} label="Top Start" placement="top-start" />
+      <Template {...args} label="Top" placement="top" />
+      <Template {...args} label="Top End" placement="top-end" />
+
+      <Template {...args} label="Bottom Start" placement="bottom-start" />
+      <Template {...args} label="Bottom" placement="bottom" />
+      <Template {...args} label="Bottom End" placement="bottom-end" />
+
+      <Template {...args} label="Right Start" placement="right-start" />
+      <Template {...args} label="Right" placement="right" />
+      <Template {...args} label="Right End" placement="right-end" />
+
+      <Template {...args} label="Left Start" placement="left-start" />
+      <Template {...args} label="Left" placement="left" />
+      <Template {...args} label="Left End" placement="left-end" />
+    </div>
+  ),
+};
diff --git a/packages/components/form/CHANGELOG.md b/packages/components/form/CHANGELOG.md
index b99254a3c2..ab50c36698 100644
--- a/packages/components/form/CHANGELOG.md
+++ b/packages/components/form/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @nextui-org/form
 
+## 2.1.8
+
+### Patch Changes
+
+- Updated dependencies [[`a83388a`](https://github.com/nextui-org/nextui/commit/a83388aaf4521f0ed8dfed99a54998156df1868b), [`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/theme@2.4.5
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/system@2.4.6
+
 ## 2.1.7
 
 ### Patch Changes
diff --git a/packages/components/form/package.json b/packages/components/form/package.json
index 97e64fa5f1..5bdb3bc0e7 100644
--- a/packages/components/form/package.json
+++ b/packages/components/form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/form",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "A form is a group of inputs that allows users submit data to a server and supports field validation errors.",
   "keywords": [
     "form"
diff --git a/packages/components/image/CHANGELOG.md b/packages/components/image/CHANGELOG.md
index 9b907eeffc..96717db7ef 100644
--- a/packages/components/image/CHANGELOG.md
+++ b/packages/components/image/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/image
 
+## 2.2.5
+
+### Patch Changes
+
+- Updated dependencies [[`5d0fc9f`](https://github.com/nextui-org/nextui/commit/5d0fc9f786ef522d74333f2dc9384626fd8cad3b), [`ef916ea`](https://github.com/nextui-org/nextui/commit/ef916ead525414d7b62c01f26ae5580fd9ba7f14), [`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2), [`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/use-image@2.1.2
+  - @nextui-org/react-utils@2.1.3
+
 ## 2.2.4
 
 ### Patch Changes
diff --git a/packages/components/image/package.json b/packages/components/image/package.json
index efa56cc791..72610087ed 100644
--- a/packages/components/image/package.json
+++ b/packages/components/image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/image",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "A simple image component",
   "keywords": [
     "image"
diff --git a/packages/components/input-otp/CHANGELOG.md b/packages/components/input-otp/CHANGELOG.md
index 40cafd72b1..6b87e73389 100644
--- a/packages/components/input-otp/CHANGELOG.md
+++ b/packages/components/input-otp/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/input-otp
 
+## 2.1.8
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/form@2.1.8
+
 ## 2.1.7
 
 ### Patch Changes
diff --git a/packages/components/input-otp/package.json b/packages/components/input-otp/package.json
index 21b0e44710..57e9e7d4de 100644
--- a/packages/components/input-otp/package.json
+++ b/packages/components/input-otp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/input-otp",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "",
   "keywords": [
     "input-otp"
diff --git a/packages/components/input/CHANGELOG.md b/packages/components/input/CHANGELOG.md
index c90290e43f..18da2e161c 100644
--- a/packages/components/input/CHANGELOG.md
+++ b/packages/components/input/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/input
 
+## 2.4.8
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/form@2.1.8
+
 ## 2.4.7
 
 ### Patch Changes
diff --git a/packages/components/input/package.json b/packages/components/input/package.json
index 0aab16ec54..09b666f770 100644
--- a/packages/components/input/package.json
+++ b/packages/components/input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/input",
-  "version": "2.4.7",
+  "version": "2.4.8",
   "description": "The input component is designed for capturing user input within a text field.",
   "keywords": [
     "input"
diff --git a/packages/components/kbd/CHANGELOG.md b/packages/components/kbd/CHANGELOG.md
index 81ab2ce002..ea143855fc 100644
--- a/packages/components/kbd/CHANGELOG.md
+++ b/packages/components/kbd/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/kbd
 
+## 2.2.6
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/system-rsc@2.3.5
+
 ## 2.2.5
 
 ### Patch Changes
diff --git a/packages/components/kbd/package.json b/packages/components/kbd/package.json
index 6ba4b904dd..fdc825b5b1 100644
--- a/packages/components/kbd/package.json
+++ b/packages/components/kbd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/kbd",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "The keyboard key components indicates which key or set of keys used to execute a specificv  action",
   "keywords": [
     "kbd"
diff --git a/packages/components/link/CHANGELOG.md b/packages/components/link/CHANGELOG.md
index 1c0fe0652e..096744ca11 100644
--- a/packages/components/link/CHANGELOG.md
+++ b/packages/components/link/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/link
 
+## 2.2.7
+
+### Patch Changes
+
+- Updated dependencies [[`b2e924f`](https://github.com/nextui-org/nextui/commit/b2e924fe19f4c6620ec0a0e464b9b35386ed2319), [`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/use-aria-link@2.2.5
+  - @nextui-org/react-utils@2.1.3
+
 ## 2.2.6
 
 ### Patch Changes
diff --git a/packages/components/link/package.json b/packages/components/link/package.json
index 388b68f41c..24b3d53dee 100644
--- a/packages/components/link/package.json
+++ b/packages/components/link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/link",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an &lt;a&gt;",
   "keywords": [
     "link"
diff --git a/packages/components/listbox/CHANGELOG.md b/packages/components/listbox/CHANGELOG.md
index 52207f1ec4..304f19172f 100644
--- a/packages/components/listbox/CHANGELOG.md
+++ b/packages/components/listbox/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @nextui-org/listbox
 
+## 2.3.9
+
+### Patch Changes
+
+- [#4463](https://github.com/nextui-org/nextui/pull/4463) [`d92468a`](https://github.com/nextui-org/nextui/commit/d92468aa1e35d5022c071b5d2674f5bfb6408001) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@tanstack/react-virtual` to support react 19 peer dep
+
+- [#4462](https://github.com/nextui-org/nextui/pull/4462) [`16c57ec`](https://github.com/nextui-org/nextui/commit/16c57ece6467d755645f109b8de810c9063e5665) Thanks [@vinroger](https://github.com/vinroger)! - add support for dataset with section, add support for scrollshadow
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/divider@2.2.5
+  - @nextui-org/aria-utils@2.2.7
+
 ## 2.3.8
 
 ### Patch Changes
diff --git a/packages/components/listbox/package.json b/packages/components/listbox/package.json
index 4e8d51efc1..2fc0c55101 100644
--- a/packages/components/listbox/package.json
+++ b/packages/components/listbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/listbox",
-  "version": "2.3.8",
+  "version": "2.3.9",
   "description": "A listbox displays a list of options and allows a user to select one or more of them.",
   "keywords": [
     "listbox"
@@ -45,7 +45,7 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/use-is-mobile": "workspace:*",
-    "@tanstack/react-virtual": "3.10.9",
+    "@tanstack/react-virtual": "3.11.2",
     "@react-aria/utils": "3.26.0",
     "@react-aria/listbox": "3.13.6",
     "@react-stately/list": "3.11.1",
diff --git a/packages/components/listbox/src/virtualized-listbox.tsx b/packages/components/listbox/src/virtualized-listbox.tsx
index 0a36766204..4f705df676 100644
--- a/packages/components/listbox/src/virtualized-listbox.tsx
+++ b/packages/components/listbox/src/virtualized-listbox.tsx
@@ -1,7 +1,10 @@
-import {useRef} from "react";
+import {useMemo, useRef, useState} from "react";
 import {mergeProps} from "@react-aria/utils";
-import {useVirtualizer} from "@tanstack/react-virtual";
+import {useVirtualizer, VirtualItem} from "@tanstack/react-virtual";
 import {isEmpty} from "@nextui-org/shared-utils";
+import {Node} from "@react-types/shared";
+import {ScrollShadowProps, useScrollShadow} from "@nextui-org/scroll-shadow";
+import {filterDOMProps} from "@nextui-org/react-utils";
 
 import ListboxItem from "./listbox-item";
 import ListboxSection from "./listbox-section";
@@ -11,8 +14,50 @@ import {UseListboxReturn} from "./use-listbox";
 interface Props extends UseListboxReturn {
   isVirtualized?: boolean;
   virtualization?: VirtualizationProps;
+  /* Here in virtualized listbox, scroll shadow needs custom implementation. Hence this is the only way to pass props to scroll shadow */
+  scrollShadowProps?: Partial<ScrollShadowProps>;
 }
 
+const getItemSizesForCollection = (collection: Node<object>[], itemHeight: number) => {
+  const sizes: number[] = [];
+
+  for (const item of collection) {
+    if (item.type === "section") {
+      /* +1 for the section header */
+      sizes.push(([...item.childNodes].length + 1) * itemHeight);
+    } else {
+      sizes.push(itemHeight);
+    }
+  }
+
+  return sizes;
+};
+
+const getScrollState = (element: HTMLDivElement | null) => {
+  if (
+    !element ||
+    element.scrollTop === undefined ||
+    element.clientHeight === undefined ||
+    element.scrollHeight === undefined
+  ) {
+    return {
+      isTop: false,
+      isBottom: false,
+      isMiddle: false,
+    };
+  }
+
+  const isAtTop = element.scrollTop === 0;
+  const isAtBottom = Math.ceil(element.scrollTop + element.clientHeight) >= element.scrollHeight;
+  const isInMiddle = !isAtTop && !isAtBottom;
+
+  return {
+    isTop: isAtTop,
+    isBottom: isAtBottom,
+    isMiddle: isInMiddle,
+  };
+};
+
 const VirtualizedListbox = (props: Props) => {
   const {
     Component,
@@ -29,6 +74,7 @@ const VirtualizedListbox = (props: Props) => {
     disableAnimation,
     getEmptyContentProps,
     getListProps,
+    scrollShadowProps,
   } = props;
 
   const {virtualization} = props;
@@ -45,24 +91,29 @@ const VirtualizedListbox = (props: Props) => {
 
   const listHeight = Math.min(maxListboxHeight, itemHeight * state.collection.size);
 
-  const parentRef = useRef(null);
+  const parentRef = useRef<HTMLDivElement>(null);
+  const itemSizes = useMemo(
+    () => getItemSizesForCollection([...state.collection], itemHeight),
+    [state.collection, itemHeight],
+  );
 
   const rowVirtualizer = useVirtualizer({
-    count: state.collection.size,
+    count: [...state.collection].length,
     getScrollElement: () => parentRef.current,
-    estimateSize: () => itemHeight,
+    estimateSize: (i) => itemSizes[i],
   });
 
   const virtualItems = rowVirtualizer.getVirtualItems();
 
-  const renderRow = ({
-    index,
-    style: virtualizerStyle,
-  }: {
-    index: number;
-    style: React.CSSProperties;
-  }) => {
-    const item = [...state.collection][index];
+  /* Here we need the base props for scroll shadow, contains the className (scrollbar-hide and scrollshadow config based on the user inputs on select props) */
+  const {getBaseProps: getBasePropsScrollShadow} = useScrollShadow({...scrollShadowProps});
+
+  const renderRow = (virtualItem: VirtualItem) => {
+    const item = [...state.collection][virtualItem.index];
+
+    if (!item) {
+      return null;
+    }
 
     const itemProps = {
       color,
@@ -74,6 +125,15 @@ const VirtualizedListbox = (props: Props) => {
       ...item.props,
     };
 
+    const virtualizerStyle = {
+      position: "absolute" as const,
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: `${virtualItem.size}px`,
+      transform: `translateY(${virtualItem.start}px)`,
+    };
+
     if (item.type === "section") {
       return (
         <ListboxSection
@@ -102,6 +162,12 @@ const VirtualizedListbox = (props: Props) => {
     return listboxItem;
   };
 
+  const [scrollState, setScrollState] = useState({
+    isTop: false,
+    isBottom: true,
+    isMiddle: false,
+  });
+
   const content = (
     <Component {...getListProps()}>
       {!state.collection.size && !hideEmptyContent && (
@@ -110,11 +176,18 @@ const VirtualizedListbox = (props: Props) => {
         </li>
       )}
       <div
+        {...filterDOMProps(getBasePropsScrollShadow())}
         ref={parentRef}
+        data-bottom-scroll={scrollState.isTop}
+        data-top-bottom-scroll={scrollState.isMiddle}
+        data-top-scroll={scrollState.isBottom}
         style={{
           height: maxListboxHeight,
           overflow: "auto",
         }}
+        onScroll={(e) => {
+          setScrollState(getScrollState(e.target as HTMLDivElement));
+        }}
       >
         {listHeight > 0 && itemHeight > 0 && (
           <div
@@ -124,19 +197,7 @@ const VirtualizedListbox = (props: Props) => {
               position: "relative",
             }}
           >
-            {virtualItems.map((virtualItem) =>
-              renderRow({
-                index: virtualItem.index,
-                style: {
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  width: "100%",
-                  height: `${virtualItem.size}px`,
-                  transform: `translateY(${virtualItem.start}px)`,
-                },
-              }),
-            )}
+            {virtualItems.map((virtualItem) => renderRow(virtualItem))}
           </div>
         )}
       </div>
diff --git a/packages/components/menu/CHANGELOG.md b/packages/components/menu/CHANGELOG.md
index 535c5dda6b..7fd794c328 100644
--- a/packages/components/menu/CHANGELOG.md
+++ b/packages/components/menu/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @nextui-org/menu
 
+## 2.2.9
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/divider@2.2.5
+  - @nextui-org/aria-utils@2.2.7
+
 ## 2.2.8
 
 ### Patch Changes
diff --git a/packages/components/menu/package.json b/packages/components/menu/package.json
index b73a4a3d4d..0c36b7760a 100644
--- a/packages/components/menu/package.json
+++ b/packages/components/menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/menu",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "description": "A menu displays a list of options and allows a user to select one or more of them.",
   "keywords": [
     "menu"
diff --git a/packages/components/modal/CHANGELOG.md b/packages/components/modal/CHANGELOG.md
index 591d149ad6..9ac94955d7 100644
--- a/packages/components/modal/CHANGELOG.md
+++ b/packages/components/modal/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/modal
 
+## 2.2.7
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/framer-utils@2.1.6
+
 ## 2.2.6
 
 ### Patch Changes
diff --git a/packages/components/modal/package.json b/packages/components/modal/package.json
index 0b39a11252..f4210aef1f 100644
--- a/packages/components/modal/package.json
+++ b/packages/components/modal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/modal",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "Displays a dialog with a custom content that requires attention or provides additional information.",
   "keywords": [
     "modal"
diff --git a/packages/components/navbar/CHANGELOG.md b/packages/components/navbar/CHANGELOG.md
index 56cec9674b..d3248562a5 100644
--- a/packages/components/navbar/CHANGELOG.md
+++ b/packages/components/navbar/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @nextui-org/navbar
 
+## 2.2.8
+
+### Patch Changes
+
+- [#4490](https://github.com/nextui-org/nextui/pull/4490) [`a43b156`](https://github.com/nextui-org/nextui/commit/a43b156801aef88b6eaa7bff0b670f7287499dde) Thanks [@Peterl561](https://github.com/Peterl561)! - fixed NavbarMenu applying Overlay while closed
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/framer-utils@2.1.6
+
 ## 2.2.7
 
 ### Patch Changes
diff --git a/packages/components/navbar/package.json b/packages/components/navbar/package.json
index 9d954d9a51..142c87e639 100644
--- a/packages/components/navbar/package.json
+++ b/packages/components/navbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/navbar",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
   "keywords": [
     "navbar"
diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx
index 48ca567cb8..382e856367 100644
--- a/packages/components/navbar/src/navbar-menu.tsx
+++ b/packages/components/navbar/src/navbar-menu.tsx
@@ -4,6 +4,7 @@ import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {AnimatePresence, HTMLMotionProps, LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 import {Overlay} from "@react-aria/overlays";
+import React from "react";
 
 import {menuVariants} from "./navbar-menu-transitions";
 import {useNavbarContext} from "./navbar-context";
@@ -31,47 +32,54 @@ const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
 
   const styles = clsx(classNames?.menu, className);
 
+  // only apply overlay when menu is open
+  const OverlayComponent = isMenuOpen ? Overlay : React.Fragment;
+
   const contents = disableAnimation ? (
-    <ul
-      ref={domRef}
-      className={slots.menu?.({class: styles})}
-      data-open={dataAttr(isMenuOpen)}
-      style={{
-        // @ts-expect-error
-        "--navbar-height": typeof height === "number" ? `${height}px` : height,
-      }}
-      {...otherProps}
-    >
-      {children}
-    </ul>
+    <OverlayComponent portalContainer={portalContainer}>
+      <ul
+        ref={domRef}
+        className={slots.menu?.({class: styles})}
+        data-open={dataAttr(isMenuOpen)}
+        style={{
+          // @ts-expect-error
+          "--navbar-height": typeof height === "number" ? `${height}px` : height,
+        }}
+        {...otherProps}
+      >
+        {children}
+      </ul>
+    </OverlayComponent>
   ) : (
     <AnimatePresence mode="wait">
       {isMenuOpen ? (
-        <LazyMotion features={domAnimation}>
-          <m.ul
-            ref={domRef}
-            layoutScroll
-            animate="enter"
-            className={slots.menu?.({class: styles})}
-            data-open={dataAttr(isMenuOpen)}
-            exit="exit"
-            initial="exit"
-            style={{
-              // @ts-expect-error
-              "--navbar-height": typeof height === "number" ? `${height}px` : height,
-              ...style,
-            }}
-            variants={menuVariants}
-            {...mergeProps(motionProps, otherProps)}
-          >
-            {children}
-          </m.ul>
-        </LazyMotion>
+        <Overlay portalContainer={portalContainer}>
+          <LazyMotion features={domAnimation}>
+            <m.ul
+              ref={domRef}
+              layoutScroll
+              animate="enter"
+              className={slots.menu?.({class: styles})}
+              data-open={dataAttr(isMenuOpen)}
+              exit="exit"
+              initial="exit"
+              style={{
+                // @ts-expect-error
+                "--navbar-height": typeof height === "number" ? `${height}px` : height,
+                ...style,
+              }}
+              variants={menuVariants}
+              {...mergeProps(motionProps, otherProps)}
+            >
+              {children}
+            </m.ul>
+          </LazyMotion>
+        </Overlay>
       ) : null}
     </AnimatePresence>
   );
 
-  return <Overlay portalContainer={portalContainer}>{contents}</Overlay>;
+  return contents;
 });
 
 NavbarMenu.displayName = "NextUI.NavbarMenu";
diff --git a/packages/components/pagination/CHANGELOG.md b/packages/components/pagination/CHANGELOG.md
index 64654c8cbc..8c0c1e88f7 100644
--- a/packages/components/pagination/CHANGELOG.md
+++ b/packages/components/pagination/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/pagination
 
+## 2.2.8
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+
 ## 2.2.7
 
 ### Patch Changes
diff --git a/packages/components/pagination/package.json b/packages/components/pagination/package.json
index 3d18b6f027..175a40ae2b 100644
--- a/packages/components/pagination/package.json
+++ b/packages/components/pagination/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/pagination",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "The Pagination component allows you to display active page and navigate between multiple pages.",
   "keywords": [
     "pagination"
diff --git a/packages/components/popover/CHANGELOG.md b/packages/components/popover/CHANGELOG.md
index 9b1c94f9b4..df976b0cc6 100644
--- a/packages/components/popover/CHANGELOG.md
+++ b/packages/components/popover/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @nextui-org/popover
 
+## 2.3.9
+
+### Patch Changes
+
+- [#4498](https://github.com/nextui-org/nextui/pull/4498) [`33e0418`](https://github.com/nextui-org/nextui/commit/33e0418d08c29f829b00ee3bc41972dfce6a3370) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Fix incorrect initial popover animation and arrow display (#4466)
+
+- [#4460](https://github.com/nextui-org/nextui/pull/4460) [`fb46df2`](https://github.com/nextui-org/nextui/commit/fb46df2430f95cddef0c25fce4639c2078b34f62) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Fix initial animation direction to match fallback placement (#4290)
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/button@2.2.9
+  - @nextui-org/aria-utils@2.2.7
+  - @nextui-org/framer-utils@2.1.6
+
 ## 2.3.8
 
 ### Patch Changes
diff --git a/packages/components/popover/package.json b/packages/components/popover/package.json
index afcac098e2..98a00e37d8 100644
--- a/packages/components/popover/package.json
+++ b/packages/components/popover/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/popover",
-  "version": "2.3.8",
+  "version": "2.3.9",
   "description": "A popover is an overlay element positioned relative to a trigger.",
   "keywords": [
     "popover"
diff --git a/packages/components/popover/src/free-solo-popover.tsx b/packages/components/popover/src/free-solo-popover.tsx
index 5e3c462695..55996048bb 100644
--- a/packages/components/popover/src/free-solo-popover.tsx
+++ b/packages/components/popover/src/free-solo-popover.tsx
@@ -58,7 +58,7 @@ const FreeSoloPopoverWrapper = forwardRef<"div", FreeSoloPopoverWrapperProps>(
         // @ts-ignore
         transformOrigin,
       };
-    } else {
+    } else if (placement) {
       style = {
         ...style,
         ...getTransformOrigins(placement === "center" ? "top" : placement),
diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx
index 9ceb6a343a..e2cb216b22 100644
--- a/packages/components/popover/src/popover-content.tsx
+++ b/packages/components/popover/src/popover-content.tsx
@@ -80,6 +80,9 @@ const PopoverContent = (props: PopoverContentProps) => {
     );
   }, [backdrop, disableAnimation, getBackdropProps]);
 
+  const style = placement
+    ? getTransformOrigins(placement === "center" ? "top" : placement)
+    : undefined;
   const contents = (
     <>
       {disableAnimation ? (
@@ -90,9 +93,7 @@ const PopoverContent = (props: PopoverContentProps) => {
             animate="enter"
             exit="exit"
             initial="initial"
-            style={{
-              ...getTransformOrigins(placement === "center" ? "top" : placement),
-            }}
+            style={style}
             variants={TRANSITION_VARIANTS.scaleSpringOpacity}
             {...motionProps}
           >
diff --git a/packages/components/popover/src/use-popover.ts b/packages/components/popover/src/use-popover.ts
index bc12cb14f4..813699660d 100644
--- a/packages/components/popover/src/use-popover.ts
+++ b/packages/components/popover/src/use-popover.ts
@@ -8,13 +8,14 @@ import {OverlayTriggerState, useOverlayTriggerState} from "@react-stately/overla
 import {useFocusRing} from "@react-aria/focus";
 import {ariaHideOutside, useOverlayTrigger, usePreventScroll} from "@react-aria/overlays";
 import {OverlayTriggerProps} from "@react-types/overlays";
+import {getShouldUseAxisPlacement} from "@nextui-org/aria-utils";
 import {
   HTMLNextUIProps,
   mapPropsVariants,
   PropGetter,
   useProviderContext,
 } from "@nextui-org/system";
-import {getArrowPlacement, getShouldUseAxisPlacement} from "@nextui-org/aria-utils";
+import {getArrowPlacement} from "@nextui-org/aria-utils";
 import {popover} from "@nextui-org/theme";
 import {mergeProps, mergeRefs} from "@react-aria/utils";
 import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
@@ -81,6 +82,8 @@ export interface Props extends HTMLNextUIProps<"div"> {
   onClose?: () => void;
 }
 
+const DEFAULT_PLACEMENT = "top";
+
 export type UsePopoverProps = Props &
   Omit<ReactAriaPopoverProps, "triggerRef" | "popoverRef"> &
   OverlayTriggerProps &
@@ -110,7 +113,7 @@ export function usePopover(originalProps: UsePopoverProps) {
     portalContainer,
     updatePositionDeps,
     dialogProps: dialogPropsProp,
-    placement: placementProp = "top",
+    placement: placementProp = DEFAULT_PLACEMENT,
     triggerType = "dialog",
     showArrow = false,
     offset = 7,
@@ -176,6 +179,16 @@ export function usePopover(originalProps: UsePopoverProps) {
     state,
   );
 
+  const placement = useMemo(() => {
+    // If ariaPlacement is null, popoverProps.style isn't set,
+    // so we return null to avoid an incorrect animation value.
+    if (!ariaPlacement) {
+      return null;
+    }
+
+    return getShouldUseAxisPlacement(ariaPlacement, placementProp) ? ariaPlacement : placementProp;
+  }, [ariaPlacement, placementProp]);
+
   const {triggerProps} = useOverlayTrigger({type: triggerType}, state, triggerRef);
 
   const {isFocusVisible, isFocused, focusProps} = useFocusRing();
@@ -208,7 +221,7 @@ export function usePopover(originalProps: UsePopoverProps) {
     "data-focus": dataAttr(isFocused),
     "data-arrow": dataAttr(showArrow),
     "data-focus-visible": dataAttr(isFocusVisible),
-    "data-placement": getArrowPlacement(ariaPlacement || "top", placementProp),
+    "data-placement": ariaPlacement ? getArrowPlacement(ariaPlacement, placementProp) : undefined,
     ...mergeProps(focusProps, dialogPropsProp, props),
     className: slots.base({class: clsx(baseStyles)}),
     style: {
@@ -222,18 +235,10 @@ export function usePopover(originalProps: UsePopoverProps) {
       "data-slot": "content",
       "data-open": dataAttr(state.isOpen),
       "data-arrow": dataAttr(showArrow),
-      "data-placement": getArrowPlacement(ariaPlacement || "top", placementProp),
+      "data-placement": ariaPlacement ? getArrowPlacement(ariaPlacement, placementProp) : undefined,
       className: slots.content({class: clsx(classNames?.content, props.className)}),
     }),
-    [slots, state.isOpen, showArrow, ariaPlacement, placementProp, classNames],
-  );
-
-  const placement = useMemo(
-    () =>
-      getShouldUseAxisPlacement(ariaPlacement || "top", placementProp)
-        ? ariaPlacement || placementProp
-        : placementProp,
-    [ariaPlacement, placementProp],
+    [slots, state.isOpen, showArrow, placement, placementProp, classNames, ariaPlacement],
   );
 
   const onPress = useCallback(
diff --git a/packages/components/popover/stories/popover.stories.tsx b/packages/components/popover/stories/popover.stories.tsx
index 3df9aae279..1edfb00a5c 100644
--- a/packages/components/popover/stories/popover.stories.tsx
+++ b/packages/components/popover/stories/popover.stories.tsx
@@ -127,11 +127,11 @@ const content = (
   </PopoverContent>
 );
 
-const Template = (args: PopoverProps) => {
+const Template = ({label = "Open Popover", ...args}: PopoverProps & {label: string}) => {
   return (
     <Popover {...args}>
       <PopoverTrigger>
-        <Button>Open Popover</Button>
+        <Button>{label}</Button>
       </PopoverTrigger>
       {content}
     </Popover>
@@ -581,6 +581,32 @@ export const CustomMotion = {
   },
 };
 
+export const WithFallbackPlacements = {
+  args: {
+    ...defaultProps,
+  },
+  render: (args) => (
+    <div className="relative h-screen w-screen">
+      <div className="absolute top-0 left-0 p-8 flex gap-4">
+        <Template {...args} label="placement: top" placement="top" />
+        <Template {...args} label="placement: bottom" placement="bottom" />
+      </div>
+      <div className="absolute bottom-0 left-0 p-8 flex gap-4">
+        <Template {...args} label="placement: bottom" placement="bottom" />
+        <Template {...args} label="placement: top" placement="top" />
+      </div>
+      <div className="absolute left-0 top-1/2 -translate-y-1/2 p-8 flex flex-col gap-4">
+        <Template {...args} label="placement: left" placement="left" />
+        <Template {...args} label="placement: right" placement="right" />
+      </div>
+      <div className="absolute right-0 top-1/2 -translate-y-1/2 p-8 flex flex-col gap-4">
+        <Template {...args} label="placement: right" placement="right" />
+        <Template {...args} label="placement: left" placement="left" />
+      </div>
+    </div>
+  ),
+};
+
 export const WithShouldBlockScroll = {
   render: (args) => {
     return (
diff --git a/packages/components/progress/CHANGELOG.md b/packages/components/progress/CHANGELOG.md
index 555db7d563..023b58542d 100644
--- a/packages/components/progress/CHANGELOG.md
+++ b/packages/components/progress/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/progress
 
+## 2.2.6
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+
 ## 2.2.5
 
 ### Patch Changes
diff --git a/packages/components/progress/package.json b/packages/components/progress/package.json
index 1d97ea120a..ddd0ee6069 100644
--- a/packages/components/progress/package.json
+++ b/packages/components/progress/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/progress",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
   "keywords": [
     "progress"
diff --git a/packages/components/radio/CHANGELOG.md b/packages/components/radio/CHANGELOG.md
index 8f2e7d9ccf..ddaf7f6b2c 100644
--- a/packages/components/radio/CHANGELOG.md
+++ b/packages/components/radio/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/radio
 
+## 2.3.8
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/form@2.1.8
+
 ## 2.3.7
 
 ### Patch Changes
diff --git a/packages/components/radio/package.json b/packages/components/radio/package.json
index 67988ab268..6e5693813c 100644
--- a/packages/components/radio/package.json
+++ b/packages/components/radio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/radio",
-  "version": "2.3.7",
+  "version": "2.3.8",
   "description": "Radios allow users to select a single option from a list of mutually exclusive options.",
   "keywords": [
     "radio"
diff --git a/packages/components/ripple/CHANGELOG.md b/packages/components/ripple/CHANGELOG.md
index 4e18cbba91..3cb3503490 100644
--- a/packages/components/ripple/CHANGELOG.md
+++ b/packages/components/ripple/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/ripple
 
+## 2.2.7
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+
 ## 2.2.6
 
 ### Patch Changes
diff --git a/packages/components/ripple/package.json b/packages/components/ripple/package.json
index 5dc1491c82..4a42f7646a 100644
--- a/packages/components/ripple/package.json
+++ b/packages/components/ripple/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/ripple",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "A simple implementation to display a ripple animation when the source component is clicked",
   "keywords": [
     "ripple"
diff --git a/packages/components/scroll-shadow/CHANGELOG.md b/packages/components/scroll-shadow/CHANGELOG.md
index a93e336bd8..3f1036f5ee 100644
--- a/packages/components/scroll-shadow/CHANGELOG.md
+++ b/packages/components/scroll-shadow/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/scroll-shadow
 
+## 2.3.5
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+
 ## 2.3.4
 
 ### Patch Changes
diff --git a/packages/components/scroll-shadow/package.json b/packages/components/scroll-shadow/package.json
index ca9e5787ec..623769e4b3 100644
--- a/packages/components/scroll-shadow/package.json
+++ b/packages/components/scroll-shadow/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/scroll-shadow",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "A component that applies top and bottom shadows when content overflows on scroll.",
   "keywords": [
     "scroll-shadow"
diff --git a/packages/components/select/CHANGELOG.md b/packages/components/select/CHANGELOG.md
index d91b12cd32..f597c553c5 100644
--- a/packages/components/select/CHANGELOG.md
+++ b/packages/components/select/CHANGELOG.md
@@ -1,5 +1,22 @@
 # @nextui-org/select
 
+## 2.4.9
+
+### Patch Changes
+
+- [#4463](https://github.com/nextui-org/nextui/pull/4463) [`d92468a`](https://github.com/nextui-org/nextui/commit/d92468aa1e35d5022c071b5d2674f5bfb6408001) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@tanstack/react-virtual` to support react 19 peer dep
+
+- [#4462](https://github.com/nextui-org/nextui/pull/4462) [`16c57ec`](https://github.com/nextui-org/nextui/commit/16c57ece6467d755645f109b8de810c9063e5665) Thanks [@vinroger](https://github.com/vinroger)! - add support for dataset with section, add support for scrollshadow
+
+- Updated dependencies [[`d92468a`](https://github.com/nextui-org/nextui/commit/d92468aa1e35d5022c071b5d2674f5bfb6408001), [`33e0418`](https://github.com/nextui-org/nextui/commit/33e0418d08c29f829b00ee3bc41972dfce6a3370), [`16c57ec`](https://github.com/nextui-org/nextui/commit/16c57ece6467d755645f109b8de810c9063e5665), [`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2), [`fb46df2`](https://github.com/nextui-org/nextui/commit/fb46df2430f95cddef0c25fce4639c2078b34f62)]:
+  - @nextui-org/listbox@2.3.9
+  - @nextui-org/popover@2.3.9
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/form@2.1.8
+  - @nextui-org/scroll-shadow@2.3.5
+  - @nextui-org/spinner@2.2.6
+  - @nextui-org/aria-utils@2.2.7
+
 ## 2.4.8
 
 ### Patch Changes
diff --git a/packages/components/select/package.json b/packages/components/select/package.json
index 2474f8ff28..c08a68073e 100644
--- a/packages/components/select/package.json
+++ b/packages/components/select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/select",
-  "version": "2.4.8",
+  "version": "2.4.9",
   "description": "A select displays a collapsible list of options and allows a user to select one of them.",
   "keywords": [
     "select"
@@ -59,7 +59,7 @@
     "@react-aria/utils": "3.26.0",
     "@react-aria/visually-hidden": "3.8.18",
     "@react-types/shared": "3.26.0",
-    "@tanstack/react-virtual": "3.10.9"
+    "@tanstack/react-virtual": "3.11.2"
   },
   "devDependencies": {
     "@nextui-org/avatar": "workspace:*",
diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts
index e563cd1f7d..6000ede2a5 100644
--- a/packages/components/select/src/use-select.ts
+++ b/packages/components/select/src/use-select.ts
@@ -161,7 +161,9 @@ export type UseSelectProps<T> = Omit<
   SelectVariantProps & {
     /**
      * The height of each item in the listbox.
+     * For dataset with sections, the itemHeight must be the height of each item (including padding, border, margin).
      * This is required for virtualized listboxes to calculate the height of each item.
+     * @default 36
      */
     itemHeight?: number;
     /**
@@ -208,7 +210,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     onSelectionChange,
     placeholder,
     isVirtualized,
-    itemHeight = 32,
+    itemHeight = 36,
     maxListboxHeight = 256,
     children,
     disallowEmptySelection = false,
@@ -564,6 +566,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
       className: slots.listbox({
         class: clsx(classNames?.listbox, props?.className),
       }),
+      scrollShadowProps: slotsProps.scrollShadowProps,
       ...mergeProps(slotsProps.listboxProps, props, menuProps),
     } as ListboxProps;
   };
diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
index 34136d2bb3..d5438a0830 100644
--- a/packages/components/select/stories/select.stories.tsx
+++ b/packages/components/select/stories/select.stories.tsx
@@ -1391,9 +1391,127 @@ export const CustomItemHeight = {
   },
 };
 
+const AVATAR_DECORATIONS: {[key: string]: string[]} = {
+  arcane: ["jinx", "atlas-gauntlets", "flame-chompers", "fishbones", "hexcore", "shimmer"],
+  anime: ["cat-ears", "heart-bloom", "in-love", "in-tears", "soul-leaving-body", "starry-eyed"],
+  "lofi-vibes": ["chromawave", "cozy-cat", "cozy-headphones", "doodling", "rainy-mood"],
+  valorant: [
+    "a-hint-of-clove",
+    "blade-storm",
+    "cypher",
+    "frag-out",
+    "omen-cowl",
+    "reyna-leer",
+    "vct-supernova",
+    "viper",
+    "yoru",
+    "carnalito2",
+    "a-hint-of-clove2",
+    "blade-storm2",
+    "cypher2",
+    "frag-out2",
+    "omen-cowl2",
+    "reyna-leer2",
+    "vct-supernova2",
+    "viper2",
+    "yoru2",
+    "carnalito3",
+    "a-hint-of-clove3",
+    "blade-storm3",
+    "cypher3",
+    "frag-out3",
+    "omen-cowl3",
+    "reyna-leer3",
+    "vct-supernova3",
+    "viper3",
+    "yoru3",
+    "carnalito4",
+    "a-hint-of-clove4",
+    "blade-storm4",
+    "cypher4",
+    "frag-out4",
+    "omen-cowl4",
+    "reyna-leer4",
+    "vct-supernova4",
+    "viper4",
+    "yoru4",
+  ],
+  spongebob: [
+    "flower-clouds",
+    "gary-the-snail",
+    "imagination",
+    "musclebob",
+    "sandy-cheeks",
+    "spongebob",
+  ],
+  arcade: ["clyde-invaders", "hot-shot", "joystick", "mallow-jump", "pipedream", "snake"],
+  "street-fighter": ["akuma", "cammy", "chun-li", "guile", "juri", "ken", "m.bison", "ryu"],
+};
+
+export const NonVirtualizedVsVirtualizedWithSections = {
+  render: () => {
+    const SelectComponent = ({isVirtualized}: {isVirtualized: boolean}) => (
+      <Select
+        disallowEmptySelection
+        className="max-w-xs"
+        color="secondary"
+        defaultSelectedKeys={["jinx"]}
+        isVirtualized={isVirtualized}
+        label={`Avatar Decoration ${isVirtualized ? "(Virtualized)" : "(Non-virtualized)"}`}
+        selectedKeys={["jinx"]}
+        selectionMode="single"
+        variant="bordered"
+      >
+        {Object.keys(AVATAR_DECORATIONS).map((key) => (
+          <SelectSection
+            key={key}
+            classNames={{
+              heading: "uppercase text-secondary",
+            }}
+            title={key}
+          >
+            {AVATAR_DECORATIONS[key].map((item) => (
+              <SelectItem key={item} className="capitalize" color="secondary" variant="bordered">
+                {item.replace(/-/g, " ")}
+              </SelectItem>
+            ))}
+          </SelectSection>
+        ))}
+      </Select>
+    );
+
+    return (
+      <div className="flex gap-4 w-full">
+        <SelectComponent isVirtualized={false} />
+        <SelectComponent isVirtualized={true} />
+      </div>
+    );
+  },
+};
+
 export const ValidationBehaviorAria = {
   render: ValidationBehaviorAriaTemplate,
   args: {
     ...defaultProps,
   },
 };
+
+export const PopoverTopOrBottom = {
+  args: {
+    ...defaultProps,
+  },
+  render: (args) => (
+    <div className="relative h-screen w-screen">
+      <div className="absolute top-0 p-8">
+        <div className="w-48">
+          <Template {...args} />
+        </div>
+      </div>
+      <div className="absolute top-1/2 p-8">
+        <div className="w-48">
+          <Template {...args} />
+        </div>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/components/skeleton/CHANGELOG.md b/packages/components/skeleton/CHANGELOG.md
index 0669bda78e..e89bfe9319 100644
--- a/packages/components/skeleton/CHANGELOG.md
+++ b/packages/components/skeleton/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/skeleton
 
+## 2.2.5
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+
 ## 2.2.4
 
 ### Patch Changes
diff --git a/packages/components/skeleton/package.json b/packages/components/skeleton/package.json
index 8fe7ec8af6..ddf80bd048 100644
--- a/packages/components/skeleton/package.json
+++ b/packages/components/skeleton/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/skeleton",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "Skeleton is used to display the loading state of some component.",
   "keywords": [
     "skeleton"
diff --git a/packages/components/slider/CHANGELOG.md b/packages/components/slider/CHANGELOG.md
index 2c8bd1da2f..cc0df78783 100644
--- a/packages/components/slider/CHANGELOG.md
+++ b/packages/components/slider/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/slider
 
+## 2.4.7
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/tooltip@2.2.7
+
 ## 2.4.6
 
 ### Patch Changes
diff --git a/packages/components/slider/package.json b/packages/components/slider/package.json
index 689dda6198..b4dfa2efc9 100644
--- a/packages/components/slider/package.json
+++ b/packages/components/slider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/slider",
-  "version": "2.4.6",
+  "version": "2.4.7",
   "description": "A slider allows a user to select one or more values within a range.",
   "keywords": [
     "slider"
diff --git a/packages/components/snippet/CHANGELOG.md b/packages/components/snippet/CHANGELOG.md
index 808deb07d3..4cf37dfc32 100644
--- a/packages/components/snippet/CHANGELOG.md
+++ b/packages/components/snippet/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @nextui-org/snippet
 
+## 2.2.10
+
+### Patch Changes
+
+- Updated dependencies [[`4f0ef58`](https://github.com/nextui-org/nextui/commit/4f0ef5818be83071d6c2032080251b41039656f1), [`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/use-clipboard@2.1.2
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/button@2.2.9
+  - @nextui-org/tooltip@2.2.7
+
 ## 2.2.9
 
 ### Patch Changes
diff --git a/packages/components/snippet/package.json b/packages/components/snippet/package.json
index 6d42b0cc17..d6e90cb92c 100644
--- a/packages/components/snippet/package.json
+++ b/packages/components/snippet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/snippet",
-  "version": "2.2.9",
+  "version": "2.2.10",
   "description": "Display a snippet of copyable code for the command line.",
   "keywords": [
     "snippet"
diff --git a/packages/components/snippet/stories/snippet.stories.tsx b/packages/components/snippet/stories/snippet.stories.tsx
index 7f8b1011cf..00c5f9b0fc 100644
--- a/packages/components/snippet/stories/snippet.stories.tsx
+++ b/packages/components/snippet/stories/snippet.stories.tsx
@@ -92,32 +92,9 @@ export const MultiLine = {
   args: {
     ...defaultProps,
     children: [
-      // "npm install @nextui-org/react",
-      // "yarn add @nextui-org/react",
-      // "pnpm add @nextui-org/react",
-      `
-{
-  "name": "Next.js PWA",
-  "short_name": "NextPWA",
-  "description": "A Progressive Web App built with Next.js and React",
-  "start_url": "/",
-  "display": "standalone",
-  "background_color": "#ffffff",
-  "theme_color": "#000000",
-  "icons": [
-    {
-      "src": "/icon-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ]
-}
-`,
+      "npm install @nextui-org/react",
+      "yarn add @nextui-org/react",
+      "pnpm add @nextui-org/react",
     ],
   },
 };
diff --git a/packages/components/spacer/CHANGELOG.md b/packages/components/spacer/CHANGELOG.md
index e52a2ae839..a69cf39eab 100644
--- a/packages/components/spacer/CHANGELOG.md
+++ b/packages/components/spacer/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/spacer
 
+## 2.2.6
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/system-rsc@2.3.5
+
 ## 2.2.5
 
 ### Patch Changes
diff --git a/packages/components/spacer/package.json b/packages/components/spacer/package.json
index cee929e4a7..b72d1bce1c 100644
--- a/packages/components/spacer/package.json
+++ b/packages/components/spacer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spacer",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
   "keywords": [
     "spacer"
diff --git a/packages/components/spinner/CHANGELOG.md b/packages/components/spinner/CHANGELOG.md
index a51c7a7a7c..e5ef8441bc 100644
--- a/packages/components/spinner/CHANGELOG.md
+++ b/packages/components/spinner/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/spinner
 
+## 2.2.6
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/system-rsc@2.3.5
+
 ## 2.2.5
 
 ### Patch Changes
diff --git a/packages/components/spinner/package.json b/packages/components/spinner/package.json
index c58c5c4737..d6dde59339 100644
--- a/packages/components/spinner/package.json
+++ b/packages/components/spinner/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spinner",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "Loaders express an unspecified wait time or display the length of a process.",
   "keywords": [
     "loading",
diff --git a/packages/components/switch/CHANGELOG.md b/packages/components/switch/CHANGELOG.md
index 6fa5f8b338..69c71ce5a3 100644
--- a/packages/components/switch/CHANGELOG.md
+++ b/packages/components/switch/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/switch
 
+## 2.2.8
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+
 ## 2.2.7
 
 ### Patch Changes
diff --git a/packages/components/switch/package.json b/packages/components/switch/package.json
index 5b439eb5d1..ae632884cc 100644
--- a/packages/components/switch/package.json
+++ b/packages/components/switch/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/switch",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
   "keywords": [
     "switch"
diff --git a/packages/components/table/CHANGELOG.md b/packages/components/table/CHANGELOG.md
index 3f0645ff5d..330f5fec18 100644
--- a/packages/components/table/CHANGELOG.md
+++ b/packages/components/table/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @nextui-org/table
 
+## 2.2.8
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/checkbox@2.3.8
+  - @nextui-org/spacer@2.2.6
+
 ## 2.2.7
 
 ### Patch Changes
diff --git a/packages/components/table/package.json b/packages/components/table/package.json
index 81b4a10ba9..c099543c21 100644
--- a/packages/components/table/package.json
+++ b/packages/components/table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/table",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "Tables are used to display tabular data using rows and columns. ",
   "keywords": [
     "table"
diff --git a/packages/components/tabs/CHANGELOG.md b/packages/components/tabs/CHANGELOG.md
index e2722f9e33..2593010f9c 100644
--- a/packages/components/tabs/CHANGELOG.md
+++ b/packages/components/tabs/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @nextui-org/tabs
 
+## 2.2.7
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/aria-utils@2.2.7
+  - @nextui-org/framer-utils@2.1.6
+
 ## 2.2.6
 
 ### Patch Changes
diff --git a/packages/components/tabs/package.json b/packages/components/tabs/package.json
index 0c6ac62cee..d591602dc4 100644
--- a/packages/components/tabs/package.json
+++ b/packages/components/tabs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/tabs",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "Tabs organize content into multiple sections and allow users to navigate between them.",
   "keywords": [
     "tabs"
diff --git a/packages/components/tooltip/CHANGELOG.md b/packages/components/tooltip/CHANGELOG.md
index 2dfc91089a..2bd14972b2 100644
--- a/packages/components/tooltip/CHANGELOG.md
+++ b/packages/components/tooltip/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @nextui-org/tooltip
 
+## 2.2.7
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/aria-utils@2.2.7
+  - @nextui-org/framer-utils@2.1.6
+
 ## 2.2.6
 
 ### Patch Changes
diff --git a/packages/components/tooltip/package.json b/packages/components/tooltip/package.json
index 989ee18050..859552f618 100644
--- a/packages/components/tooltip/package.json
+++ b/packages/components/tooltip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/tooltip",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "A React Component for rendering dynamically positioned Tooltips",
   "keywords": [
     "tooltip"
diff --git a/packages/components/user/CHANGELOG.md b/packages/components/user/CHANGELOG.md
index 9f1b7b2074..4ddf69c470 100644
--- a/packages/components/user/CHANGELOG.md
+++ b/packages/components/user/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/user
 
+## 2.2.6
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/avatar@2.2.6
+
 ## 2.2.5
 
 ### Patch Changes
diff --git a/packages/components/user/package.json b/packages/components/user/package.json
index 0deb3f9d55..ea381c223b 100644
--- a/packages/components/user/package.json
+++ b/packages/components/user/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/user",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "Flexible User Profile Component.",
   "keywords": [
     "user"
diff --git a/packages/core/react/CHANGELOG.md b/packages/core/react/CHANGELOG.md
index 28a9f2f8e3..2176bdef84 100644
--- a/packages/core/react/CHANGELOG.md
+++ b/packages/core/react/CHANGELOG.md
@@ -1,5 +1,58 @@
 # @nextui-org/react
 
+## 2.6.11
+
+### Patch Changes
+
+- Updated dependencies [[`d92468a`](https://github.com/nextui-org/nextui/commit/d92468aa1e35d5022c071b5d2674f5bfb6408001), [`a43b156`](https://github.com/nextui-org/nextui/commit/a43b156801aef88b6eaa7bff0b670f7287499dde), [`33e0418`](https://github.com/nextui-org/nextui/commit/33e0418d08c29f829b00ee3bc41972dfce6a3370), [`07780a7`](https://github.com/nextui-org/nextui/commit/07780a75a2747405e16af99c1692aef496f54175), [`a83388a`](https://github.com/nextui-org/nextui/commit/a83388aaf4521f0ed8dfed99a54998156df1868b), [`a83388a`](https://github.com/nextui-org/nextui/commit/a83388aaf4521f0ed8dfed99a54998156df1868b), [`7c2bc4a`](https://github.com/nextui-org/nextui/commit/7c2bc4a18ef01424c7ff464cad3401dd6596e7b3), [`0401f25`](https://github.com/nextui-org/nextui/commit/0401f2548f525fc4194186b54f563cb91c6ccd0c), [`16c57ec`](https://github.com/nextui-org/nextui/commit/16c57ece6467d755645f109b8de810c9063e5665), [`0c45fed`](https://github.com/nextui-org/nextui/commit/0c45fed420747b41a4d2a7bb07e9582f6f609287), [`fb46df2`](https://github.com/nextui-org/nextui/commit/fb46df2430f95cddef0c25fce4639c2078b34f62)]:
+  - @nextui-org/listbox@2.3.9
+  - @nextui-org/select@2.4.9
+  - @nextui-org/navbar@2.2.8
+  - @nextui-org/dropdown@2.3.9
+  - @nextui-org/popover@2.3.9
+  - @nextui-org/drawer@2.2.7
+  - @nextui-org/alert@2.2.9
+  - @nextui-org/theme@2.4.5
+  - @nextui-org/autocomplete@2.3.9
+  - @nextui-org/avatar@2.2.6
+  - @nextui-org/image@2.2.5
+  - @nextui-org/breadcrumbs@2.2.6
+  - @nextui-org/date-picker@2.3.9
+  - @nextui-org/accordion@2.2.7
+  - @nextui-org/badge@2.2.5
+  - @nextui-org/button@2.2.9
+  - @nextui-org/calendar@2.2.9
+  - @nextui-org/card@2.2.9
+  - @nextui-org/checkbox@2.3.8
+  - @nextui-org/chip@2.2.6
+  - @nextui-org/code@2.2.6
+  - @nextui-org/date-input@2.3.8
+  - @nextui-org/divider@2.2.5
+  - @nextui-org/form@2.1.8
+  - @nextui-org/input@2.4.8
+  - @nextui-org/input-otp@2.1.8
+  - @nextui-org/kbd@2.2.6
+  - @nextui-org/link@2.2.7
+  - @nextui-org/menu@2.2.9
+  - @nextui-org/modal@2.2.7
+  - @nextui-org/pagination@2.2.8
+  - @nextui-org/progress@2.2.6
+  - @nextui-org/radio@2.3.8
+  - @nextui-org/ripple@2.2.7
+  - @nextui-org/scroll-shadow@2.3.5
+  - @nextui-org/skeleton@2.2.5
+  - @nextui-org/slider@2.4.7
+  - @nextui-org/snippet@2.2.10
+  - @nextui-org/spacer@2.2.6
+  - @nextui-org/spinner@2.2.6
+  - @nextui-org/switch@2.2.8
+  - @nextui-org/table@2.2.8
+  - @nextui-org/tabs@2.2.7
+  - @nextui-org/tooltip@2.2.7
+  - @nextui-org/user@2.2.6
+  - @nextui-org/system@2.4.6
+  - @nextui-org/framer-utils@2.1.6
+
 ## 2.6.10
 
 ### Patch Changes
diff --git a/packages/core/react/package.json b/packages/core/react/package.json
index a1ab0d2f71..3851bf434e 100644
--- a/packages/core/react/package.json
+++ b/packages/core/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react",
-  "version": "2.6.10",
+  "version": "2.6.11",
   "description": "🚀 Beautiful and modern React UI library.",
   "author": "Junior Garcia <jrgarciadev@gmail.com>",
   "homepage": "https://nextui.org",
diff --git a/packages/core/system/CHANGELOG.md b/packages/core/system/CHANGELOG.md
index 1238a0923e..7e66031e51 100644
--- a/packages/core/system/CHANGELOG.md
+++ b/packages/core/system/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @nextui-org/system
 
+## 2.4.6
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/system-rsc@2.3.5
+
 ## 2.4.5
 
 ### Patch Changes
diff --git a/packages/core/system/package.json b/packages/core/system/package.json
index 7c12c6ba63..71d611b078 100644
--- a/packages/core/system/package.json
+++ b/packages/core/system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/system",
-  "version": "2.4.5",
+  "version": "2.4.6",
   "description": "NextUI system primitives",
   "keywords": [
     "system"
diff --git a/packages/core/theme/CHANGELOG.md b/packages/core/theme/CHANGELOG.md
index 83de0efac1..5894d72a36 100644
--- a/packages/core/theme/CHANGELOG.md
+++ b/packages/core/theme/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @nextui-org/theme
 
+## 2.4.5
+
+### Patch Changes
+
+- [#4447](https://github.com/nextui-org/nextui/pull/4447) [`a83388a`](https://github.com/nextui-org/nextui/commit/a83388aaf4521f0ed8dfed99a54998156df1868b) Thanks [@wingkwong](https://github.com/wingkwong)! - fix the alignment when only alert children is provided
+
 ## 2.4.4
 
 ### Patch Changes
diff --git a/packages/core/theme/package.json b/packages/core/theme/package.json
index e90653f64c..c239b1aadc 100644
--- a/packages/core/theme/package.json
+++ b/packages/core/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/theme",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "description": "The default theme for NextUI components",
   "keywords": [
     "theme",
diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index a1e95182f6..4ca917b834 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -25,7 +25,8 @@ import {colorVariants} from "../utils";
 const alert = tv({
   slots: {
     base: "flex flex-grow flex-row w-full items-start py-3 px-4 gap-x-1",
-    mainWrapper: "h-full flex-grow min-h-10 ms-2 flex flex-col box-border items-start text-inherit",
+    mainWrapper:
+      "h-full flex-grow min-h-10 ms-2 flex flex-col box-border items-start text-inherit justify-center",
     title: "text-small w-full font-medium block text-inherit leading-5",
     description: "pl-[1px] text-small font-normal text-inherit",
     closeButton: "relative text-inherit translate-x-1 -translate-y-1",
diff --git a/packages/hooks/use-aria-link/CHANGELOG.md b/packages/hooks/use-aria-link/CHANGELOG.md
index 98ec618eea..462938883c 100644
--- a/packages/hooks/use-aria-link/CHANGELOG.md
+++ b/packages/hooks/use-aria-link/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @nextui-org/use-aria-link
 
+## 2.2.5
+
+### Patch Changes
+
+- [#4497](https://github.com/nextui-org/nextui/pull/4497) [`b2e924f`](https://github.com/nextui-org/nextui/commit/b2e924fe19f4c6620ec0a0e464b9b35386ed2319) Thanks [@wingkwong](https://github.com/wingkwong)! - fix onclick deprecation warning for Button as Link (#4493)
+
 ## 2.2.4
 
 ### Patch Changes
diff --git a/packages/hooks/use-aria-link/package.json b/packages/hooks/use-aria-link/package.json
index 45aca266c0..60eb4c42c2 100644
--- a/packages/hooks/use-aria-link/package.json
+++ b/packages/hooks/use-aria-link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-link",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "Internal hook to handle link a11y and events, this is based on react-aria link hook but without the onClick warning",
   "keywords": [
     "use-aria-link"
diff --git a/packages/hooks/use-aria-link/src/index.ts b/packages/hooks/use-aria-link/src/index.ts
index e47e0d1692..eb3d9e1c64 100644
--- a/packages/hooks/use-aria-link/src/index.ts
+++ b/packages/hooks/use-aria-link/src/index.ts
@@ -19,6 +19,8 @@ export interface AriaLinkOptions extends AriaLinkProps {
   "aria-current"?: DOMAttributes["aria-current"];
   /** Whether the link is disabled. */
   isDisabled?: boolean;
+  /** The role of the element */
+  role?: string;
   /**
    * The HTML element used to render the link, e.g. 'a', or 'span'.
    * @default 'a'
@@ -46,6 +48,7 @@ export function useAriaLink(props: AriaLinkOptions, ref: RefObject<FocusableElem
     onPressEnd,
     // @ts-ignore
     onClick: deprecatedOnClick,
+    role,
     isDisabled,
     ...otherProps
   } = props;
@@ -61,7 +64,7 @@ export function useAriaLink(props: AriaLinkOptions, ref: RefObject<FocusableElem
 
   let isMobile = isIOS() || isAndroid();
 
-  if (deprecatedOnClick && typeof deprecatedOnClick === "function") {
+  if (deprecatedOnClick && typeof deprecatedOnClick === "function" && role !== "button") {
     warn(
       "onClick is deprecated, please use onPress instead. See: https://github.com/nextui-org/nextui/issues/4292",
       "useLink",
diff --git a/packages/hooks/use-clipboard/CHANGELOG.md b/packages/hooks/use-clipboard/CHANGELOG.md
index e9cb5b5fbf..22e11d0417 100644
--- a/packages/hooks/use-clipboard/CHANGELOG.md
+++ b/packages/hooks/use-clipboard/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @nextui-org/use-clipboard
 
+## 2.1.2
+
+### Patch Changes
+
+- [#4392](https://github.com/nextui-org/nextui/pull/4392) [`4f0ef58`](https://github.com/nextui-org/nextui/commit/4f0ef5818be83071d6c2032080251b41039656f1) Thanks [@winchesHe](https://github.com/winchesHe)! - Fix clipboard get different unicode whitespace (#4225)
+
 ## 2.1.1
 
 ### Patch Changes
diff --git a/packages/hooks/use-clipboard/package.json b/packages/hooks/use-clipboard/package.json
index bba9da7d2e..b7b3abf047 100644
--- a/packages/hooks/use-clipboard/package.json
+++ b/packages/hooks/use-clipboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-clipboard",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Wrapper around navigator.clipboard with feedback timeout",
   "keywords": [
     "use-clipboard"
diff --git a/packages/hooks/use-clipboard/src/index.ts b/packages/hooks/use-clipboard/src/index.ts
index 0063a4ca0b..f521bdd091 100644
--- a/packages/hooks/use-clipboard/src/index.ts
+++ b/packages/hooks/use-clipboard/src/index.ts
@@ -8,6 +8,11 @@ export interface UseClipboardProps {
   timeout?: number;
 }
 
+const transformValue = (text: string) => {
+  // Manually replace all &nbsp; to avoid get different unicode characters;
+  return text.replace(/[\u00A0]/g, " ");
+};
+
 /**
  * Copies the given text to the clipboard.
  * @param {number} timeout - timeout in ms, default 2000
@@ -36,8 +41,11 @@ export function useClipboard({timeout = 2000}: UseClipboardProps = {}) {
   const copy = useCallback(
     (valueToCopy: any) => {
       if ("clipboard" in navigator) {
+        const transformedValue =
+          typeof valueToCopy === "string" ? transformValue(valueToCopy) : valueToCopy;
+
         navigator.clipboard
-          .writeText(valueToCopy)
+          .writeText(transformedValue)
           .then(() => handleCopyResult(true))
           .catch((err) => setError(err));
       } else {
diff --git a/packages/hooks/use-image/CHANGELOG.md b/packages/hooks/use-image/CHANGELOG.md
index b8ad4cf788..2a0894e4a6 100644
--- a/packages/hooks/use-image/CHANGELOG.md
+++ b/packages/hooks/use-image/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @nextui-org/use-image
 
+## 2.1.2
+
+### Patch Changes
+
+- [#4486](https://github.com/nextui-org/nextui/pull/4486) [`5d0fc9f`](https://github.com/nextui-org/nextui/commit/5d0fc9f786ef522d74333f2dc9384626fd8cad3b) Thanks [@wingkwong](https://github.com/wingkwong)! - set status after hydrated
+
+- [`ef916ea`](https://github.com/nextui-org/nextui/commit/ef916ead525414d7b62c01f26ae5580fd9ba7f14) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Retry changeset release
+
+- [#4442](https://github.com/nextui-org/nextui/pull/4442) [`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2) Thanks [@wingkwong](https://github.com/wingkwong)! - fix cached image flickering issue (#4271)
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+
 ## 2.1.1
 
 ### Patch Changes
diff --git a/packages/hooks/use-image/__tests__/use-image.test.tsx b/packages/hooks/use-image/__tests__/use-image.test.tsx
index f69de371f6..043fbd2507 100644
--- a/packages/hooks/use-image/__tests__/use-image.test.tsx
+++ b/packages/hooks/use-image/__tests__/use-image.test.tsx
@@ -34,4 +34,11 @@ describe("use-image hook", () => {
     expect(result.current).toEqual("loading");
     await waitFor(() => expect(result.current).toBe("failed"));
   });
+
+  it("can handle cached image", async () => {
+    mockImage.simulate("loaded");
+    const {result} = renderHook(() => useImage({src: "/test.png"}));
+
+    await waitFor(() => expect(result.current).toBe("loaded"));
+  });
 });
diff --git a/packages/hooks/use-image/package.json b/packages/hooks/use-image/package.json
index f881cad622..33399cbd66 100644
--- a/packages/hooks/use-image/package.json
+++ b/packages/hooks/use-image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-image",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "React hook for progressing image loading",
   "keywords": [
     "use-image"
@@ -34,7 +34,8 @@
     "postpack": "clean-package restore"
   },
   "dependencies": {
-    "@nextui-org/use-safe-layout-effect": "workspace:*"
+    "@nextui-org/use-safe-layout-effect": "workspace:*",
+    "@nextui-org/react-utils": "workspace:*"
   },
   "peerDependencies": {
     "react": ">=18 || >=19.0.0-rc.0"
diff --git a/packages/hooks/use-image/src/index.ts b/packages/hooks/use-image/src/index.ts
index a935d00ab3..dd47fd99a7 100644
--- a/packages/hooks/use-image/src/index.ts
+++ b/packages/hooks/use-image/src/index.ts
@@ -1,160 +1,11 @@
-// /**
-//  * Part of this code is taken from @chakra-ui/react package ❤️
-//  */
-// import type {ImgHTMLAttributes, MutableRefObject, SyntheticEvent} from "react";
-
-// import {useEffect, useRef, useState} from "react";
-// import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
-
-// type NativeImageProps = ImgHTMLAttributes<HTMLImageElement>;
-
-// export interface UseImageProps {
-//   /**
-//    * The image `src` attribute
-//    */
-//   src?: string;
-//   /**
-//    * The image `srcset` attribute
-//    */
-//   srcSet?: string;
-//   /**
-//    * The image `sizes` attribute
-//    */
-//   sizes?: string;
-//   /**
-//    * A callback for when the image `src` has been loaded
-//    */
-//   onLoad?: NativeImageProps["onLoad"];
-//   /**
-//    * A callback for when there was an error loading the image `src`
-//    */
-//   onError?: NativeImageProps["onError"];
-//   /**
-//    * If `true`, opt out of the `fallbackSrc` logic and use as `img`
-//    */
-//   ignoreFallback?: boolean;
-//   /**
-//    * The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded.
-//    * This tells the browser to request cross-origin access when trying to download the image data.
-//    */
-//   crossOrigin?: NativeImageProps["crossOrigin"];
-//   loading?: NativeImageProps["loading"];
-// }
-
-// type Status = "loading" | "failed" | "pending" | "loaded";
-
-// export type FallbackStrategy = "onError" | "beforeLoadOrError";
-
-// type ImageEvent = SyntheticEvent<HTMLImageElement, Event>;
-
-// /**
-//  * React hook that loads an image in the browser,
-//  * and lets us know the `status` so we can show image
-//  * fallback if it is still `pending`
-//  *
-//  * @returns the status of the image loading progress
-//  *
-//  * @example
-//  *
-//  * ```jsx
-//  * function App(){
-//  *   const status = useImage({ src: "image.png" })
-//  *   return status === "loaded" ? <img src="image.png" /> : <Placeholder />
-//  * }
-//  * ```
-//  */
-// export function useImage(props: UseImageProps = {}) {
-//   const {loading, src, srcSet, onLoad, onError, crossOrigin, sizes, ignoreFallback} = props;
-
-//   const imageRef = useRef<HTMLImageElement | null>();
-//   const firstMount = useRef<boolean>(true);
-//   const [status, setStatus] = useState<Status>(() => setImageAndGetInitialStatus(props, imageRef));
-
-//   useSafeLayoutEffect(() => {
-//     if (firstMount.current) {
-//       firstMount.current = false;
-
-//       return;
-//     }
-
-//     setStatus(setImageAndGetInitialStatus(props, imageRef));
-
-//     return () => {
-//       flush();
-//     };
-//   }, [src, crossOrigin, srcSet, sizes, loading]);
-
-//   useEffect(() => {
-//     if (!imageRef.current) return;
-//     imageRef.current.onload = (event) => {
-//       flush();
-//       setStatus("loaded");
-//       onLoad?.(event as unknown as ImageEvent);
-//     };
-//     imageRef.current.onerror = (error) => {
-//       flush();
-//       setStatus("failed");
-//       onError?.(error as any);
-//     };
-//   }, [imageRef.current]);
-
-//   const flush = () => {
-//     if (imageRef.current) {
-//       imageRef.current.onload = null;
-//       imageRef.current.onerror = null;
-//       imageRef.current = null;
-//     }
-//   };
-
-//   /**
-//    * If user opts out of the fallback/placeholder
-//    * logic, let's just return 'loaded'
-//    */
-//   return ignoreFallback ? "loaded" : status;
-// }
-
-// function setImageAndGetInitialStatus(
-//   props: UseImageProps,
-//   imageRef: MutableRefObject<HTMLImageElement | null | undefined>,
-// ): Status {
-//   const {loading, src, srcSet, crossOrigin, sizes, ignoreFallback} = props;
-
-//   if (!src) return "pending";
-//   if (ignoreFallback) return "loaded";
-
-//   try {
-//     const img = new Image();
-
-//     img.src = src;
-//     if (crossOrigin) img.crossOrigin = crossOrigin;
-//     if (srcSet) img.srcset = srcSet;
-//     if (sizes) img.sizes = sizes;
-//     if (loading) img.loading = loading;
-
-//     imageRef.current = img;
-//     if (img.complete && img.naturalWidth) {
-//       return "loaded";
-//     }
-
-//     return "loading";
-//   } catch (error) {
-//     return "loading";
-//   }
-// }
-
-// export const shouldShowFallbackImage = (status: Status, fallbackStrategy: FallbackStrategy) =>
-//   (status !== "loaded" && fallbackStrategy === "beforeLoadOrError") ||
-//   (status === "failed" && fallbackStrategy === "onError");
-
-// export type UseImageReturn = ReturnType<typeof useImage>;
-
 /**
  * Part of this code is taken from @chakra-ui/react package ❤️
  */
 
 import type {ImgHTMLAttributes, SyntheticEvent} from "react";
 
-import {useCallback, useEffect, useRef, useState} from "react";
+import {useRef, useState, useEffect, MutableRefObject} from "react";
+import {useIsHydrated} from "@nextui-org/react-utils";
 import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
 
 type NativeImageProps = ImgHTMLAttributes<HTMLImageElement>;
@@ -215,42 +66,27 @@ type ImageEvent = SyntheticEvent<HTMLImageElement, Event>;
  */
 
 export function useImage(props: UseImageProps = {}) {
-  const {loading, src, srcSet, onLoad, onError, crossOrigin, sizes, ignoreFallback} = props;
-
-  const [status, setStatus] = useState<Status>("pending");
-
-  useEffect(() => {
-    setStatus(src ? "loading" : "pending");
-  }, [src]);
-
-  const imageRef = useRef<HTMLImageElement | null>();
+  const {onLoad, onError, ignoreFallback} = props;
 
-  const load = useCallback(() => {
-    if (!src) return;
+  const isHydrated = useIsHydrated();
 
-    flush();
+  const imageRef = useRef<HTMLImageElement | null>(isHydrated ? new Image() : null);
 
-    const img = new Image();
-
-    img.src = src;
-    if (crossOrigin) img.crossOrigin = crossOrigin;
-    if (srcSet) img.srcset = srcSet;
-    if (sizes) img.sizes = sizes;
-    if (loading) img.loading = loading;
+  const [status, setStatus] = useState<Status>("pending");
 
-    img.onload = (event) => {
+  useEffect(() => {
+    if (!imageRef.current) return;
+    imageRef.current.onload = (event) => {
       flush();
       setStatus("loaded");
       onLoad?.(event as unknown as ImageEvent);
     };
-    img.onerror = (error) => {
+    imageRef.current.onerror = (error) => {
       flush();
       setStatus("failed");
       onError?.(error as any);
     };
-
-    imageRef.current = img;
-  }, [src, crossOrigin, srcSet, sizes, onLoad, onError, loading]);
+  }, [imageRef.current]);
 
   const flush = () => {
     if (imageRef.current) {
@@ -261,20 +97,10 @@ export function useImage(props: UseImageProps = {}) {
   };
 
   useSafeLayoutEffect(() => {
-    /**
-     * If user opts out of the fallback/placeholder
-     * logic, let's bail out.
-     */
-    if (ignoreFallback) return undefined;
-
-    if (status === "loading") {
-      load();
+    if (isHydrated) {
+      setStatus(setImageAndGetInitialStatus(props, imageRef));
     }
-
-    return () => {
-      flush();
-    };
-  }, [status, load, ignoreFallback]);
+  }, [isHydrated]);
 
   /**
    * If user opts out of the fallback/placeholder
@@ -282,3 +108,34 @@ export function useImage(props: UseImageProps = {}) {
    */
   return ignoreFallback ? "loaded" : status;
 }
+
+function setImageAndGetInitialStatus(
+  props: UseImageProps,
+  imageRef: MutableRefObject<HTMLImageElement | null | undefined>,
+): Status {
+  const {loading, src, srcSet, crossOrigin, sizes, ignoreFallback} = props;
+
+  if (!src) return "pending";
+  if (ignoreFallback) return "loaded";
+
+  const img = new Image();
+
+  img.src = src;
+  if (crossOrigin) img.crossOrigin = crossOrigin;
+  if (srcSet) img.srcset = srcSet;
+  if (sizes) img.sizes = sizes;
+  if (loading) img.loading = loading;
+
+  imageRef.current = img;
+  if (img.complete && img.naturalWidth) {
+    return "loaded";
+  }
+
+  return "loading";
+}
+
+export const shouldShowFallbackImage = (status: Status, fallbackStrategy: FallbackStrategy) =>
+  (status !== "loaded" && fallbackStrategy === "beforeLoadOrError") ||
+  (status === "failed" && fallbackStrategy === "onError");
+
+export type UseImageReturn = ReturnType<typeof useImage>;
diff --git a/packages/hooks/use-real-shape/CHANGELOG.md b/packages/hooks/use-real-shape/CHANGELOG.md
index 08db9bbe49..d64fcae1c0 100644
--- a/packages/hooks/use-real-shape/CHANGELOG.md
+++ b/packages/hooks/use-real-shape/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/use-real-shape
 
+## 2.1.3
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+
 ## 2.1.2
 
 ### Patch Changes
diff --git a/packages/hooks/use-real-shape/package.json b/packages/hooks/use-real-shape/package.json
index 95258dce4f..a82225eeeb 100644
--- a/packages/hooks/use-real-shape/package.json
+++ b/packages/hooks/use-real-shape/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-real-shape",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Hook that returns the real dimensions of an element",
   "keywords": [
     "use-real-shape"
diff --git a/packages/utilities/aria-utils/CHANGELOG.md b/packages/utilities/aria-utils/CHANGELOG.md
index 824e5eef73..faf1c1532c 100644
--- a/packages/utilities/aria-utils/CHANGELOG.md
+++ b/packages/utilities/aria-utils/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/aria-utils
 
+## 2.2.7
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/system@2.4.6
+
 ## 2.2.6
 
 ### Patch Changes
diff --git a/packages/utilities/aria-utils/package.json b/packages/utilities/aria-utils/package.json
index 24732777d6..0fa09197bd 100644
--- a/packages/utilities/aria-utils/package.json
+++ b/packages/utilities/aria-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/aria-utils",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "A package for managing @react-aria nextui utils.",
   "keywords": [
     "aria-utils"
diff --git a/packages/utilities/framer-utils/CHANGELOG.md b/packages/utilities/framer-utils/CHANGELOG.md
index 4f5c2eccf7..9772c5b4cf 100644
--- a/packages/utilities/framer-utils/CHANGELOG.md
+++ b/packages/utilities/framer-utils/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @nextui-org/framer-utils
 
+## 2.1.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/system@2.4.6
+
 ## 2.1.5
 
 ### Patch Changes
diff --git a/packages/utilities/framer-utils/package.json b/packages/utilities/framer-utils/package.json
index ba31b868bf..0d28cd8ce3 100644
--- a/packages/utilities/framer-utils/package.json
+++ b/packages/utilities/framer-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/framer-utils",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "A set of framer motion transitions for react",
   "keywords": [
     "framer-utils"
diff --git a/packages/utilities/react-utils/CHANGELOG.md b/packages/utilities/react-utils/CHANGELOG.md
index 65ac266215..a496ae5e71 100644
--- a/packages/utilities/react-utils/CHANGELOG.md
+++ b/packages/utilities/react-utils/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @nextui-org/react-utils
 
+## 2.1.3
+
+### Patch Changes
+
+- [#4442](https://github.com/nextui-org/nextui/pull/4442) [`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2) Thanks [@wingkwong](https://github.com/wingkwong)! - add useIsHydrated
+
 ## 2.1.2
 
 ### Patch Changes
diff --git a/packages/utilities/react-utils/package.json b/packages/utilities/react-utils/package.json
index 76eab805f3..b38287884b 100644
--- a/packages/utilities/react-utils/package.json
+++ b/packages/utilities/react-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react-utils",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "A set of utilities for react on client side",
   "keywords": [
     "react-utils"
diff --git a/packages/utilities/react-utils/src/index.ts b/packages/utilities/react-utils/src/index.ts
index d866bfaa40..9a64ef1821 100644
--- a/packages/utilities/react-utils/src/index.ts
+++ b/packages/utilities/react-utils/src/index.ts
@@ -32,3 +32,5 @@ export {
   renderFn,
   filterDOMProps,
 } from "@nextui-org/react-rsc-utils";
+
+export {useIsHydrated} from "./use-is-hydrated";
diff --git a/packages/utilities/react-utils/src/use-is-hydrated.ts b/packages/utilities/react-utils/src/use-is-hydrated.ts
new file mode 100644
index 0000000000..86a38cafd2
--- /dev/null
+++ b/packages/utilities/react-utils/src/use-is-hydrated.ts
@@ -0,0 +1,30 @@
+import * as React from "react";
+
+/**
+ * A hook that returns true if the component is mounted on the client (hydrated)
+ * and false when rendering on the server.
+ *
+ * @example
+ * ```jsx
+ * function Component() {
+ *   const isHydrated = useIsHydrated()
+ *
+ *   if (!isHydrated) {
+ *     return <div>Loading...</div>
+ *   }
+ *
+ *   return <div>Client rendered content</div>
+ * }
+ * ```
+ * @returns boolean indicating if the component is hydrated
+ */
+
+export function useIsHydrated() {
+  const subscribe = () => () => {};
+
+  return React.useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false,
+  );
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0d04cfe078..2955a9c9aa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -376,9 +376,12 @@ importers:
       '@rehooks/local-storage':
         specifier: ^2.4.5
         version: 2.4.5(react@18.2.0)
+      '@stackblitz/sdk':
+        specifier: ^1.11.0
+        version: 1.11.0
       '@tanstack/react-virtual':
-        specifier: 3.10.9
-        version: 3.10.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.11.2
+        version: 3.11.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       canvas-confetti:
         specifier: ^1.9.2
         version: 1.9.3
@@ -1584,9 +1587,6 @@ importers:
       '@react-aria/menu':
         specifier: 3.16.0
         version: 3.16.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/overlays':
-        specifier: 3.24.0
-        version: 3.24.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.26.0
         version: 3.26.0(react@18.2.0)
@@ -1928,8 +1928,8 @@ importers:
         specifier: 3.26.0
         version: 3.26.0(react@18.2.0)
       '@tanstack/react-virtual':
-        specifier: 3.10.9
-        version: 3.10.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.11.2
+        version: 3.11.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     devDependencies:
       '@nextui-org/avatar':
         specifier: workspace:*
@@ -2538,8 +2538,8 @@ importers:
         specifier: 3.26.0
         version: 3.26.0(react@18.2.0)
       '@tanstack/react-virtual':
-        specifier: 3.10.9
-        version: 3.10.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.11.2
+        version: 3.11.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     devDependencies:
       '@nextui-org/avatar':
         specifier: workspace:*
@@ -3321,7 +3321,7 @@ importers:
         version: 18.2.0
       tailwind-variants:
         specifier: ^0.1.20
-        version: 0.1.20(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)))
+        version: 0.1.20(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3)))
 
   packages/core/theme:
     dependencies:
@@ -3348,7 +3348,7 @@ importers:
         version: 2.5.4
       tailwind-variants:
         specifier: ^0.1.20
-        version: 0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)))
+        version: 0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3)))
     devDependencies:
       '@types/color':
         specifier: ^3.0.3
@@ -3361,7 +3361,7 @@ importers:
         version: 2.2.0
       tailwindcss:
         specifier: ^3.4.0
-        version: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))
+        version: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3))
 
   packages/hooks/use-aria-accordion:
     dependencies:
@@ -3621,6 +3621,9 @@ importers:
 
   packages/hooks/use-image:
     dependencies:
+      '@nextui-org/react-utils':
+        specifier: workspace:*
+        version: link:../../utilities/react-utils
       '@nextui-org/use-safe-layout-effect':
         specifier: workspace:*
         version: link:../use-safe-layout-effect
@@ -7130,6 +7133,9 @@ packages:
   '@sinonjs/fake-timers@10.3.0':
     resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
 
+  '@stackblitz/sdk@1.11.0':
+    resolution: {integrity: sha512-DFQGANNkEZRzFk1/rDP6TcFdM82ycHE+zfl9C/M/jXlH68jiqHWHFMQURLELoD8koxvu/eW5uhg94NSAZlYrUQ==}
+
   '@stitches/core@1.2.8':
     resolution: {integrity: sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==}
 
@@ -7400,14 +7406,14 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20'
 
-  '@tanstack/react-virtual@3.10.9':
-    resolution: {integrity: sha512-OXO2uBjFqA4Ibr2O3y0YMnkrRWGVNqcvHQXmGvMu6IK8chZl3PrDxFXdGZ2iZkSrKh3/qUYoFqYe+Rx23RoU0g==}
+  '@tanstack/react-virtual@3.11.2':
+    resolution: {integrity: sha512-OuFzMXPF4+xZgx8UzJha0AieuMihhhaWG0tCqpp6tDzlFwOmNBPYMuLOtMJ1Tr4pXLHmgjcWhG6RlknY2oNTdQ==}
     peerDependencies:
       react: 18.2.0
       react-dom: 18.2.0
 
-  '@tanstack/virtual-core@3.10.9':
-    resolution: {integrity: sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==}
+  '@tanstack/virtual-core@3.11.2':
+    resolution: {integrity: sha512-vTtpNt7mKCiZ1pwU9hfKPhpdVO2sVzFQsxoVBGtOSHxlrRRzYr8iQ2TlwbAcRYCcEiZ9ECAM8kBzH0v2+VzfKw==}
 
   '@testing-library/dom@10.4.0':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
@@ -19160,6 +19166,8 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
 
+  '@stackblitz/sdk@1.11.0': {}
+
   '@stitches/core@1.2.8': {}
 
   '@storybook/addon-a11y@8.4.5(storybook@8.4.5(prettier@3.3.3))':
@@ -19555,13 +19563,13 @@ snapshots:
       postcss-selector-parser: 6.0.10
       tailwindcss: 3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3))
 
-  '@tanstack/react-virtual@3.10.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@tanstack/react-virtual@3.11.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@tanstack/virtual-core': 3.10.9
+      '@tanstack/virtual-core': 3.11.2
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@tanstack/virtual-core@3.10.9': {}
+  '@tanstack/virtual-core@3.11.2': {}
 
   '@testing-library/dom@10.4.0':
     dependencies:
@@ -26178,14 +26186,6 @@ snapshots:
       postcss: 8.4.49
       ts-node: 10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)
 
-  postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)):
-    dependencies:
-      lilconfig: 3.1.2
-      yaml: 2.6.1
-    optionalDependencies:
-      postcss: 8.4.49
-      ts-node: 10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)
-
   postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3)):
     dependencies:
       lilconfig: 3.1.2
@@ -27737,15 +27737,15 @@ snapshots:
       tailwind-merge: 1.14.0
       tailwindcss: 3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3))
 
-  tailwind-variants@0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))):
+  tailwind-variants@0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3))):
     dependencies:
       tailwind-merge: 1.14.0
-      tailwindcss: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))
+      tailwindcss: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3))
 
-  tailwind-variants@0.1.20(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))):
+  tailwind-variants@0.1.20(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3))):
     dependencies:
       tailwind-merge: 1.14.0
-      tailwindcss: 3.4.16(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))
+      tailwindcss: 3.4.16(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3))
 
   tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3)):
     dependencies:
@@ -27774,33 +27774,6 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 2.1.0
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.4.49
-      postcss-import: 15.1.0(postcss@8.4.49)
-      postcss-js: 4.0.1(postcss@8.4.49)
-      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))
-      postcss-nested: 6.2.0(postcss@8.4.49)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.8
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
-
   tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -27828,7 +27801,7 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)):
+  tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -27847,7 +27820,7 @@ snapshots:
       postcss: 8.4.49
       postcss-import: 15.1.0(postcss@8.4.49)
       postcss-js: 4.0.1(postcss@8.4.49)
-      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))
+      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3))
       postcss-nested: 6.2.0(postcss@8.4.49)
       postcss-selector-parser: 6.1.2
       resolve: 1.22.8
@@ -27915,14 +27888,14 @@ snapshots:
       '@swc/core': 1.9.2(@swc/helpers@0.5.15)
       esbuild: 0.15.18
 
-  terser-webpack-plugin@5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1))):
+  terser-webpack-plugin@5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.2
       terser: 5.36.0
-      webpack: 5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1))
+      webpack: 5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12)
     optionalDependencies:
       '@swc/core': 1.9.2(@swc/helpers@0.5.15)
       esbuild: 0.21.5
@@ -28729,7 +28702,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1)))
+      terser-webpack-plugin: 5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12))
       watchpack: 2.4.2
       webpack-sources: 3.2.3
     optionalDependencies: