From cd941e64c12a9267fb5c1fa1833ad3b17c8675c3 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Fri, 28 Jul 2023 18:00:18 -0300
Subject: [PATCH] Fix/props suggestions (#1225)

* refactor(core): new forwardRef types created, stories modified, important changes implemented

* feat(docs): custom variants api added, components ref fixed

* fix(components): omit ref removed
---
 apps/docs/app/examples/perf/page.tsx          |  4 +-
 apps/docs/components/navbar.tsx               |  2 +-
 .../docs/customization/custom-variants.mdx    | 49 ++++++++++++++++-
 packages/components/accordion/package.json    |  2 +-
 .../accordion/src/accordion-item.tsx          |  8 +--
 .../components/accordion/src/accordion.tsx    |  8 +--
 .../accordion/stories/accordion.stories.tsx   | 16 +++---
 packages/components/avatar/package.json       |  2 +-
 .../components/avatar/src/avatar-group.tsx    |  8 +--
 packages/components/avatar/src/avatar.tsx     |  9 ++--
 packages/components/avatar/src/use-avatar.ts  | 11 ++--
 .../avatar/stories/avatar-group.stories.tsx   |  4 +-
 .../avatar/stories/avatar.stories.tsx         |  4 +-
 packages/components/badge/package.json        |  2 +-
 packages/components/badge/src/badge.tsx       |  8 +--
 packages/components/badge/src/use-badge.ts    |  2 +-
 .../badge/stories/badge.stories.tsx           |  8 +--
 packages/components/button/package.json       |  2 +-
 .../components/button/src/button-group.tsx    |  8 +--
 packages/components/button/src/button.tsx     |  8 +--
 .../components/button/src/use-button-group.ts |  2 +-
 .../button/stories/button-group.stories.tsx   |  4 +-
 .../button/stories/button.stories.tsx         |  6 +--
 packages/components/card/package.json         |  2 +-
 packages/components/card/src/card-body.tsx    |  2 +-
 packages/components/card/src/card-footer.tsx  |  2 +-
 packages/components/card/src/card-header.tsx  |  2 +-
 packages/components/card/src/card.tsx         |  8 +--
 .../components/card/stories/card.stories.tsx  | 20 +++----
 packages/components/checkbox/package.json     |  2 +-
 .../checkbox/src/checkbox-group.tsx           |  8 +--
 packages/components/checkbox/src/checkbox.tsx |  8 +--
 .../checkbox/src/use-checkbox-group.ts        |  3 +-
 .../stories/checkbox-group.stories.tsx        |  4 +-
 .../checkbox/stories/checkbox.stories.tsx     |  6 +--
 packages/components/chip/package.json         |  2 +-
 packages/components/chip/src/chip.tsx         | 10 ++--
 packages/components/chip/src/use-chip.ts      |  2 +-
 .../components/chip/stories/chip.stories.tsx  |  4 +-
 packages/components/code/package.json         |  2 +-
 packages/components/code/src/code.tsx         |  8 +--
 .../components/code/stories/code.stories.tsx  |  4 +-
 packages/components/divider/package.json      |  2 +-
 packages/components/divider/src/divider.tsx   |  4 +-
 .../components/divider/src/use-divider.ts     |  4 +-
 .../divider/stories/divider.stories.tsx       |  4 +-
 packages/components/dropdown/package.json     |  2 +-
 .../components/dropdown/src/dropdown-item.tsx |  5 +-
 .../components/dropdown/src/dropdown-menu.tsx |  6 +--
 .../dropdown/src/dropdown-section.tsx         |  5 +-
 .../dropdown/src/dropdown-trigger.tsx         |  4 +-
 .../components/dropdown/src/use-dropdown.ts   |  5 +-
 .../dropdown/stories/dropdown.stories.tsx     | 52 +++++--------------
 packages/components/image/package.json        |  2 +-
 packages/components/image/src/image.tsx       |  9 ++--
 .../image/stories/image.stories.tsx           |  6 +--
 packages/components/input/package.json        |  2 +-
 packages/components/input/src/input.tsx       | 10 ++--
 packages/components/input/src/textarea.tsx    |  8 +--
 .../input/stories/input.stories.tsx           | 28 +++++-----
 .../input/stories/textarea.stories.tsx        |  8 +--
 packages/components/kbd/package.json          |  2 +-
 packages/components/kbd/src/kbd.tsx           |  9 ++--
 packages/components/kbd/src/use-kbd.ts        |  4 +-
 .../components/kbd/stories/kbd.stories.tsx    |  4 +-
 packages/components/link/package.json         |  2 +-
 packages/components/link/src/link.tsx         |  8 +--
 .../components/link/stories/link.stories.tsx  |  4 +-
 packages/components/modal/package.json        |  2 +-
 packages/components/modal/src/modal-body.tsx  |  2 +-
 .../components/modal/src/modal-content.tsx    | 11 ++--
 .../components/modal/src/modal-footer.tsx     |  2 +-
 .../components/modal/src/modal-header.tsx     |  2 +-
 packages/components/modal/src/modal.tsx       |  9 ++--
 .../modal/stories/modal.stories.tsx           | 10 ++--
 packages/components/navbar/package.json       |  2 +-
 .../components/navbar/src/navbar-brand.tsx    |  2 +-
 .../components/navbar/src/navbar-content.tsx  |  2 +-
 .../components/navbar/src/navbar-item.tsx     |  2 +-
 .../navbar/src/navbar-menu-item.tsx           |  2 +-
 .../navbar/src/navbar-menu-toggle.tsx         |  2 +-
 .../components/navbar/src/navbar-menu.tsx     |  2 +-
 packages/components/navbar/src/navbar.tsx     |  8 +--
 packages/components/navbar/src/use-navbar.ts  |  4 +-
 .../navbar/stories/navbar.stories.tsx         | 12 ++---
 packages/components/pagination/package.json   |  2 +-
 .../pagination/src/pagination-cursor.tsx      |  2 +-
 .../pagination/src/pagination-item.tsx        |  8 +--
 .../components/pagination/src/pagination.tsx  |  9 ++--
 .../pagination/stories/pagination.stories.tsx |  6 +--
 packages/components/popover/package.json      |  2 +-
 .../popover/src/popover-content.tsx           |  7 +--
 .../popover/src/popover-trigger.tsx           |  5 +-
 packages/components/popover/src/popover.tsx   |  9 ++--
 .../popover/stories/popover.stories.tsx       | 16 +++---
 packages/components/progress/package.json     |  2 +-
 .../progress/src/circular-progress.tsx        |  6 +--
 packages/components/progress/src/progress.tsx |  8 +--
 .../stories/circular-progress.stories.tsx     | 12 ++---
 .../progress/stories/progress.stories.tsx     |  6 +--
 packages/components/radio/package.json        |  2 +-
 packages/components/radio/src/radio-group.tsx |  8 +--
 packages/components/radio/src/radio.tsx       |  8 +--
 .../radio/stories/radio.stories.tsx           |  6 +--
 packages/components/ripple/package.json       |  2 +-
 packages/components/skeleton/package.json     |  2 +-
 packages/components/skeleton/src/skeleton.tsx |  8 +--
 .../components/skeleton/src/use-skeleton.ts   |  4 +-
 .../skeleton/stories/skeleton.stories.tsx     |  4 +-
 packages/components/snippet/package.json      |  2 +-
 packages/components/snippet/src/snippet.tsx   |  9 ++--
 .../components/snippet/src/use-snippet.ts     |  4 +-
 .../snippet/stories/snippet.stories.tsx       |  4 +-
 packages/components/spacer/package.json       |  2 +-
 packages/components/spacer/src/spacer.tsx     |  8 +--
 packages/components/spacer/src/use-spacer.ts  |  4 +-
 .../spacer/stories/spacer.stories.tsx         |  6 +--
 packages/components/spinner/package.json      |  2 +-
 packages/components/spinner/src/spinner.tsx   |  4 +-
 .../components/spinner/src/use-spinner.ts     |  4 +-
 .../spinner/stories/spinner.stories.tsx       |  4 +-
 packages/components/switch/package.json       |  2 +-
 packages/components/switch/src/switch.tsx     |  9 ++--
 .../switch/stories/switch.stories.tsx         | 12 ++---
 packages/components/table/package.json        |  2 +-
 packages/components/table/src/table-body.tsx  |  2 +-
 packages/components/table/src/table-cell.tsx  |  2 +-
 .../table/src/table-checkbox-cell.tsx         |  2 +-
 .../table/src/table-column-header.tsx         |  2 +-
 .../components/table/src/table-header-row.tsx |  2 +-
 .../components/table/src/table-row-group.tsx  |  2 +-
 packages/components/table/src/table-row.tsx   |  2 +-
 .../table/src/table-select-all-checkbox.tsx   |  2 +-
 packages/components/table/src/table.tsx       | 10 ++--
 .../table/stories/table.stories.tsx           | 22 ++++----
 packages/components/tabs/package.json         |  2 +-
 packages/components/tabs/src/tab-panel.tsx    |  2 +-
 packages/components/tabs/src/tab.tsx          |  2 +-
 packages/components/tabs/src/tabs.tsx         |  4 +-
 packages/components/tabs/src/use-tabs.ts      |  2 +-
 .../components/tabs/stories/tabs.stories.tsx  | 12 ++---
 packages/components/tooltip/package.json      |  2 +-
 packages/components/tooltip/src/tooltip.tsx   | 10 ++--
 .../components/tooltip/src/use-tooltip.ts     |  2 +-
 .../tooltip/stories/tooltip.stories.tsx       | 16 +++---
 packages/components/user/package.json         |  2 +-
 packages/components/user/src/use-user.ts      |  2 +-
 packages/components/user/src/user.tsx         |  8 +--
 .../components/user/stories/user.stories.tsx  |  4 +-
 packages/core/react/package.json              |  2 +-
 .../system/__tests__/extend-variants.test.tsx |  6 +--
 packages/core/system/package.json             |  2 +-
 packages/core/system/src/extend-variants.d.ts | 20 ++++++-
 packages/core/system/src/extend-variants.js   | 20 ++++---
 packages/core/system/src/types.ts             | 48 ++++++++---------
 packages/core/system/src/utils.ts             | 11 ++--
 .../system/test-utils/no-slots-component.tsx  | 13 +++--
 .../system/test-utils/slots-component.tsx     | 13 +++--
 packages/core/theme/package.json              |  2 +-
 .../core/theme/stories/colors.stories.tsx     |  6 +--
 .../use-aria-accordion-item/package.json      |  2 +-
 packages/hooks/use-aria-button/package.json   |  2 +-
 .../hooks/use-aria-modal-overlay/package.json |  2 +-
 .../hooks/use-aria-toggle-button/package.json |  2 +-
 packages/hooks/use-callback-ref/package.json  |  2 +-
 packages/hooks/use-clipboard/package.json     |  2 +-
 packages/hooks/use-disclosure/package.json    |  2 +-
 packages/hooks/use-image/package.json         |  2 +-
 .../hooks/use-infinite-scroll/package.json    |  2 +-
 packages/hooks/use-is-mobile/package.json     |  2 +-
 packages/hooks/use-is-mounted/package.json    |  2 +-
 packages/hooks/use-pagination/package.json    |  2 +-
 packages/hooks/use-real-shape/package.json    |  2 +-
 packages/hooks/use-ref-state/package.json     |  2 +-
 packages/hooks/use-resize/package.json        |  2 +-
 .../hooks/use-safe-layout-effect/package.json |  2 +-
 .../hooks/use-scroll-position/package.json    |  2 +-
 packages/hooks/use-ssr/package.json           |  2 +-
 packages/hooks/use-update-effect/package.json |  2 +-
 packages/utilities/aria-utils/package.json    |  2 +-
 .../utilities/framer-transitions/package.json |  2 +-
 packages/utilities/react-utils/package.json   |  2 +-
 packages/utilities/react-utils/src/refs.ts    |  2 +-
 packages/utilities/shared-icons/package.json  |  2 +-
 packages/utilities/shared-utils/package.json  |  2 +-
 packages/utilities/test-utils/package.json    |  2 +-
 plop/component/src/{{componentName}}.tsx.hbs  |  4 +-
 187 files changed, 576 insertions(+), 514 deletions(-)

diff --git a/apps/docs/app/examples/perf/page.tsx b/apps/docs/app/examples/perf/page.tsx
index 0cd801007d..0fe9347a2c 100644
--- a/apps/docs/app/examples/perf/page.tsx
+++ b/apps/docs/app/examples/perf/page.tsx
@@ -235,9 +235,7 @@ export default function NextUIPerf() {
 
       <Button>Click Me!</Button>
 
-      <MyButton2 disableRipple color="foreground">
-        Press Me!
-      </MyButton2>
+      <MyButton2 color="foreground">Press Me!</MyButton2>
     </div>
   );
 }
diff --git a/apps/docs/components/navbar.tsx b/apps/docs/components/navbar.tsx
index cde6aac5e4..19e38ffc3a 100644
--- a/apps/docs/components/navbar.tsx
+++ b/apps/docs/components/navbar.tsx
@@ -54,7 +54,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
   const [isMenuOpen, setIsMenuOpen] = useState<boolean | undefined>(false);
   const [commandKey, setCommandKey] = useState<"ctrl" | "command">("command");
 
-  const ref = useRef(null);
+  const ref = useRef<HTMLElement>(null);
   const isMounted = useIsMounted();
 
   const pathname = usePathname();
diff --git a/apps/docs/content/docs/customization/custom-variants.mdx b/apps/docs/content/docs/customization/custom-variants.mdx
index 9ef25e4b6a..f5d1476122 100644
--- a/apps/docs/content/docs/customization/custom-variants.mdx
+++ b/apps/docs/content/docs/customization/custom-variants.mdx
@@ -213,4 +213,51 @@ import customVariantsSlots from "@/content/customization/custom-variants/slots-c
   All NextUI components have the `Styles source` link on top of the page. This link will take you to
   the styles source code of the component. You can use this as a reference when creating your own
   custom component.
