diff --git a/apps/docs/components/sandpack/language-selector.tsx b/apps/docs/components/sandpack/language-selector.tsx
index 75c083ba6..4433913fb 100644
--- a/apps/docs/components/sandpack/language-selector.tsx
+++ b/apps/docs/components/sandpack/language-selector.tsx
@@ -22,7 +22,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onC
     <Tabs
       aria-label="Language selector"
       classNames={{
-        base: "absolute right-3 bottom-10",
+        base: "absolute right-3 bottom-4",
         cursor: "bg-zinc-400 dark:bg-zinc-700",
         tabList:
           "bg-transparent relative before:bg-white/5 before:w-full before:rounded-lg before:h-full before:content-[''] before:block before:z-1 before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100",
@@ -32,7 +32,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onC
       size="xs"
       onSelectionChange={handleToggle}
     >
-      <Tab key="vite-react-ts" title={<TypescriptIcon className="text-lg text-[#93adcb]" />} />
+      <Tab key="vite-react-ts" title={<TypescriptIcon className="text-lg text-[#3b69ff]" />} />
       <Tab key="vite-react" title={<JavascriptIcon className="text-lg  text-[#dbbe82]" />} />
     </Tabs>
   );
diff --git a/apps/docs/content/components/accordion/compact.ts b/apps/docs/content/components/accordion/compact.ts
index 93ae2d49a..8dcf23e04 100644
--- a/apps/docs/content/components/accordion/compact.ts
+++ b/apps/docs/content/components/accordion/compact.ts
@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =
diff --git a/apps/docs/content/components/accordion/controlled.ts b/apps/docs/content/components/accordion/controlled.ts
index 98aa095d7..cbc43bc2f 100644
--- a/apps/docs/content/components/accordion/controlled.ts
+++ b/apps/docs/content/components/accordion/controlled.ts
@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const [selectedKeys, setSelectedKeys] = React.useState(new Set(["1"]));
diff --git a/apps/docs/content/components/accordion/custom-motion.ts b/apps/docs/content/components/accordion/custom-motion.ts
index a5fb794db..b4032110a 100644
--- a/apps/docs/content/components/accordion/custom-motion.ts
+++ b/apps/docs/content/components/accordion/custom-motion.ts
@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =
diff --git a/apps/docs/content/components/accordion/custom-styles.ts b/apps/docs/content/components/accordion/custom-styles.ts
index b69a68377..62fc976a4 100644
--- a/apps/docs/content/components/accordion/custom-styles.ts
+++ b/apps/docs/content/components/accordion/custom-styles.ts
@@ -182,11 +182,11 @@ const InvalidCardIcon = `export const InvalidCardIcon = (props) => (
   </svg>
 );`;
 
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
-import { MonitorMobileIcon } from "./MonitorMobileIcon";
-import { ShieldSecurityIcon } from "./ShieldSecurityIcon";
-import { InfoIcon } from "./InfoIcon";
-import { InvalidCardIcon } from "./InvalidCardIcon";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
+import {MonitorMobileIcon} from "./MonitorMobileIcon";
+import {ShieldSecurityIcon} from "./ShieldSecurityIcon";
+import {InfoIcon} from "./InfoIcon";
+import {InvalidCardIcon} from "./InvalidCardIcon";
 
 export default function App() {
   const itemStyles = {
diff --git a/apps/docs/content/components/accordion/default-expanded-keys.ts b/apps/docs/content/components/accordion/default-expanded-keys.ts
index dab4d9d88..64832235d 100644
--- a/apps/docs/content/components/accordion/default-expanded-keys.ts
+++ b/apps/docs/content/components/accordion/default-expanded-keys.ts
@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =
diff --git a/apps/docs/content/components/accordion/disabled-keys.ts b/apps/docs/content/components/accordion/disabled-keys.ts
index 5d318baa6..710e8c957 100644
--- a/apps/docs/content/components/accordion/disabled-keys.ts
+++ b/apps/docs/content/components/accordion/disabled-keys.ts
@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =
diff --git a/apps/docs/content/components/accordion/indicator-function.ts b/apps/docs/content/components/accordion/indicator-function.ts
index ff8fe0ba2..99fcbc5cb 100644
--- a/apps/docs/content/components/accordion/indicator-function.ts
+++ b/apps/docs/content/components/accordion/indicator-function.ts
@@ -71,10 +71,10 @@ const SunIcon = `export const SunIcon = (props) => (
   </svg>
 );`;
 
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
-import { AnchorIcon } from "./AnchorIcon";
-import { MoonIcon } from "./MoonIcon";
-import { SunIcon } from "./SunIcon";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
+import {AnchorIcon} from "./AnchorIcon";
+import {MoonIcon} from "./MoonIcon";
+import {SunIcon} from "./SunIcon";
 
 export default function App() {
   const defaultContent =
diff --git a/apps/docs/content/components/accordion/indicator.ts b/apps/docs/content/components/accordion/indicator.ts
index 70ab588f6..6858e5931 100644
--- a/apps/docs/content/components/accordion/indicator.ts
+++ b/apps/docs/content/components/accordion/indicator.ts
@@ -71,10 +71,10 @@ const SunIcon = `export const SunIcon = (props) => (
   </svg>
 );`;
 
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
-import { AnchorIcon } from './AnchorIcon';
-import { MoonIcon } from './MoonIcon';
-import { SunIcon } from './SunIcon';
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
+import {AnchorIcon} from './AnchorIcon';
+import {MoonIcon} from './MoonIcon';
+import {SunIcon} from './SunIcon';
 
 export default function App() {
   const defaultContent =
diff --git a/apps/docs/content/components/accordion/multiple.ts b/apps/docs/content/components/accordion/multiple.ts
index a1547a8c5..b6090a69c 100644
--- a/apps/docs/content/components/accordion/multiple.ts
+++ b/apps/docs/content/components/accordion/multiple.ts
@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =
diff --git a/apps/docs/content/components/accordion/start-content.ts b/apps/docs/content/components/accordion/start-content.ts
index d59107503..8e1afbd37 100644
--- a/apps/docs/content/components/accordion/start-content.ts
+++ b/apps/docs/content/components/accordion/start-content.ts
@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem, Avatar } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem, Avatar} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =
diff --git a/apps/docs/content/components/accordion/subtitle.ts b/apps/docs/content/components/accordion/subtitle.ts
index 442edb7fa..c7ee7a0a1 100644
--- a/apps/docs/content/components/accordion/subtitle.ts
+++ b/apps/docs/content/components/accordion/subtitle.ts
@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =
diff --git a/apps/docs/content/components/accordion/usage.ts b/apps/docs/content/components/accordion/usage.ts
index 4b91dc973..f5f4b7b54 100644
--- a/apps/docs/content/components/accordion/usage.ts
+++ b/apps/docs/content/components/accordion/usage.ts
@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =
diff --git a/apps/docs/content/components/accordion/variants.ts b/apps/docs/content/components/accordion/variants.ts
index fbe203c73..ae2ed6fe3 100644
--- a/apps/docs/content/components/accordion/variants.ts
+++ b/apps/docs/content/components/accordion/variants.ts
@@ -1,4 +1,4 @@
-const App = `import { Accordion, AccordionItem } from "@nextui-org/react";
+const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
 
 export default function App() {
   const defaultContent =
diff --git a/apps/docs/content/components/avatar/bordered.ts b/apps/docs/content/components/avatar/bordered.ts
index 4769bd9e3..337eb51ad 100644
--- a/apps/docs/content/components/avatar/bordered.ts
+++ b/apps/docs/content/components/avatar/bordered.ts
@@ -1,4 +1,4 @@
-const App = `import { Avatar } from "@nextui-org/react";
+const App = `import {Avatar} from "@nextui-org/react
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/avatar/colors.ts b/apps/docs/content/components/avatar/colors.ts
index 83d944660..d9cab5f79 100644
--- a/apps/docs/content/components/avatar/colors.ts
+++ b/apps/docs/content/components/avatar/colors.ts
@@ -1,4 +1,4 @@
-const App = `import { Avatar } from "@nextui-org/react";
+const App = `import {Avatar} from "@nextui-org/react
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/avatar/custom-fallback.ts b/apps/docs/content/components/avatar/custom-fallback.ts
index 4a185bee2..4d8e1c7c1 100644
--- a/apps/docs/content/components/avatar/custom-fallback.ts
+++ b/apps/docs/content/components/avatar/custom-fallback.ts
@@ -18,8 +18,8 @@ const CameraIcon = `export const CameraIcon = ({fill, size, height, width, ...pr
   );
 };`;
 
-const App = `import { Avatar } from "@nextui-org/react";
-import { CameraIcon } from './CameraIcon';
+const App = `import {Avatar} from "@nextui-org/react
+import {CameraIcon} from './CameraIcon';
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/avatar/custom-impl.ts b/apps/docs/content/components/avatar/custom-impl.ts
index 90903f264..2bc343945 100644
--- a/apps/docs/content/components/avatar/custom-impl.ts
+++ b/apps/docs/content/components/avatar/custom-impl.ts
@@ -1,7 +1,7 @@
-const App = `import { forwardRef } from "react";
-import { useMemo } from "react";
+const App = `import {forwardRef} from "react";
+import {useMemo} from "react";
 
-import { AvatarIcon, useAvatar } from "@nextui-org/react";
+import {AvatarIcon, useAvatar} from "@nextui-org/react";
 
 const MyAvatar = forwardRef((props, ref) => {
   const {
@@ -61,9 +61,9 @@ Avatar.displayName = "MyAvatar";
 
 export default MyAvatar;`;
 
-const AppTs = `import { forwardRef, useMemo } from "react";
+const AppTs = `import {forwardRef, useMemo} from "react";
 
-import { AvatarIcon, useAvatar, AvatarProps as BaseAvatarProps } from "@nextui-org/react";
+import {AvatarIcon, useAvatar, AvatarProps as BaseAvatarProps} from "@nextui-org/react";
 
 export interface AvatarProps extends BaseAvatarProps {}
 
diff --git a/apps/docs/content/components/avatar/custom.ts b/apps/docs/content/components/avatar/custom.ts
index 0c51b9bc9..022b950d9 100644
--- a/apps/docs/content/components/avatar/custom.ts
+++ b/apps/docs/content/components/avatar/custom.ts
@@ -1,4 +1,4 @@
-const App = `import { Avatar, AvatarIcon } from "@nextui-org/react";
+const App = `import {Avatar, AvatarIcon} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/avatar/disabled.ts b/apps/docs/content/components/avatar/disabled.ts
index eaae1ae7e..6c686b32a 100644
--- a/apps/docs/content/components/avatar/disabled.ts
+++ b/apps/docs/content/components/avatar/disabled.ts
@@ -1,4 +1,4 @@
-const App = `import { Avatar } from "@nextui-org/react";
+const App = `import {Avatar} from "@nextui-org/react
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/avatar/fallbacks.ts b/apps/docs/content/components/avatar/fallbacks.ts
index 1c0ecbe6d..a01ee2d59 100644
--- a/apps/docs/content/components/avatar/fallbacks.ts
+++ b/apps/docs/content/components/avatar/fallbacks.ts
@@ -1,4 +1,4 @@
-const App = `import { Avatar } from "@nextui-org/react";
+const App = `import {Avatar} from "@nextui-org/react
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/avatar/group-custom-count.ts b/apps/docs/content/components/avatar/group-custom-count.ts
index 064f9e30a..0ce05a96a 100644
--- a/apps/docs/content/components/avatar/group-custom-count.ts
+++ b/apps/docs/content/components/avatar/group-custom-count.ts
@@ -1,4 +1,4 @@
-const App = `import { Avatar, AvatarGroup } from "@nextui-org/react";
+const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/avatar/group-disabled.ts b/apps/docs/content/components/avatar/group-disabled.ts
index ac4e5b680..ba703b89d 100644
--- a/apps/docs/content/components/avatar/group-disabled.ts
+++ b/apps/docs/content/components/avatar/group-disabled.ts
@@ -1,4 +1,4 @@
-const App = `import { Avatar, AvatarGroup } from "@nextui-org/react";
+const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/avatar/group-grid.ts b/apps/docs/content/components/avatar/group-grid.ts
index 5537ded24..abd2a7443 100644
--- a/apps/docs/content/components/avatar/group-grid.ts
+++ b/apps/docs/content/components/avatar/group-grid.ts
@@ -1,4 +1,4 @@
-const App = `import { Avatar, AvatarGroup } from "@nextui-org/react";
+const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/avatar/group-max.ts b/apps/docs/content/components/avatar/group-max.ts
index 1f22e67e2..5bc76a002 100644
--- a/apps/docs/content/components/avatar/group-max.ts
+++ b/apps/docs/content/components/avatar/group-max.ts
@@ -1,4 +1,4 @@
-const App = `import { Avatar, AvatarGroup } from "@nextui-org/react";
+const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/avatar/group-total.ts b/apps/docs/content/components/avatar/group-total.ts
index 8ed3eb95e..463073b93 100644
--- a/apps/docs/content/components/avatar/group-total.ts
+++ b/apps/docs/content/components/avatar/group-total.ts
@@ -1,4 +1,4 @@
-const App = `import { Avatar, AvatarGroup } from "@nextui-org/react";
+const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/avatar/group.ts b/apps/docs/content/components/avatar/group.ts
index 83d50bb46..b22b13adc 100644
--- a/apps/docs/content/components/avatar/group.ts
+++ b/apps/docs/content/components/avatar/group.ts
@@ -1,4 +1,4 @@
-const App = `import { Avatar, AvatarGroup } from "@nextui-org/react";
+const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/avatar/radius.ts b/apps/docs/content/components/avatar/radius.ts
index e16988c2f..b5ec674dc 100644
--- a/apps/docs/content/components/avatar/radius.ts
+++ b/apps/docs/content/components/avatar/radius.ts
@@ -1,4 +1,4 @@
-const App = `import { Avatar } from "@nextui-org/react";
+const App = `import {Avatar} from "@nextui-org/react
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/avatar/sizes.ts b/apps/docs/content/components/avatar/sizes.ts
index 5c3118ada..440793905 100644
--- a/apps/docs/content/components/avatar/sizes.ts
+++ b/apps/docs/content/components/avatar/sizes.ts
@@ -1,4 +1,4 @@
-const App = `import { Avatar } from "@nextui-org/react";
+const App = `import {Avatar} from "@nextui-org/react
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/avatar/usage.ts b/apps/docs/content/components/avatar/usage.ts
index ba26e6ad8..67be80346 100644
--- a/apps/docs/content/components/avatar/usage.ts
+++ b/apps/docs/content/components/avatar/usage.ts
@@ -1,4 +1,4 @@
-const App = `import { Avatar } from "@nextui-org/react";
+const App = `import {Avatar} from "@nextui-org/react
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/badge/a11y.ts b/apps/docs/content/components/badge/a11y.ts
index ccabe8ba1..6799cc0cf 100644
--- a/apps/docs/content/components/badge/a11y.ts
+++ b/apps/docs/content/components/badge/a11y.ts
@@ -18,8 +18,8 @@ export const NotificationIcon = `export const NotificationIcon = ({size, height,
   );
 };`;
 
-const App = `import { Badge, Button } from "@nextui-org/react";
-import { NotificationIcon } from "./NotificationIcon";
+const App = `import {Badge, Button} from "@nextui-org/react";
+import {NotificationIcon} from "./NotificationIcon";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/badge/colors.ts b/apps/docs/content/components/badge/colors.ts
index 03bd2930a..77a4a922d 100644
--- a/apps/docs/content/components/badge/colors.ts
+++ b/apps/docs/content/components/badge/colors.ts
@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/badge/content-examples.ts b/apps/docs/content/components/badge/content-examples.ts
index 5c9341d03..2bb567440 100644
--- a/apps/docs/content/components/badge/content-examples.ts
+++ b/apps/docs/content/components/badge/content-examples.ts
@@ -44,9 +44,9 @@ export const CheckIcon = `export const CheckIcon = ({
   );
 };`;
 
-const App = `import { Badge, Avatar } from "@nextui-org/react";
-import { NotificationIcon } from "./NotificationIcon";
-import { CheckIcon } from "./CheckIcon";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
+import {NotificationIcon} from "./NotificationIcon";
+import {CheckIcon} from "./CheckIcon";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/badge/disable-outline.ts b/apps/docs/content/components/badge/disable-outline.ts
index c8a6a6f25..b685d81e5 100644
--- a/apps/docs/content/components/badge/disable-outline.ts
+++ b/apps/docs/content/components/badge/disable-outline.ts
@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/badge/placements.ts b/apps/docs/content/components/badge/placements.ts
index 9ff4883e1..8c1301a13 100644
--- a/apps/docs/content/components/badge/placements.ts
+++ b/apps/docs/content/components/badge/placements.ts
@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/badge/radius.ts b/apps/docs/content/components/badge/radius.ts
index d5c300035..131d780e8 100644
--- a/apps/docs/content/components/badge/radius.ts
+++ b/apps/docs/content/components/badge/radius.ts
@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/badge/shapes.ts b/apps/docs/content/components/badge/shapes.ts
index 1a09fe403..c828cf343 100644
--- a/apps/docs/content/components/badge/shapes.ts
+++ b/apps/docs/content/components/badge/shapes.ts
@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/badge/sizes.ts b/apps/docs/content/components/badge/sizes.ts
index 7da7707e9..e986d1d7c 100644
--- a/apps/docs/content/components/badge/sizes.ts
+++ b/apps/docs/content/components/badge/sizes.ts
@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/badge/usage.ts b/apps/docs/content/components/badge/usage.ts
index 7066d6bb4..9df289cec 100644
--- a/apps/docs/content/components/badge/usage.ts
+++ b/apps/docs/content/components/badge/usage.ts
@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/badge/variants.ts b/apps/docs/content/components/badge/variants.ts
index 50565b512..31bba33c0 100644
--- a/apps/docs/content/components/badge/variants.ts
+++ b/apps/docs/content/components/badge/variants.ts
@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar } from "@nextui-org/react";
+const App = `import {Badge, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/badge/visibility.ts b/apps/docs/content/components/badge/visibility.ts
index 09ec2ba1e..3729cfaae 100644
--- a/apps/docs/content/components/badge/visibility.ts
+++ b/apps/docs/content/components/badge/visibility.ts
@@ -48,9 +48,9 @@ export const CartIcon = `export const CartIcon = ({ size, height, width, ...prop
   );
 };`;
 
-const App = `import { Badge, Avatar, Switch } from "@nextui-org/react";
-import { NotificationIcon } from "./NotificationIcon";
-import { CartIcon } from "./CartIcon";
+const App = `import {Badge, Avatar, Switch} from "@nextui-org/react";
+import {NotificationIcon} from "./NotificationIcon";
+import {CartIcon} from "./CartIcon";
 
 export default function App() {
   const [isInvisible, setIsInvisible] = React.useState(false);
diff --git a/apps/docs/content/components/button/colors.ts b/apps/docs/content/components/button/colors.ts
index 3a42254d4..2bc1e98f4 100644
--- a/apps/docs/content/components/button/colors.ts
+++ b/apps/docs/content/components/button/colors.ts
@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/button/custom-impl.ts b/apps/docs/content/components/button/custom-impl.ts
index 68a10b391..18e3cab0d 100644
--- a/apps/docs/content/components/button/custom-impl.ts
+++ b/apps/docs/content/components/button/custom-impl.ts
@@ -1,6 +1,6 @@
-const App = `import { forwardRef } from "react";
+const App = `import {forwardRef} from "react";
 
-import { useButton, Drip, Spinner } from "@nextui-org/react";
+import {useButton, Drip, Spinner} from "@nextui-org/react";
 
 const MyButton = forwardRef((props, ref) => {
   const {
@@ -37,9 +37,9 @@ MyButton.displayName = "MyButton";
 
 export default MyButton;`;
 
-const AppTs = `import { forwardRef } from "react";
+const AppTs = `import {forwardRef} from "react";
 
-import { useButton, Drip, Spinner, ButtonProps as BaseButtonProps } from "@nextui-org/react";
+import {useButton, Drip, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react";
 
 export interface ButtonProps extends BaseButtonProps {}
 
diff --git a/apps/docs/content/components/button/custom-styles.ts b/apps/docs/content/components/button/custom-styles.ts
index 57511e97e..b2136ec09 100644
--- a/apps/docs/content/components/button/custom-styles.ts
+++ b/apps/docs/content/components/button/custom-styles.ts
@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/button/disabled.ts b/apps/docs/content/components/button/disabled.ts
index e27d64a68..57dbe8b25 100644
--- a/apps/docs/content/components/button/disabled.ts
+++ b/apps/docs/content/components/button/disabled.ts
@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/button/group-disabled.ts b/apps/docs/content/components/button/group-disabled.ts
index f811862dc..55b5281bc 100644
--- a/apps/docs/content/components/button/group-disabled.ts
+++ b/apps/docs/content/components/button/group-disabled.ts
@@ -1,4 +1,4 @@
-const App = `import { Button, ButtonGroup } from "@nextui-org/react";
+const App = `import {Button, ButtonGroup} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/button/group-use-case.ts b/apps/docs/content/components/button/group-use-case.ts
index f73f8806c..b584164fe 100644
--- a/apps/docs/content/components/button/group-use-case.ts
+++ b/apps/docs/content/components/button/group-use-case.ts
@@ -4,8 +4,8 @@ const ChevronDownIcon = `export const ChevronDownIcon = () => (
   </svg>
 );`;
 
-const App = `import { Button, ButtonGroup, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from "@nextui-org/react";
-import { ChevronDownIcon } from './ChevronDownIcon';
+const App = `import {Button, ButtonGroup, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem} from "@nextui-org/react";
+import {ChevronDownIcon} from './ChevronDownIcon';
 
 export default function App() {
   const [selectedOption, setSelectedOption] = React.useState(new Set(["merge"]));
diff --git a/apps/docs/content/components/button/group.ts b/apps/docs/content/components/button/group.ts
index b3e7350ec..ec5d6678d 100644
--- a/apps/docs/content/components/button/group.ts
+++ b/apps/docs/content/components/button/group.ts
@@ -1,4 +1,4 @@
-const App = `import { Button, ButtonGroup } from "@nextui-org/react";
+const App = `import {Button, ButtonGroup} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/button/icon-only.ts b/apps/docs/content/components/button/icon-only.ts
index c5e98ac9b..b438e283f 100644
--- a/apps/docs/content/components/button/icon-only.ts
+++ b/apps/docs/content/components/button/icon-only.ts
@@ -56,9 +56,9 @@ const CameraIcon = `export const CameraIcon = ({
   );
 };`;
 
-const App = `import { Button } from "@nextui-org/react";
-import { HeartIcon } from './HeartIcon';
-import { CameraIcon } from './CameraIcon';
+const App = `import {Button} from "@nextui-org/react";
+import {HeartIcon} from './HeartIcon';
+import {CameraIcon} from './CameraIcon';
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/button/icons.ts b/apps/docs/content/components/button/icons.ts
index dad4675b7..d56b10ddc 100644
--- a/apps/docs/content/components/button/icons.ts
+++ b/apps/docs/content/components/button/icons.ts
@@ -65,9 +65,9 @@ const CameraIcon = `export const CameraIcon = ({
   );
 };`;
 
-const App = `import { Button } from "@nextui-org/react";
-import { UserIcon } from './UserIcon';
-import { CameraIcon } from './CameraIcon';
+const App = `import {Button} from "@nextui-org/react";
+import {UserIcon} from './UserIcon';
+import {CameraIcon} from './CameraIcon';
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/button/loading.ts b/apps/docs/content/components/button/loading.ts
index 75f97f7ed..830d52eea 100644
--- a/apps/docs/content/components/button/loading.ts
+++ b/apps/docs/content/components/button/loading.ts
@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/button/radius.ts b/apps/docs/content/components/button/radius.ts
index 2eec7ae22..58912afd2 100644
--- a/apps/docs/content/components/button/radius.ts
+++ b/apps/docs/content/components/button/radius.ts
@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/button/sizes.ts b/apps/docs/content/components/button/sizes.ts
index f51cf731a..f9c5baddc 100644
--- a/apps/docs/content/components/button/sizes.ts
+++ b/apps/docs/content/components/button/sizes.ts
@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/button/usage.ts b/apps/docs/content/components/button/usage.ts
index 248ece51c..f80f3914c 100644
--- a/apps/docs/content/components/button/usage.ts
+++ b/apps/docs/content/components/button/usage.ts
@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/button/variants.ts b/apps/docs/content/components/button/variants.ts
index f495b1dbd..2811449e1 100644
--- a/apps/docs/content/components/button/variants.ts
+++ b/apps/docs/content/components/button/variants.ts
@@ -1,4 +1,4 @@
-const App = `import { Button } from "@nextui-org/react";
+const App = `import {Button} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/card/blurred-footer.ts b/apps/docs/content/components/card/blurred-footer.ts
index fa30c250b..7010391d4 100644
--- a/apps/docs/content/components/card/blurred-footer.ts
+++ b/apps/docs/content/components/card/blurred-footer.ts
@@ -1,4 +1,4 @@
-const App = `import { Card, CardFooter, Image, Button } from "@nextui-org/react";
+const App = `import {Card, CardFooter, Image, Button} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/card/blurred.ts b/apps/docs/content/components/card/blurred.ts
index fe137d0ce..858ae66ad 100644
--- a/apps/docs/content/components/card/blurred.ts
+++ b/apps/docs/content/components/card/blurred.ts
@@ -140,13 +140,13 @@ const ShuffleIcon = `export const ShuffleIcon = ({size = 24, width, height, ...p
   </svg>
 );`;
 
-const App = `import { Card, CardFooter, Image, Button, Progress } from "@nextui-org/react";
-import { HeartIcon } from "./HeartIcon";
-import { PauseCircleIcon } from "./PauseCircleIcon";
-import { NextIcon } from "./NextIcon";
-import { PreviousIcon } from "./PreviousIcon";
-import { RepeatOneIcon } from "./RepeatOneIcon";
-import { ShuffleIcon } from "./ShuffleIcon";
+const App = `import {Card, CardFooter, Image, Button, Progress} from "@nextui-org/react";
+import {HeartIcon} from "./HeartIcon";
+import {PauseCircleIcon} from "./PauseCircleIcon";
+import {NextIcon} from "./NextIcon";
+import {PreviousIcon} from "./PreviousIcon";
+import {RepeatOneIcon} from "./RepeatOneIcon";
+import {ShuffleIcon} from "./ShuffleIcon";
 
 export default function App() {
   const [liked, setLiked] = React.useState(false);
diff --git a/apps/docs/content/components/card/composition.ts b/apps/docs/content/components/card/composition.ts
index f8b151458..eb3b75049 100644
--- a/apps/docs/content/components/card/composition.ts
+++ b/apps/docs/content/components/card/composition.ts
@@ -1,4 +1,4 @@
-const App = `import { Card, CardHeader, CardBody, Avatar, Button } from "@nextui-org/react";
+const App = `import {Card, CardHeader, CardBody, Avatar, Button} from "@nextui-org/react";
 
 export default function App() {
   const [isFollowed, setIsFollowed] = React.useState(false);
diff --git a/apps/docs/content/components/card/cover-image.ts b/apps/docs/content/components/card/cover-image.ts
index 6ad9dfba6..e951e7478 100644
--- a/apps/docs/content/components/card/cover-image.ts
+++ b/apps/docs/content/components/card/cover-image.ts
@@ -1,4 +1,4 @@
-const App = `import { Card, CardHeader, CardBody, CardFooter, Image, Button } from "@nextui-org/react";
+const App = `import {Card, CardHeader, CardBody, CardFooter, Image, Button} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/card/divider.ts b/apps/docs/content/components/card/divider.ts
index a04579a63..afb22b998 100644
--- a/apps/docs/content/components/card/divider.ts
+++ b/apps/docs/content/components/card/divider.ts
@@ -1,4 +1,4 @@
-const App = `import { Card, CardHeader, CardBody, CardFooter, Divider, Link, Image } from "@nextui-org/react";
+const App = `import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/card/image.ts b/apps/docs/content/components/card/image.ts
index adde869c8..331c78d30 100644
--- a/apps/docs/content/components/card/image.ts
+++ b/apps/docs/content/components/card/image.ts
@@ -1,4 +1,4 @@
-const App = `import { Card, CardHeader, CardBody, Image } from "@nextui-org/react";
+const App = `import {Card, CardHeader, CardBody, Image} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/card/primary-action.ts b/apps/docs/content/components/card/primary-action.ts
index 7c678188c..f5bf943f3 100644
--- a/apps/docs/content/components/card/primary-action.ts
+++ b/apps/docs/content/components/card/primary-action.ts
@@ -1,4 +1,4 @@
-const App = `import { Card, CardBody, CardFooter, Image } from "@nextui-org/react";
+const App = `import {Card, CardBody, CardFooter, Image} from "@nextui-org/react";
 
 export default function App() {
   const list = [
diff --git a/apps/docs/content/components/card/usage.ts b/apps/docs/content/components/card/usage.ts
index e85ef962a..5ad425b26 100644
--- a/apps/docs/content/components/card/usage.ts
+++ b/apps/docs/content/components/card/usage.ts
@@ -1,4 +1,4 @@
-const App = `import { Card, CardBody } from "@nextui-org/react";
+const App = `import {Card, CardBody} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/checkbox-group/controlled.ts b/apps/docs/content/components/checkbox-group/controlled.ts
index 7b58185e9..6369f1e4e 100644
--- a/apps/docs/content/components/checkbox-group/controlled.ts
+++ b/apps/docs/content/components/checkbox-group/controlled.ts
@@ -1,4 +1,4 @@
-const App = `import { CheckboxGroup, Checkbox } from "@nextui-org/react";
+const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react";
 
 export default function App() {
   const [selected, setSelected] = React.useState(["buenos-aires", "sydney"]);
diff --git a/apps/docs/content/components/checkbox-group/custom-implementation.ts b/apps/docs/content/components/checkbox-group/custom-implementation.ts
index 9a93a0bda..f91668955 100644
--- a/apps/docs/content/components/checkbox-group/custom-implementation.ts
+++ b/apps/docs/content/components/checkbox-group/custom-implementation.ts
@@ -17,8 +17,8 @@ const CheckIcon = `export const CheckIcon = (props) =>
     </svg>
   );`;
 
-const CustomCheckbox = `import { useCheckbox, Chip, VisuallyHidden, tv } from "@nextui-org/react";
-import { CheckIcon } from './CheckIcon.jsx'
+const CustomCheckbox = `import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react";
+import {CheckIcon} from './CheckIcon.jsx'
 
 const checkbox = tv({
   slots: {
@@ -75,8 +75,8 @@ export const CustomCheckbox = (props) => {
   );
 }`;
 
-const App = `import { CheckboxGroup } from "@nextui-org/react";
-import { CustomCheckbox } from "./CustomCheckbox";
+const App = `import {CheckboxGroup} from "@nextui-org/react";
+import {CustomCheckbox} from "./CustomCheckbox";
 
 export default function App() {
   const [groupSelected, setGroupSelected] = React.useState([]);
diff --git a/apps/docs/content/components/checkbox-group/custom-styles.ts b/apps/docs/content/components/checkbox-group/custom-styles.ts
index ec179b044..0511883c3 100644
--- a/apps/docs/content/components/checkbox-group/custom-styles.ts
+++ b/apps/docs/content/components/checkbox-group/custom-styles.ts
@@ -1,4 +1,4 @@
-const CustomCheckbox = `import { Checkbox, Link, User, Chip, cn } from "@nextui-org/react";
+const CustomCheckbox = `import {Checkbox, Link, User, Chip, cn} from "@nextui-org/react";
 
 export const CustomCheckbox = ({ user, statusColor, value }) => {
   return (
@@ -36,8 +36,8 @@ export const CustomCheckbox = ({ user, statusColor, value }) => {
   );
 };`;
 
-const App = `import { CheckboxGroup } from "@nextui-org/react";
-import { CustomCheckbox } from "./CustomCheckbox";
+const App = `import {CheckboxGroup} from "@nextui-org/react";
+import {CustomCheckbox} from "./CustomCheckbox";
 
 export default function App() {
   const [groupSelected, setGroupSelected] = React.useState([]);
diff --git a/apps/docs/content/components/checkbox-group/disabled.ts b/apps/docs/content/components/checkbox-group/disabled.ts
index c9eed4823..6ae54731a 100644
--- a/apps/docs/content/components/checkbox-group/disabled.ts
+++ b/apps/docs/content/components/checkbox-group/disabled.ts
@@ -1,4 +1,4 @@
-const App = `import { CheckboxGroup, Checkbox } from "@nextui-org/react";
+const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/checkbox-group/horizontal.ts b/apps/docs/content/components/checkbox-group/horizontal.ts
index e5b7050c0..b5083f40a 100644
--- a/apps/docs/content/components/checkbox-group/horizontal.ts
+++ b/apps/docs/content/components/checkbox-group/horizontal.ts
@@ -1,4 +1,4 @@
-const App = `import { CheckboxGroup, Checkbox } from "@nextui-org/react";
+const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/checkbox-group/usage.ts b/apps/docs/content/components/checkbox-group/usage.ts
index 745b17cd8..8867a1d86 100644
--- a/apps/docs/content/components/checkbox-group/usage.ts
+++ b/apps/docs/content/components/checkbox-group/usage.ts
@@ -1,4 +1,4 @@
-const App = `import { CheckboxGroup, Checkbox } from "@nextui-org/react";
+const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/checkbox/colors.ts b/apps/docs/content/components/checkbox/colors.ts
index 49128b990..8513ff193 100644
--- a/apps/docs/content/components/checkbox/colors.ts
+++ b/apps/docs/content/components/checkbox/colors.ts
@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/checkbox/controlled.ts b/apps/docs/content/components/checkbox/controlled.ts
index 99e191f0b..61c09eb3a 100644
--- a/apps/docs/content/components/checkbox/controlled.ts
+++ b/apps/docs/content/components/checkbox/controlled.ts
@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   const [isSelected, setIsSelected] = React.useState(false);
diff --git a/apps/docs/content/components/checkbox/custom-check-icon.ts b/apps/docs/content/components/checkbox/custom-check-icon.ts
index 2f59befc0..b967d2b11 100644
--- a/apps/docs/content/components/checkbox/custom-check-icon.ts
+++ b/apps/docs/content/components/checkbox/custom-check-icon.ts
@@ -52,9 +52,9 @@ const PlusIcon = `export const PlusIcon = ({ size, height, width, ...props }) =>
   );
 };`;
 
-const App = `import { Checkbox } from "@nextui-org/react";
-import { HeartIcon } from './HeartIcon.jsx';  
-import { PlusIcon } from './PlusIcon.jsx';
+const App = `import {Checkbox} from "@nextui-org/react";
+import {HeartIcon} from './HeartIcon.jsx';  
+import {PlusIcon} from './PlusIcon.jsx';
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/checkbox/custom-implementation.ts b/apps/docs/content/components/checkbox/custom-implementation.ts
index 369d456de..05c5eae4c 100644
--- a/apps/docs/content/components/checkbox/custom-implementation.ts
+++ b/apps/docs/content/components/checkbox/custom-implementation.ts
@@ -17,8 +17,8 @@ const CheckIcon = `export const CheckIcon = (props) =>
     </svg>
   );`;
 
-const App = `import { useCheckbox, Chip, VisuallyHidden, tv } from "@nextui-org/react";
-import { CheckIcon } from './CheckIcon.jsx'
+const App = `import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react";
+import {CheckIcon} from './CheckIcon.jsx'
 
 const checkbox = tv({
   slots: {
diff --git a/apps/docs/content/components/checkbox/custom-styles.ts b/apps/docs/content/components/checkbox/custom-styles.ts
index 7a7588993..32bf28c25 100644
--- a/apps/docs/content/components/checkbox/custom-styles.ts
+++ b/apps/docs/content/components/checkbox/custom-styles.ts
@@ -1,4 +1,4 @@
-const App = `import { Checkbox, Link, User, Chip, cn } from "@nextui-org/react";
+const App = `import {Checkbox, Link, User, Chip, cn} from "@nextui-org/react";
 
 export default function App() {
   const [isSelected, setIsSelected] = React.useState(false);
diff --git a/apps/docs/content/components/checkbox/disabled.ts b/apps/docs/content/components/checkbox/disabled.ts
index 000849428..23f637e68 100644
--- a/apps/docs/content/components/checkbox/disabled.ts
+++ b/apps/docs/content/components/checkbox/disabled.ts
@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/checkbox/indeterminate.ts b/apps/docs/content/components/checkbox/indeterminate.ts
index 505b88984..bc9ad778a 100644
--- a/apps/docs/content/components/checkbox/indeterminate.ts
+++ b/apps/docs/content/components/checkbox/indeterminate.ts
@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/checkbox/line-through.ts b/apps/docs/content/components/checkbox/line-through.ts
index 04506f467..ce5f7e3d2 100644
--- a/apps/docs/content/components/checkbox/line-through.ts
+++ b/apps/docs/content/components/checkbox/line-through.ts
@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/checkbox/radius.ts b/apps/docs/content/components/checkbox/radius.ts
index 91bf7909e..8965f492e 100644
--- a/apps/docs/content/components/checkbox/radius.ts
+++ b/apps/docs/content/components/checkbox/radius.ts
@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/checkbox/sizes.ts b/apps/docs/content/components/checkbox/sizes.ts
index f570ea089..34749ca7a 100644
--- a/apps/docs/content/components/checkbox/sizes.ts
+++ b/apps/docs/content/components/checkbox/sizes.ts
@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/checkbox/usage.ts b/apps/docs/content/components/checkbox/usage.ts
index 8ac8b70f2..e7b4a84d9 100644
--- a/apps/docs/content/components/checkbox/usage.ts
+++ b/apps/docs/content/components/checkbox/usage.ts
@@ -1,4 +1,4 @@
-const App = `import { Checkbox } from "@nextui-org/react";
+const App = `import {Checkbox} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/chip/avatar.ts b/apps/docs/content/components/chip/avatar.ts
index 7c3c06f2e..438835532 100644
--- a/apps/docs/content/components/chip/avatar.ts
+++ b/apps/docs/content/components/chip/avatar.ts
@@ -1,4 +1,4 @@
-const App = `import { Chip, Avatar } from "@nextui-org/react";
+const App = `import {Chip, Avatar} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/chip/close-button.ts b/apps/docs/content/components/chip/close-button.ts
index 4b20a956b..096eeba7d 100644
--- a/apps/docs/content/components/chip/close-button.ts
+++ b/apps/docs/content/components/chip/close-button.ts
@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/chip/colors.ts b/apps/docs/content/components/chip/colors.ts
index 55e8f1bef..ac0f61f8f 100644
--- a/apps/docs/content/components/chip/colors.ts
+++ b/apps/docs/content/components/chip/colors.ts
@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/chip/custom-styles.ts b/apps/docs/content/components/chip/custom-styles.ts
index 2a2c4f9ea..9b344ce64 100644
--- a/apps/docs/content/components/chip/custom-styles.ts
+++ b/apps/docs/content/components/chip/custom-styles.ts
@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/chip/disabled.ts b/apps/docs/content/components/chip/disabled.ts
index 29a7eb73e..15a8dd3a2 100644
--- a/apps/docs/content/components/chip/disabled.ts
+++ b/apps/docs/content/components/chip/disabled.ts
@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/chip/list.ts b/apps/docs/content/components/chip/list.ts
index 5c25baa92..8676a0601 100644
--- a/apps/docs/content/components/chip/list.ts
+++ b/apps/docs/content/components/chip/list.ts
@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 const initialFruits = ["Apple", "Banana", "Cherry", "Watermelon", "Orange"]
 
diff --git a/apps/docs/content/components/chip/radius.ts b/apps/docs/content/components/chip/radius.ts
index 58b251e62..a01a96c58 100644
--- a/apps/docs/content/components/chip/radius.ts
+++ b/apps/docs/content/components/chip/radius.ts
@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/chip/sizes.ts b/apps/docs/content/components/chip/sizes.ts
index 8b1d44cdd..20d58095d 100644
--- a/apps/docs/content/components/chip/sizes.ts
+++ b/apps/docs/content/components/chip/sizes.ts
@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/chip/start-end-content.ts b/apps/docs/content/components/chip/start-end-content.ts
index 2f95f15f8..415216b80 100644
--- a/apps/docs/content/components/chip/start-end-content.ts
+++ b/apps/docs/content/components/chip/start-end-content.ts
@@ -38,9 +38,9 @@ export const CheckIcon = `export const CheckIcon = ({
   );
 };`;
 
-const App = `import { Chip } from "@nextui-org/react";
-import { NotificationIcon } from "./NotificationIcon";
-import { CheckIcon } from "./CheckIcon";
+const App = `import {Chip} from "@nextui-org/react";
+import {NotificationIcon} from "./NotificationIcon";
+import {CheckIcon} from "./CheckIcon";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/chip/usage.ts b/apps/docs/content/components/chip/usage.ts
index f7c422bef..d8e05d0a6 100644
--- a/apps/docs/content/components/chip/usage.ts
+++ b/apps/docs/content/components/chip/usage.ts
@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/chip/variants.ts b/apps/docs/content/components/chip/variants.ts
index 1de298928..789397658 100644
--- a/apps/docs/content/components/chip/variants.ts
+++ b/apps/docs/content/components/chip/variants.ts
@@ -1,4 +1,4 @@
-const App = `import { Chip } from "@nextui-org/react";
+const App = `import {Chip} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/circular-progress/colors.ts b/apps/docs/content/components/circular-progress/colors.ts
index 85008c5d7..2a8fff62a 100644
--- a/apps/docs/content/components/circular-progress/colors.ts
+++ b/apps/docs/content/components/circular-progress/colors.ts
@@ -1,4 +1,4 @@
-const App = `import { CircularProgress } from "@nextui-org/react";
+const App = `import {CircularProgress} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/circular-progress/custom-styles.ts b/apps/docs/content/components/circular-progress/custom-styles.ts
index b3b294801..9b33c1cab 100644
--- a/apps/docs/content/components/circular-progress/custom-styles.ts
+++ b/apps/docs/content/components/circular-progress/custom-styles.ts
@@ -1,4 +1,4 @@
-const App = `import { CircularProgress, Card, CardBody, CardFooter, Chip } from "@nextui-org/react";
+const App = `import {CircularProgress, Card, CardBody, CardFooter, Chip} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/circular-progress/label.ts b/apps/docs/content/components/circular-progress/label.ts
index 6eb6e75c4..e9bd60e77 100644
--- a/apps/docs/content/components/circular-progress/label.ts
+++ b/apps/docs/content/components/circular-progress/label.ts
@@ -1,4 +1,4 @@
-const App = `import { CircularProgress } from "@nextui-org/react";
+const App = `import {CircularProgress} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/circular-progress/sizes.ts b/apps/docs/content/components/circular-progress/sizes.ts
index 1976087db..63f4e55d8 100644
--- a/apps/docs/content/components/circular-progress/sizes.ts
+++ b/apps/docs/content/components/circular-progress/sizes.ts
@@ -1,4 +1,4 @@
-const App = `import { CircularProgress } from "@nextui-org/react";
+const App = `import {CircularProgress} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/circular-progress/usage.ts b/apps/docs/content/components/circular-progress/usage.ts
index 1f6b3b8e0..ab4db2bbd 100644
--- a/apps/docs/content/components/circular-progress/usage.ts
+++ b/apps/docs/content/components/circular-progress/usage.ts
@@ -1,4 +1,4 @@
-const App = `import { CircularProgress } from "@nextui-org/react";
+const App = `import {CircularProgress} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/circular-progress/value-formatting.ts b/apps/docs/content/components/circular-progress/value-formatting.ts
index abb42e140..74f362c74 100644
--- a/apps/docs/content/components/circular-progress/value-formatting.ts
+++ b/apps/docs/content/components/circular-progress/value-formatting.ts
@@ -1,4 +1,4 @@
-const App = `import { CircularProgress } from "@nextui-org/react";
+const App = `import {CircularProgress} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/circular-progress/value.ts b/apps/docs/content/components/circular-progress/value.ts
index 16d457142..1915a8890 100644
--- a/apps/docs/content/components/circular-progress/value.ts
+++ b/apps/docs/content/components/circular-progress/value.ts
@@ -1,4 +1,4 @@
-const App = `import { CircularProgress } from "@nextui-org/react";
+const App = `import {CircularProgress} from "@nextui-org/react";
 
 export default function App() {
   const [value, setValue] = React.useState(0);
diff --git a/apps/docs/content/components/code/colors.ts b/apps/docs/content/components/code/colors.ts
index a98bbee91..f60876d3f 100644
--- a/apps/docs/content/components/code/colors.ts
+++ b/apps/docs/content/components/code/colors.ts
@@ -1,4 +1,4 @@
-const App = `import { Code } from "@nextui-org/react";
+const App = `import {Code} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/code/sizes.ts b/apps/docs/content/components/code/sizes.ts
index 744ddd84b..1fab096cf 100644
--- a/apps/docs/content/components/code/sizes.ts
+++ b/apps/docs/content/components/code/sizes.ts
@@ -1,4 +1,4 @@
-const App = `import { Code } from "@nextui-org/react";
+const App = `import {Code} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/code/usage.ts b/apps/docs/content/components/code/usage.ts
index dd67c93c3..b5a5a2895 100644
--- a/apps/docs/content/components/code/usage.ts
+++ b/apps/docs/content/components/code/usage.ts
@@ -1,4 +1,4 @@
-const App = `import { Code } from "@nextui-org/react";
+const App = `import {Code} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/divider/usage.ts b/apps/docs/content/components/divider/usage.ts
index 589c415f0..ac518139d 100644
--- a/apps/docs/content/components/divider/usage.ts
+++ b/apps/docs/content/components/divider/usage.ts
@@ -1,4 +1,4 @@
-const App = `import { Divider } from "@nextui-org/react";
+const App = `import {Divider} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/kbd/keys.ts b/apps/docs/content/components/kbd/keys.ts
index a1f2cfcbb..e4f45fd71 100644
--- a/apps/docs/content/components/kbd/keys.ts
+++ b/apps/docs/content/components/kbd/keys.ts
@@ -1,4 +1,4 @@
-const App = `import { Kbd } from "@nextui-org/react";
+const App = `import {Kbd} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/kbd/usage.ts b/apps/docs/content/components/kbd/usage.ts
index ac4e317f7..11fd11aba 100644
--- a/apps/docs/content/components/kbd/usage.ts
+++ b/apps/docs/content/components/kbd/usage.ts
@@ -1,4 +1,4 @@
-const App = `import { Kbd } from "@nextui-org/react";
+const App = `import {Kbd} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/link/block.ts b/apps/docs/content/components/link/block.ts
index e677572ff..b7ee134ec 100644
--- a/apps/docs/content/components/link/block.ts
+++ b/apps/docs/content/components/link/block.ts
@@ -1,4 +1,4 @@
-const App = `import { Link } from "@nextui-org/react";
+const App = `import {Link} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/link/colors.ts b/apps/docs/content/components/link/colors.ts
index d8983ab04..99a84bf23 100644
--- a/apps/docs/content/components/link/colors.ts
+++ b/apps/docs/content/components/link/colors.ts
@@ -1,4 +1,4 @@
-const App = `import { Link } from "@nextui-org/react";
+const App = `import {Link} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/link/custom-anchor-icon.ts b/apps/docs/content/components/link/custom-anchor-icon.ts
index fac62a337..ca70aee5a 100644
--- a/apps/docs/content/components/link/custom-anchor-icon.ts
+++ b/apps/docs/content/components/link/custom-anchor-icon.ts
@@ -19,8 +19,8 @@ const AnchorIcon = `export const AnchorIcon = (props) => (
   </svg>
 );`;
 
-const App = `import { Link } from "@nextui-org/react";
-import { AnchorIcon } from "./AnchorIcon";
+const App = `import {Link} from "@nextui-org/react";
+import {AnchorIcon} from "./AnchorIcon";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/link/disabled.ts b/apps/docs/content/components/link/disabled.ts
index 2dd828141..a4db371fb 100644
--- a/apps/docs/content/components/link/disabled.ts
+++ b/apps/docs/content/components/link/disabled.ts
@@ -1,4 +1,4 @@
-const App = `import { Link } from "@nextui-org/react";
+const App = `import {Link} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/link/external.ts b/apps/docs/content/components/link/external.ts
index 5a8c875b9..c53e58ec7 100644
--- a/apps/docs/content/components/link/external.ts
+++ b/apps/docs/content/components/link/external.ts
@@ -1,9 +1,9 @@
-const App = `import { Link } from "@nextui-org/react";
+const App = `import {Link} from "@nextui-org/react";
 
 export default function App() {
   return (
     <div className="flex gap-4">
-      <Link isExternal href="https://github.com/nextui-org/nextui">
+      <Link isExternal aria-visible={true} href="https://github.com/nextui-org/nextui">
         External Link
       </Link>
       <Link
diff --git a/apps/docs/content/components/link/index.ts b/apps/docs/content/components/link/index.ts
index 6e7e1bbee..202940139 100644
--- a/apps/docs/content/components/link/index.ts
+++ b/apps/docs/content/components/link/index.ts
@@ -8,6 +8,7 @@ import customAnchorIcon from "./custom-anchor-icon";
 import block from "./block";
 import nextjs from "./nextjs";
 import customImpl from "./custom-impl";
+import polymorphic from "./polymorphic";
 
 export const linkContent = {
   usage,
@@ -20,4 +21,5 @@ export const linkContent = {
   block,
   nextjs,
   customImpl,
+  polymorphic,
 };
diff --git a/apps/docs/content/components/link/nextjs.ts b/apps/docs/content/components/link/nextjs.ts
index 94a005e15..77f0e808a 100644
--- a/apps/docs/content/components/link/nextjs.ts
+++ b/apps/docs/content/components/link/nextjs.ts
@@ -1,4 +1,4 @@
-const App = `import { Link } from "@nextui-org/react";
+const App = `import {Link} from "@nextui-org/react";
 import NextLink from "next/link";
 
 export default function App() {
diff --git a/apps/docs/content/components/link/polymorphic.ts b/apps/docs/content/components/link/polymorphic.ts
new file mode 100644
index 000000000..10c04b327
--- /dev/null
+++ b/apps/docs/content/components/link/polymorphic.ts
@@ -0,0 +1,23 @@
+const App = `import { Link, Button } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Button
+      href="https://github.com/nextui-org/nextui"
+      as={Link}
+      color="primary"
+      showAnchorIcon
+      variant="solid"
+    >
+      Button Link
+    </Button>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/link/sizes.ts b/apps/docs/content/components/link/sizes.ts
index 7047c3970..c1e4f5422 100644
--- a/apps/docs/content/components/link/sizes.ts
+++ b/apps/docs/content/components/link/sizes.ts
@@ -1,4 +1,4 @@
-const App = `import { Link } from "@nextui-org/react";
+const App = `import {Link} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/link/underline.ts b/apps/docs/content/components/link/underline.ts
index 1fb0ffddc..78e0d7b87 100644
--- a/apps/docs/content/components/link/underline.ts
+++ b/apps/docs/content/components/link/underline.ts
@@ -1,4 +1,4 @@
-const App = `import { Link } from "@nextui-org/react";
+const App = `import {Link} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/link/usage.ts b/apps/docs/content/components/link/usage.ts
index c80cde295..bcd07ac92 100644
--- a/apps/docs/content/components/link/usage.ts
+++ b/apps/docs/content/components/link/usage.ts
@@ -1,4 +1,4 @@
-const App = `import { Link } from "@nextui-org/react";
+const App = `import {Link} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/spacer/usage.ts b/apps/docs/content/components/spacer/usage.ts
index 55a9e2196..92882e0eb 100644
--- a/apps/docs/content/components/spacer/usage.ts
+++ b/apps/docs/content/components/spacer/usage.ts
@@ -1,4 +1,4 @@
-const CustomCard = `import { Card } from "@nextui-org/react";
+const CustomCard = `import {Card} from "@nextui-org/react";
 
 export const CustomCard = () => (
   <Card className="w-[200px] space-y-5 p-4" radius="2xl">
@@ -11,8 +11,8 @@ export const CustomCard = () => (
   </Card>
 );`;
 
-const App = `import { Spacer } from "@nextui-org/react";
-import { CustomCard } from "./CustomCard";
+const App = `import {Spacer} from "@nextui-org/react";
+import {CustomCard} from "./CustomCard";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/spinner/colors.ts b/apps/docs/content/components/spinner/colors.ts
index 087cd5dde..33b27d539 100644
--- a/apps/docs/content/components/spinner/colors.ts
+++ b/apps/docs/content/components/spinner/colors.ts
@@ -1,4 +1,4 @@
-const App = `import { Spinner } from "@nextui-org/react";
+const App = `import {Spinner} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/spinner/label-colors.ts b/apps/docs/content/components/spinner/label-colors.ts
index 3926932ee..01e7cbde0 100644
--- a/apps/docs/content/components/spinner/label-colors.ts
+++ b/apps/docs/content/components/spinner/label-colors.ts
@@ -1,4 +1,4 @@
-const App = `import { Spinner } from "@nextui-org/react";
+const App = `import {Spinner} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/spinner/label.ts b/apps/docs/content/components/spinner/label.ts
index b441809cc..3e08afd96 100644
--- a/apps/docs/content/components/spinner/label.ts
+++ b/apps/docs/content/components/spinner/label.ts
@@ -1,4 +1,4 @@
-const App = `import { Spinner } from "@nextui-org/react";
+const App = `import {Spinner} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/spinner/sizes.ts b/apps/docs/content/components/spinner/sizes.ts
index b1018ac50..4c743130a 100644
--- a/apps/docs/content/components/spinner/sizes.ts
+++ b/apps/docs/content/components/spinner/sizes.ts
@@ -1,4 +1,4 @@
-const App = `import { Spinner } from "@nextui-org/react";
+const App = `import {Spinner} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/spinner/usage.ts b/apps/docs/content/components/spinner/usage.ts
index c10b579a5..c61327f31 100644
--- a/apps/docs/content/components/spinner/usage.ts
+++ b/apps/docs/content/components/spinner/usage.ts
@@ -1,4 +1,4 @@
-const App = `import { Spinner } from "@nextui-org/react";
+const App = `import {Spinner} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/docs/components/dropdown.mdx b/apps/docs/content/docs/components/dropdown.mdx
index 5c7fef8bb..6800e2162 100644
--- a/apps/docs/content/docs/components/dropdown.mdx
+++ b/apps/docs/content/docs/components/dropdown.mdx
@@ -9,6 +9,6 @@ url: https://nextui.org/docs/components/dropdown
 Displays a list of actions or options that a user can choose. Dropdown implementation is based on <br/> <a href="https://react-spectrum.adobe.com/react-aria/useMenu.html" rel="noreferrer" target="_blank">@react-aria/menu</a>
 
 ```jsx
-import { Dropdown } from "@nextui-org/react";
+import {Dropdown} from "@nextui-org/react";
 ```
 
diff --git a/apps/docs/content/docs/components/image.mdx b/apps/docs/content/docs/components/image.mdx
index 2b7e3f162..4be340087 100644
--- a/apps/docs/content/docs/components/image.mdx
+++ b/apps/docs/content/docs/components/image.mdx
@@ -9,5 +9,5 @@ url: https://nextui.org/docs/components/image
 The Image component is used to display images.
 
 ```jsx
-import { Image } from '@nextui-org/react';
+import {Image} from '@nextui-org/react';
 ```
\ 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 5fae868d7..8ed533e5f 100644
--- a/apps/docs/content/docs/components/input.mdx
+++ b/apps/docs/content/docs/components/input.mdx
@@ -9,5 +9,5 @@ url: https://nextui.org/docs/components/input
 Inputs fields are used to get the user input in a text field.
 
 ```jsx
-import { Input } from '@nextui-org/react';
+import {Input} from '@nextui-org/react';
 ```
\ No newline at end of file
diff --git a/apps/docs/content/docs/components/link.mdx b/apps/docs/content/docs/components/link.mdx
index 62a9c3411..4997e025b 100644
--- a/apps/docs/content/docs/components/link.mdx
+++ b/apps/docs/content/docs/components/link.mdx
@@ -10,7 +10,7 @@ Links allow users to click their way from page to page. This component is styled
 
 <ComponentLinks component="link" reactAriaHook="useLink" />
 
------
+---
 
 ## Import
 
@@ -57,8 +57,13 @@ If you pass the `isBlock` prop, the link will be rendered as a block element wit
 
 <CodeDemo title="Block Link" files={linkContent.block} />
 
+### Polymorphic Component
 
-### Usage with Next.js 
+NextUI components expose a `as` prop that allows you to customize the React element type that is used to render the component.
+
+<CodeDemo title="Polymorphic Component" files={linkContent.polymorphic} />
+
+### Usage with Next.js
 
 <CodeDemo
   showPreview={false}
@@ -73,19 +78,48 @@ In case you need to customize the link even further, you can use the `useLink` h
 
 <CodeDemo showPreview={false} title="Custom implementation" files={linkContent.customImpl} />
 
-
 ## Data Attributes
 
 `Link` has the following attributes on the `root` element:
 
 - **data-focus**:
-  When the checkbox is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
+  When the link is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html)
 - **data-focus-visible**:
-  When the checkbox is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
+  When the link is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html)
 
 ## Accessibility
 
 - Support for mouse, touch, and keyboard interactions.
 - Support for navigation links via `<a>` elements or custom element types via ARIA.
 - Support for disabled links.
-- Keyboard users may activate links using the <kbd>Enter</kbd> key.
\ No newline at end of file
+- Keyboard users may activate links using the <kbd>Enter</kbd> key.
+
+## API
+
+### Link Props
+
+| Attribute        | Type                                                                           | Description                                                       | Default   |
+| ---------------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------- | --------- |
+| href             | `string`                                                                       | The URL to link to.                                               | -         |
+| size             | `xs` \| `sm` \| `md` \| `lg` \| `xl`                                           | The size of the link.                                             | `md`      |
+| color            | `foreground` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the link.                                            | `primary` |
+| underline        | `none` \| `hover` \| `always` \| `active` \| `focus`                           | The underline of the link.                                        | `none`    |
+| isExternal       | `boolean`                                                                      | Whether the link should open in a new tab.                        | `false`   |
+| showAnchorIcon   | `boolean`                                                                      | Whether to show the anchor icon.                                  | `false`   |
+| anchorIcon       | `ReactNode`                                                                    | The anchor icon.                                                  | -         |
+| isBlock          | `boolean`                                                                      | Whether the link should be rendered as block with a hover effect. | `false`   |
+| isDisabled       | `boolean`                                                                      | Whether the link is disabled.                                     | `false`   |
+| disableAnimation | `boolean`                                                                      | Whether to disable link and block animations.                     | `false`   |
+
+### Link Events
+
+| Attribute     | Type                           | Description                                                                                                     | Default |
+| ------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------- | ------- |
+| onPress       | `(e: PressEvent) => void`      | Handler called when the press is released over the target.                                                      | -       |
+| onPressStart  | `(e: PressEvent) => void`      | Handler called when a press interaction starts.                                                                 | -       |
+| onPressEnd    | `(e: PressEvent) => void`      | Handler called when a press interaction ends, either over the target or when the pointer leaves the target.     | -       |
+| onPressChange | `(isPressed: boolean) => void` | Handler called when the press state changes.                                                                    | -       |
+| onPressUp     | `(e: PressEvent) => void`      | Handler called when a press is released over the target, regardless of whether it started on the target or not. | -       |
+| onKeyDown     | `(e: KeyboardEvent) => void`   | Handler called when a key is pressed.                                                                           | -       |
+| onKeyUp       | `(e: KeyboardEvent) => void`   | Handler called when a key is released.                                                                          | -       |
+| onClick       | `MouseEventHandler`            | The native link click event handler (**Deprecated**) use **onPress** instead.                                   | -       |
diff --git a/apps/docs/content/docs/components/modal.mdx b/apps/docs/content/docs/components/modal.mdx
index 8edb89102..0eba71436 100644
--- a/apps/docs/content/docs/components/modal.mdx
+++ b/apps/docs/content/docs/components/modal.mdx
@@ -9,5 +9,5 @@ url: https://nextui.org/docs/components/modal
 Displays a dialog with a custom content that requires attention or provides additional information.
 
 ```jsx
-import { Modal } from '@nextui-org/react';
+import {Modal} from '@nextui-org/react';
 ```
\ No newline at end of file
diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index 982b41b4e..89404dc90 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -9,5 +9,5 @@ url: https://nextui.org/docs/components/navbar
 A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.
 
 ```jsx
-import { Navbar } from "@nextui-org/react";
+import {Navbar} from "@nextui-org/react";
 ```
diff --git a/apps/docs/content/docs/components/pagination.mdx b/apps/docs/content/docs/components/pagination.mdx
index 514e57d1a..7afa7826c 100644
--- a/apps/docs/content/docs/components/pagination.mdx
+++ b/apps/docs/content/docs/components/pagination.mdx
@@ -9,5 +9,5 @@ url: https://nextui.org/docs/components/pagination
 The Pagination component allows you to display active page and navigate between multiple pages.
 
 ```jsx
-import { Pagination } from '@nextui-org/react';
+import {Pagination} from '@nextui-org/react';
 ```
\ No newline at end of file
diff --git a/apps/docs/content/docs/components/popover.mdx b/apps/docs/content/docs/components/popover.mdx
index c714f5fbe..29df097a3 100644
--- a/apps/docs/content/docs/components/popover.mdx
+++ b/apps/docs/content/docs/components/popover.mdx
@@ -9,5 +9,5 @@ url: https://nextui.org/docs/components/tooltip
 Popover is a **non-modal** dialog that floats around its disclosure. It's commonly used for displaying additional rich content on top of something. Popover implementation is based on [@react-aria/overlays](https://react-spectrum.adobe.com/react-aria/useOverlay.html).
 
 ```jsx
-import { Popover } from '@nextui-org/react';
+import {Popover} from '@nextui-org/react';
 ```
\ No newline at end of file
diff --git a/apps/docs/content/docs/components/progress.mdx b/apps/docs/content/docs/components/progress.mdx
index 361fdff70..28d5736af 100644
--- a/apps/docs/content/docs/components/progress.mdx
+++ b/apps/docs/content/docs/components/progress.mdx
@@ -9,5 +9,5 @@ url: https://nextui.org/docs/components/progress
 The Progress component allows you to view the progress of any activity.
 
 ```jsx
-import { Progress } from '@nextui-org/react';
+import {Progress} from '@nextui-org/react';
 ```
diff --git a/apps/docs/content/docs/components/radio-group.mdx b/apps/docs/content/docs/components/radio-group.mdx
index e15aa96d9..1aa49e326 100644
--- a/apps/docs/content/docs/components/radio-group.mdx
+++ b/apps/docs/content/docs/components/radio-group.mdx
@@ -9,5 +9,5 @@ url: https://nextui.org/docs/components/radio
 Radios allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare. Radio implementation is based on <a href="https://react-spectrum.adobe.com/react-aria/useRadioGroup.html" rel="noreferrer" target="_blank">@react-aria/radio</a>
 
 ```jsx
-import { RadioGroup, Radio } from '@nextui-org/react';
+import {RadioGroup, Radio} from '@nextui-org/react';
 ```
\ No newline at end of file
diff --git a/apps/docs/content/docs/components/switch.mdx b/apps/docs/content/docs/components/switch.mdx
index e65dfd960..3b830bfbd 100644
--- a/apps/docs/content/docs/components/switch.mdx
+++ b/apps/docs/content/docs/components/switch.mdx
@@ -10,5 +10,5 @@ The Switch component is used as an alternative for the [Checkbox](https://nextui
 component. You can switch between enabled or disabled states.
 
 ```jsx
-import { Switch } from '@nextui-org/react';
+import {Switch} from '@nextui-org/react';
 ```
\ No newline at end of file
diff --git a/apps/docs/content/docs/components/table.mdx b/apps/docs/content/docs/components/table.mdx
index 0c1b18dfc..c79c5f2af 100644
--- a/apps/docs/content/docs/components/table.mdx
+++ b/apps/docs/content/docs/components/table.mdx
@@ -11,5 +11,5 @@ Table implementation is based on <a href="https://react-spectrum.adobe.com/react
 @react-aria/table</a>
 
 ```jsx
-import { Table } from '@nextui-org/react';
+import {Table} from '@nextui-org/react';
 ```
\ No newline at end of file
diff --git a/apps/docs/content/docs/components/textarea.mdx b/apps/docs/content/docs/components/textarea.mdx
index 292de76eb..430dd191a 100644
--- a/apps/docs/content/docs/components/textarea.mdx
+++ b/apps/docs/content/docs/components/textarea.mdx
@@ -9,5 +9,5 @@ url: https://nextui.org/docs/components/textarea
 Textarea component is a multi-line Input which allows you to write large texts.
 
 ```jsx
-import { Textarea } from '@nextui-org/react';
+import {Textarea} from '@nextui-org/react';
 ```
\ No newline at end of file
diff --git a/apps/docs/content/docs/components/tooltip.mdx b/apps/docs/content/docs/components/tooltip.mdx
index f22158ebe..c6d8973d5 100644
--- a/apps/docs/content/docs/components/tooltip.mdx
+++ b/apps/docs/content/docs/components/tooltip.mdx
@@ -9,5 +9,5 @@ url: https://nextui.org/docs/components/tooltip
 Tooltips displays informative text when users hover, focus, or click an element.
 
 ```jsx
-import { Tooltip } from '@nextui-org/react';
+import {Tooltip} from '@nextui-org/react';
 ```
\ No newline at end of file
diff --git a/apps/docs/content/docs/components/user.mdx b/apps/docs/content/docs/components/user.mdx
index bc5eb6b32..c087445ac 100644
--- a/apps/docs/content/docs/components/user.mdx
+++ b/apps/docs/content/docs/components/user.mdx
@@ -8,5 +8,5 @@ url: https://nextui.org/docs/components/user
 Flexible User Profile Component.
 
 ```jsx
-import { User } from '@nextui-org/react';
+import {User} from '@nextui-org/react';
 ```
\ No newline at end of file
diff --git a/apps/docs/content/docs/frameworks/astro.mdx b/apps/docs/content/docs/frameworks/astro.mdx
index 49e091c08..22a8bf08e 100644
--- a/apps/docs/content/docs/frameworks/astro.mdx
+++ b/apps/docs/content/docs/frameworks/astro.mdx
@@ -61,7 +61,7 @@ Now you can import NextUI components and use them in your Astro project:
 ```markdown
 ---
 import Layout from '../layouts/Layout.astro';
-import { Button } from '@nextui-org/react';
+import {Button} from '@nextui-org/react';
 ---
 
 <Layout title="Welcome to Astro.">
diff --git a/apps/docs/content/docs/frameworks/nextjs.mdx b/apps/docs/content/docs/frameworks/nextjs.mdx
index 31bd278dd..bb991d736 100644
--- a/apps/docs/content/docs/frameworks/nextjs.mdx
+++ b/apps/docs/content/docs/frameworks/nextjs.mdx
@@ -71,7 +71,7 @@ Go to your `app/providers.tsx` or `app/providers.jsx` (create it if it doesn't e
 // app/providers.tsx
 'use client'
 
-import { NextUIProvider } from '@nextui-org/react'
+import {NextUIProvider} from '@nextui-org/react'
 
 export function Providers({children}: { children: React.ReactNode }) {
   return (
@@ -86,7 +86,7 @@ Now, Go to your `root` layout page and wrap it with the `NextUIProvider`:
 
 ```jsx {6,8,10}
 // app/layout.tsx
-import { Providers } from "./providers";
+import {Providers} from "./providers";
 
 export default function RootLayout({children}: { children: React.ReactNode }) {
   return (
@@ -109,7 +109,7 @@ the `use client;` directive:
 
 ```jsx {2}
 // app/page.tsx
-import { Button } from '@nextui-org/button'
+import {Button} from '@nextui-org/button'
 
 export default function Page() {
   return (
@@ -130,7 +130,7 @@ Go to pages`/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and wr
 
 ```jsx
 // pages/_app.js
-import { NextUIProvider } from '@nextui-org/react'
+import {NextUIProvider} from '@nextui-org/react'
 
 function MyApp({ Component, pageProps }) {
   return (
diff --git a/apps/docs/content/docs/frameworks/remix.mdx b/apps/docs/content/docs/frameworks/remix.mdx
index 059ac8701..13c0d6b15 100644
--- a/apps/docs/content/docs/frameworks/remix.mdx
+++ b/apps/docs/content/docs/frameworks/remix.mdx
@@ -40,7 +40,7 @@ the following code to your `tailwind.config.js` file:
 // tailwind.config.ts
 const { nextui } = require("@nextui-org/react");
 
-import type { Config } from 'tailwindcss'
+import type { Config} from 'tailwindcss'
 
 export default {
   content: [
@@ -70,7 +70,7 @@ import {
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
-import { NextUIProvider } from "@nextui-org/react";
+import {NextUIProvider} from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/docs/frameworks/vite.mdx b/apps/docs/content/docs/frameworks/vite.mdx
index b1f6365ab..8cd023e08 100644
--- a/apps/docs/content/docs/frameworks/vite.mdx
+++ b/apps/docs/content/docs/frameworks/vite.mdx
@@ -68,7 +68,7 @@ Go to the src directory and inside `main.jsx` or `main.tsx`, wrap `NextUIProvide
 // main.tsx or main.jsx
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { NextUIProvider } from '@nextui-org/react'
+import {NextUIProvider} from '@nextui-org/react'
 import App from './App'
 import './index.css'
 
diff --git a/apps/docs/content/docs/guide/installation.mdx b/apps/docs/content/docs/guide/installation.mdx
index 514202428..22244f087 100644
--- a/apps/docs/content/docs/guide/installation.mdx
+++ b/apps/docs/content/docs/guide/installation.mdx
@@ -65,7 +65,7 @@ Therefore, it is essential to incorporate the `NextUIProvider` at the `root` of
 import * as React from 'react'
 
 // 1. import `NextUIProvider` component
-import { NextUIProvider } from '@nextui-org/react'
+import {NextUIProvider} from '@nextui-org/react'
 
 function App() {
   // 2. Wrap NextUIProvider at the root of your app
diff --git a/apps/docs/content/docs/guide/upgrade-to-v2.mdx b/apps/docs/content/docs/guide/upgrade-to-v2.mdx
index 51782eacc..a715f4b18 100644
--- a/apps/docs/content/docs/guide/upgrade-to-v2.mdx
+++ b/apps/docs/content/docs/guide/upgrade-to-v2.mdx
@@ -89,7 +89,7 @@ Go to pages`/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and wr
 
 ```jsx
 // pages/_app.js
-import { NextUIProvider } from '@nextui-org/react'
+import {NextUIProvider} from '@nextui-org/react'
 
 function MyApp({ Component, pageProps }) {
   return (
@@ -116,7 +116,7 @@ Go to your `app/providers.tsx` or `app/providers.jsx` (create it if it doesn't e
 // app/providers.tsx
 'use client'
 
-import { NextUIProvider } from '@nextui-org/react'
+import {NextUIProvider} from '@nextui-org/react'
 
 export function Providers({children}: { children: React.ReactNode }) {
   return (
@@ -131,7 +131,7 @@ Now, Go to your `root` layout page and wrap it with the `NextUIProvider`:
 
 ```jsx
 // app/layout.tsx
-import { Providers } from "./providers";
+import {Providers} from "./providers";
 
 export default function RootLayout({children}: { children: React.ReactNode }) {
   return (
diff --git a/apps/docs/content/landing/index.tsx b/apps/docs/content/landing/index.tsx
index 898114e50..5c94c9dc5 100644
--- a/apps/docs/content/landing/index.tsx
+++ b/apps/docs/content/landing/index.tsx
@@ -181,7 +181,7 @@ const Application = ({Component, pageProps}) => {
 export default Application;  
 `,
   customizationCode: `import React from 'react';
-import { Button } from '@nextui-org/react';
+import {Button} from '@nextui-org/react';
 import confetti from 'canvas-confetti';
 
 const CustomButton = () => {
diff --git a/packages/components/link/src/use-link.ts b/packages/components/link/src/use-link.ts
index 07a1de351..d9d1ad049 100644
--- a/packages/components/link/src/use-link.ts
+++ b/packages/components/link/src/use-link.ts
@@ -53,7 +53,10 @@ export function useLink(originalProps: UseLinkProps) {
 
   const domRef = useDOMRef(ref);
 
-  const {linkProps} = useAriaLink({...otherProps, elementType: `${as}`}, domRef);
+  const {linkProps} = useAriaLink(
+    {...otherProps, isDisabled: originalProps.isDisabled, elementType: `${as}`},
+    domRef,
+  );
 
   const {isFocused, isFocusVisible, focusProps} = useFocusRing({
     autoFocus,