-</Blockquote>
\ No newline at end of file
+</Blockquote>
+
+
+### Types
+
+### Main Function
+
+```jsx
+const Component = extendVariants(BaseComponent, options, config)
+
+/**
+ * BaseComponent -> NextUI component to extend
+ * options -> the variants to add/modify
+ * config -> config to extend the component
+ */
+
+```
+
+### Options
+
+```ts
+type ExtendVariantsOptions = {
+  variants?: Record<string, Record<string, ClassValue>>,
+  defaultVariants?: Record<string, ClassValue>,
+  compoundVariants?: Array<Record<string, string> & ClassProp>
+}
+
+```
+
+### Config
+
+```ts
+  /**
+   * Whether to merge the class names with `tailwind-merge` library.
+   * It's avoid to have duplicate tailwind classes. (Recommended)
+   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/README.md
+   * @default true
+   */
+  twMerge?: boolean;
+  /**
+   * The config object for `tailwind-merge` library.
+   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/docs/configuration.md
+   */
+  twMergeConfig?: TWMergeConfig;
+ ``` 
+
+> **Note**: See the [Tailwind Merge Config](https://github.com/dcastil/tailwind-merge/blob/v1.8.1/docs/configuration.md) to learn more about it.
+
diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
index 6c31f3b3fe..816167cd3a 100644
--- a/packages/components/accordion/package.json
+++ b/packages/components/accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
   "keywords": [
     "react",
diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx
index b511e3a54a..cc8a1724ea 100644
--- a/packages/components/accordion/src/accordion-item.tsx
+++ b/packages/components/accordion/src/accordion-item.tsx
@@ -1,4 +1,4 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {useMemo, ReactNode} from "react";
 import {ChevronIcon} from "@nextui-org/shared-icons";
 import {AnimatePresence, motion, useWillChange} from "framer-motion";
@@ -6,9 +6,9 @@ import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
 
 import {UseAccordionItemProps, useAccordionItem} from "./use-accordion-item";
 
-export interface AccordionItemProps extends Omit<UseAccordionItemProps, "ref"> {}
+export interface AccordionItemProps extends UseAccordionItemProps {}
 
-const AccordionItem = forwardRef<HTMLButtonElement, AccordionItemProps>((props, ref) => {
+const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
   const {
     Component,
     classNames,
@@ -30,7 +30,7 @@ const AccordionItem = forwardRef<HTMLButtonElement, AccordionItemProps>((props,
     getSubtitleProps,
     getContentProps,
     getIndicatorProps,
-  } = useAccordionItem({ref, ...props});
+  } = useAccordionItem({...props, ref});
 
   const willChange = useWillChange();
 
diff --git a/packages/components/accordion/src/accordion.tsx b/packages/components/accordion/src/accordion.tsx
index be40d08ff1..168cab9d02 100644
--- a/packages/components/accordion/src/accordion.tsx
+++ b/packages/components/accordion/src/accordion.tsx
@@ -1,4 +1,4 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {LayoutGroup} from "framer-motion";
 import {Divider} from "@nextui-org/divider";
 import {Fragment, Key, useCallback, useMemo} from "react";
@@ -6,9 +6,9 @@ import {Fragment, Key, useCallback, useMemo} from "react";
 import {UseAccordionProps, useAccordion} from "./use-accordion";
 import AccordionItem from "./accordion-item";
 
-export interface AccordionProps extends Omit<UseAccordionProps, "ref"> {}
+export interface AccordionProps extends UseAccordionProps {}
 
-const AccordionGroup = forwardRef<HTMLDivElement, AccordionProps>((props, ref) => {
+const AccordionGroup = forwardRef<"div", AccordionProps>((props, ref) => {
   const {
     Component,
     values,
@@ -20,8 +20,8 @@ const AccordionGroup = forwardRef<HTMLDivElement, AccordionProps>((props, ref) =
     handleFocusChanged: handleFocusChangedProps,
     itemClasses,
   } = useAccordion({
-    ref,
     ...props,
+    ref,
   });
   const handleFocusChanged = useCallback(
     (isFocused: boolean, key: Key) => handleFocusChangedProps(isFocused, key),
diff --git a/packages/components/accordion/stories/accordion.stories.tsx b/packages/components/accordion/stories/accordion.stories.tsx
index 691a9804b0..fc34b866d8 100644
--- a/packages/components/accordion/stories/accordion.stories.tsx
+++ b/packages/components/accordion/stories/accordion.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {accordionItem} from "@nextui-org/theme";
 import {
   AnchorIcon,
@@ -52,7 +52,7 @@ const defaultProps = {
 const defaultContent =
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
 
-const Template: ComponentStory<typeof Accordion> = (args: AccordionProps) => (
+const Template = (args: AccordionProps) => (
   <Accordion {...args}>
     <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
       {defaultContent}
@@ -66,7 +66,7 @@ const Template: ComponentStory<typeof Accordion> = (args: AccordionProps) => (
   </Accordion>
 );
 
-const TemplateWithSubtitle: ComponentStory<typeof Accordion> = (args: AccordionProps) => (
+const TemplateWithSubtitle = (args: AccordionProps) => (
   <Accordion {...args}>
     <AccordionItem key="1" aria-label="Accordion 1" subtitle="Press to expand" title="Accordion 1">
       {defaultContent}
@@ -89,7 +89,7 @@ const TemplateWithSubtitle: ComponentStory<typeof Accordion> = (args: AccordionP
   </Accordion>
 );
 
-const TemplateWithStartContent: ComponentStory<typeof Accordion> = (args: AccordionProps) => (
+const TemplateWithStartContent = (args: AccordionProps) => (
   <Accordion {...args} variant="shadow">
     <AccordionItem
       key="1"
@@ -146,7 +146,7 @@ const TemplateWithStartContent: ComponentStory<typeof Accordion> = (args: Accord
   </Accordion>
 );
 
-const VariantsTemplate: ComponentStory<typeof Accordion> = (args: AccordionProps) => (
+const VariantsTemplate = (args: AccordionProps) => (
   <div className="flex flex-col gap-8 mb-24">
     <div className="flex flex-col gap-4">
       <h3>Default</h3>
@@ -207,7 +207,7 @@ const VariantsTemplate: ComponentStory<typeof Accordion> = (args: AccordionProps
   </div>
 );
 
-const CustomInidicatorTemplate: ComponentStory<typeof Accordion> = (args: AccordionProps) => (
+const CustomInidicatorTemplate = (args: AccordionProps) => (
   <Accordion {...args}>
     <AccordionItem key="anchor" aria-label="Anchor" indicator={<AnchorIcon />} title="Anchor">
       {defaultContent}
@@ -221,7 +221,7 @@ const CustomInidicatorTemplate: ComponentStory<typeof Accordion> = (args: Accord
   </Accordion>
 );
 
-const ControlledTemplate: ComponentStory<typeof Accordion> = (args: AccordionProps) => {
+const ControlledTemplate = (args: AccordionProps) => {
   const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["1"]));
 
   // eslint-disable-next-line no-console
@@ -242,7 +242,7 @@ const ControlledTemplate: ComponentStory<typeof Accordion> = (args: AccordionPro
   );
 };
 
-const CustomWithClassNamesTemplate: ComponentStory<typeof Accordion> = (args: AccordionProps) => {
+const CustomWithClassNamesTemplate = (args: AccordionProps) => {
   const itemClasses: AccordionItemProps["classNames"] = {
     base: "py-0 w-full",
     title: "font-normal text-base",
diff --git a/packages/components/avatar/package.json b/packages/components/avatar/package.json
index fab223be25..48ba656f7c 100644
--- a/packages/components/avatar/package.json
+++ b/packages/components/avatar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/avatar",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "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/avatar/src/avatar-group.tsx b/packages/components/avatar/src/avatar-group.tsx
index e43d96ef3c..f164e70b68 100644
--- a/packages/components/avatar/src/avatar-group.tsx
+++ b/packages/components/avatar/src/avatar-group.tsx
@@ -1,12 +1,12 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {AvatarGroupProvider} from "./avatar-group-context";
 import {useAvatarGroup, UseAvatarGroupProps} from "./use-avatar-group";
 import Avatar from "./avatar";
 
-export interface AvatarGroupProps extends Omit<UseAvatarGroupProps, "ref"> {}
+export interface AvatarGroupProps extends UseAvatarGroupProps {}
 
-const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>((props, ref) => {
+const AvatarGroup = forwardRef<"div", AvatarGroupProps>((props, ref) => {
   const {
     Component,
     clones,
@@ -15,8 +15,8 @@ const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>((props, ref) =>
     renderCount = (count) => <Avatar className="hover:-translate-x-0" name={`+${count}`} />,
     getAvatarGroupProps,
   } = useAvatarGroup({
-    ref,
     ...props,
+    ref,
   });
 
   return (
diff --git a/packages/components/avatar/src/avatar.tsx b/packages/components/avatar/src/avatar.tsx
index d0601125b1..4a0c2ad0ed 100644
--- a/packages/components/avatar/src/avatar.tsx
+++ b/packages/components/avatar/src/avatar.tsx
@@ -1,11 +1,12 @@
-import {useMemo, forwardRef} from "react";
+import {useMemo} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {AvatarIcon} from "./avatar-icon";
 import {useAvatar, UseAvatarProps} from "./use-avatar";
 
-export interface AvatarProps extends Omit<UseAvatarProps, "ref"> {}
+export interface AvatarProps extends UseAvatarProps {}
 
-const Avatar = forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => {
+const Avatar = forwardRef<"span", AvatarProps>((props, ref) => {
   const {
     Component,
     ImgComponent,
@@ -21,8 +22,8 @@ const Avatar = forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => {
     getAvatarProps,
     getImageProps,
   } = useAvatar({
-    ref,
     ...props,
+    ref,
   });
 
   const fallback = useMemo(() => {
diff --git a/packages/components/avatar/src/use-avatar.ts b/packages/components/avatar/src/use-avatar.ts
index c9ae9c0f1f..156b22f4b2 100644
--- a/packages/components/avatar/src/use-avatar.ts
+++ b/packages/components/avatar/src/use-avatar.ts
@@ -1,4 +1,4 @@
-import type {AvatarVariantProps, AvatarSlots, SlotsToClasses} from "@nextui-org/theme";
+import type {AvatarSlots, AvatarVariantProps, SlotsToClasses} from "@nextui-org/theme";
 
 import {avatar} from "@nextui-org/theme";
 import {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
@@ -13,11 +13,7 @@ import {useHover} from "@react-aria/interactions";
 
 import {useAvatarGroupContext} from "./avatar-group-context";
 
-export interface UseAvatarProps
-  extends Omit<
-    HTMLNextUIProps<"span", AvatarVariantProps>,
-    "children" | "isInGroup" | "isInGridGroup"
-  > {
+interface Props extends HTMLNextUIProps<"span"> {
   /**
    * Ref to the DOM node.
    */
@@ -97,6 +93,9 @@ export interface UseAvatarProps
   classNames?: SlotsToClasses<AvatarSlots>;
 }
 
+export type UseAvatarProps = Props &
+  Omit<AvatarVariantProps, "children" | "isInGroup" | "isInGridGroup">;
+
 export function useAvatar(props: UseAvatarProps = {}) {
   const groupContext = useAvatarGroupContext();
   const isInGroup = !!groupContext;
diff --git a/packages/components/avatar/stories/avatar-group.stories.tsx b/packages/components/avatar/stories/avatar-group.stories.tsx
index b70a3ccf05..4587c60d6e 100644
--- a/packages/components/avatar/stories/avatar-group.stories.tsx
+++ b/packages/components/avatar/stories/avatar-group.stories.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 
 import {Avatar, AvatarGroup, AvatarGroupProps} from "../src";
 
@@ -34,7 +34,7 @@ export default {
   },
 } as ComponentMeta<typeof AvatarGroup>;
 
-const Template: ComponentStory<typeof AvatarGroup> = (args: AvatarGroupProps) => (
+const Template = (args: AvatarGroupProps) => (
   <AvatarGroup {...args}>
     <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026705d" />
     <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026706d" />
diff --git a/packages/components/avatar/stories/avatar.stories.tsx b/packages/components/avatar/stories/avatar.stories.tsx
index c06b6de6e3..2313bae7ab 100644
--- a/packages/components/avatar/stories/avatar.stories.tsx
+++ b/packages/components/avatar/stories/avatar.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {Activity, Camera} from "@nextui-org/shared-icons";
 import {avatar} from "@nextui-org/theme";
 
@@ -30,7 +30,7 @@ export default {
   },
 } as ComponentMeta<typeof Avatar>;
 
-const Template: ComponentStory<typeof Avatar> = (args: AvatarProps) => <Avatar {...args} />;
+const Template = (args: AvatarProps) => <Avatar {...args} />;
 
 const defaultProps = {
   ...avatar.defaultVariants,
diff --git a/packages/components/badge/package.json b/packages/components/badge/package.json
index 5db13fd2b4..a0967ed72c 100644
--- a/packages/components/badge/package.json
+++ b/packages/components/badge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/badge",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Badges are used as a small numerical value or status descriptor for UI elements.",
   "keywords": [
     "badge"
diff --git a/packages/components/badge/src/badge.tsx b/packages/components/badge/src/badge.tsx
index 65b403651e..2d953643ad 100644
--- a/packages/components/badge/src/badge.tsx
+++ b/packages/components/badge/src/badge.tsx
@@ -1,17 +1,17 @@
 import type {ReactNode} from "react";
 
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseBadgeProps, useBadge} from "./use-badge";
 
-export interface BadgeProps extends Omit<UseBadgeProps, "ref"> {
+export interface BadgeProps extends UseBadgeProps {
   children: ReactNode;
 }
 
-const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
+const Badge = forwardRef<"span", BadgeProps>((props, ref) => {
   const {Component, children, content, slots, classNames, getBadgeProps} = useBadge({
-    ref,
     ...props,
+    ref,
   });
 
   return (
diff --git a/packages/components/badge/src/use-badge.ts b/packages/components/badge/src/use-badge.ts
index 0052459c0b..e5135f0eaa 100644
--- a/packages/components/badge/src/use-badge.ts
+++ b/packages/components/badge/src/use-badge.ts
@@ -8,7 +8,7 @@ import {clsx} from "@nextui-org/shared-utils";
 import {ReactRef} from "@nextui-org/react-utils";
 import {useMemo} from "react";
 
-export interface Props extends Omit<HTMLNextUIProps<"span">, "content"> {
+interface Props extends HTMLNextUIProps<"span", "content"> {
   /**
    * Ref to the DOM node.
    */
diff --git a/packages/components/badge/stories/badge.stories.tsx b/packages/components/badge/stories/badge.stories.tsx
index 0a51f830db..d0800316dc 100644
--- a/packages/components/badge/stories/badge.stories.tsx
+++ b/packages/components/badge/stories/badge.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {badge} from "@nextui-org/theme";
 import {Avatar} from "@nextui-org/avatar";
 import {CheckIcon} from "@nextui-org/shared-icons";
@@ -65,7 +65,7 @@ const defaultProps = {
   content: 5,
 };
 
-const Template: ComponentStory<typeof Badge> = (args: BadgeProps) => (
+const Template = (args: BadgeProps) => (
   <Badge {...args}>
     <Avatar
       isBordered={args.classNames?.badge?.includes("bottom")}
@@ -75,7 +75,7 @@ const Template: ComponentStory<typeof Badge> = (args: BadgeProps) => (
   </Badge>
 );
 
-const ShapesTemplate: ComponentStory<typeof Badge> = (args: BadgeProps) => (
+const ShapesTemplate = (args: BadgeProps) => (
   <div className="flex gap-4 items-center">
     <Badge {...args} shape="rectangle">
       <Avatar isBordered radius="lg" src="https://i.pravatar.cc/150?u=a042f81f4e29026024d" />
@@ -86,7 +86,7 @@ const ShapesTemplate: ComponentStory<typeof Badge> = (args: BadgeProps) => (
   </div>
 );
 
-const InvisibleTemplate: ComponentStory<typeof Badge> = (args: BadgeProps) => {
+const InvisibleTemplate = (args: BadgeProps) => {
   const [isInvisible, setIsInvisible] = React.useState(false);
 
   return (
diff --git a/packages/components/button/package.json b/packages/components/button/package.json
index c754450e2c..f1d8d4f12b 100644
--- a/packages/components/button/package.json
+++ b/packages/components/button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/button",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Buttons allow users to perform actions and choose with a single tap.",
   "keywords": [
     "button"
diff --git a/packages/components/button/src/button-group.tsx b/packages/components/button/src/button-group.tsx
index 402caf3d75..848c864d59 100644
--- a/packages/components/button/src/button-group.tsx
+++ b/packages/components/button/src/button-group.tsx
@@ -1,14 +1,14 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {ButtonGroupProvider} from "./button-group-context";
 import {UseButtonGroupProps, useButtonGroup} from "./use-button-group";
 
-export interface ButtonGroupProps extends Omit<UseButtonGroupProps, "ref"> {}
+export interface ButtonGroupProps extends UseButtonGroupProps {}
 
-const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>((props, ref) => {
+const ButtonGroup = forwardRef<"div", ButtonGroupProps>((props, ref) => {
   const {Component, domRef, context, children, classNames, getButtonGroupProps} = useButtonGroup({
-    ref,
     ...props,
+    ref,
   });
 
   return (
diff --git a/packages/components/button/src/button.tsx b/packages/components/button/src/button.tsx
index 04a97f0a76..d95b193495 100644
--- a/packages/components/button/src/button.tsx
+++ b/packages/components/button/src/button.tsx
@@ -1,12 +1,12 @@
 import {Spinner} from "@nextui-org/spinner";
 import {Ripple} from "@nextui-org/ripple";
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseButtonProps, useButton} from "./use-button";
 
-export interface ButtonProps extends Omit<UseButtonProps, "ref"> {}
+export interface ButtonProps extends UseButtonProps {}
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+const Button = forwardRef<"button", ButtonProps>((props, ref) => {
   const {
     Component,
     domRef,
@@ -22,8 +22,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     disableRipple,
     getButtonProps,
   } = useButton({
-    ref,
     ...props,
+    ref,
   });
 
   return (
diff --git a/packages/components/button/src/use-button-group.ts b/packages/components/button/src/use-button-group.ts
index b05296d430..c11fc46a5e 100644
--- a/packages/components/button/src/use-button-group.ts
+++ b/packages/components/button/src/use-button-group.ts
@@ -6,7 +6,7 @@ import {buttonGroup} from "@nextui-org/theme";
 import {HTMLNextUIProps, PropGetter, mapPropsVariants} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {useMemo, useCallback} from "react";
-interface Props extends HTMLNextUIProps<"div">, ButtonGroupVariantProps {
+interface Props extends HTMLNextUIProps, ButtonGroupVariantProps {
   /**
    * Ref to the DOM node.
    */
diff --git a/packages/components/button/stories/button-group.stories.tsx b/packages/components/button/stories/button-group.stories.tsx
index 0d6c8113bc..2e77f76288 100644
--- a/packages/components/button/stories/button-group.stories.tsx
+++ b/packages/components/button/stories/button-group.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {button, buttonGroup} from "@nextui-org/theme";
 
 import {Button, ButtonGroup, ButtonGroupProps} from "../src";
@@ -55,7 +55,7 @@ const defaultProps = {
   ...buttonGroup.defaultVariants,
 };
 
-const Template: ComponentStory<typeof ButtonGroup> = (args: ButtonGroupProps) => (
+const Template = (args: ButtonGroupProps) => (
   <ButtonGroup {...args}>
     <Button>One</Button>
     <Button>Two</Button>
diff --git a/packages/components/button/stories/button.stories.tsx b/packages/components/button/stories/button.stories.tsx
index 6f67fb2daf..14bb2875f2 100644
--- a/packages/components/button/stories/button.stories.tsx
+++ b/packages/components/button/stories/button.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {button} from "@nextui-org/theme";
 import {Camera, HeadphonesIcon, Notification} from "@nextui-org/shared-icons";
 
@@ -68,9 +68,9 @@ const defaultProps = {
   ...button.defaultVariants,
 };
 
-const Template: ComponentStory<typeof Button> = (args: ButtonProps) => <Button {...args} />;
+const Template = (args: ButtonProps) => <Button {...args} />;
 
-const StateTemplate: ComponentStory<typeof Button> = (args: ButtonProps) => {
+const StateTemplate = (args: ButtonProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const handleClick = () => {
diff --git a/packages/components/card/package.json b/packages/components/card/package.json
index 14953e9888..d25d7b82fa 100644
--- a/packages/components/card/package.json
+++ b/packages/components/card/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/card",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Card is a container for text, photos, and actions in the context of a single subject.",
   "keywords": [
     "card"
diff --git a/packages/components/card/src/card-body.tsx b/packages/components/card/src/card-body.tsx
index ac571328a4..6f8a637257 100644
--- a/packages/components/card/src/card-body.tsx
+++ b/packages/components/card/src/card-body.tsx
@@ -4,7 +4,7 @@ import {clsx} from "@nextui-org/shared-utils";
 
 import {useCardContext} from "./card-context";
 
-const CardBody = forwardRef<HTMLNextUIProps, "div">((props, ref) => {
+const CardBody = forwardRef<"div", HTMLNextUIProps<"div">>((props, ref) => {
   const {as, className, children, ...otherProps} = props;
 
   const Component = as || "div";
diff --git a/packages/components/card/src/card-footer.tsx b/packages/components/card/src/card-footer.tsx
index 51b730386f..851cc9e40f 100644
--- a/packages/components/card/src/card-footer.tsx
+++ b/packages/components/card/src/card-footer.tsx
@@ -6,7 +6,7 @@ import {useCardContext} from "./card-context";
 
 export interface CardFooterProps extends HTMLNextUIProps<"div"> {}
 
-const CardFooter = forwardRef<CardFooterProps, "div">((props, ref) => {
+const CardFooter = forwardRef<"div", CardFooterProps>((props, ref) => {
   const {as, className, children, ...otherProps} = props;
 
   const Component = as || "div";
diff --git a/packages/components/card/src/card-header.tsx b/packages/components/card/src/card-header.tsx
index 2a997e439f..bec3f675c9 100644
--- a/packages/components/card/src/card-header.tsx
+++ b/packages/components/card/src/card-header.tsx
@@ -4,7 +4,7 @@ import {clsx} from "@nextui-org/shared-utils";
 
 import {useCardContext} from "./card-context";
 
-const CardHeader = forwardRef<HTMLNextUIProps, "div">((props, ref) => {
+const CardHeader = forwardRef<"div", HTMLNextUIProps<"div">>((props, ref) => {
   const {as, className, children, ...otherProps} = props;
   const Component = as || "div";
 
diff --git a/packages/components/card/src/card.tsx b/packages/components/card/src/card.tsx
index 14baa3d513..b669d636c4 100644
--- a/packages/components/card/src/card.tsx
+++ b/packages/components/card/src/card.tsx
@@ -1,12 +1,12 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {Ripple} from "@nextui-org/ripple";
 
 import {CardProvider} from "./card-context";
 import {useCard, UseCardProps} from "./use-card";
 
-export interface CardProps extends Omit<UseCardProps, "ref"> {}
+export interface CardProps extends UseCardProps {}
 
-const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
+const Card = forwardRef<"div", CardProps>((props, ref) => {
   const {
     children,
     context,
@@ -17,8 +17,8 @@ const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     disableRipple,
     getCardProps,
   } = useCard({
-    ref,
     ...props,
+    ref,
   });
 
   return (
diff --git a/packages/components/card/stories/card.stories.tsx b/packages/components/card/stories/card.stories.tsx
index ad229fafd4..f4c14278b2 100644
--- a/packages/components/card/stories/card.stories.tsx
+++ b/packages/components/card/stories/card.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {card} from "@nextui-org/theme";
 import {Link} from "@nextui-org/link";
 import {Button} from "@nextui-org/button";
@@ -74,7 +74,7 @@ const defaultProps = {
   disableRipple: false,
 };
 
-const Template: ComponentStory<typeof Card> = (args: CardProps) => (
+const Template = (args: CardProps) => (
   <Card {...args} className="max-w-md">
     <CardBody>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed</p>
@@ -82,7 +82,7 @@ const Template: ComponentStory<typeof Card> = (args: CardProps) => (
   </Card>
 );
 
-const WithDividerTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
+const WithDividerTemplate = (args: CardProps) => (
   <Card {...args} className="max-w-md">
     <CardHeader className="border-b border-divider dark:border-divider-dark">
       <strong>Description</strong>
@@ -99,7 +99,7 @@ const WithDividerTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
   </Card>
 );
 
-const WithFooterTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
+const WithFooterTemplate = (args: CardProps) => (
   <Card {...args} className="p-4 max-w-md">
     <CardHeader className="flex gap-3">
       <Image
@@ -125,7 +125,7 @@ const WithFooterTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
   </Card>
 );
 
-const WithAbsImageHeaderTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
+const WithAbsImageHeaderTemplate = (args: CardProps) => (
   <Card {...args} className="max-w-[330px]">
     <CardHeader className="absolute top-2 z-20">
       <div className="flex flex-col">
@@ -143,7 +143,7 @@ const WithAbsImageHeaderTemplate: ComponentStory<typeof Card> = (args: CardProps
   </Card>
 );
 
-const WithAbsImgHeaderFooterTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
+const WithAbsImgHeaderFooterTemplate = (args: CardProps) => (
   <Card className="w-[330px] bg-zinc-100 dark:bg-zinc-100" {...args}>
     <CardHeader className="absolute top-2 z-10">
       <div className="flex flex-col gap-2">
@@ -174,7 +174,7 @@ const WithAbsImgHeaderFooterTemplate: ComponentStory<typeof Card> = (args: CardP
   </Card>
 );
 
-const CoverImgTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
+const CoverImgTemplate = (args: CardProps) => (
   <div className="max-w-[900px] gap-2 grid grid-cols-12 grid-rows-2 px-8">
     <Card {...args} className="col-span-12 sm:col-span-4">
       <CardHeader className="absolute z-10 top-1 flex-col !items-start">
@@ -257,7 +257,7 @@ const CoverImgTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
   </div>
 );
 
-const CenterImgTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
+const CenterImgTemplate = (args: CardProps) => (
   <Card {...args} className="max-w-fit py-4 px-0">
     <CardHeader className="pb-0 pt-2 px-4 flex-col !items-start">
       <p className="text-xs uppercase font-bold">Daily Mix</p>
@@ -275,7 +275,7 @@ const CenterImgTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
   </Card>
 );
 
-const PrimaryActionTemplate: ComponentStory<typeof Card> = (args: CardProps) => {
+const PrimaryActionTemplate = (args: CardProps) => {
   const list = [
     {
       title: "Orange",
@@ -348,7 +348,7 @@ const PrimaryActionTemplate: ComponentStory<typeof Card> = (args: CardProps) =>
   );
 };
 
-const CenterImgWithHeaderTemplate: ComponentStory<typeof Card> = (args: CardProps) => {
+const CenterImgWithHeaderTemplate = (args: CardProps) => {
   const list = [
     {
       title: "Mac",
diff --git a/packages/components/checkbox/package.json b/packages/components/checkbox/package.json
index 40c0ca0295..ebb8b35c64 100644
--- a/packages/components/checkbox/package.json
+++ b/packages/components/checkbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/checkbox",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "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/checkbox/src/checkbox-group.tsx b/packages/components/checkbox/src/checkbox-group.tsx
index aa520bba40..c03fc669c6 100644
--- a/packages/components/checkbox/src/checkbox-group.tsx
+++ b/packages/components/checkbox/src/checkbox-group.tsx
@@ -1,11 +1,11 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {CheckboxGroupProvider} from "./checkbox-group-context";
 import {UseCheckboxGroupProps, useCheckboxGroup} from "./use-checkbox-group";
 
-export interface CheckboxGroupProps extends Omit<UseCheckboxGroupProps, "ref"> {}
+export interface CheckboxGroupProps extends UseCheckboxGroupProps {}
 
-const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>((props, ref) => {
+const CheckboxGroup = forwardRef<"div", CheckboxGroupProps>((props, ref) => {
   const {
     children,
     context,
@@ -17,7 +17,7 @@ const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>((props, ref
     getWrapperProps,
     getDescriptionProps,
     getErrorMessageProps,
-  } = useCheckboxGroup({ref, ...props});
+  } = useCheckboxGroup({...props, ref});
 
   return (
     <div {...getGroupProps()}>
diff --git a/packages/components/checkbox/src/checkbox.tsx b/packages/components/checkbox/src/checkbox.tsx
index 8ee7a000f8..ce57b77674 100644
--- a/packages/components/checkbox/src/checkbox.tsx
+++ b/packages/components/checkbox/src/checkbox.tsx
@@ -1,13 +1,13 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {cloneElement, ReactElement} from "react";
 
 import {UseCheckboxProps, useCheckbox} from "./use-checkbox";
 import {CheckboxIcon} from "./checkbox-icon";
 
-export interface CheckboxProps extends Omit<UseCheckboxProps, "ref"> {}
+export interface CheckboxProps extends UseCheckboxProps {}
 
-const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>((props, ref) => {
+const Checkbox = forwardRef<"label", CheckboxProps>((props, ref) => {
   const {
     Component,
     children,
@@ -18,8 +18,8 @@ const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>((props, ref) => {
     getIconProps,
     getLabelProps,
   } = useCheckbox({
-    ref,
     ...props,
+    ref,
   });
 
   const clonedIcon =
diff --git a/packages/components/checkbox/src/use-checkbox-group.ts b/packages/components/checkbox/src/use-checkbox-group.ts
index b94463ef7a..c1e4ccbe01 100644
--- a/packages/components/checkbox/src/use-checkbox-group.ts
+++ b/packages/components/checkbox/src/use-checkbox-group.ts
@@ -14,7 +14,7 @@ import {clsx, safeAriaLabel} from "@nextui-org/shared-utils";
 
 import {CheckboxProps} from "./index";
 
-interface Props extends HTMLNextUIProps<"div", AriaCheckboxGroupProps> {
+interface Props extends HTMLNextUIProps<"div"> {
   /**
    * Ref to the DOM node.
    */
@@ -47,6 +47,7 @@ interface Props extends HTMLNextUIProps<"div", AriaCheckboxGroupProps> {
 }
 
 export type UseCheckboxGroupProps = Props &
+  AriaCheckboxGroupProps &
   Partial<
     Pick<
       CheckboxProps,
diff --git a/packages/components/checkbox/stories/checkbox-group.stories.tsx b/packages/components/checkbox/stories/checkbox-group.stories.tsx
index c6760b8b51..4de56f2641 100644
--- a/packages/components/checkbox/stories/checkbox-group.stories.tsx
+++ b/packages/components/checkbox/stories/checkbox-group.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {checkbox} from "@nextui-org/theme";
 
 import {CheckboxGroup, Checkbox, CheckboxGroupProps} from "../src";
@@ -48,7 +48,7 @@ const defaultProps = {
   ...checkbox.defaultVariants,
 };
 
-const Template: ComponentStory<typeof CheckboxGroup> = (args: CheckboxGroupProps) => (
+const Template = (args: CheckboxGroupProps) => (
   <CheckboxGroup {...args}>
     <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
     <Checkbox value="sydney">Sydney</Checkbox>
diff --git a/packages/components/checkbox/stories/checkbox.stories.tsx b/packages/components/checkbox/stories/checkbox.stories.tsx
index 449c0c1949..e4a4cc6453 100644
--- a/packages/components/checkbox/stories/checkbox.stories.tsx
+++ b/packages/components/checkbox/stories/checkbox.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {checkbox, colors} from "@nextui-org/theme";
 import {CheckIcon, CloseIcon} from "@nextui-org/shared-icons";
 import {User} from "@nextui-org/user";
@@ -56,9 +56,9 @@ const defaultProps: CheckboxProps = {
   children: "Option",
 };
 
-const Template: ComponentStory<typeof Checkbox> = (args: CheckboxProps) => <Checkbox {...args} />;
+const Template = (args: CheckboxProps) => <Checkbox {...args} />;
 
-const ControlledTemplate: ComponentStory<typeof Checkbox> = (args: CheckboxProps) => {
+const ControlledTemplate = (args: CheckboxProps) => {
   const [selected, setSelected] = React.useState<boolean>(true);
 
   React.useEffect(() => {
diff --git a/packages/components/chip/package.json b/packages/components/chip/package.json
index d04d0e3ca6..d000a31541 100644
--- a/packages/components/chip/package.json
+++ b/packages/components/chip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/chip",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Chips help people enter information, make selections, filter content, or trigger actions.",
   "keywords": [
     "chip"
diff --git a/packages/components/chip/src/chip.tsx b/packages/components/chip/src/chip.tsx
index 1213fa9a47..de65798e6a 100644
--- a/packages/components/chip/src/chip.tsx
+++ b/packages/components/chip/src/chip.tsx
@@ -1,12 +1,12 @@
 import {CloseFilledIcon} from "@nextui-org/shared-icons";
-import {useMemo, forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
+import {useMemo} from "react";
 
 import {UseChipProps, useChip} from "./use-chip";
 
-export interface ChipProps
-  extends Omit<UseChipProps, "ref" | "isOneChar" | "isCloseButtonFocusVisible"> {}
+export interface ChipProps extends Omit<UseChipProps, "isOneChar" | "isCloseButtonFocusVisible"> {}
 
-const Chip = forwardRef<HTMLDivElement, ChipProps>((props, ref) => {
+const Chip = forwardRef<"div", ChipProps>((props, ref) => {
   const {
     Component,
     children,
@@ -19,8 +19,8 @@ const Chip = forwardRef<HTMLDivElement, ChipProps>((props, ref) => {
     getCloseButtonProps,
     getChipProps,
   } = useChip({
-    ref,
     ...props,
+    ref,
   });
 
   const start = useMemo(() => {
diff --git a/packages/components/chip/src/use-chip.ts b/packages/components/chip/src/use-chip.ts
index 376f631c8e..63d34f4848 100644
--- a/packages/components/chip/src/use-chip.ts
+++ b/packages/components/chip/src/use-chip.ts
@@ -12,7 +12,7 @@ import {ReactRef} from "@nextui-org/react-utils";
 import {useMemo, isValidElement, cloneElement} from "react";
 import {PressEvent} from "@react-types/shared";
 
-export interface UseChipProps extends HTMLNextUIProps<"div">, ChipVariantProps {
+export interface UseChipProps extends HTMLNextUIProps, ChipVariantProps {
   /**
    * Ref to the DOM node.
    */
diff --git a/packages/components/chip/stories/chip.stories.tsx b/packages/components/chip/stories/chip.stories.tsx
index 7448b1e8da..cc8e22e5ce 100644
--- a/packages/components/chip/stories/chip.stories.tsx
+++ b/packages/components/chip/stories/chip.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {chip} from "@nextui-org/theme";
 import {Avatar} from "@nextui-org/avatar";
 import {CheckIcon} from "@nextui-org/shared-icons";
@@ -47,7 +47,7 @@ const defaultProps = {
   children: "Chip",
 };
 
-const Template: ComponentStory<typeof Chip> = (args: ChipProps) => <Chip {...args} />;
+const Template = (args: ChipProps) => <Chip {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/packages/components/code/package.json b/packages/components/code/package.json
index d566f17508..02a62cb502 100644
--- a/packages/components/code/package.json
+++ b/packages/components/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/code",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Code is a component used to display inline code.",
   "keywords": [
     "code"
diff --git a/packages/components/code/src/code.tsx b/packages/components/code/src/code.tsx
index a39fe97daf..1f76580813 100644
--- a/packages/components/code/src/code.tsx
+++ b/packages/components/code/src/code.tsx
@@ -1,11 +1,11 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {useCode, UseCodeProps} from "./use-code";
 
-export interface CodeProps extends Omit<UseCodeProps, "ref"> {}
+export interface CodeProps extends UseCodeProps {}
 
-const Code = forwardRef<HTMLElement, CodeProps>((props, ref) => {
-  const {Component, children, getCodeProps} = useCode({ref, ...props});
+const Code = forwardRef<"div", CodeProps>((props, ref) => {
+  const {Component, children, getCodeProps} = useCode({...props, ref});
 
   return <Component {...getCodeProps()}>{children}</Component>;
 });
diff --git a/packages/components/code/stories/code.stories.tsx b/packages/components/code/stories/code.stories.tsx
index 4f91825b3c..5626e7e15d 100644
--- a/packages/components/code/stories/code.stories.tsx
+++ b/packages/components/code/stories/code.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {code} from "@nextui-org/theme";
 
 import {Code, CodeProps} from "../src";
@@ -34,7 +34,7 @@ const defaultProps = {
   ...code.defaultVariants,
 };
 
-const Template: ComponentStory<typeof Code> = (args: CodeProps) => <Code {...args} />;
+const Template = (args: CodeProps) => <Code {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/packages/components/divider/package.json b/packages/components/divider/package.json
index c051d1f911..8e73f7f478 100644
--- a/packages/components/divider/package.json
+++ b/packages/components/divider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/divider",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": ". A separator is a visual divider between two groups of content",
   "keywords": [
     "divider"
diff --git a/packages/components/divider/src/divider.tsx b/packages/components/divider/src/divider.tsx
index 22e20d308b..01a4cf2c26 100644
--- a/packages/components/divider/src/divider.tsx
+++ b/packages/components/divider/src/divider.tsx
@@ -1,10 +1,10 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseDividerProps, useDivider} from "./use-divider";
 
 export interface DividerProps extends Omit<UseDividerProps, "children"> {}
 
-const Divider = forwardRef<HTMLElement, DividerProps>((props, ref) => {
+const Divider = forwardRef<"div", DividerProps>((props, ref) => {
   const {Component, getDividerProps} = useDivider({ref, ...props});
 
   return <Component {...getDividerProps()} />;
diff --git a/packages/components/divider/src/use-divider.ts b/packages/components/divider/src/use-divider.ts
index c26bb797d7..a9b8b25bee 100644
--- a/packages/components/divider/src/use-divider.ts
+++ b/packages/components/divider/src/use-divider.ts
@@ -7,14 +7,14 @@ import {useDOMRef} from "@nextui-org/react-utils";
 import {Ref, useCallback, useMemo} from "react";
 import {mergeProps} from "@react-aria/utils";
 
-interface Props extends HTMLNextUIProps<"hr", DividerVariantProps> {
+interface Props extends HTMLNextUIProps<"hr"> {
   /**
    * Ref to the DOM node.
    */
   ref?: Ref<HTMLElement> | undefined;
 }
 
-export type UseDividerProps = Props & Omit<AriaSeparatorProps, "elementType">;
+export type UseDividerProps = Props & DividerVariantProps & Omit<AriaSeparatorProps, "elementType">;
 
 export function useDivider(props: UseDividerProps) {
   const {ref, as, className, orientation, ...otherProps} = props;
diff --git a/packages/components/divider/stories/divider.stories.tsx b/packages/components/divider/stories/divider.stories.tsx
index dd8f2651d3..6fe19a09c6 100644
--- a/packages/components/divider/stories/divider.stories.tsx
+++ b/packages/components/divider/stories/divider.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {divider} from "@nextui-org/theme";
 
 import {Divider, DividerProps} from "../src";
@@ -28,7 +28,7 @@ const defaultProps = {
   ...divider.defaultVariants,
 };
 
-const Template: ComponentStory<typeof Divider> = (args: DividerProps) => (
+const Template = (args: DividerProps) => (
   <div className="max-w-md">
     <div className="space-y-1">
       <h4 className="text-base font-medium">NextUI Components</h4>
diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json
index 1e2d403f3d..d038f43cdd 100644
--- a/packages/components/dropdown/package.json
+++ b/packages/components/dropdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/dropdown",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "A dropdown displays a list of actions or options that a user can choose.",
   "keywords": [
     "dropdown"
diff --git a/packages/components/dropdown/src/dropdown-item.tsx b/packages/components/dropdown/src/dropdown-item.tsx
index 797bac270f..86f409de50 100644
--- a/packages/components/dropdown/src/dropdown-item.tsx
+++ b/packages/components/dropdown/src/dropdown-item.tsx
@@ -1,4 +1,5 @@
-import {useMemo, ReactNode, forwardRef} from "react";
+import {useMemo, ReactNode} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseDropdownItemProps, useDropdownItem} from "./use-dropdown-item";
 import {DropdownSelectedIcon} from "./dropdown-selected-icon";
@@ -8,7 +9,7 @@ export interface DropdownItemProps<T extends object = object> extends UseDropdow
 /**
  * @internal
  */
-const DropdownItem = forwardRef<HTMLLIElement, DropdownItemProps>((props, _) => {
+const DropdownItem = forwardRef<"li", DropdownItemProps>((props, _) => {
   const {
     Component,
     slots,
diff --git a/packages/components/dropdown/src/dropdown-menu.tsx b/packages/components/dropdown/src/dropdown-menu.tsx
index 6d4621d01e..8fe5c0d2ba 100644
--- a/packages/components/dropdown/src/dropdown-menu.tsx
+++ b/packages/components/dropdown/src/dropdown-menu.tsx
@@ -6,8 +6,8 @@ import {AriaMenuProps} from "@react-types/menu";
 import {useTreeState} from "@react-stately/tree";
 import {dropdownMenu} from "@nextui-org/theme";
 import {FocusScope} from "@react-aria/focus";
-import {useMemo, forwardRef} from "react";
-import {HTMLNextUIProps} from "@nextui-org/system";
+import {useMemo} from "react";
+import {HTMLNextUIProps, forwardRef} from "@nextui-org/system";
 
 import DropdownSection from "./dropdown-section";
 import DropdownItem, {DropdownItemProps} from "./dropdown-item";
@@ -42,7 +42,7 @@ export interface DropdownMenuProps<T = object>
   itemClasses?: DropdownItemProps["classNames"];
 }
 
-const DropdownMenu = forwardRef<HTMLUListElement, DropdownMenuProps>(
+const DropdownMenu = forwardRef<"ul", DropdownMenuProps>(
   (
     {
       as,
diff --git a/packages/components/dropdown/src/dropdown-section.tsx b/packages/components/dropdown/src/dropdown-section.tsx
index b518ee4cbe..835b43c686 100644
--- a/packages/components/dropdown/src/dropdown-section.tsx
+++ b/packages/components/dropdown/src/dropdown-section.tsx
@@ -2,7 +2,8 @@ import {dropdownSection} from "@nextui-org/theme";
 import {Node} from "@react-types/shared";
 import {TreeState} from "@react-stately/tree";
 import {useMenuSection} from "@react-aria/menu";
-import {useMemo, Key, forwardRef} from "react";
+import {useMemo, Key} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {mergeProps} from "@react-aria/utils";
 import {clsx} from "@nextui-org/shared-utils";
 import {Divider} from "@nextui-org/divider";
@@ -40,7 +41,7 @@ export interface DropdownSectionProps<T extends object = object> extends Dropdow
 /**
  * @internal
  */
-const DropdownSection = forwardRef<HTMLLIElement, DropdownSectionProps>(
+const DropdownSection = forwardRef<"li", DropdownSectionProps>(
   (
     {
       item,
diff --git a/packages/components/dropdown/src/dropdown-trigger.tsx b/packages/components/dropdown/src/dropdown-trigger.tsx
index 2342acc1ab..5217e188d3 100644
--- a/packages/components/dropdown/src/dropdown-trigger.tsx
+++ b/packages/components/dropdown/src/dropdown-trigger.tsx
@@ -1,4 +1,4 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {PopoverTrigger} from "@nextui-org/popover";
 
 import {useDropdownContext} from "./dropdown-context";
@@ -11,7 +11,7 @@ export interface DropdownTriggerProps {
  * DropdownTrigger opens the popover's content. It must be an interactive element
  * such as `button` or `a`.
  */
-const DropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>((props, _) => {
+const DropdownTrigger = forwardRef<"button", DropdownTriggerProps>((props, _) => {
   const {getMenuTriggerProps} = useDropdownContext();
 
   const {children, ...otherProps} = props;
diff --git a/packages/components/dropdown/src/use-dropdown.ts b/packages/components/dropdown/src/use-dropdown.ts
index d9d39cfff5..040cc340e2 100644
--- a/packages/components/dropdown/src/use-dropdown.ts
+++ b/packages/components/dropdown/src/use-dropdown.ts
@@ -10,8 +10,7 @@ import {PopoverProps} from "@nextui-org/popover";
 import {useMemo, useRef} from "react";
 import {mergeProps} from "@react-aria/utils";
 
-export interface UseDropdownProps
-  extends HTMLNextUIProps<"div", Omit<PopoverProps, "children" | "color" | "variant">> {
+interface Props extends HTMLNextUIProps<"div"> {
   /**
    * Type of overlay that is opened by the trigger.
    */
@@ -37,6 +36,8 @@ export interface UseDropdownProps
   closeOnSelect?: boolean;
 }
 
+export type UseDropdownProps = Props & Omit<PopoverProps, "children" | "color" | "variant">;
+
 export function useDropdown(props: UseDropdownProps) {
   const {
     as,
diff --git a/packages/components/dropdown/stories/dropdown.stories.tsx b/packages/components/dropdown/stories/dropdown.stories.tsx
index c16494cdc9..9b50ecb136 100644
--- a/packages/components/dropdown/stories/dropdown.stories.tsx
+++ b/packages/components/dropdown/stories/dropdown.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {dropdown, popover} from "@nextui-org/theme";
 import {Button} from "@nextui-org/button";
 import {Avatar} from "@nextui-org/avatar";
@@ -113,11 +113,7 @@ const defaultProps = {
   disableAnimation: false,
 };
 
-const Template: ComponentStory<any> = ({
-  color,
-  variant,
-  ...args
-}: DropdownProps & DropdownMenuProps) => (
+const Template = ({color, variant, ...args}: DropdownProps & DropdownMenuProps) => (
   <Dropdown {...args}>
     <DropdownTrigger>
       <Button>Trigger</Button>
@@ -133,11 +129,7 @@ const Template: ComponentStory<any> = ({
   </Dropdown>
 );
 
-const DividerTemplate: ComponentStory<any> = ({
-  color,
-  variant,
-  ...args
-}: DropdownProps & DropdownMenuProps) => (
+const DividerTemplate = ({color, variant, ...args}: DropdownProps & DropdownMenuProps) => (
   <Dropdown {...args}>
     <DropdownTrigger>
       <Button>Trigger</Button>
@@ -153,11 +145,7 @@ const DividerTemplate: ComponentStory<any> = ({
   </Dropdown>
 );
 
-const DisabledKeysTemplate: ComponentStory<any> = ({
-  color,
-  variant,
-  ...args
-}: DropdownProps & DropdownMenuProps) => (
+const DisabledKeysTemplate = ({color, variant, ...args}: DropdownProps & DropdownMenuProps) => (
   <Dropdown {...args}>
     <DropdownTrigger>
       <Button>Trigger</Button>
@@ -179,11 +167,7 @@ const DisabledKeysTemplate: ComponentStory<any> = ({
   </Dropdown>
 );
 
-const SingleSelectionTemplate: ComponentStory<any> = ({
-  color,
-  variant,
-  ...args
-}: DropdownProps & DropdownMenuProps) => {
+const SingleSelectionTemplate = ({color, variant, ...args}: DropdownProps & DropdownMenuProps) => {
   const [selected, setSelected] = React.useState<string | Set<React.Key>>(new Set(["text"]));
 
   const selectedValue = React.useMemo(
@@ -218,7 +202,7 @@ const SingleSelectionTemplate: ComponentStory<any> = ({
   );
 };
 
-const MultipleSelectionTemplate: ComponentStory<any> = ({
+const MultipleSelectionTemplate = ({
   color,
   variant,
   ...args
@@ -258,7 +242,7 @@ const MultipleSelectionTemplate: ComponentStory<any> = ({
   );
 };
 
-const WithShortcutTemplate: ComponentStory<any> = ({color, variant, ...args}) => (
+const WithShortcutTemplate = ({color, variant, ...args}) => (
   <Dropdown {...args}>
     <DropdownTrigger>
       <Button>Trigger</Button>
@@ -280,12 +264,12 @@ const WithShortcutTemplate: ComponentStory<any> = ({color, variant, ...args}) =>
   </Dropdown>
 );
 
-const WithStartContentTemplate: ComponentStory<any> = ({
+const WithStartContentTemplate = ({
   color,
   variant,
   disableAnimation,
   ...args
-}) => {
+}: DropdownProps & DropdownMenuProps) => {
   const iconClasses = "text-2xl text-secondary pointer-events-none flex-shrink-0";
 
   return (
@@ -331,12 +315,7 @@ const WithStartContentTemplate: ComponentStory<any> = ({
   );
 };
 
-const WithEndContentTemplate: ComponentStory<any> = ({
-  color,
-  variant,
-  disableAnimation,
-  ...args
-}) => {
+const WithEndContentTemplate = ({color, variant, disableAnimation, ...args}) => {
   const iconClasses = "text-2xl text-default-500 pointer-events-none flex-shrink-0";
 
   return (
@@ -369,12 +348,7 @@ const WithEndContentTemplate: ComponentStory<any> = ({
   );
 };
 
-const WithDescriptionTemplate: ComponentStory<any> = ({
-  color,
-  variant,
-  disableAnimation,
-  ...args
-}) => {
+const WithDescriptionTemplate = ({color, variant, disableAnimation, ...args}) => {
   const iconClasses = "text-2xl text-secondary pointer-events-none flex-shrink-0";
 
   return (
@@ -424,7 +398,7 @@ const WithDescriptionTemplate: ComponentStory<any> = ({
   );
 };
 
-const WithSectionsTemplate: ComponentStory<any> = ({color, variant, disableAnimation, ...args}) => {
+const WithSectionsTemplate = ({color, variant, disableAnimation, ...args}) => {
   const iconClasses = "text-2xl text-secondary pointer-events-none flex-shrink-0";
 
   return (
@@ -484,7 +458,7 @@ const WithSectionsTemplate: ComponentStory<any> = ({color, variant, disableAnima
   );
 };
 
-const CustomTriggerTemplate: ComponentStory<any> = ({variant, ...args}) => {
+const CustomTriggerTemplate = ({variant, ...args}) => {
   return (
     <div className="flex items-center gap-10">
       <Dropdown {...args} placement="bottom-end">
diff --git a/packages/components/image/package.json b/packages/components/image/package.json
index 973f7de4c4..a3d1cd604b 100644
--- a/packages/components/image/package.json
+++ b/packages/components/image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/image",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "A simple image component",
   "keywords": [
     "image"
diff --git a/packages/components/image/src/image.tsx b/packages/components/image/src/image.tsx
index d99bad2750..1a242bf836 100644
--- a/packages/components/image/src/image.tsx
+++ b/packages/components/image/src/image.tsx
@@ -1,10 +1,11 @@
-import {cloneElement, forwardRef} from "react";
+import {cloneElement} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseImageProps, useImage} from "./use-image";
 
-export interface ImageProps extends Omit<UseImageProps, "ref" | "showSkeleton"> {}
+export interface ImageProps extends Omit<UseImageProps, "showSkeleton"> {}
 
-const Image = forwardRef<HTMLImageElement, ImageProps>((props, ref) => {
+const Image = forwardRef<"img", ImageProps>((props, ref) => {
   const {
     Component,
     domRef,
@@ -19,8 +20,8 @@ const Image = forwardRef<HTMLImageElement, ImageProps>((props, ref) => {
     getWrapperProps,
     getBlurredImgProps,
   } = useImage({
-    ref,
     ...props,
+    ref,
   });
 
   const img = <Component ref={domRef} {...getImgProps()} />;
diff --git a/packages/components/image/stories/image.stories.tsx b/packages/components/image/stories/image.stories.tsx
index bd6cc2fa1c..dcbec31a66 100644
--- a/packages/components/image/stories/image.stories.tsx
+++ b/packages/components/image/stories/image.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {image} from "@nextui-org/theme";
 
 import {Image, ImageProps} from "../src";
@@ -52,9 +52,9 @@ const defaultProps = {
   disableSkeleton: true,
 };
 
-const Template: ComponentStory<typeof Image> = (args: ImageProps) => <Image {...args} />;
+const Template = (args: ImageProps) => <Image {...args} />;
 
-const LoadingTemplate: ComponentStory<typeof Image> = (args: ImageProps) => {
+const LoadingTemplate = (args: ImageProps) => {
   const [isLoading, setIsLoading] = React.useState(true);
 
   React.useEffect(() => {
diff --git a/packages/components/input/package.json b/packages/components/input/package.json
index 1f487d595c..9fccb8d168 100644
--- a/packages/components/input/package.json
+++ b/packages/components/input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/input",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "The input component is designed for capturing user input within a text field.",
   "keywords": [
     "input"
diff --git a/packages/components/input/src/input.tsx b/packages/components/input/src/input.tsx
index 9c654f833a..ef05772415 100644
--- a/packages/components/input/src/input.tsx
+++ b/packages/components/input/src/input.tsx
@@ -1,12 +1,12 @@
 import {CloseFilledIcon} from "@nextui-org/shared-icons";
-import {useMemo, forwardRef} from "react";
+import {useMemo} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseInputProps, useInput} from "./use-input";
 
-export interface InputProps
-  extends Omit<UseInputProps, "ref" | "isLabelPlaceholder" | "isMultiline"> {}
+export interface InputProps extends Omit<UseInputProps, "isLabelPlaceholder" | "isMultiline"> {}
 
-const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+const Input = forwardRef<"input", InputProps>((props, ref) => {
   const {
     Component,
     label,
@@ -30,7 +30,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     getDescriptionProps,
     getErrorMessageProps,
     getClearButtonProps,
-  } = useInput({ref, ...props});
+  } = useInput({...props, ref});
 
   const labelContent = label ? <label {...getLabelProps()}>{label}</label> : null;
 
diff --git a/packages/components/input/src/textarea.tsx b/packages/components/input/src/textarea.tsx
index 56874fec9a..54d685735c 100644
--- a/packages/components/input/src/textarea.tsx
+++ b/packages/components/input/src/textarea.tsx
@@ -1,4 +1,4 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {mergeProps} from "@react-aria/utils";
 import TextareaAutosize from "react-textarea-autosize";
 
@@ -24,7 +24,7 @@ export type TextareaHeightChangeMeta = {
   rowHeight: number;
 };
 
-export interface TextAreaProps extends Omit<UseInputProps, "ref" | OmittedInputProps> {
+export interface TextAreaProps extends Omit<UseInputProps, OmittedInputProps> {
   /**
    * Minimum number of rows to show for textarea
    * @default 3
@@ -51,7 +51,7 @@ export interface TextAreaProps extends Omit<UseInputProps, "ref" | OmittedInputP
   onHeightChange?: (height: number, meta: TextareaHeightChangeMeta) => void;
 }
 
-const Textarea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+const Textarea = forwardRef<"textarea", TextAreaProps>(
   (
     {style, minRows = 3, maxRows = 8, cacheMeasurements = false, onHeightChange, ...otherProps},
     ref,
@@ -70,7 +70,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       getHelperWrapperProps,
       getDescriptionProps,
       getErrorMessageProps,
-    } = useInput<HTMLTextAreaElement>({ref, ...otherProps, isMultiline: true});
+    } = useInput<HTMLTextAreaElement>({...otherProps, ref, isMultiline: true});
 
     const labelContent = <label {...getLabelProps()}>{label}</label>;
     const inputProps = getInputProps();
diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx
index 779a9c286c..10cb091869 100644
--- a/packages/components/input/stories/input.stories.tsx
+++ b/packages/components/input/stories/input.stories.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/interactive-supports-focus */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {input} from "@nextui-org/theme";
 import {
   MailFilledIcon,
@@ -11,7 +11,7 @@ import {
   CloseFilledIcon,
 } from "@nextui-org/shared-icons";
 
-import {Input, useInput} from "../src";
+import {Input, InputProps, useInput} from "../src";
 
 export default {
   title: "Components/Input",
@@ -67,20 +67,20 @@ const defaultProps = {
   label: "Email",
 };
 
-const Template: ComponentStory<typeof Input> = (args) => (
+const Template = (args) => (
   <div className="w-full max-w-[240px]">
     <Input {...args} size="sm" />
   </div>
 );
 
-const MirrorTemplate: ComponentStory<typeof Input> = (args) => (
+const MirrorTemplate = (args) => (
   <div className="w-full max-w-xl flex flex-row gap-4">
     <Input {...args} />
     <Input {...args} placeholder="Enter your email" />
   </div>
 );
 
-const PasswordTemplate: ComponentStory<typeof Input> = (args) => {
+const PasswordTemplate = (args) => {
   const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
 
   const togglePasswordVisibility = () => setIsPasswordVisible(!isPasswordVisible);
@@ -109,7 +109,7 @@ const PasswordTemplate: ComponentStory<typeof Input> = (args) => {
   );
 };
 
-const RegexValidationTemplate: ComponentStory<typeof Input> = (args) => {
+const RegexValidationTemplate = (args) => {
   const [value, setValue] = React.useState("");
 
   const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);
@@ -134,7 +134,7 @@ const RegexValidationTemplate: ComponentStory<typeof Input> = (args) => {
   );
 };
 
-const ControlledTemplate: ComponentStory<typeof Input> = (args) => {
+const ControlledTemplate = (args) => {
   const [value, setValue] = React.useState("");
 
   return (
@@ -145,7 +145,7 @@ const ControlledTemplate: ComponentStory<typeof Input> = (args) => {
   );
 };
 
-const LabelPlacementTemplate: ComponentStory<typeof Input> = (args) => (
+const LabelPlacementTemplate = (args) => (
   <div className="w-full flex flex-col items-center gap-12">
     <div className="flex flex-col gap-3">
       <h3>Without placeholder</h3>
@@ -166,7 +166,7 @@ const LabelPlacementTemplate: ComponentStory<typeof Input> = (args) => (
   </div>
 );
 
-const StartContentTemplate: ComponentStory<typeof Input> = (args) => (
+const StartContentTemplate = (args) => (
   <div className="w-full max-w-xl flex flex-row items-end gap-4">
     <Input
       {...args}
@@ -200,7 +200,7 @@ const StartContentTemplate: ComponentStory<typeof Input> = (args) => (
   </div>
 );
 
-const EndContentTemplate: ComponentStory<typeof Input> = (args) => (
+const EndContentTemplate = (args) => (
   <div className="w-full max-w-xl flex flex-row items-end gap-4">
     <Input
       {...args}
@@ -234,7 +234,7 @@ const EndContentTemplate: ComponentStory<typeof Input> = (args) => (
   </div>
 );
 
-const StartAndEndContentTemplate: ComponentStory<typeof Input> = (args) => (
+const StartAndEndContentTemplate = (args) => (
   <div className="w-full max-w-xs flex flex-col items-end gap-4">
     <Input
       {...args}
@@ -294,7 +294,7 @@ const StartAndEndContentTemplate: ComponentStory<typeof Input> = (args) => (
   </div>
 );
 
-const InputTypesTemplate: ComponentStory<typeof Input> = (args) => (
+const InputTypesTemplate = (args) => (
   <div className="grid grid-cols-3 gap-4">
     <Input {...args} label="Text" placeholder="Enter your text" />
     <Input {...args} label="Number" placeholder="Enter your number" type="number" />
@@ -311,7 +311,7 @@ const InputTypesTemplate: ComponentStory<typeof Input> = (args) => (
   </div>
 );
 
-const CustomWithClassNamesTemplate: ComponentStory<typeof Input> = (args) => (
+const CustomWithClassNamesTemplate = (args) => (
   <div className="w-full max-w-[340px]">
     <Input
       {...args}
@@ -355,7 +355,7 @@ const CustomWithClassNamesTemplate: ComponentStory<typeof Input> = (args) => (
   </div>
 );
 
-const CustomWithHooksTemplate: ComponentStory<typeof Input> = (args) => {
+const CustomWithHooksTemplate = (args: InputProps) => {
   const {
     Component,
     label,
diff --git a/packages/components/input/stories/textarea.stories.tsx b/packages/components/input/stories/textarea.stories.tsx
index 2a375ad0a9..420d74d2a6 100644
--- a/packages/components/input/stories/textarea.stories.tsx
+++ b/packages/components/input/stories/textarea.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {input} from "@nextui-org/theme";
 
 import {Textarea, TextAreaProps} from "../src";
@@ -59,13 +59,13 @@ const defaultProps = {
   placeholder: "Enter your description",
 };
 
-const Template: ComponentStory<typeof Textarea> = (args: TextAreaProps) => (
+const Template = (args: TextAreaProps) => (
   <div className="w-full max-w-[440px]">
     <Textarea {...args} />
   </div>
 );
 
-const MinRowsTemplate: ComponentStory<typeof Textarea> = (args: TextAreaProps) => (
+const MinRowsTemplate = (args: TextAreaProps) => (
   <div className="w-full max-w-xl flex flex-row gap-4">
     <Textarea {...args} description="Default minRows is 3" />
     <Textarea {...args} description="minRows is 5" minRows={5} />
@@ -73,7 +73,7 @@ const MinRowsTemplate: ComponentStory<typeof Textarea> = (args: TextAreaProps) =
   </div>
 );
 
-const MaxRowsTemplate: ComponentStory<typeof Textarea> = (args: TextAreaProps) => (
+const MaxRowsTemplate = (args: TextAreaProps) => (
   <div className="w-full max-w-xl flex flex-row gap-4">
     <Textarea {...args} description="Default maxRows is 8" />
     <Textarea {...args} description="maxRows is 5" maxRows={5} />
diff --git a/packages/components/kbd/package.json b/packages/components/kbd/package.json
index 097c16db43..1b5c40a72d 100644
--- a/packages/components/kbd/package.json
+++ b/packages/components/kbd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/kbd",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "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/kbd/src/kbd.tsx b/packages/components/kbd/src/kbd.tsx
index d19a3746f7..944730c690 100644
--- a/packages/components/kbd/src/kbd.tsx
+++ b/packages/components/kbd/src/kbd.tsx
@@ -1,14 +1,15 @@
-import {useMemo, forwardRef} from "react";
+import {useMemo} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseKbdProps, useKbd} from "./use-kbd";
 import {kbdKeysLabelMap, kbdKeysMap} from "./utils";
 
-export interface KbdProps extends Omit<UseKbdProps, "ref"> {}
+export interface KbdProps extends UseKbdProps {}
 
-const Kbd = forwardRef<HTMLElement, KbdProps>((props, ref) => {
+const Kbd = forwardRef<"kbd", KbdProps>((props, ref) => {
   const {Component, children, slots, classNames, keysToRender, getKbdProps} = useKbd({
-    ref,
     ...props,
+    ref,
   });
 
   const keysContent = useMemo(() => {
diff --git a/packages/components/kbd/src/use-kbd.ts b/packages/components/kbd/src/use-kbd.ts
index 50a486df31..d936a11c72 100644
--- a/packages/components/kbd/src/use-kbd.ts
+++ b/packages/components/kbd/src/use-kbd.ts
@@ -10,7 +10,7 @@ import {mergeProps} from "@react-aria/utils";
 
 import {KbdKey} from "./utils";
 
-export interface UseKbdProps extends HTMLNextUIProps<"kbd", KbdVariantProps> {
+interface Props extends HTMLNextUIProps<"kbd"> {
   /**
    * Ref to the DOM node.
    */
@@ -35,6 +35,8 @@ export interface UseKbdProps extends HTMLNextUIProps<"kbd", KbdVariantProps> {
   classNames?: SlotsToClasses<KbdSlots>;
 }
 
+export type UseKbdProps = Props & KbdVariantProps;
+
 export function useKbd(originalProps: UseKbdProps) {
   const [props, variantProps] = mapPropsVariants(originalProps, kbd.variantKeys);
 
diff --git a/packages/components/kbd/stories/kbd.stories.tsx b/packages/components/kbd/stories/kbd.stories.tsx
index 24063f1f84..d0b695bf42 100644
--- a/packages/components/kbd/stories/kbd.stories.tsx
+++ b/packages/components/kbd/stories/kbd.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {kbd} from "@nextui-org/theme";
 
 import {Kbd, KbdProps} from "../src";
@@ -42,7 +42,7 @@ const defaultProps = {
   keys: ["command"],
 };
 
-const Template: ComponentStory<typeof Kbd> = (args: KbdProps) => <Kbd {...args} />;
+const Template = (args: KbdProps) => <Kbd {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/packages/components/link/package.json b/packages/components/link/package.json
index fe41635937..febbb09e5c 100644
--- a/packages/components/link/package.json
+++ b/packages/components/link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/link",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "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/link/src/link.tsx b/packages/components/link/src/link.tsx
index 54190a8608..caf39cac35 100644
--- a/packages/components/link/src/link.tsx
+++ b/packages/components/link/src/link.tsx
@@ -1,12 +1,12 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {LinkIcon} from "@nextui-org/shared-icons";
 import {linkAnchorClasses} from "@nextui-org/theme";
 
 import {UseLinkProps, useLink} from "./use-link";
 
-export interface LinkProps extends Omit<UseLinkProps, "ref"> {}
+export interface LinkProps extends UseLinkProps {}
 
-const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+const Link = forwardRef<"a", LinkProps>((props, ref) => {
   const {
     Component,
     children,
@@ -14,8 +14,8 @@ const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
     anchorIcon = <LinkIcon className={linkAnchorClasses} />,
     getLinkProps,
   } = useLink({
-    ...props,
     ref,
+    ...props,
   });
 
   return (
diff --git a/packages/components/link/stories/link.stories.tsx b/packages/components/link/stories/link.stories.tsx
index 188078a43e..2a1301fd85 100644
--- a/packages/components/link/stories/link.stories.tsx
+++ b/packages/components/link/stories/link.stories.tsx
@@ -1,6 +1,6 @@
 import type {VariantProps} from "@nextui-org/theme";
 
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import React from "react";
 import {tv} from "@nextui-org/theme";
 import {link} from "@nextui-org/theme";
@@ -46,7 +46,7 @@ const defaultProps = {
   children,
 };
 
-const Template: ComponentStory<typeof Link> = (args: LinkProps) => <Link {...args} href="#" />;
+const Template = (args: LinkProps) => <Link {...args} href="#" />;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/packages/components/modal/package.json b/packages/components/modal/package.json
index 1c2c7e0606..e7ed56e9bc 100644
--- a/packages/components/modal/package.json
+++ b/packages/components/modal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/modal",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Displays a dialog with a custom content that requires attention or provides additional information.",
   "keywords": [
     "modal"
diff --git a/packages/components/modal/src/modal-body.tsx b/packages/components/modal/src/modal-body.tsx
index 2a07b36f5f..0b8aaa1a7c 100644
--- a/packages/components/modal/src/modal-body.tsx
+++ b/packages/components/modal/src/modal-body.tsx
@@ -7,7 +7,7 @@ import {useModalContext} from "./modal-context";
 
 export interface ModalBodyProps extends HTMLNextUIProps<"div"> {}
 
-const ModalBody = forwardRef<ModalBodyProps, "div">((props, ref) => {
+const ModalBody = forwardRef<"div", ModalBodyProps>((props, ref) => {
   const {as, children, className, ...otherProps} = props;
 
   const {slots, classNames, bodyId, setBodyMounted} = useModalContext();
diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx
index 7b0b990ab7..5c2d41f5c9 100644
--- a/packages/components/modal/src/modal-content.tsx
+++ b/packages/components/modal/src/modal-content.tsx
@@ -1,7 +1,8 @@
 import type {AriaDialogProps} from "@react-aria/dialog";
 import type {HTMLMotionProps} from "framer-motion";
 
-import {cloneElement, isValidElement, ReactNode, useMemo, forwardRef} from "react";
+import {cloneElement, isValidElement, ReactNode, useMemo} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
 import {CloseIcon} from "@nextui-org/shared-icons";
@@ -14,13 +15,13 @@ import {HTMLNextUIProps} from "@nextui-org/system";
 import {useModalContext} from "./modal-context";
 import {scaleInOut} from "./modal-transition";
 
-export interface ModalContentProps
-  extends AriaDialogProps,
-    Omit<HTMLNextUIProps<"div">, "children" | "role"> {
+type KeysToOmit = "children" | "role";
+
+export interface ModalContentProps extends AriaDialogProps, HTMLNextUIProps<"div", KeysToOmit> {
   children: ReactNode | ((onClose: () => void) => ReactNode);
 }
 
-const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>((props, _) => {
+const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _) => {
   const {as, children, role = "dialog", ...otherProps} = props;
 
   const {
diff --git a/packages/components/modal/src/modal-footer.tsx b/packages/components/modal/src/modal-footer.tsx
index 1df27d539c..405b54b1ac 100644
--- a/packages/components/modal/src/modal-footer.tsx
+++ b/packages/components/modal/src/modal-footer.tsx
@@ -6,7 +6,7 @@ import {useModalContext} from "./modal-context";
 
 export interface ModalFooterProps extends HTMLNextUIProps<"footer"> {}
 
-const ModalFooter = forwardRef<ModalFooterProps, "footer">((props, ref) => {
+const ModalFooter = forwardRef<"footer", ModalFooterProps>((props, ref) => {
   const {as, children, className, ...otherProps} = props;
 
   const {slots, classNames} = useModalContext();
diff --git a/packages/components/modal/src/modal-header.tsx b/packages/components/modal/src/modal-header.tsx
index 893fc15522..4e6a96da53 100644
--- a/packages/components/modal/src/modal-header.tsx
+++ b/packages/components/modal/src/modal-header.tsx
@@ -7,7 +7,7 @@ import {useModalContext} from "./modal-context";
 
 export interface ModalHeaderProps extends HTMLNextUIProps<"header"> {}
 
-const ModalHeader = forwardRef<ModalHeaderProps, "header">((props, ref) => {
+const ModalHeader = forwardRef<"header", ModalHeaderProps>((props, ref) => {
   const {as, children, className, ...otherProps} = props;
 
   const {slots, classNames, headerId, setHeaderMounted} = useModalContext();
diff --git a/packages/components/modal/src/modal.tsx b/packages/components/modal/src/modal.tsx
index b2fdea7a8f..323aa53089 100644
--- a/packages/components/modal/src/modal.tsx
+++ b/packages/components/modal/src/modal.tsx
@@ -1,20 +1,21 @@
-import {ReactNode, forwardRef} from "react";
+import {ReactNode} from "react";
 import {AnimatePresence} from "framer-motion";
 import {Overlay} from "@react-aria/overlays";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseModalProps, useModal} from "./use-modal";
 import {ModalProvider} from "./modal-context";
 
-export interface ModalProps extends Omit<UseModalProps, "ref"> {
+export interface ModalProps extends UseModalProps {
   /**
    * The content of the modal. Usually the ModalContent
    */
   children: ReactNode;
 }
 
-const Modal = forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
+const Modal = forwardRef<"div", ModalProps>((props, ref) => {
   const {children, ...otherProps} = props;
-  const context = useModal({ref, ...otherProps});
+  const context = useModal({...otherProps, ref});
 
   const overlay = <Overlay portalContainer={context.portalContainer}>{children}</Overlay>;
 
diff --git a/packages/components/modal/stories/modal.stories.tsx b/packages/components/modal/stories/modal.stories.tsx
index a170d7ea76..d5ebd311cb 100644
--- a/packages/components/modal/stories/modal.stories.tsx
+++ b/packages/components/modal/stories/modal.stories.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable jsx-a11y/no-autofocus */
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {modal} from "@nextui-org/theme";
 import {Button} from "@nextui-org/button";
 import {Input} from "@nextui-org/input";
@@ -129,7 +129,7 @@ const content = (
   </ModalContent>
 );
 
-const Template: ComponentStory<typeof Modal> = (args: ModalProps) => {
+const Template = (args: ModalProps) => {
   const {isOpen, onOpen, onOpenChange} = useDisclosure({defaultOpen: args.defaultOpen});
 
   return (
@@ -142,7 +142,7 @@ const Template: ComponentStory<typeof Modal> = (args: ModalProps) => {
   );
 };
 
-const InsideScrollTemplate: ComponentStory<typeof Modal> = (args: ModalProps) => {
+const InsideScrollTemplate = (args: ModalProps) => {
   const {isOpen, onOpen, onClose, onOpenChange} = useDisclosure();
 
   return (
@@ -163,7 +163,7 @@ const InsideScrollTemplate: ComponentStory<typeof Modal> = (args: ModalProps) =>
   );
 };
 
-const OutsideScrollTemplate: ComponentStory<typeof Modal> = (args: ModalProps) => {
+const OutsideScrollTemplate = (args: ModalProps) => {
   const {isOpen, onOpen, onClose, onOpenChange} = useDisclosure();
 
   return (
@@ -183,7 +183,7 @@ const OutsideScrollTemplate: ComponentStory<typeof Modal> = (args: ModalProps) =
     </>
   );
 };
-const OpenChangeTemplate: ComponentStory<typeof Modal> = (args: ModalProps) => {
+const OpenChangeTemplate = (args: ModalProps) => {
   const {isOpen, onOpen, onClose, onOpenChange} = useDisclosure();
 
   return (
diff --git a/packages/components/navbar/package.json b/packages/components/navbar/package.json
index 23760dec68..d24b4319a8 100644
--- a/packages/components/navbar/package.json
+++ b/packages/components/navbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/navbar",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "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-brand.tsx b/packages/components/navbar/src/navbar-brand.tsx
index c6321ef2ef..3665940775 100644
--- a/packages/components/navbar/src/navbar-brand.tsx
+++ b/packages/components/navbar/src/navbar-brand.tsx
@@ -8,7 +8,7 @@ export interface NavbarBrandProps extends HTMLNextUIProps<"div"> {
   children?: React.ReactNode | React.ReactNode[];
 }
 
-const NavbarBrand = forwardRef<NavbarBrandProps, "div">((props, ref) => {
+const NavbarBrand = forwardRef<"div", NavbarBrandProps>((props, ref) => {
   const {as, className, children, ...otherProps} = props;
 
   const Component = as || "div";
diff --git a/packages/components/navbar/src/navbar-content.tsx b/packages/components/navbar/src/navbar-content.tsx
index af4ce3ed37..b4d5b0cb6f 100644
--- a/packages/components/navbar/src/navbar-content.tsx
+++ b/packages/components/navbar/src/navbar-content.tsx
@@ -16,7 +16,7 @@ export interface NavbarContentProps extends HTMLNextUIProps<"ul"> {
   justify?: "start" | "end" | "center";
 }
 
-const NavbarContent = forwardRef<NavbarContentProps, "ul">((props, ref) => {
+const NavbarContent = forwardRef<"ul", NavbarContentProps>((props, ref) => {
   const {as, className, children, justify = "start", ...otherProps} = props;
 
   const Component = as || "ul";
diff --git a/packages/components/navbar/src/navbar-item.tsx b/packages/components/navbar/src/navbar-item.tsx
index 6023199724..3745d10f57 100644
--- a/packages/components/navbar/src/navbar-item.tsx
+++ b/packages/components/navbar/src/navbar-item.tsx
@@ -13,7 +13,7 @@ export interface NavbarItemProps extends HTMLNextUIProps<"li"> {
   isActive?: boolean;
 }
 
-const NavbarItem = forwardRef<NavbarItemProps, "li">((props, ref) => {
+const NavbarItem = forwardRef<"li", NavbarItemProps>((props, ref) => {
   const {as, className, children, isActive, ...otherProps} = props;
 
   const Component = as || "li";
diff --git a/packages/components/navbar/src/navbar-menu-item.tsx b/packages/components/navbar/src/navbar-menu-item.tsx
index 2432703910..dcd30e6273 100644
--- a/packages/components/navbar/src/navbar-menu-item.tsx
+++ b/packages/components/navbar/src/navbar-menu-item.tsx
@@ -8,7 +8,7 @@ export interface NavbarMenuItemProps extends HTMLNextUIProps<"li"> {
   children?: React.ReactNode;
 }
 
-const NavbarMenuItem = forwardRef<NavbarMenuItemProps, "li">((props, ref) => {
+const NavbarMenuItem = forwardRef<"li", NavbarMenuItemProps>((props, ref) => {
   const {className, children, ...otherProps} = props;
 
   const domRef = useDOMRef(ref);
diff --git a/packages/components/navbar/src/navbar-menu-toggle.tsx b/packages/components/navbar/src/navbar-menu-toggle.tsx
index 59e4fa8e70..13dc620d03 100644
--- a/packages/components/navbar/src/navbar-menu-toggle.tsx
+++ b/packages/components/navbar/src/navbar-menu-toggle.tsx
@@ -28,7 +28,7 @@ export interface Props extends Omit<HTMLNextUIProps<"button">, keyof AriaToggleB
 
 export type NavbarMenuToggleProps = Props & AriaToggleButtonProps;
 
-const NavbarMenuToggle = forwardRef<NavbarMenuToggleProps, "button">((props, ref) => {
+const NavbarMenuToggle = forwardRef<"button", NavbarMenuToggleProps>((props, ref) => {
   const {
     as,
     icon,
diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx
index fbeeaa045e..d556d24558 100644
--- a/packages/components/navbar/src/navbar-menu.tsx
+++ b/packages/components/navbar/src/navbar-menu.tsx
@@ -23,7 +23,7 @@ export interface NavbarMenuProps extends HTMLNextUIProps<"ul"> {
   motionProps?: HTMLMotionProps<"ul">;
 }
 
-const NavbarMenu = forwardRef<NavbarMenuProps, "ul">((props, ref) => {
+const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
   const {className, children, portalContainer, motionProps, style, ...otherProps} = props;
   const domRef = useDOMRef(ref);
 
diff --git a/packages/components/navbar/src/navbar.tsx b/packages/components/navbar/src/navbar.tsx
index 29786d18b9..7249e4f841 100644
--- a/packages/components/navbar/src/navbar.tsx
+++ b/packages/components/navbar/src/navbar.tsx
@@ -1,4 +1,4 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {pickChildren} from "@nextui-org/react-utils";
 import {motion} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
@@ -8,14 +8,14 @@ import {UseNavbarProps, useNavbar} from "./use-navbar";
 import {NavbarProvider} from "./navbar-context";
 import NavbarMenu from "./navbar-menu";
 
-export interface NavbarProps extends Omit<UseNavbarProps, "ref" | "hideOnScroll"> {
+export interface NavbarProps extends Omit<UseNavbarProps, "hideOnScroll"> {
   children?: React.ReactNode | React.ReactNode[];
 }
 
-const Navbar = forwardRef<HTMLDivElement, NavbarProps>((props, ref) => {
+const Navbar = forwardRef<"div", NavbarProps>((props, ref) => {
   const {children, ...otherProps} = props;
 
-  const context = useNavbar({ref, ...otherProps});
+  const context = useNavbar({...otherProps, ref});
 
   const Component = context.Component;
 
diff --git a/packages/components/navbar/src/use-navbar.ts b/packages/components/navbar/src/use-navbar.ts
index 1d88327568..5becec6481 100644
--- a/packages/components/navbar/src/use-navbar.ts
+++ b/packages/components/navbar/src/use-navbar.ts
@@ -11,7 +11,7 @@ import {useScrollPosition} from "@nextui-org/use-scroll-position";
 import {useControlledState} from "@react-stately/utils";
 import {HTMLMotionProps} from "framer-motion";
 
-export interface UseNavbarProps extends HTMLNextUIProps<"nav", NavbarVariantProps> {
+interface Props extends HTMLNextUIProps<"nav"> {
   /**
    * Ref to the DOM node.
    */
@@ -83,6 +83,8 @@ export interface UseNavbarProps extends HTMLNextUIProps<"nav", NavbarVariantProp
   classNames?: SlotsToClasses<NavbarSlots>;
 }
 
+export type UseNavbarProps = Props & NavbarVariantProps;
+
 export function useNavbar(originalProps: UseNavbarProps) {
   const [props, variantProps] = mapPropsVariants(originalProps, navbar.variantKeys);
 
diff --git a/packages/components/navbar/stories/navbar.stories.tsx b/packages/components/navbar/stories/navbar.stories.tsx
index 4933b0f6f9..0942df0a88 100644
--- a/packages/components/navbar/stories/navbar.stories.tsx
+++ b/packages/components/navbar/stories/navbar.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {navbar} from "@nextui-org/theme";
 import {Link} from "@nextui-org/link";
 import {Button} from "@nextui-org/button";
@@ -94,7 +94,7 @@ const App = React.forwardRef(({children}: any, ref: any) => {
 
 App.displayName = "App";
 
-const Template: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
+const Template = (args: NavbarProps) => {
   // for hide on scroll cases
   const parentRef = React.useRef(null);
 
@@ -145,7 +145,7 @@ const Template: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
   );
 };
 
-const WithMenuTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
+const WithMenuTemplate = (args: NavbarProps) => {
   const parentRef = React.useRef(null);
 
   const [isMenuOpen, setIsMenuOpen] = React.useState<boolean | undefined>(false);
@@ -231,7 +231,7 @@ const WithMenuTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
   );
 };
 
-const WithDropdownTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
+const WithDropdownTemplate = (args: NavbarProps) => {
   const icons = {
     chevron: <ChevronDown fill="currentColor" size={16} />,
     scale: <Scale className="text-warning" fill="currentColor" size={30} />,
@@ -346,7 +346,7 @@ const WithDropdownTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps)
   );
 };
 
-const WithAvatarUserTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
+const WithAvatarUserTemplate = (args: NavbarProps) => {
   const menuItems = [
     "Profile",
     "Dashboard",
@@ -446,7 +446,7 @@ const WithAvatarUserTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps
   );
 };
 
-const WithSearchInputTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps) => {
+const WithSearchInputTemplate = (args: NavbarProps) => {
   const menuItems = [
     "Profile",
     "Dashboard",
diff --git a/packages/components/pagination/package.json b/packages/components/pagination/package.json
index 3e37850167..0579903caf 100644
--- a/packages/components/pagination/package.json
+++ b/packages/components/pagination/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/pagination",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "The Pagination component allows you to display active page and navigate between multiple pages.",
   "keywords": [
     "pagination"
diff --git a/packages/components/pagination/src/pagination-cursor.tsx b/packages/components/pagination/src/pagination-cursor.tsx
index dfd2812dba..60eaf7f65f 100644
--- a/packages/components/pagination/src/pagination-cursor.tsx
+++ b/packages/components/pagination/src/pagination-cursor.tsx
@@ -8,7 +8,7 @@ export interface PaginationCursorProps extends HTMLNextUIProps<"span"> {
   activePage?: number;
 }
 
-const PaginationCursor = forwardRef<PaginationCursorProps, "span">((props, ref) => {
+const PaginationCursor = forwardRef<"span", PaginationCursorProps>((props, ref) => {
   const {as, activePage, ...otherProps} = props;
 
   const Component = as || "span";
diff --git a/packages/components/pagination/src/pagination-item.tsx b/packages/components/pagination/src/pagination-item.tsx
index 429233fbde..226e1a1a1c 100644
--- a/packages/components/pagination/src/pagination-item.tsx
+++ b/packages/components/pagination/src/pagination-item.tsx
@@ -1,11 +1,11 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {usePaginationItem, UsePaginationItemProps} from "./use-pagination-item";
 
-export interface PaginationItemProps extends Omit<UsePaginationItemProps, "ref"> {}
+export interface PaginationItemProps extends UsePaginationItemProps {}
 
-const PaginationItem = forwardRef<HTMLLIElement, PaginationItemProps>(({key, ...props}, ref) => {
-  const {Component, children, getItemProps} = usePaginationItem({ref, ...props});
+const PaginationItem = forwardRef<"li", PaginationItemProps>(({key, ...props}, ref) => {
+  const {Component, children, getItemProps} = usePaginationItem({...props, ref});
 
   return (
     <Component key={key} {...getItemProps()}>
diff --git a/packages/components/pagination/src/pagination.tsx b/packages/components/pagination/src/pagination.tsx
index 5622277c72..0bd9106e3a 100644
--- a/packages/components/pagination/src/pagination.tsx
+++ b/packages/components/pagination/src/pagination.tsx
@@ -1,5 +1,6 @@
 import {PaginationItemValue} from "@nextui-org/use-pagination";
-import {useCallback, forwardRef} from "react";
+import {useCallback} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {PaginationItemType} from "@nextui-org/use-pagination";
 import {ChevronIcon, EllipsisIcon, ForwardIcon} from "@nextui-org/shared-icons";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
@@ -8,9 +9,9 @@ import {UsePaginationProps, usePagination} from "./use-pagination";
 import PaginationItem from "./pagination-item";
 import PaginationCursor from "./pagination-cursor";
 
-export interface PaginationProps extends Omit<UsePaginationProps, "ref"> {}
+export interface PaginationProps extends UsePaginationProps {}
 
-const Pagination = forwardRef<HTMLElement, PaginationProps>((props, ref) => {
+const Pagination = forwardRef<"nav", PaginationProps>((props, ref) => {
   const {
     Component,
     dotsJump,
@@ -32,7 +33,7 @@ const Pagination = forwardRef<HTMLElement, PaginationProps>((props, ref) => {
     getWrapperProps,
     getItemProps,
     getCursorProps,
-  } = usePagination({ref, ...props});
+  } = usePagination({...props, ref});
 
   const renderItem = useCallback(
     (value: PaginationItemValue, index: number) => {
diff --git a/packages/components/pagination/stories/pagination.stories.tsx b/packages/components/pagination/stories/pagination.stories.tsx
index 5d0771e451..02b9c1568d 100644
--- a/packages/components/pagination/stories/pagination.stories.tsx
+++ b/packages/components/pagination/stories/pagination.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {button, pagination} from "@nextui-org/theme";
 import {cn} from "@nextui-org/system";
 import {ChevronIcon} from "@nextui-org/shared-icons";
@@ -76,9 +76,7 @@ const defaultProps = {
   initialPage: 1,
 };
 
-const Template: ComponentStory<typeof Pagination> = (args: PaginationProps) => (
-  <Pagination {...args} />
-);
+const Template = (args: PaginationProps) => <Pagination {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/packages/components/popover/package.json b/packages/components/popover/package.json
index 843932d593..8719fbe416 100644
--- a/packages/components/popover/package.json
+++ b/packages/components/popover/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/popover",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "A popover is an overlay element positioned relative to a trigger.",
   "keywords": [
     "popover"
diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx
index 9ae895cb81..e2629898ff 100644
--- a/packages/components/popover/src/popover-content.tsx
+++ b/packages/components/popover/src/popover-content.tsx
@@ -1,7 +1,8 @@
 import type {AriaDialogProps} from "@react-aria/dialog";
 import type {HTMLMotionProps} from "framer-motion";
 
-import {DOMAttributes, ReactNode, useMemo, useRef, forwardRef} from "react";
+import {DOMAttributes, ReactNode, useMemo, useRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
 import {motion} from "framer-motion";
@@ -15,11 +16,11 @@ import {usePopoverContext} from "./popover-context";
 
 export interface PopoverContentProps
   extends AriaDialogProps,
-    Omit<HTMLNextUIProps<"div">, "children" | "role"> {
+    Omit<HTMLNextUIProps, "children" | "role"> {
   children: ReactNode | ((titleProps: DOMAttributes<HTMLElement>) => ReactNode);
 }
 
-const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>((props, _) => {
+const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
   const {as, children, role = "dialog", ...otherProps} = props;
 
   const {
diff --git a/packages/components/popover/src/popover-trigger.tsx b/packages/components/popover/src/popover-trigger.tsx
index fb080f7da0..9fbe0e7cde 100644
--- a/packages/components/popover/src/popover-trigger.tsx
+++ b/packages/components/popover/src/popover-trigger.tsx
@@ -1,4 +1,5 @@
-import React, {Children, cloneElement, useMemo, forwardRef} from "react";
+import React, {Children, cloneElement, useMemo} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {pickChildren} from "@nextui-org/react-utils";
 import {useAriaButton} from "@nextui-org/use-aria-button";
 import {Button} from "@nextui-org/button";
@@ -14,7 +15,7 @@ export interface PopoverTriggerProps {
  * PopoverTrigger opens the popover's content. It must be an interactive element
  * such as `button` or `a`.
  */
-const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>((props, _) => {
+const PopoverTrigger = forwardRef<"button", PopoverTriggerProps>((props, _) => {
   const {triggerRef, getTriggerProps} = usePopoverContext();
 
   const {children, ...otherProps} = props;
diff --git a/packages/components/popover/src/popover.tsx b/packages/components/popover/src/popover.tsx
index 507f9aa349..bbe4158515 100644
--- a/packages/components/popover/src/popover.tsx
+++ b/packages/components/popover/src/popover.tsx
@@ -1,11 +1,12 @@
-import {Children, ReactNode, forwardRef} from "react";
+import {Children, ReactNode} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {AnimatePresence} from "framer-motion";
 import {Overlay} from "@react-aria/overlays";
 
 import {UsePopoverProps, usePopover} from "./use-popover";
 import {PopoverProvider} from "./popover-context";
 
-export interface PopoverProps extends Omit<UsePopoverProps, "ref"> {
+export interface PopoverProps extends UsePopoverProps {
   /**
    * The content of the popover. It is usually the `PopoverTrigger`,
    * and `PopoverContent`
@@ -13,9 +14,9 @@ export interface PopoverProps extends Omit<UsePopoverProps, "ref"> {
   children: ReactNode[];
 }
 
-const Popover = forwardRef<HTMLDivElement, PopoverProps>((props, ref) => {
+const Popover = forwardRef<"div", PopoverProps>((props, ref) => {
   const {children, ...otherProps} = props;
-  const context = usePopover({ref, ...otherProps});
+  const context = usePopover({...otherProps, ref});
 
   const [trigger, content] = Children.toArray(children);
 
diff --git a/packages/components/popover/stories/popover.stories.tsx b/packages/components/popover/stories/popover.stories.tsx
index fc69c056a0..f4c7e74409 100644
--- a/packages/components/popover/stories/popover.stories.tsx
+++ b/packages/components/popover/stories/popover.stories.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-autofocus */
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {popover, ButtonVariantProps} from "@nextui-org/theme";
 import {Button} from "@nextui-org/button";
 import {Input} from "@nextui-org/input";
@@ -113,7 +113,7 @@ const content = (
   </PopoverContent>
 );
 
-const Template: ComponentStory<typeof Popover> = (args: PopoverProps) => {
+const Template = (args: PopoverProps) => {
   return (
     <Popover {...args}>
       <PopoverTrigger>
@@ -124,7 +124,7 @@ const Template: ComponentStory<typeof Popover> = (args: PopoverProps) => {
   );
 };
 
-const WithTitlePropsTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) => {
+const WithTitlePropsTemplate = (args: PopoverProps) => {
   return (
     <Popover {...args}>
       <PopoverTrigger>
@@ -144,7 +144,7 @@ const WithTitlePropsTemplate: ComponentStory<typeof Popover> = (args: PopoverPro
   );
 };
 
-const OpenChangeTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) => {
+const OpenChangeTemplate = (args: PopoverProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   return (
@@ -165,7 +165,7 @@ const OpenChangeTemplate: ComponentStory<typeof Popover> = (args: PopoverProps)
   );
 };
 
-const PlacementsTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) => {
+const PlacementsTemplate = (args: PopoverProps) => {
   const buttonColor = args.color as ButtonVariantProps["color"];
 
   return (
@@ -281,7 +281,7 @@ const PlacementsTemplate: ComponentStory<typeof Popover> = (args: PopoverProps)
   );
 };
 
-const OffsetTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) => (
+const OffsetTemplate = (args: PopoverProps) => (
   <div className="flex gap-2">
     <Popover {...args}>
       <PopoverTrigger>
@@ -310,7 +310,7 @@ const OffsetTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) => (
   </div>
 );
 
-const WithFormTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) => (
+const WithFormTemplate = (args: PopoverProps) => (
   <Popover {...args}>
     <PopoverTrigger>
       <Button color="primary">Open Popover</Button>
@@ -333,7 +333,7 @@ const WithFormTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) =>
   </Popover>
 );
 
-const WithBackdropTemplate: ComponentStory<typeof Popover> = (args: PopoverProps) => (
+const WithBackdropTemplate = (args: PopoverProps) => (
   <Card isFooterBlurred className="w-[420px] h-[400px] col-span-12 sm:col-span-7">
     <CardHeader className="absolute z-10 top-1 flex-col items-start">
       <p className="text-xs text-white/60 uppercase font-bold">Your day your way</p>
diff --git a/packages/components/progress/package.json b/packages/components/progress/package.json
index 6515d3d000..c482d32428 100644
--- a/packages/components/progress/package.json
+++ b/packages/components/progress/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/progress",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
   "keywords": [
     "progress"
diff --git a/packages/components/progress/src/circular-progress.tsx b/packages/components/progress/src/circular-progress.tsx
index 35ab770a24..f847400aba 100644
--- a/packages/components/progress/src/circular-progress.tsx
+++ b/packages/components/progress/src/circular-progress.tsx
@@ -1,10 +1,10 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseCircularProgressProps, useCircularProgress} from "./use-circular-progress";
 
-export interface CircularProgressProps extends Omit<UseCircularProgressProps, "ref"> {}
+export interface CircularProgressProps extends UseCircularProgressProps {}
 
-const CircularProgress = forwardRef<HTMLDivElement, CircularProgressProps>((props, ref) => {
+const CircularProgress = forwardRef<"div", CircularProgressProps>((props, ref) => {
   const {
     Component,
     slots,
diff --git a/packages/components/progress/src/progress.tsx b/packages/components/progress/src/progress.tsx
index 42d8f41127..0b9c02e300 100644
--- a/packages/components/progress/src/progress.tsx
+++ b/packages/components/progress/src/progress.tsx
@@ -1,10 +1,10 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseProgressProps, useProgress} from "./use-progress";
 
-export interface ProgressProps extends Omit<UseProgressProps, "ref"> {}
+export interface ProgressProps extends UseProgressProps {}
 
-const Progress = forwardRef<HTMLDivElement, ProgressProps>((props, ref) => {
+const Progress = forwardRef<"div", ProgressProps>((props, ref) => {
   const {
     Component,
     slots,
@@ -14,7 +14,7 @@ const Progress = forwardRef<HTMLDivElement, ProgressProps>((props, ref) => {
     showValueLabel,
     getProgressBarProps,
     getLabelProps,
-  } = useProgress({ref, ...props});
+  } = useProgress({...props, ref});
 
   const progressBarProps = getProgressBarProps();
   const shouldShowLabelWrapper = label || showValueLabel;
diff --git a/packages/components/progress/stories/circular-progress.stories.tsx b/packages/components/progress/stories/circular-progress.stories.tsx
index 04d2521895..b4c25e0990 100644
--- a/packages/components/progress/stories/circular-progress.stories.tsx
+++ b/packages/components/progress/stories/circular-progress.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {circularProgress} from "@nextui-org/theme";
 import {Card, CardBody, CardFooter} from "@nextui-org/card";
 import {Chip} from "@nextui-org/chip";
@@ -34,11 +34,9 @@ const defaultProps = {
   ...circularProgress.defaultVariants,
 };
 
-const Template: ComponentStory<typeof CircularProgress> = (args: CircularProgressProps) => (
-  <CircularProgress {...args} />
-);
+const Template = (args: CircularProgressProps) => <CircularProgress {...args} />;
 
-const IntervalTemplate: ComponentStory<typeof CircularProgress> = (args: CircularProgressProps) => {
+const IntervalTemplate = (args: CircularProgressProps) => {
   const [value, setValue] = React.useState(0);
 
   React.useEffect(() => {
@@ -52,9 +50,7 @@ const IntervalTemplate: ComponentStory<typeof CircularProgress> = (args: Circula
   return <CircularProgress {...args} value={value} />;
 };
 
-const CustomClassnamesTemplate: ComponentStory<typeof CircularProgress> = (
-  args: CircularProgressProps,
-) => (
+const CustomClassnamesTemplate = (args: CircularProgressProps) => (
   <Card className="w-[240px] h-[240px] border-none bg-gradient-to-br from-violet-500 to-fuchsia-500">
     <CardBody className="justify-center items-center pb-0">
       <CircularProgress
diff --git a/packages/components/progress/stories/progress.stories.tsx b/packages/components/progress/stories/progress.stories.tsx
index 7662572627..408c05d7a1 100644
--- a/packages/components/progress/stories/progress.stories.tsx
+++ b/packages/components/progress/stories/progress.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {progress} from "@nextui-org/theme";
 
 import {Progress, ProgressProps} from "../src";
@@ -39,13 +39,13 @@ const defaultProps = {
   value: 55,
 };
 
-const Template: ComponentStory<typeof Progress> = (args: ProgressProps) => (
+const Template = (args: ProgressProps) => (
   <div className="max-w-[400px]">
     <Progress {...args} />
   </div>
 );
 
-const IntervalTemplate: ComponentStory<typeof Progress> = (args: ProgressProps) => {
+const IntervalTemplate = (args: ProgressProps) => {
   const [value, setValue] = React.useState(0);
 
   React.useEffect(() => {
diff --git a/packages/components/radio/package.json b/packages/components/radio/package.json
index 2030f5aa8f..6040b7eb7c 100644
--- a/packages/components/radio/package.json
+++ b/packages/components/radio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/radio",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Radios allow users to select a single option from a list of mutually exclusive options.",
   "keywords": [
     "radio"
diff --git a/packages/components/radio/src/radio-group.tsx b/packages/components/radio/src/radio-group.tsx
index f790081b7f..d70d813fe0 100644
--- a/packages/components/radio/src/radio-group.tsx
+++ b/packages/components/radio/src/radio-group.tsx
@@ -1,11 +1,11 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {RadioGroupProvider} from "./radio-group-context";
 import {UseRadioGroupProps, useRadioGroup} from "./use-radio-group";
 
-export interface RadioGroupProps extends Omit<UseRadioGroupProps, "ref" | "defaultChecked"> {}
+export interface RadioGroupProps extends Omit<UseRadioGroupProps, "defaultChecked"> {}
 
-const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>((props, ref) => {
+const RadioGroup = forwardRef<"div", RadioGroupProps>((props, ref) => {
   const {
     Component,
     children,
@@ -18,7 +18,7 @@ const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>((props, ref) => {
     getWrapperProps,
     getDescriptionProps,
     getErrorMessageProps,
-  } = useRadioGroup({ref, ...props});
+  } = useRadioGroup({...props, ref});
 
   return (
     <Component {...getGroupProps()}>
diff --git a/packages/components/radio/src/radio.tsx b/packages/components/radio/src/radio.tsx
index 7787c7bfe3..110801e0ac 100644
--- a/packages/components/radio/src/radio.tsx
+++ b/packages/components/radio/src/radio.tsx
@@ -1,11 +1,11 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 
 import {UseRadioProps, useRadio} from "./use-radio";
 
-export interface RadioProps extends Omit<UseRadioProps, "ref"> {}
+export interface RadioProps extends UseRadioProps {}
 
-const Radio = forwardRef<HTMLLabelElement, RadioProps>((props, ref) => {
+const Radio = forwardRef<"label", RadioProps>((props, ref) => {
   const {
     Component,
     children,
@@ -18,7 +18,7 @@ const Radio = forwardRef<HTMLLabelElement, RadioProps>((props, ref) => {
     getLabelProps,
     getLabelWrapperProps,
     getControlProps,
-  } = useRadio({ref, ...props});
+  } = useRadio({...props, ref});
 
   return (
     <Component {...getBaseProps()}>
diff --git a/packages/components/radio/stories/radio.stories.tsx b/packages/components/radio/stories/radio.stories.tsx
index bf7d5baaa6..c49f2c55d5 100644
--- a/packages/components/radio/stories/radio.stories.tsx
+++ b/packages/components/radio/stories/radio.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {radio, button} from "@nextui-org/theme";
 import {clsx} from "@nextui-org/shared-utils";
@@ -43,7 +43,7 @@ const defaultProps = {
   label: "Options",
 };
 
-const Template: ComponentStory<typeof RadioGroup> = (args: RadioGroupProps) => {
+const Template = (args: RadioGroupProps) => {
   const radioProps = args.description
     ? {
         a: {
@@ -101,7 +101,7 @@ const Template: ComponentStory<typeof RadioGroup> = (args: RadioGroupProps) => {
   );
 };
 
-const ControlledTemplate: ComponentStory<typeof RadioGroup> = (args: RadioGroupProps) => {
+const ControlledTemplate = (args: RadioGroupProps) => {
   const [selectedItem, setSelectedItem] = React.useState<string>("london");
 
   React.useEffect(() => {
diff --git a/packages/components/ripple/package.json b/packages/components/ripple/package.json
index 584b035a36..b9bf8ea4d3 100644
--- a/packages/components/ripple/package.json
+++ b/packages/components/ripple/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/ripple",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "A simple implementation to display a ripple animation when the source component is clicked",
   "keywords": [
     "ripple"
diff --git a/packages/components/skeleton/package.json b/packages/components/skeleton/package.json
index ccb1082639..666e09cafd 100644
--- a/packages/components/skeleton/package.json
+++ b/packages/components/skeleton/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/skeleton",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Skeleton is used to display the loading state of some component.",
   "keywords": [
     "skeleton"
diff --git a/packages/components/skeleton/src/skeleton.tsx b/packages/components/skeleton/src/skeleton.tsx
index c89fe435d2..688d8e81d6 100644
--- a/packages/components/skeleton/src/skeleton.tsx
+++ b/packages/components/skeleton/src/skeleton.tsx
@@ -1,11 +1,11 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseSkeletonProps, useSkeleton} from "./use-skeleton";
 
-export interface SkeletonProps extends Omit<UseSkeletonProps, "ref"> {}
+export interface SkeletonProps extends UseSkeletonProps {}
 
-const Skeleton = forwardRef<HTMLElement, SkeletonProps>((props, ref) => {
-  const {Component, children, getSkeletonProps, getContentProps} = useSkeleton({ref, ...props});
+const Skeleton = forwardRef<"div", SkeletonProps>((props, ref) => {
+  const {Component, children, getSkeletonProps, getContentProps} = useSkeleton({...props, ref});
 
   return (
     <Component {...getSkeletonProps()}>
diff --git a/packages/components/skeleton/src/use-skeleton.ts b/packages/components/skeleton/src/use-skeleton.ts
index 389dda2722..2b2e75d3aa 100644
--- a/packages/components/skeleton/src/use-skeleton.ts
+++ b/packages/components/skeleton/src/use-skeleton.ts
@@ -7,7 +7,7 @@ import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {ReactRef} from "@nextui-org/react-utils";
 import {useMemo} from "react";
 
-export interface UseSkeletonProps extends HTMLNextUIProps<"div", SkeletonVariantProps> {
+interface Props extends HTMLNextUIProps<"div"> {
   /**
    * Ref to the DOM node.
    */
@@ -32,6 +32,8 @@ export interface UseSkeletonProps extends HTMLNextUIProps<"div", SkeletonVariant
   classNames?: SlotsToClasses<SkeletonSlots>;
 }
 
+export type UseSkeletonProps = Props & SkeletonVariantProps;
+
 export function useSkeleton(originalProps: UseSkeletonProps) {
   const [props, variantProps] = mapPropsVariants(originalProps, skeleton.variantKeys);
 
diff --git a/packages/components/skeleton/stories/skeleton.stories.tsx b/packages/components/skeleton/stories/skeleton.stories.tsx
index a59c6e40fb..86a0b7e89f 100644
--- a/packages/components/skeleton/stories/skeleton.stories.tsx
+++ b/packages/components/skeleton/stories/skeleton.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {skeleton} from "@nextui-org/theme";
 
 import {Skeleton, SkeletonProps} from "../src";
@@ -30,7 +30,7 @@ const defaultProps = {
   children: <div className="w-[200px] h-[100px]">NextUI</div>,
 };
 
-const Template: ComponentStory<typeof Skeleton> = (args: SkeletonProps) => <Skeleton {...args} />;
+const Template = (args: SkeletonProps) => <Skeleton {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/packages/components/snippet/package.json b/packages/components/snippet/package.json
index dc6276f307..8705d96a39 100644
--- a/packages/components/snippet/package.json
+++ b/packages/components/snippet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/snippet",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Display a snippet of copyable code for the command line.",
   "keywords": [
     "snippet"
diff --git a/packages/components/snippet/src/snippet.tsx b/packages/components/snippet/src/snippet.tsx
index 3e9cac184f..aa2f76404d 100644
--- a/packages/components/snippet/src/snippet.tsx
+++ b/packages/components/snippet/src/snippet.tsx
@@ -1,13 +1,14 @@
-import {ReactNode, useCallback, useMemo, cloneElement, forwardRef} from "react";
+import {ReactNode, useCallback, useMemo, cloneElement} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {Tooltip} from "@nextui-org/tooltip";
 import {CopyLinearIcon, CheckLinearIcon} from "@nextui-org/shared-icons";
 import {Button} from "@nextui-org/button";
 
 import {useSnippet, UseSnippetProps} from "./use-snippet";
 
-export interface SnippetProps extends Omit<UseSnippetProps, "ref"> {}
+export interface SnippetProps extends UseSnippetProps {}
 
-const Snippet = forwardRef<HTMLDivElement, SnippetProps>((props, ref) => {
+const Snippet = forwardRef<"div", SnippetProps>((props, ref) => {
   const {
     Component,
     domRef,
@@ -28,7 +29,7 @@ const Snippet = forwardRef<HTMLDivElement, SnippetProps>((props, ref) => {
     onCopy,
     getSnippetProps,
     getCopyButtonProps,
-  } = useSnippet({ref, ...props});
+  } = useSnippet({...props, ref});
 
   const TooltipContent = useCallback(
     ({children}: {children?: ReactNode}) => (
diff --git a/packages/components/snippet/src/use-snippet.ts b/packages/components/snippet/src/use-snippet.ts
index 6744ca28ce..3747983152 100644
--- a/packages/components/snippet/src/use-snippet.ts
+++ b/packages/components/snippet/src/use-snippet.ts
@@ -10,9 +10,7 @@ import {useFocusRing} from "@react-aria/focus";
 import {useMemo, useCallback, ReactElement, useRef} from "react";
 import {TooltipProps} from "@nextui-org/tooltip";
 import {ButtonProps} from "@nextui-org/button";
-export interface UseSnippetProps
-  extends Omit<HTMLNextUIProps<"div">, "onCopy">,
-    SnippetVariantProps {
+export interface UseSnippetProps extends Omit<HTMLNextUIProps, "onCopy">, SnippetVariantProps {
   /**
    * Ref to the DOM node.
    */
diff --git a/packages/components/snippet/stories/snippet.stories.tsx b/packages/components/snippet/stories/snippet.stories.tsx
index 87320285c1..72aa1d9f55 100644
--- a/packages/components/snippet/stories/snippet.stories.tsx
+++ b/packages/components/snippet/stories/snippet.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {snippet} from "@nextui-org/theme";
 
 import {Snippet, SnippetProps} from "../src";
@@ -82,7 +82,7 @@ const defaultProps = {
   ...snippet.defaultVariants,
 };
 
-const Template: ComponentStory<typeof Snippet> = (args: SnippetProps) => <Snippet {...args} />;
+const Template = (args: SnippetProps) => <Snippet {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/packages/components/spacer/package.json b/packages/components/spacer/package.json
index 6c363d33bf..1d9fab2fdd 100644
--- a/packages/components/spacer/package.json
+++ b/packages/components/spacer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spacer",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
   "keywords": [
     "spacer"
diff --git a/packages/components/spacer/src/spacer.tsx b/packages/components/spacer/src/spacer.tsx
index d3890a8d6e..a56ffa7f14 100644
--- a/packages/components/spacer/src/spacer.tsx
+++ b/packages/components/spacer/src/spacer.tsx
@@ -1,11 +1,11 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseSpacerProps, useSpacer} from "./use-spacer";
 
-export interface SpacerProps extends Omit<UseSpacerProps, "ref"> {}
+export interface SpacerProps extends UseSpacerProps {}
 
-const Spacer = forwardRef<HTMLElement, SpacerProps>((props, ref) => {
-  const {Component, getSpacerProps} = useSpacer({ref, ...props});
+const Spacer = forwardRef<"span", SpacerProps>((props, ref) => {
+  const {Component, getSpacerProps} = useSpacer({...props, ref});
 
   return <Component {...getSpacerProps()} />;
 });
diff --git a/packages/components/spacer/src/use-spacer.ts b/packages/components/spacer/src/use-spacer.ts
index 9453561df3..1e192bbf69 100644
--- a/packages/components/spacer/src/use-spacer.ts
+++ b/packages/components/spacer/src/use-spacer.ts
@@ -9,7 +9,7 @@ import {useMemo} from "react";
 
 import {spacing, Space} from "./utils";
 
-export interface UseSpacerProps extends HTMLNextUIProps<"span", SpacerVariantProps> {
+interface Props extends HTMLNextUIProps<"span"> {
   /**
    * Ref to the DOM node.
    */
@@ -30,6 +30,8 @@ export interface UseSpacerProps extends HTMLNextUIProps<"span", SpacerVariantPro
   y?: Space;
 }
 
+export type UseSpacerProps = Props & SpacerVariantProps;
+
 export const getMargin = (value: Space) => {
   return spacing[value] ?? value;
 };
diff --git a/packages/components/spacer/stories/spacer.stories.tsx b/packages/components/spacer/stories/spacer.stories.tsx
index 511f04d199..c58e9da167 100644
--- a/packages/components/spacer/stories/spacer.stories.tsx
+++ b/packages/components/spacer/stories/spacer.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {spacer} from "@nextui-org/theme";
 
 import {Spacer, SpacerProps} from "../src";
@@ -41,7 +41,7 @@ const content = (
   <div className="flex flex-col w-[300px] h-[100px] bg-primary rounded-xl shadow-lg" />
 );
 
-const VerticalTemplate: ComponentStory<typeof Spacer> = (args: SpacerProps) => (
+const VerticalTemplate = (args: SpacerProps) => (
   <div className="flex flex-col">
     {content}
     <Spacer {...args} />
@@ -51,7 +51,7 @@ const VerticalTemplate: ComponentStory<typeof Spacer> = (args: SpacerProps) => (
   </div>
 );
 
-const HorizontalTemplate: ComponentStory<typeof Spacer> = (args: SpacerProps) => (
+const HorizontalTemplate = (args: SpacerProps) => (
   <div className="flex flex-row">
     {content}
     <Spacer {...args} />
diff --git a/packages/components/spinner/package.json b/packages/components/spinner/package.json
index a5800e698b..af7542d3ae 100644
--- a/packages/components/spinner/package.json
+++ b/packages/components/spinner/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spinner",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Loaders express an unspecified wait time or display the length of a process.",
   "keywords": [
     "loading",
diff --git a/packages/components/spinner/src/spinner.tsx b/packages/components/spinner/src/spinner.tsx
index 60267cc444..f98dcd8597 100644
--- a/packages/components/spinner/src/spinner.tsx
+++ b/packages/components/spinner/src/spinner.tsx
@@ -1,10 +1,10 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseSpinnerProps, useSpinner} from "./use-spinner";
 
 export interface SpinnerProps extends UseSpinnerProps {}
 
-const Spinner = forwardRef<HTMLElement, SpinnerProps>((props, ref) => {
+const Spinner = forwardRef<"div", SpinnerProps>((props, ref) => {
   const {domRef, slots, classNames, label, getSpinnerProps} = useSpinner({ref, ...props});
 
   return (
diff --git a/packages/components/spinner/src/use-spinner.ts b/packages/components/spinner/src/use-spinner.ts
index 6920c95e15..234abe08ec 100644
--- a/packages/components/spinner/src/use-spinner.ts
+++ b/packages/components/spinner/src/use-spinner.ts
@@ -7,7 +7,7 @@ import {ReactRef} from "@nextui-org/react-utils";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {useMemo, useCallback} from "react";
 
-export interface UseSpinnerProps extends HTMLNextUIProps<"div", SpinnerVariantProps> {
+interface Props extends HTMLNextUIProps<"div"> {
   /**
    * Ref to the DOM node.
    */
@@ -34,6 +34,8 @@ export interface UseSpinnerProps extends HTMLNextUIProps<"div", SpinnerVariantPr
   classNames?: SlotsToClasses<SpinnerSlots>;
 }
 
+export type UseSpinnerProps = Props & SpinnerVariantProps;
+
 export function useSpinner(originalProps: UseSpinnerProps) {
   const [props, variantProps] = mapPropsVariants(originalProps, spinner.variantKeys);
 
diff --git a/packages/components/spinner/stories/spinner.stories.tsx b/packages/components/spinner/stories/spinner.stories.tsx
index 6b12282d28..eb51dda8fa 100644
--- a/packages/components/spinner/stories/spinner.stories.tsx
+++ b/packages/components/spinner/stories/spinner.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {spinner} from "@nextui-org/theme";
 
 import {Spinner, SpinnerProps} from "../src";
@@ -40,7 +40,7 @@ const defaultProps = {
   ...spinner.defaultVariants,
 };
 
-const Template: ComponentStory<typeof Spinner> = (args: SpinnerProps) => <Spinner {...args} />;
+const Template = (args: SpinnerProps) => <Spinner {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/packages/components/switch/package.json b/packages/components/switch/package.json
index 8ebbe955af..a241a8e7c0 100644
--- a/packages/components/switch/package.json
+++ b/packages/components/switch/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/switch",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
   "keywords": [
     "switch"
diff --git a/packages/components/switch/src/switch.tsx b/packages/components/switch/src/switch.tsx
index 75b34c7feb..bea99a7ad3 100644
--- a/packages/components/switch/src/switch.tsx
+++ b/packages/components/switch/src/switch.tsx
@@ -1,11 +1,12 @@
 import {VisuallyHidden} from "@react-aria/visually-hidden";
-import {cloneElement, ReactElement, forwardRef} from "react";
+import {cloneElement, ReactElement} from "react";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseSwitchProps, useSwitch} from "./use-switch";
 
-export interface SwitchProps extends Omit<UseSwitchProps, "ref"> {}
+export interface SwitchProps extends UseSwitchProps {}
 
-const Switch = forwardRef<HTMLLabelElement, SwitchProps>((props, ref) => {
+const Switch = forwardRef<"label", SwitchProps>((props, ref) => {
   const {
     Component,
     children,
@@ -20,7 +21,7 @@ const Switch = forwardRef<HTMLLabelElement, SwitchProps>((props, ref) => {
     getLabelProps,
     getStartContentProps,
     getEndContentProps,
-  } = useSwitch({ref, ...props});
+  } = useSwitch({...props, ref});
 
   const clonedThumbIcon =
     typeof thumbIcon === "function"
diff --git a/packages/components/switch/stories/switch.stories.tsx b/packages/components/switch/stories/switch.stories.tsx
index 1383ec392d..de5cfb1c84 100644
--- a/packages/components/switch/stories/switch.stories.tsx
+++ b/packages/components/switch/stories/switch.stories.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {toggle} from "@nextui-org/theme";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {SunFilledIcon, MoonFilledIcon} from "@nextui-org/shared-icons";
@@ -41,9 +41,9 @@ const defaultProps = {
   ...toggle.defaultVariants,
 };
 
-const Template: ComponentStory<typeof Switch> = (args: SwitchProps) => <Switch {...args} />;
+const Template = (args: SwitchProps) => <Switch {...args} />;
 
-const WithIconsTemplate: ComponentStory<typeof Switch> = (args: SwitchProps) => {
+const WithIconsTemplate = (args: SwitchProps) => {
   const [isSelected, setIsSelected] = React.useState<boolean>(true);
 
   return (
@@ -63,7 +63,7 @@ const WithIconsTemplate: ComponentStory<typeof Switch> = (args: SwitchProps) =>
   );
 };
 
-const ControlledTemplate: ComponentStory<typeof Switch> = (args: SwitchProps) => {
+const ControlledTemplate = (args: SwitchProps) => {
   const [isSelected, setIsSelected] = React.useState<boolean>(true);
 
   return (
@@ -74,7 +74,7 @@ const ControlledTemplate: ComponentStory<typeof Switch> = (args: SwitchProps) =>
   );
 };
 
-const CustomWithClassNamesTemplate: ComponentStory<typeof Switch> = (args: SwitchProps) => {
+const CustomWithClassNamesTemplate = (args: SwitchProps) => {
   const [isSelected, setIsSelected] = React.useState<boolean>(true);
 
   return (
@@ -105,7 +105,7 @@ const CustomWithClassNamesTemplate: ComponentStory<typeof Switch> = (args: Switc
   );
 };
 
-const CustomWithHooksTemplate: ComponentStory<typeof Switch> = (args: SwitchProps) => {
+const CustomWithHooksTemplate = (args: SwitchProps) => {
   const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} =
     useSwitch(args);
 
diff --git a/packages/components/table/package.json b/packages/components/table/package.json
index 111401b6ed..fd35670335 100644
--- a/packages/components/table/package.json
+++ b/packages/components/table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/table",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Tables are used to display tabular data using rows and columns. ",
   "keywords": [
     "table"
diff --git a/packages/components/table/src/table-body.tsx b/packages/components/table/src/table-body.tsx
index b017dc1bdf..0017f898ce 100644
--- a/packages/components/table/src/table-body.tsx
+++ b/packages/components/table/src/table-body.tsx
@@ -24,7 +24,7 @@ export interface TableBodyProps extends HTMLNextUIProps<"tbody"> {
   classNames?: ValuesType["classNames"];
 }
 
-const TableBody = forwardRef<TableBodyProps, "tbody">((props, ref) => {
+const TableBody = forwardRef<"tbody", TableBodyProps>((props, ref) => {
   const {
     as,
     className,
diff --git a/packages/components/table/src/table-cell.tsx b/packages/components/table/src/table-cell.tsx
index eaec1b97e7..857f309b5e 100644
--- a/packages/components/table/src/table-cell.tsx
+++ b/packages/components/table/src/table-cell.tsx
@@ -25,7 +25,7 @@ export interface TableCellProps<T = object> extends HTMLNextUIProps<"td"> {
   classNames?: ValuesType["classNames"];
 }
 
-const TableCell = forwardRef<TableCellProps, "td">((props, ref) => {
+const TableCell = forwardRef<"td", TableCellProps>((props, ref) => {
   const {as, className, node, rowKey, slots, state, classNames, ...otherProps} = props;
 
   const Component = as || "td";
diff --git a/packages/components/table/src/table-checkbox-cell.tsx b/packages/components/table/src/table-checkbox-cell.tsx
index 68915c97ea..d372f91ed0 100644
--- a/packages/components/table/src/table-checkbox-cell.tsx
+++ b/packages/components/table/src/table-checkbox-cell.tsx
@@ -31,7 +31,7 @@ export interface TableCheckboxCellProps<T = object> extends HTMLNextUIProps<"td"
   classNames?: ValuesType["classNames"];
 }
 
-const TableCheckboxCell = forwardRef<TableCheckboxCellProps, "td">((props, ref) => {
+const TableCheckboxCell = forwardRef<"td", TableCheckboxCellProps>((props, ref) => {
   const {
     as,
     className,
diff --git a/packages/components/table/src/table-column-header.tsx b/packages/components/table/src/table-column-header.tsx
index a082b6ef84..8d7724447e 100644
--- a/packages/components/table/src/table-column-header.tsx
+++ b/packages/components/table/src/table-column-header.tsx
@@ -23,7 +23,7 @@ export interface TableColumnHeaderProps<T = object> extends HTMLNextUIProps<"th"
   node: GridNode<T>;
 }
 
-const TableColumnHeader = forwardRef<TableColumnHeaderProps, "th">((props, ref) => {
+const TableColumnHeader = forwardRef<"th", TableColumnHeaderProps>((props, ref) => {
   const {as, className, state, node, slots, classNames, ...otherProps} = props;
 
   const Component = as || "th";
diff --git a/packages/components/table/src/table-header-row.tsx b/packages/components/table/src/table-header-row.tsx
index b4e49b6f4b..f7eddbf106 100644
--- a/packages/components/table/src/table-header-row.tsx
+++ b/packages/components/table/src/table-header-row.tsx
@@ -19,7 +19,7 @@ export interface TableHeaderRowProps<T = object> extends HTMLNextUIProps<"tr"> {
   classNames?: ValuesType["classNames"];
 }
 
-const TableHeaderRow = forwardRef<TableHeaderRowProps, "tr">((props, ref) => {
+const TableHeaderRow = forwardRef<"tr", TableHeaderRowProps>((props, ref) => {
   const {as, className, children, node, slots, classNames, state, ...otherProps} = props;
 
   const Component = as || "tr";
diff --git a/packages/components/table/src/table-row-group.tsx b/packages/components/table/src/table-row-group.tsx
index 25e3f18e5f..4ee46542c3 100644
--- a/packages/components/table/src/table-row-group.tsx
+++ b/packages/components/table/src/table-row-group.tsx
@@ -11,7 +11,7 @@ export interface TableRowGroupProps extends HTMLNextUIProps<"thead"> {
   classNames?: ValuesType["classNames"];
 }
 
-const TableRowGroup = forwardRef<TableRowGroupProps, "thead">((props, ref) => {
+const TableRowGroup = forwardRef<"thead", TableRowGroupProps>((props, ref) => {
   const {as, className, children, slots, classNames, ...otherProps} = props;
 
   const Component = as || "thead";
diff --git a/packages/components/table/src/table-row.tsx b/packages/components/table/src/table-row.tsx
index da7113c9b4..265f610dc6 100644
--- a/packages/components/table/src/table-row.tsx
+++ b/packages/components/table/src/table-row.tsx
@@ -23,7 +23,7 @@ export interface TableRowProps<T = object> extends HTMLNextUIProps<"tr"> {
   classNames?: ValuesType["classNames"];
 }
 
-const TableRow = forwardRef<TableRowProps, "tr">((props, ref) => {
+const TableRow = forwardRef<"tr", TableRowProps>((props, ref) => {
   const {as, className, children, node, slots, state, isSelectable, classNames, ...otherProps} =
     props;
 
diff --git a/packages/components/table/src/table-select-all-checkbox.tsx b/packages/components/table/src/table-select-all-checkbox.tsx
index ff689b6f88..a4f4bbdf82 100644
--- a/packages/components/table/src/table-select-all-checkbox.tsx
+++ b/packages/components/table/src/table-select-all-checkbox.tsx
@@ -25,7 +25,7 @@ export interface TableSelectAllCheckboxProps<T = object> extends HTMLNextUIProps
   classNames?: ValuesType["classNames"];
 }
 
-const TableSelectAllCheckbox = forwardRef<TableSelectAllCheckboxProps, "th">((props, ref) => {
+const TableSelectAllCheckbox = forwardRef<"th", TableSelectAllCheckboxProps>((props, ref) => {
   const {
     as,
     className,
diff --git a/packages/components/table/src/table.tsx b/packages/components/table/src/table.tsx
index 97f34a1539..e2a70af996 100644
--- a/packages/components/table/src/table.tsx
+++ b/packages/components/table/src/table.tsx
@@ -1,5 +1,6 @@
-import {useCallback, forwardRef} from "react";
+import {useCallback} from "react";
 import {Spacer} from "@nextui-org/spacer";
+import {forwardRef} from "@nextui-org/system";
 
 import {UseTableProps, useTable} from "./use-table";
 import TableRowGroup from "./table-row-group";
@@ -8,10 +9,9 @@ import TableColumnHeader from "./table-column-header";
 import TableSelectAllCheckbox from "./table-select-all-checkbox";
 import TableBody from "./table-body";
 
-export interface TableProps
-  extends Omit<UseTableProps, "ref" | "isSelectable" | "isMultiSelectable"> {}
+export interface TableProps extends Omit<UseTableProps, "isSelectable" | "isMultiSelectable"> {}
 
-const Table = forwardRef<HTMLTableElement, TableProps>((props, ref) => {
+const Table = forwardRef<"table", TableProps>((props, ref) => {
   const {
     BaseComponent,
     Component,
@@ -26,8 +26,8 @@ const Table = forwardRef<HTMLTableElement, TableProps>((props, ref) => {
     getWrapperProps,
     getTableProps,
   } = useTable({
-    ref,
     ...props,
+    ref,
   });
 
   const Wrapper = useCallback(
diff --git a/packages/components/table/stories/table.stories.tsx b/packages/components/table/stories/table.stories.tsx
index 582f088699..205fd65662 100644
--- a/packages/components/table/stories/table.stories.tsx
+++ b/packages/components/table/stories/table.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {table} from "@nextui-org/theme";
 import {User} from "@nextui-org/user";
 import {Chip, ChipProps} from "@nextui-org/chip";
@@ -118,7 +118,7 @@ type SWCharacter = {
   birth_year: string;
 };
 
-const StaticTemplate: ComponentStory<typeof Table> = (args: TableProps) => (
+const StaticTemplate = (args: TableProps) => (
   <Table aria-label="Example static collection table" {...args}>
     <TableHeader>
       <TableColumn>NAME</TableColumn>
@@ -150,7 +150,7 @@ const StaticTemplate: ComponentStory<typeof Table> = (args: TableProps) => (
   </Table>
 );
 
-const EmptyTemplate: ComponentStory<typeof Table> = (args: TableProps) => (
+const EmptyTemplate = (args: TableProps) => (
   <Table aria-label="Example empty table" {...args}>
     <TableHeader>
       <TableColumn>NAME</TableColumn>
@@ -161,7 +161,7 @@ const EmptyTemplate: ComponentStory<typeof Table> = (args: TableProps) => (
   </Table>
 );
 
-const DynamicTemplate: ComponentStory<typeof Table> = (args: TableProps) => (
+const DynamicTemplate = (args: TableProps) => (
   <Table aria-label="Example table with dynamic content" {...args}>
     <TableHeader columns={columns}>
       {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
@@ -176,7 +176,7 @@ const DynamicTemplate: ComponentStory<typeof Table> = (args: TableProps) => (
   </Table>
 );
 
-const CustomCellTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
+const CustomCellTemplate = (args: TableProps) => {
   const columns = [
     {name: "NAME", uid: "name"},
     {name: "ROLE", uid: "role"},
@@ -316,7 +316,7 @@ const CustomCellTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
   );
 };
 
-const CustomCellWithClassnamesTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
+const CustomCellWithClassnamesTemplate = (args: TableProps) => {
   const columns = [
     {name: "NAME", uid: "name"},
     {name: "ROLE", uid: "role"},
@@ -464,7 +464,7 @@ const CustomCellWithClassnamesTemplate: ComponentStory<typeof Table> = (args: Ta
   );
 };
 
-const SortableTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
+const SortableTemplate = (args: TableProps) => {
   let list = useAsyncList<SWCharacter>({
     async load({signal}) {
       let res = await fetch(`https://swapi.py4e.com/api/people/?search`, {
@@ -525,7 +525,7 @@ const SortableTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
   );
 };
 
-const LoadMoreTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
+const LoadMoreTemplate = (args: TableProps) => {
   const [page, setPage] = React.useState(1);
 
   let list = useAsyncList<SWCharacter>({
@@ -580,7 +580,7 @@ const LoadMoreTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
   );
 };
 
-const PaginatedTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
+const PaginatedTemplate = (args: TableProps) => {
   const [page, setPage] = React.useState(1);
 
   const rowsPerPage = 4;
@@ -758,7 +758,7 @@ const PaginatedTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
   );
 };
 
-const AsyncPaginatedTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
+const AsyncPaginatedTemplate = (args: TableProps) => {
   const [page, setPage] = React.useState(1);
   const [total, setTotal] = React.useState(0);
 
@@ -833,7 +833,7 @@ const AsyncPaginatedTemplate: ComponentStory<typeof Table> = (args: TableProps)
   );
 };
 
-const InfinitePaginationTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
+const InfinitePaginationTemplate = (args: TableProps) => {
   const [hasMore, setHasMore] = React.useState(false);
 
   let list = useAsyncList<SWCharacter>({
diff --git a/packages/components/tabs/package.json b/packages/components/tabs/package.json
index 3928e77503..2bf76a9b39 100644
--- a/packages/components/tabs/package.json
+++ b/packages/components/tabs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/tabs",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Tabs organize content into multiple sections and allow users to navigate between them.",
   "keywords": [
     "tabs"
diff --git a/packages/components/tabs/src/tab-panel.tsx b/packages/components/tabs/src/tab-panel.tsx
index 2717d49236..58968cf97f 100644
--- a/packages/components/tabs/src/tab-panel.tsx
+++ b/packages/components/tabs/src/tab-panel.tsx
@@ -29,7 +29,7 @@ export type TabPanelProps = Props & AriaTabPanelProps;
 /**
  * @internal
  */
-const TabPanel = forwardRef<TabPanelProps, "div">((props, ref) => {
+const TabPanel = forwardRef<"div", TabPanelProps>((props, ref) => {
   const {as, state, className, slots, classNames, ...otherProps} = props;
 
   const Component = as || "div";
diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx
index 0e8ad3def7..921a44df8b 100644
--- a/packages/components/tabs/src/tab.tsx
+++ b/packages/components/tabs/src/tab.tsx
@@ -27,7 +27,7 @@ export interface TabItemProps<T = object> extends HTMLNextUIProps<"button"> {
 /**
  * @internal
  */
-const Tab = forwardRef<TabItemProps, "button">((props, ref) => {
+const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
   const {
     className,
     as,
diff --git a/packages/components/tabs/src/tabs.tsx b/packages/components/tabs/src/tabs.tsx
index 0f1e2d40b8..3686afe636 100644
--- a/packages/components/tabs/src/tabs.tsx
+++ b/packages/components/tabs/src/tabs.tsx
@@ -5,12 +5,12 @@ import {UseTabsProps, useTabs} from "./use-tabs";
 import Tab from "./tab";
 import TabPanel from "./tab-panel";
 
-interface Props<T> extends Omit<UseTabsProps<T>, "ref"> {}
+interface Props<T> extends UseTabsProps<T> {}
 
 function Tabs<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLDivElement>) {
   const {Component, values, state, getBaseProps, getTabListProps} = useTabs<T>({
-    ref,
     ...props,
+    ref,
   });
 
   const layoutId = useId();
diff --git a/packages/components/tabs/src/use-tabs.ts b/packages/components/tabs/src/use-tabs.ts
index 88254fd6ee..72c120d153 100644
--- a/packages/components/tabs/src/use-tabs.ts
+++ b/packages/components/tabs/src/use-tabs.ts
@@ -13,7 +13,7 @@ import {CollectionProps} from "@nextui-org/aria-utils";
 import {CollectionChildren} from "@react-types/shared";
 import {HTMLMotionProps} from "framer-motion";
 
-export interface Props extends Omit<HTMLNextUIProps<"div">, "children"> {
+export interface Props extends Omit<HTMLNextUIProps, "children"> {
   /**
    * Ref to the DOM node.
    */
diff --git a/packages/components/tabs/stories/tabs.stories.tsx b/packages/components/tabs/stories/tabs.stories.tsx
index 48985951c5..39f20c4b57 100644
--- a/packages/components/tabs/stories/tabs.stories.tsx
+++ b/packages/components/tabs/stories/tabs.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {button, link, tabs} from "@nextui-org/theme";
 import Lorem from "react-lorem-component";
 import {Input} from "@nextui-org/input";
@@ -61,7 +61,7 @@ const defaultProps = {
   ...tabs.defaultVariants,
 };
 
-const StaticTemplate: ComponentStory<any> = (args: TabsProps) => (
+const StaticTemplate = (args: TabsProps) => (
   <Tabs aria-label="Tabs example" {...args}>
     <Tab key="world" title="World">
       <Lorem count={1} sentenceUpperBound={20} />
@@ -81,7 +81,7 @@ const StaticTemplate: ComponentStory<any> = (args: TabsProps) => (
   </Tabs>
 );
 
-const WithIconsTemplate: ComponentStory<any> = (args: TabsProps) => (
+const WithIconsTemplate = (args: TabsProps) => (
   <Tabs
     aria-label="Tabs example"
     {...args}
@@ -98,7 +98,7 @@ const WithIconsTemplate: ComponentStory<any> = (args: TabsProps) => (
   </Tabs>
 );
 
-const ControlledTemplate: ComponentStory<any> = (args: TabsProps) => {
+const ControlledTemplate = (args: TabsProps) => {
   const [selected, setSelected] = React.useState<React.Key>("world");
 
   return (
@@ -152,7 +152,7 @@ type Item = {
   content?: React.ReactNode;
 };
 
-const DynamicTemplate: ComponentStory<any> = (args: TabsProps<Item>) => {
+const DynamicTemplate = (args: TabsProps<Item>) => {
   let tabs: Item[] = [
     {
       id: "world",
@@ -196,7 +196,7 @@ const DynamicTemplate: ComponentStory<any> = (args: TabsProps<Item>) => {
   );
 };
 
-const WithFormTemplate: ComponentStory<any> = (args: TabsProps) => {
+const WithFormTemplate = (args: TabsProps) => {
   const [selected, setSelected] = React.useState<React.Key>("login");
 
   return (
diff --git a/packages/components/tooltip/package.json b/packages/components/tooltip/package.json
index 69cd26bb64..9970fcfc2e 100644
--- a/packages/components/tooltip/package.json
+++ b/packages/components/tooltip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/tooltip",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "A React Component for rendering dynamically positioned Tooltips",
   "keywords": [
     "tooltip"
diff --git a/packages/components/tooltip/src/tooltip.tsx b/packages/components/tooltip/src/tooltip.tsx
index e755fe41b3..3ac9ef90a7 100644
--- a/packages/components/tooltip/src/tooltip.tsx
+++ b/packages/components/tooltip/src/tooltip.tsx
@@ -1,4 +1,5 @@
-import {useMemo, forwardRef} from "react";
+import {useMemo} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {OverlayContainer} from "@react-aria/overlays";
 import {AnimatePresence, motion} from "framer-motion";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
@@ -8,10 +9,9 @@ import {getTransformOrigins} from "@nextui-org/aria-utils";
 
 import {UseTooltipProps, useTooltip} from "./use-tooltip";
 
-export interface TooltipProps
-  extends Omit<UseTooltipProps, "ref" | "disableTriggerFocus" | "backdrop"> {}
+export interface TooltipProps extends Omit<UseTooltipProps, "disableTriggerFocus" | "backdrop"> {}
 
-const Tooltip = forwardRef<HTMLElement, TooltipProps>((props, ref) => {
+const Tooltip = forwardRef<"div", TooltipProps>((props, ref) => {
   const {
     Component,
     children,
@@ -26,8 +26,8 @@ const Tooltip = forwardRef<HTMLElement, TooltipProps>((props, ref) => {
     getTooltipProps,
     getArrowProps,
   } = useTooltip({
-    ref,
     ...props,
+    ref,
   });
 
   let trigger: React.ReactElement;
diff --git a/packages/components/tooltip/src/use-tooltip.ts b/packages/components/tooltip/src/use-tooltip.ts
index adb3847696..271ac957f6 100644
--- a/packages/components/tooltip/src/use-tooltip.ts
+++ b/packages/components/tooltip/src/use-tooltip.ts
@@ -17,7 +17,7 @@ import {createDOMRef} from "@nextui-org/react-utils";
 import {useMemo, useRef, useCallback} from "react";
 import {toReactAriaPlacement, getArrowPlacement} from "@nextui-org/aria-utils";
 
-interface Props extends Omit<HTMLNextUIProps<"div">, "content"> {
+interface Props extends Omit<HTMLNextUIProps, "content"> {
   /**
    * Ref to the DOM node.
    */
diff --git a/packages/components/tooltip/stories/tooltip.stories.tsx b/packages/components/tooltip/stories/tooltip.stories.tsx
index 3b795f7034..6bd3742623 100644
--- a/packages/components/tooltip/stories/tooltip.stories.tsx
+++ b/packages/components/tooltip/stories/tooltip.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {popover} from "@nextui-org/theme";
 import {Button} from "@nextui-org/button";
 
@@ -104,9 +104,9 @@ const defaultProps = {
   children: <Button>Hover me</Button>,
 };
 
-const Template: ComponentStory<typeof Tooltip> = (args: TooltipProps) => <Tooltip {...args} />;
+const Template = (args: TooltipProps) => <Tooltip {...args} />;
 
-const DelayTemplate: ComponentStory<typeof Tooltip> = (args: TooltipProps) => (
+const DelayTemplate = (args: TooltipProps) => (
   <div className="flex gap-2">
     <Tooltip {...args} content="Tooltip 1" delay={1000}>
       <Button color="success" variant="faded">
@@ -121,7 +121,7 @@ const DelayTemplate: ComponentStory<typeof Tooltip> = (args: TooltipProps) => (
   </div>
 );
 
-const OpenChangeTemplate: ComponentStory<typeof Tooltip> = (args: TooltipProps) => {
+const OpenChangeTemplate = (args: TooltipProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   return (
@@ -134,7 +134,7 @@ const OpenChangeTemplate: ComponentStory<typeof Tooltip> = (args: TooltipProps)
   );
 };
 
-const OffsetTemplate: ComponentStory<typeof Tooltip> = (args: TooltipProps) => (
+const OffsetTemplate = (args: TooltipProps) => (
   <div className="flex gap-2">
     <Tooltip {...args} content="Tooltip 1">
       <Button color="secondary" variant="faded">
@@ -154,7 +154,7 @@ const OffsetTemplate: ComponentStory<typeof Tooltip> = (args: TooltipProps) => (
   </div>
 );
 
-const MultipleTemplate: ComponentStory<typeof Tooltip> = (args: TooltipProps) => (
+const MultipleTemplate = (args: TooltipProps) => (
   <div className="flex gap-2">
     <Tooltip {...args} content="Tooltip 1" delay={1000}>
       <Button>Hover me (delay 1000ms)</Button>
@@ -165,7 +165,7 @@ const MultipleTemplate: ComponentStory<typeof Tooltip> = (args: TooltipProps) =>
   </div>
 );
 
-const PlacementsTemplate: ComponentStory<typeof Tooltip> = (args: TooltipProps) => {
+const PlacementsTemplate = (args: TooltipProps) => {
   return (
     <div className="inline-grid grid-cols-3 gap-4">
       <Tooltip {...args} content="Top Start" placement="top-start">
@@ -243,7 +243,7 @@ const PlacementsTemplate: ComponentStory<typeof Tooltip> = (args: TooltipProps)
   );
 };
 
-const ControlledTemplate: ComponentStory<typeof Tooltip> = (args: TooltipProps) => {
+const ControlledTemplate = (args: TooltipProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const handleOpen = () => {
diff --git a/packages/components/user/package.json b/packages/components/user/package.json
index 2c53659ad5..2f8867727e 100644
--- a/packages/components/user/package.json
+++ b/packages/components/user/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/user",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Flexible User Profile Component.",
   "keywords": [
     "user"
diff --git a/packages/components/user/src/use-user.ts b/packages/components/user/src/use-user.ts
index dbb0420e27..6eca0c1f1f 100644
--- a/packages/components/user/src/use-user.ts
+++ b/packages/components/user/src/use-user.ts
@@ -9,7 +9,7 @@ import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {ReactRef} from "@nextui-org/react-utils";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {mergeProps} from "@react-aria/utils";
-export interface UseUserProps extends Omit<HTMLNextUIProps<"div">, "children"> {
+export interface UseUserProps extends Omit<HTMLNextUIProps, "children"> {
   /**
    * Ref to the DOM node.
    */
diff --git a/packages/components/user/src/user.tsx b/packages/components/user/src/user.tsx
index 7e7f469e52..b334db8f8a 100644
--- a/packages/components/user/src/user.tsx
+++ b/packages/components/user/src/user.tsx
@@ -1,14 +1,14 @@
-import {forwardRef} from "react";
+import {forwardRef} from "@nextui-org/system";
 import {Avatar} from "@nextui-org/avatar";
 
 import {UseUserProps, useUser} from "./use-user";
 
-export interface UserProps extends Omit<UseUserProps, "ref"> {}
+export interface UserProps extends UseUserProps {}
 
-const User = forwardRef<HTMLDivElement, UserProps>((props, ref) => {
+const User = forwardRef<"div", UserProps>((props, ref) => {
   const {Component, name, slots, classNames, description, avatarProps, getUserProps} = useUser({
-    ref,
     ...props,
+    ref,
   });
 
   return (
diff --git a/packages/components/user/stories/user.stories.tsx b/packages/components/user/stories/user.stories.tsx
index b59bd376a2..3709f17246 100644
--- a/packages/components/user/stories/user.stories.tsx
+++ b/packages/components/user/stories/user.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {Link} from "@nextui-org/link";
 
 import {User, UserProps} from "../src";
@@ -11,7 +11,7 @@ export default {
 
 const url = "https://avatars.githubusercontent.com/u/30373425?v=4";
 
-const Template: ComponentStory<typeof User> = (args: UserProps) => <User {...args} />;
+const Template = (args: UserProps) => <User {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/packages/core/react/package.json b/packages/core/react/package.json
index d9fc760d9f..a4092c212f 100644
--- a/packages/core/react/package.json
+++ b/packages/core/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "🚀 Beautiful and modern React UI library.",
   "author": "Junior Garcia <jrgarciadev@gmail.com>",
   "homepage": "https://nextui.org",
diff --git a/packages/core/system/__tests__/extend-variants.test.tsx b/packages/core/system/__tests__/extend-variants.test.tsx
index c01db40948..56fde9c2b2 100644
--- a/packages/core/system/__tests__/extend-variants.test.tsx
+++ b/packages/core/system/__tests__/extend-variants.test.tsx
@@ -26,7 +26,7 @@ const createExtendNoSlotsComponent = (styles: ExtendVariantProps = {}) =>
       size: "xl",
       ...styles?.defaultVariants,
     },
-    compoundVariants: styles.compoundVariants ?? [
+    compoundVariants: styles?.compoundVariants ?? [
       {
         isScalable: true,
         size: "2xl",
@@ -76,7 +76,7 @@ const createExtendSlotsComponent = () =>
 describe("extendVariants function - no slots", () => {
   it("should render correctly", () => {
     const Button2 = createExtendNoSlotsComponent();
-    const wrapper = render(<Button2 />);
+    const wrapper = render(<Button2 disableRipple />);
 
     expect(() => wrapper.unmount()).not.toThrow();
   });
@@ -85,7 +85,7 @@ describe("extendVariants function - no slots", () => {
     const ref = React.createRef<HTMLButtonElement>();
     const Button2 = createExtendNoSlotsComponent();
 
-    render(<Button2 ref={ref} />);
+    render(<Button2 ref={ref} disableRipple />);
     expect(ref.current).not.toBeNull();
   });
 
diff --git a/packages/core/system/package.json b/packages/core/system/package.json
index a759778bf5..57551a5489 100644
--- a/packages/core/system/package.json
+++ b/packages/core/system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/system",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "NextUI system primitives",
   "keywords": [
     "system"
diff --git a/packages/core/system/src/extend-variants.d.ts b/packages/core/system/src/extend-variants.d.ts
index 2b096f90ad..b2dba3fad5 100644
--- a/packages/core/system/src/extend-variants.d.ts
+++ b/packages/core/system/src/extend-variants.d.ts
@@ -44,6 +44,21 @@ type DefaultVariants<V, SV> = VariantValue<V, SV>;
 
 type CompoundVariants<V, SV> = Array<VariantValue<V, SV> & ClassProp<ClassValue>>;
 
+type Options = {
+  /**
+   * Whether to merge the class names with `tailwind-merge` library.
+   * It's avoid to have duplicate tailwind classes. (Recommended)
+   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/README.md
+   * @default true
+   */
+  twMerge?: boolean;
+  /**
+   * The config object for `tailwind-merge` library.
+   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/docs/configuration.md
+   */
+  twMergeConfig?: any;
+};
+
 export type ExtendVariantProps = {
   variants?: Record<string, Record<string, string>>;
   defaultVariants?: Record<string, string>;
@@ -56,7 +71,7 @@ export type ExtendVariantWithSlotsProps = {
   compoundVariants?: Array<Record<string, boolean | string | Record<string, string>>>;
 };
 
-export type extendVariants = {
+export type ExtendVariants = {
   <
     C extends JSXElementConstructor<any>,
     CP extends ComponentProps<C>,
@@ -73,6 +88,7 @@ export type extendVariants = {
       compoundVariants?: CV;
       slots?: S;
     },
+    opts?: Options,
   ): ForwardRefRenderFunction<
     ReactElement,
     {
@@ -84,4 +100,4 @@ export type extendVariants = {
 };
 
 // main function
-export declare const extendVariants: extendVariants;
+export declare const extendVariants: ExtendVariants;
diff --git a/packages/core/system/src/extend-variants.js b/packages/core/system/src/extend-variants.js
index 4add5aacb0..7c5443f358 100644
--- a/packages/core/system/src/extend-variants.js
+++ b/packages/core/system/src/extend-variants.js
@@ -19,18 +19,24 @@ function getSlots(variants) {
     }, {});
 }
 
-export function extendVariants(BaseComponent, styles = {}) {
+export function extendVariants(BaseComponent, styles = {}, opts = {}) {
   const {variants, defaultVariants, compoundVariants} = styles || {};
 
   const slots = getSlots(variants);
   const hasSlots = typeof slots === "object" && Object.keys(slots).length !== 0;
 
-  const customTv = tv({
-    variants,
-    defaultVariants,
-    compoundVariants,
-    ...(hasSlots && {slots}),
-  });
+  const customTv = tv(
+    {
+      variants,
+      defaultVariants,
+      compoundVariants,
+      ...(hasSlots && {slots}),
+    },
+    {
+      twMerge: opts.twMerge ?? true,
+      twMergeConfig: opts.twMergeConfig ?? {},
+    },
+  );
 
   const ForwardedComponent = React.forwardRef((originalProps, ref) => {
     const [baseProps, variantProps] = mapPropsVariants(originalProps, customTv.variantKeys, false);
diff --git a/packages/core/system/src/types.ts b/packages/core/system/src/types.ts
index 3006a48921..02bb39aac8 100644
--- a/packages/core/system/src/types.ts
+++ b/packages/core/system/src/types.ts
@@ -6,13 +6,6 @@ export type As<Props = any> = React.ElementType<Props>;
 export type DOMElements = keyof JSX.IntrinsicElements;
 export type CapitalizedDOMElements = Capitalize<DOMElements>;
 
-export interface NextUIProps {
-  /**
-   * The HTML element to render.
-   */
-  as?: As;
-}
-
 export interface DOMElement extends Element, HTMLOrSVGElement {}
 
 type DataAttributes = {
@@ -43,24 +36,27 @@ export type MergeWithAs<
   AsProps extends object,
   AdditionalProps extends object = {},
   AsComponent extends As = As,
-> = RightJoinProps<ComponentProps, AdditionalProps> &
-  RightJoinProps<AsProps, AdditionalProps> & {
-    as?: AsComponent;
-  };
+> = (RightJoinProps<ComponentProps, AdditionalProps> | RightJoinProps<AsProps, AdditionalProps>) & {
+  as?: AsComponent;
+};
 
-export type ComponentWithAs<Component extends As, Props extends object = {}> = {
+export type InternalForwardRefRenderFunction<
+  Component extends As,
+  Props extends object = {},
+  OmitKeys extends keyof any = never,
+> = {
   <AsComponent extends As = Component>(
     props: MergeWithAs<
-      React.ComponentProps<Component>,
-      React.ComponentProps<AsComponent>,
+      React.ComponentPropsWithoutRef<Component>,
+      Omit<React.ComponentPropsWithoutRef<AsComponent>, OmitKeys>,
       Props,
       AsComponent
     >,
-  ): JSX.Element;
-
-  displayName?: string;
-  propTypes?: React.WeakValidationMap<any>;
-  defaultProps?: Partial<any>;
+  ): React.ReactElement | null;
+  readonly $$typeof: symbol;
+  defaultProps?: Partial<Props> | undefined;
+  propTypes?: React.WeakValidationMap<Props> | undefined;
+  displayName?: string | undefined;
 };
 
 /**
@@ -72,14 +68,12 @@ export type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
 
 export type Merge<M, N> = N extends Record<string, unknown> ? M : Omit<M, keyof N> & N;
 
-export type HTMLNextUIProps<T extends As = "div", K extends object = {}> = Omit<
-  Omit<PropsOf<T>, "ref" | "color" | "slot"> & NextUIProps,
-  keyof K
-> &
-  K;
-
-export interface NextUIComponent<C extends As, P = {}>
-  extends ComponentWithAs<C, NextUIProps & P> {}
+export type HTMLNextUIProps<T extends As = "div", OmitKeys extends keyof any = never> = Omit<
+  PropsOf<T>,
+  "ref" | "color" | "slot" | OmitKeys
+> & {
+  as?: As;
+};
 
 export type PropGetter<P = Record<string, unknown>, R = DOMAttributes> = (
   props?: Merge<DOMAttributes, P>,
diff --git a/packages/core/system/src/utils.ts b/packages/core/system/src/utils.ts
index e79eeca853..884e8341e5 100644
--- a/packages/core/system/src/utils.ts
+++ b/packages/core/system/src/utils.ts
@@ -1,9 +1,14 @@
-import type {As, RightJoinProps, PropsOf, ComponentWithAs} from "./types";
+import type {As, RightJoinProps, PropsOf, InternalForwardRefRenderFunction} from "./types";
 
+import * as React from "react";
 import clsx from "clsx";
 import {forwardRef as baseForwardRef} from "react";
 
-export function forwardRef<Props extends object, Component extends As>(
+export function forwardRef<
+  Component extends As,
+  Props extends object,
+  OmitKeys extends keyof any = never,
+>(
   component: React.ForwardRefRenderFunction<
     any,
     RightJoinProps<PropsOf<Component>, Props> & {
@@ -11,7 +16,7 @@ export function forwardRef<Props extends object, Component extends As>(
     }
   >,
 ) {
-  return baseForwardRef(component) as unknown as ComponentWithAs<Component, Props>;
+  return baseForwardRef(component) as InternalForwardRefRenderFunction<Component, Props, OmitKeys>;
 }
 
 export const toIterator = (obj: any) => {
diff --git a/packages/core/system/test-utils/no-slots-component.tsx b/packages/core/system/test-utils/no-slots-component.tsx
index 94d38257d1..896507b1f9 100644
--- a/packages/core/system/test-utils/no-slots-component.tsx
+++ b/packages/core/system/test-utils/no-slots-component.tsx
@@ -2,10 +2,10 @@ import type {HTMLNextUIProps} from "../src/types";
 
 import React, {useMemo} from "react";
 import {tv, type VariantProps} from "@nextui-org/theme";
-import {filterDOMProps} from "@nextui-org/react-utils";
+import {filterDOMProps, ReactRef, useDOMRef} from "@nextui-org/react-utils";
 
 import {mapPropsVariants} from "../src/utils";
-
+import {forwardRef} from "../src/utils";
 /**
  * No slots
  */
@@ -55,9 +55,12 @@ const button = tv({
 
 interface ButtonProps extends HTMLNextUIProps<"button">, VariantProps<typeof button> {
   children: React.ReactNode;
+  disableRipple?: boolean;
+  ref?: ReactRef<HTMLButtonElement | null>;
 }
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((originalProps, ref) => {
+export const Button = forwardRef<"button", ButtonProps>((originalProps, ref) => {
+  // export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, button.variantKeys);
 
   const styles = useMemo(
@@ -65,8 +68,10 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((original
     [...Object.values(variantProps), props.className],
   );
 
+  const domRef = useDOMRef(ref);
+
   return (
-    <button ref={ref} {...filterDOMProps(props)} className={styles}>
+    <button ref={domRef} {...filterDOMProps(props)} className={styles}>
       {props.children}
     </button>
   );
diff --git a/packages/core/system/test-utils/slots-component.tsx b/packages/core/system/test-utils/slots-component.tsx
index efbd216a1d..8c5f6f2164 100644
--- a/packages/core/system/test-utils/slots-component.tsx
+++ b/packages/core/system/test-utils/slots-component.tsx
@@ -2,9 +2,9 @@ import type {HTMLNextUIProps} from "../src/types";
 
 import React, {useMemo} from "react";
 import {SlotsToClasses, tv, type VariantProps} from "@nextui-org/theme";
-import {filterDOMProps} from "@nextui-org/react-utils";
+import {filterDOMProps, ReactRef, useDOMRef} from "@nextui-org/react-utils";
 
-import {cn, mapPropsVariants} from "../src/utils";
+import {cn, forwardRef, mapPropsVariants} from "../src/utils";
 
 const card = tv({
   slots: {
@@ -155,14 +155,15 @@ const card = tv({
 type CardVariantProps = VariantProps<typeof card>;
 type CardSlots = keyof ReturnType<typeof card>;
 
-interface CardProps extends HTMLNextUIProps<"div">, CardVariantProps {
+interface CardProps extends HTMLNextUIProps, CardVariantProps {
   header?: React.ReactNode;
   footer?: React.ReactNode;
   children: React.ReactNode;
+  ref?: ReactRef<HTMLDivElement | null>;
   classNames?: SlotsToClasses<CardSlots>;
 }
 
-export const Card = React.forwardRef<HTMLDivElement, CardProps>((originalProps, ref) => {
+export const Card = forwardRef<"div", CardProps>((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, card.variantKeys);
 
   const {header, footer, className, children, classNames, ...otherProps} = props;
@@ -171,9 +172,11 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>((originalProps,
 
   const baseStyles = cn(classNames?.base, className);
 
+  const domRef = useDOMRef(ref);
+
   return (
     <div
-      ref={ref}
+      ref={domRef}
       className={styles.base({class: baseStyles})}
       data-testid="base"
       {...filterDOMProps(otherProps)}
diff --git a/packages/core/theme/package.json b/packages/core/theme/package.json
index f8e7c5f52f..8b6c67f69b 100644
--- a/packages/core/theme/package.json
+++ b/packages/core/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/theme",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "The default theme for NextUI components",
   "keywords": [
     "theme",
diff --git a/packages/core/theme/stories/colors.stories.tsx b/packages/core/theme/stories/colors.stories.tsx
index ea33c7d9a8..e1de37442c 100644
--- a/packages/core/theme/stories/colors.stories.tsx
+++ b/packages/core/theme/stories/colors.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {ComponentMeta} from "@storybook/react";
 import {parseToRgba, readableColor} from "color2k";
 
 import {commonColors} from "../src/colors";
@@ -99,9 +99,7 @@ export default {
   },
 } as ComponentMeta<typeof SwatchSet>;
 
-const Template: ComponentStory<typeof SwatchSet> = (args: SwatchSetProps) => (
-  <SwatchSet {...args} />
-);
+const Template = (args: SwatchSetProps) => <SwatchSet {...args} />;
 
 const getCommonItems = (colors: string[]) => {
   return colors.map((color) => ({
diff --git a/packages/hooks/use-aria-accordion-item/package.json b/packages/hooks/use-aria-accordion-item/package.json
index 421cb1175b..4dc8ac1414 100644
--- a/packages/hooks/use-aria-accordion-item/package.json
+++ b/packages/hooks/use-aria-accordion-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-accordion-item",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Internal impl for react aria accordion item",
   "keywords": [
     "use-aria-accordion-item"
diff --git a/packages/hooks/use-aria-button/package.json b/packages/hooks/use-aria-button/package.json
index cec6f47c05..c5a09b66a5 100644
--- a/packages/hooks/use-aria-button/package.json
+++ b/packages/hooks/use-aria-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-button",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning",
   "keywords": [
     "use-aria-button"
diff --git a/packages/hooks/use-aria-modal-overlay/package.json b/packages/hooks/use-aria-modal-overlay/package.json
index 93bb89864e..a852fb4bb2 100644
--- a/packages/hooks/use-aria-modal-overlay/package.json
+++ b/packages/hooks/use-aria-modal-overlay/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-modal-overlay",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "A custom implementation of react aria modal overlay, this removes the prevent scroll",
   "keywords": [
     "use-aria-modal-overlay"
diff --git a/packages/hooks/use-aria-toggle-button/package.json b/packages/hooks/use-aria-toggle-button/package.json
index 743af7c080..c4f901e60a 100644
--- a/packages/hooks/use-aria-toggle-button/package.json
+++ b/packages/hooks/use-aria-toggle-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-toggle-button",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning",
   "keywords": [
     "use-aria-toggle-button"
diff --git a/packages/hooks/use-callback-ref/package.json b/packages/hooks/use-callback-ref/package.json
index 1ede1d3cee..a8f0c258d6 100644
--- a/packages/hooks/use-callback-ref/package.json
+++ b/packages/hooks/use-callback-ref/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-callback-ref",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "React hook to persist any value between renders, but keeps it up-to-date if it changes.",
   "keywords": [
     "use-callback-ref"
diff --git a/packages/hooks/use-clipboard/package.json b/packages/hooks/use-clipboard/package.json
index 7db855329b..a6488fb706 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": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Wrapper around navigator.clipboard with feedback timeout",
   "keywords": [
     "use-clipboard"
diff --git a/packages/hooks/use-disclosure/package.json b/packages/hooks/use-disclosure/package.json
index 6a7f26fc53..8eb9866b1e 100644
--- a/packages/hooks/use-disclosure/package.json
+++ b/packages/hooks/use-disclosure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-disclosure",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "The hook in charge of managing modals",
   "keywords": [
     "use-disclosure"
diff --git a/packages/hooks/use-image/package.json b/packages/hooks/use-image/package.json
index ffa8f768b8..6501eede56 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": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "React hook for progressing image loading",
   "keywords": [
     "use-image"
diff --git a/packages/hooks/use-infinite-scroll/package.json b/packages/hooks/use-infinite-scroll/package.json
index ef68084d82..ddad9c2df6 100644
--- a/packages/hooks/use-infinite-scroll/package.json
+++ b/packages/hooks/use-infinite-scroll/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-infinite-scroll",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "A hook for handling infinity scroll based on the IntersectionObserver API",
   "keywords": [
     "use-infinite-scroll"
diff --git a/packages/hooks/use-is-mobile/package.json b/packages/hooks/use-is-mobile/package.json
index b814f19f5f..19d879baa4 100644
--- a/packages/hooks/use-is-mobile/package.json
+++ b/packages/hooks/use-is-mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-is-mobile",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "A hook that returns whether the device is mobile or not",
   "keywords": [
     "use-is-mobile"
diff --git a/packages/hooks/use-is-mounted/package.json b/packages/hooks/use-is-mounted/package.json
index 9c5376765c..94e786e4ff 100644
--- a/packages/hooks/use-is-mounted/package.json
+++ b/packages/hooks/use-is-mounted/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-is-mounted",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "This hook can be used to render client-based components or run client logic",
   "keywords": [
     "use-is-mounted"
diff --git a/packages/hooks/use-pagination/package.json b/packages/hooks/use-pagination/package.json
index df183c6122..fae5a253d7 100644
--- a/packages/hooks/use-pagination/package.json
+++ b/packages/hooks/use-pagination/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-pagination",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "State management hook for Pagination component, it lets you manage pagination with controlled and uncontrolled state",
   "keywords": [
     "use-pagination"
diff --git a/packages/hooks/use-real-shape/package.json b/packages/hooks/use-real-shape/package.json
index 69874bc129..013eca8244 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": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Hook that returns the real dimensions of an element",
   "keywords": [
     "use-real-shape"
diff --git a/packages/hooks/use-ref-state/package.json b/packages/hooks/use-ref-state/package.json
index 1fb63aeb24..9e2cba5811 100644
--- a/packages/hooks/use-ref-state/package.json
+++ b/packages/hooks/use-ref-state/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-ref-state",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Hook for saving the state in a ref value",
   "keywords": [
     "use-ref-state"
diff --git a/packages/hooks/use-resize/package.json b/packages/hooks/use-resize/package.json
index 8857360511..4d4d29a3ce 100644
--- a/packages/hooks/use-resize/package.json
+++ b/packages/hooks/use-resize/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-resize",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Hook that adds an event listener to the resize window event",
   "keywords": [
     "use-resize"
diff --git a/packages/hooks/use-safe-layout-effect/package.json b/packages/hooks/use-safe-layout-effect/package.json
index cddad9b258..28744bb7c1 100644
--- a/packages/hooks/use-safe-layout-effect/package.json
+++ b/packages/hooks/use-safe-layout-effect/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-safe-layout-effect",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "",
   "keywords": [
     "use-safe-layout-effect"
diff --git a/packages/hooks/use-scroll-position/package.json b/packages/hooks/use-scroll-position/package.json
index 2ebd2e3155..8fdf50a814 100644
--- a/packages/hooks/use-scroll-position/package.json
+++ b/packages/hooks/use-scroll-position/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-scroll-position",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Provides the logic to control the scroll over an element",
   "keywords": [
     "use-scroll-position"
diff --git a/packages/hooks/use-ssr/package.json b/packages/hooks/use-ssr/package.json
index 63c77c694e..a8e6f2f10a 100644
--- a/packages/hooks/use-ssr/package.json
+++ b/packages/hooks/use-ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-ssr",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "",
   "keywords": [
     "use-ssr"
diff --git a/packages/hooks/use-update-effect/package.json b/packages/hooks/use-update-effect/package.json
index 147ea0ce9e..185f1a273c 100644
--- a/packages/hooks/use-update-effect/package.json
+++ b/packages/hooks/use-update-effect/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-update-effect",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "React effect hook that invokes only on update",
   "keywords": [
     "use-update-effect"
diff --git a/packages/utilities/aria-utils/package.json b/packages/utilities/aria-utils/package.json
index f79619269f..ea77a5c3b8 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": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "A package for managing @react-aria nextui utils.",
   "keywords": [
     "aria-utils"
diff --git a/packages/utilities/framer-transitions/package.json b/packages/utilities/framer-transitions/package.json
index 2199256c52..dd9eef4dd1 100644
--- a/packages/utilities/framer-transitions/package.json
+++ b/packages/utilities/framer-transitions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/framer-transitions",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "A set of framer motion transitions for react",
   "keywords": [
     "framer-transitions"
diff --git a/packages/utilities/react-utils/package.json b/packages/utilities/react-utils/package.json
index 17ffd83dd8..a1b0b2cdb1 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": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "A set of utilities for react on client side",
   "keywords": [
     "react-utils"
diff --git a/packages/utilities/react-utils/src/refs.ts b/packages/utilities/react-utils/src/refs.ts
index 84b42b6cb2..ece6fa754c 100644
--- a/packages/utilities/react-utils/src/refs.ts
+++ b/packages/utilities/react-utils/src/refs.ts
@@ -1,7 +1,7 @@
 import * as React from "react";
 import {isFunction} from "@nextui-org/shared-utils";
 
-export type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>;
+export type ReactRef<T> = React.RefObject<T> | React.MutableRefObject<T> | React.Ref<T>;
 
 /**
  * Assigns a value to a ref function or object
diff --git a/packages/utilities/shared-icons/package.json b/packages/utilities/shared-icons/package.json
index 139f4f4ae9..65edd4e76d 100644
--- a/packages/utilities/shared-icons/package.json
+++ b/packages/utilities/shared-icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/shared-icons",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "Internal icons set, commonly used in the components stories",
   "keywords": [
     "icons-utils"
diff --git a/packages/utilities/shared-utils/package.json b/packages/utilities/shared-utils/package.json
index f4e16c3a20..a5ff591849 100644
--- a/packages/utilities/shared-utils/package.json
+++ b/packages/utilities/shared-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/shared-utils",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "A set of NextUI utilities",
   "keywords": [
     "system"
diff --git a/packages/utilities/test-utils/package.json b/packages/utilities/test-utils/package.json
index 8f4dc065be..a4c5889263 100644
--- a/packages/utilities/test-utils/package.json
+++ b/packages/utilities/test-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/test-utils",
-  "version": "0.0.0-dev-v2-20230728014036",
+  "version": "0.0.0-dev-v2-20230728201112",
   "description": "A set of utilities for react testing",
   "keywords": [
     "test-utils"
diff --git a/plop/component/src/{{componentName}}.tsx.hbs b/plop/component/src/{{componentName}}.tsx.hbs
index d69e0c7355..37736711c6 100644
--- a/plop/component/src/{{componentName}}.tsx.hbs
+++ b/plop/component/src/{{componentName}}.tsx.hbs
@@ -2,10 +2,10 @@ import {forwardRef} from "react";
 
 import { Use{{capitalize componentName}}Props, use{{capitalize componentName}} } from "./use-{{componentName}}";
 
-export interface {{capitalize componentName}}Props extends Omit<Use{{capitalize componentName}}Props, "ref"> {}
+export interface {{capitalize componentName}}Props extends Use{{capitalize componentName}}Props {}
 
 const {{capitalize componentName}} = forwardRef<HTMLElement, {{capitalize componentName}}Props>((props, ref) => {
-  const {Component, domRef, children, styles, ...otherProps} =  use{{capitalize componentName}}({ref, ...props});
+  const {Component, domRef, children, styles, ...otherProps} =  use{{capitalize componentName}}({...props, ref});
 
   return (
     <Component ref={domRef} className={styles} {...otherProps}>