diff --git a/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx b/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx
index e72d3d1dd..586bca10c 100644
--- a/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx
+++ b/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx
@@ -1,5 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
+
+import { type ReactNode } from 'react';
 import { describe, expect, it } from 'vitest';
 import styles from '../../dialog/dialog.module.css';
 import { AlertDialog } from '../alert-dialog';
@@ -17,7 +18,7 @@ const BasicAlertDialog = ({
 }: {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }) => (
   <AlertDialog open={open} onOpenChange={onOpenChange} {...props}>
     <AlertDialog.Trigger>{TRIGGER_TEXT}</AlertDialog.Trigger>
diff --git a/packages/raystack/components/command/command.tsx b/packages/raystack/components/command/command.tsx
index 203e11dd1..cd2001448 100644
--- a/packages/raystack/components/command/command.tsx
+++ b/packages/raystack/components/command/command.tsx
@@ -1,10 +1,10 @@
 'use client';
 
+import { Dialog as DialogPrimitive } from '@base-ui/react';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { Command as CommandPrimitive } from 'cmdk';
-import { Dialog as DialogPrimitive } from 'radix-ui';
-import React from 'react';
+import { type ComponentProps, ReactNode } from 'react';
 
 import { Dialog } from '../dialog';
 import { Flex } from '../flex';
@@ -14,12 +14,14 @@ const command = cva(styles.command);
 function CommandRoot({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
+}: ComponentProps<typeof CommandPrimitive>) {
   return <CommandPrimitive className={command({ className })} {...props} />;
 }
 CommandRoot.displayName = 'Command';
 
-interface CommandDialogProps extends DialogPrimitive.DialogProps {}
+interface CommandDialogProps extends DialogPrimitive.Root.Props {
+  children: ReactNode;
+}
 
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
@@ -30,12 +32,13 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
     </Dialog>
   );
 };
+CommandDialog.displayName = 'Command.Dialog';
 
 const input = cva(styles.input);
 function CommandInput({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+}: ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <Flex
       align='center'
@@ -59,15 +62,13 @@ const list = cva(styles.list);
 function CommandList({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
+}: ComponentProps<typeof CommandPrimitive.List>) {
   return <CommandPrimitive.List className={list({ className })} {...props} />;
 }
 
 CommandList.displayName = 'Command.List';
 
-function CommandEmpty(
-  props: React.ComponentProps<typeof CommandPrimitive.Empty>
-) {
+function CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {
   return <CommandPrimitive.Empty className={styles.empty} {...props} />;
 }
 
@@ -77,7 +78,7 @@ const group = cva(styles.group);
 function CommandGroup({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+}: ComponentProps<typeof CommandPrimitive.Group>) {
   return <CommandPrimitive.Group className={group({ className })} {...props} />;
 }
 
@@ -87,7 +88,7 @@ const separator = cva(styles.separator);
 function CommandSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+}: ComponentProps<typeof CommandPrimitive.Separator>) {
   return (
     <CommandPrimitive.Separator
       className={separator({ className })}
@@ -101,22 +102,19 @@ const item = cva(styles.item);
 function CommandItem({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+}: ComponentProps<typeof CommandPrimitive.Item>) {
   return <CommandPrimitive.Item className={item({ className })} {...props} />;
 }
 
 CommandItem.displayName = 'Command.Item';
 
 const shortcut = cva(styles.shortcut);
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const CommandShortcut = ({ className, ...props }: ComponentProps<'span'>) => {
   return <span className={shortcut({ className })} {...props} />;
 };
 CommandShortcut.displayName = 'Command.Shortcut';
 
-export const Command: any = Object.assign(CommandRoot, {
+export const Command = Object.assign(CommandRoot, {
   Dialog: CommandDialog,
   Input: CommandInput,
   List: CommandList,
diff --git a/packages/raystack/components/container/container.tsx b/packages/raystack/components/container/container.tsx
index 70b528c34..c98ddce05 100644
--- a/packages/raystack/components/container/container.tsx
+++ b/packages/raystack/components/container/container.tsx
@@ -1,5 +1,5 @@
 import { cva, VariantProps } from 'class-variance-authority';
-import { ComponentProps, HTMLAttributes, PropsWithChildren } from 'react';
+import { ComponentProps } from 'react';
 
 import styles from './container.module.css';
 
diff --git a/packages/raystack/components/context-menu/context-menu-misc.tsx b/packages/raystack/components/context-menu/context-menu-misc.tsx
index e92e80034..029cac32b 100644
--- a/packages/raystack/components/context-menu/context-menu-misc.tsx
+++ b/packages/raystack/components/context-menu/context-menu-misc.tsx
@@ -2,7 +2,7 @@
 
 import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { ComponentProps, Fragment, HTMLAttributes, ReactNode } from 'react';
+import { ComponentProps, Fragment } from 'react';
 import styles from '../menu/menu.module.css';
 import { useMenuContext } from '../menu/menu-root';
 
@@ -49,7 +49,7 @@ ContextMenuLabel.displayName = 'ContextMenu.Label';
 export const ContextMenuSeparator = ({
   className,
   ...props
-}: HTMLAttributes<HTMLDivElement>) => {
+}: ComponentProps<'div'>) => {
   const { shouldFilter } = useMenuContext();
 
   if (shouldFilter) {
diff --git a/packages/raystack/components/dialog/__tests__/dialog.test.tsx b/packages/raystack/components/dialog/__tests__/dialog.test.tsx
index 893707000..01663f585 100644
--- a/packages/raystack/components/dialog/__tests__/dialog.test.tsx
+++ b/packages/raystack/components/dialog/__tests__/dialog.test.tsx
@@ -1,5 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
+
+import { type ReactNode } from 'react';
 import { describe, expect, it } from 'vitest';
 import { Dialog } from '../dialog';
 import styles from '../dialog.module.css';
@@ -17,7 +18,7 @@ const BasicDialog = ({
 }: {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }) => (
   <Dialog open={open} onOpenChange={onOpenChange} {...props}>
     <Dialog.Trigger>{TRIGGER_TEXT}</Dialog.Trigger>
diff --git a/packages/raystack/components/drawer/__tests__/drawer.test.tsx b/packages/raystack/components/drawer/__tests__/drawer.test.tsx
index c7d575212..00f6877bf 100644
--- a/packages/raystack/components/drawer/__tests__/drawer.test.tsx
+++ b/packages/raystack/components/drawer/__tests__/drawer.test.tsx
@@ -1,6 +1,7 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+
+import { type ReactElement } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { Button } from '~/components/button';
 import { Drawer } from '../drawer';
@@ -33,7 +34,7 @@ const BasicDrawer = ({
   </Drawer>
 );
 
-async function renderAndOpenDrawer(DrawerElement: React.ReactElement) {
+async function renderAndOpenDrawer(DrawerElement: ReactElement) {
   fireEvent.click(render(DrawerElement).getByText(TRIGGER_TEXT));
 }
 
diff --git a/packages/raystack/components/number-field/number-field.tsx b/packages/raystack/components/number-field/number-field.tsx
index 4f14846ac..f43bd6d0d 100644
--- a/packages/raystack/components/number-field/number-field.tsx
+++ b/packages/raystack/components/number-field/number-field.tsx
@@ -3,30 +3,24 @@
 import { NumberField as NumberFieldPrimitive } from '@base-ui/react';
 import { MinusIcon, PlusIcon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
-import {
-  createContext,
-  ElementRef,
-  forwardRef,
-  type ReactNode,
-  useContext,
-  useId
-} from 'react';
+import { type ComponentProps, createContext, useContext, useId } from 'react';
 import { Label } from '../label';
 import styles from './number-field.module.css';
 
 const NumberFieldContext = createContext<{ fieldId: string } | null>(null);
 
-const NumberFieldRoot = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.Root>,
-  NumberFieldPrimitive.Root.Props & { children?: ReactNode }
->(({ className, children, id, ...props }, ref) => {
+function NumberFieldRoot({
+  className,
+  children,
+  id,
+  ...props
+}: NumberFieldPrimitive.Root.Props) {
   const generatedId = useId();
   const fieldId = id ?? generatedId;
 
   return (
-    <NumberFieldContext.Provider value={{ fieldId }}>
+    <NumberFieldContext value={{ fieldId }}>
       <NumberFieldPrimitive.Root
-        ref={ref}
         className={cx(styles.root, className)}
         id={fieldId}
         {...props}
@@ -39,61 +33,67 @@ const NumberFieldRoot = forwardRef<
           </NumberFieldPrimitive.Group>
         )}
       </NumberFieldPrimitive.Root>
-    </NumberFieldContext.Provider>
+    </NumberFieldContext>
   );
-});
+}
 NumberFieldRoot.displayName = 'NumberField';
 
-const NumberFieldGroup = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.Group>,
-  NumberFieldPrimitive.Group.Props
->(({ className, ...props }, ref) => (
-  <NumberFieldPrimitive.Group
-    ref={ref}
-    className={cx(styles.group, className)}
-    {...props}
-  />
-));
+function NumberFieldGroup({
+  className,
+  ...props
+}: NumberFieldPrimitive.Group.Props) {
+  return (
+    <NumberFieldPrimitive.Group
+      className={cx(styles.group, className)}
+      {...props}
+    />
+  );
+}
 NumberFieldGroup.displayName = 'NumberField.Group';
 
-const NumberFieldInput = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.Input>,
-  NumberFieldPrimitive.Input.Props
->(({ className, ...props }, ref) => (
-  <NumberFieldPrimitive.Input
-    ref={ref}
-    className={cx(styles.input, className)}
-    {...props}
-  />
-));
+function NumberFieldInput({
+  className,
+  ...props
+}: NumberFieldPrimitive.Input.Props) {
+  return (
+    <NumberFieldPrimitive.Input
+      className={cx(styles.input, className)}
+      {...props}
+    />
+  );
+}
 NumberFieldInput.displayName = 'NumberField.Input';
 
-const NumberFieldDecrement = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.Decrement>,
-  NumberFieldPrimitive.Decrement.Props
->(({ className, children, ...props }, ref) => (
-  <NumberFieldPrimitive.Decrement
-    ref={ref}
-    className={cx(styles.decrement, className)}
-    {...props}
-  >
-    {children ?? <MinusIcon width={12} height={12} />}
-  </NumberFieldPrimitive.Decrement>
-));
+function NumberFieldDecrement({
+  className,
+  children,
+  ...props
+}: NumberFieldPrimitive.Decrement.Props) {
+  return (
+    <NumberFieldPrimitive.Decrement
+      className={cx(styles.decrement, className)}
+      {...props}
+    >
+      {children ?? <MinusIcon width={12} height={12} />}
+    </NumberFieldPrimitive.Decrement>
+  );
+}
 NumberFieldDecrement.displayName = 'NumberField.Decrement';
 
-const NumberFieldIncrement = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.Increment>,
-  NumberFieldPrimitive.Increment.Props
->(({ className, children, ...props }, ref) => (
-  <NumberFieldPrimitive.Increment
-    ref={ref}
-    className={cx(styles.increment, className)}
-    {...props}
-  >
-    {children ?? <PlusIcon width={12} height={12} />}
-  </NumberFieldPrimitive.Increment>
-));
+function NumberFieldIncrement({
+  className,
+  children,
+  ...props
+}: NumberFieldPrimitive.Increment.Props) {
+  return (
+    <NumberFieldPrimitive.Increment
+      className={cx(styles.increment, className)}
+      {...props}
+    >
+      {children ?? <PlusIcon width={12} height={12} />}
+    </NumberFieldPrimitive.Increment>
+  );
+}
 NumberFieldIncrement.displayName = 'NumberField.Increment';
 
 export interface NumberFieldScrubAreaProps
@@ -101,15 +101,15 @@ export interface NumberFieldScrubAreaProps
   label: string;
 }
 
-const NumberFieldScrubArea = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.ScrubArea>,
-  NumberFieldScrubAreaProps
->(({ className, label, ...props }, ref) => {
+function NumberFieldScrubArea({
+  className,
+  label,
+  ...props
+}: NumberFieldScrubAreaProps) {
   const context = useContext(NumberFieldContext);
 
   return (
     <NumberFieldPrimitive.ScrubArea
-      ref={ref}
       className={cx(styles['scrub-area'], className)}
       {...props}
     >
@@ -123,10 +123,10 @@ const NumberFieldScrubArea = forwardRef<
       </NumberFieldPrimitive.ScrubAreaCursor>
     </NumberFieldPrimitive.ScrubArea>
   );
-});
+}
 NumberFieldScrubArea.displayName = 'NumberField.ScrubArea';
 
-function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
+function CursorGrowIcon(props: ComponentProps<'svg'>) {
   return (
     <svg
       aria-hidden='true'
diff --git a/packages/raystack/components/popover/__tests__/popover.test.tsx b/packages/raystack/components/popover/__tests__/popover.test.tsx
index e0a43f19a..3a1cce930 100644
--- a/packages/raystack/components/popover/__tests__/popover.test.tsx
+++ b/packages/raystack/components/popover/__tests__/popover.test.tsx
@@ -1,7 +1,8 @@
 import { Popover as PopoverPrimitive } from '@base-ui/react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+
+import { type ReactElement } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { Button } from '~/components/button';
 import { Popover } from '../popover';
@@ -22,7 +23,7 @@ const BasicPopover = ({
   </Popover>
 );
 
-async function renderAndOpenPopover(PopoverElement: React.ReactElement) {
+async function renderAndOpenPopover(PopoverElement: ReactElement) {
   fireEvent.click(render(PopoverElement).getByText(TRIGGER_TEXT));
 }
 
diff --git a/packages/raystack/components/switch/__tests__/switch.test.tsx b/packages/raystack/components/switch/__tests__/switch.test.tsx
index 51980567a..73265f919 100644
--- a/packages/raystack/components/switch/__tests__/switch.test.tsx
+++ b/packages/raystack/components/switch/__tests__/switch.test.tsx
@@ -1,6 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+
+import { useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { Switch } from '../switch';
 import styles from '../switch.module.css';
@@ -177,7 +178,7 @@ describe('Switch', () => {
   describe('Controlled vs Uncontrolled', () => {
     it('works as controlled component', () => {
       const Component = () => {
-        const [checked, setChecked] = React.useState(false);
+        const [checked, setChecked] = useState(false);
         return (
           <Switch
             checked={checked}
diff --git a/packages/raystack/components/tabs/__tests__/tabs.test.tsx b/packages/raystack/components/tabs/__tests__/tabs.test.tsx
index 10552d848..93f0e947f 100644
--- a/packages/raystack/components/tabs/__tests__/tabs.test.tsx
+++ b/packages/raystack/components/tabs/__tests__/tabs.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentProps } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { Tabs } from '../tabs';
 import styles from '../tabs.module.css';
@@ -11,7 +11,7 @@ const CONTENT_1_TEXT = 'Content 1';
 const CONTENT_2_TEXT = 'Content 2';
 const CUSTOM_ARIA_LABEL = 'Navigation tabs';
 
-type TabsProps = ComponentPropsWithoutRef<typeof Tabs>;
+type TabsProps = ComponentProps<typeof Tabs>;
 
 const BasicTabs = ({
   defaultValue = 'tab1',
diff --git a/packages/raystack/components/toggle/toggle.tsx b/packages/raystack/components/toggle/toggle.tsx
index b5caf0346..e508627e3 100644
--- a/packages/raystack/components/toggle/toggle.tsx
+++ b/packages/raystack/components/toggle/toggle.tsx
@@ -3,7 +3,6 @@
 import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
 import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
 import { cva, cx, type VariantProps } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
 
 import styles from './toggle.module.css';
 
@@ -27,30 +26,21 @@ export interface ToggleProps
   size?: 1 | 2 | 3 | 4;
 }
 
-const ToggleRoot = forwardRef<ElementRef<typeof TogglePrimitive>, ToggleProps>(
-  ({ className, children, size, ...props }, ref) => (
-    <TogglePrimitive
-      ref={ref}
-      className={toggleVariants({ size, className })}
-      {...props}
-    >
+function ToggleRoot({ className, children, size, ...props }: ToggleProps) {
+  return (
+    <TogglePrimitive className={toggleVariants({ size, className })} {...props}>
       <span className={styles.toggleContent}>{children}</span>
     </TogglePrimitive>
-  )
-);
+  );
+}
 
 ToggleRoot.displayName = 'Toggle';
 
-const ToggleGroup = forwardRef<
-  ElementRef<typeof ToggleGroupPrimitive>,
-  ToggleGroupPrimitive.Props
->(({ className, ...props }, ref) => (
-  <ToggleGroupPrimitive
-    ref={ref}
-    className={cx(styles.group, className)}
-    {...props}
-  />
-));
+function ToggleGroup({ className, ...props }: ToggleGroupPrimitive.Props) {
+  return (
+    <ToggleGroupPrimitive className={cx(styles.group, className)} {...props} />
+  );
+}
 
 ToggleGroup.displayName = 'Toggle.Group';
 
diff --git a/packages/raystack/components/toolbar/toolbar.tsx b/packages/raystack/components/toolbar/toolbar.tsx
index e38aa9dab..2dc5b7bae 100644
--- a/packages/raystack/components/toolbar/toolbar.tsx
+++ b/packages/raystack/components/toolbar/toolbar.tsx
@@ -2,56 +2,43 @@
 
 import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';
 import { cx } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
 import { Button } from '../button';
 import styles from './toolbar.module.css';
 
-const ToolbarRoot = forwardRef<
-  ElementRef<typeof ToolbarPrimitive.Root>,
-  ToolbarPrimitive.Root.Props
->(({ className, ...props }, ref) => (
-  <ToolbarPrimitive.Root
-    ref={ref}
-    className={cx(styles.root, className)}
-    {...props}
-  />
-));
+const ToolbarRoot = ({ className, ...props }: ToolbarPrimitive.Root.Props) => (
+  <ToolbarPrimitive.Root className={cx(styles.root, className)} {...props} />
+);
 ToolbarRoot.displayName = 'Toolbar';
 
-const ToolbarButton = forwardRef<
-  ElementRef<typeof ToolbarPrimitive.Button>,
-  ToolbarPrimitive.Button.Props
->((props, ref) => (
+const ToolbarButton = ({
+  className,
+  ...props
+}: ToolbarPrimitive.Button.Props) => (
   <ToolbarPrimitive.Button
-    ref={ref}
+    className={cx(styles.button, className)}
     render={<Button variant='text' color='neutral' size='small' />}
     {...props}
   />
-));
+);
 ToolbarButton.displayName = 'Toolbar.Button';
 
-const ToolbarGroup = forwardRef<
-  ElementRef<typeof ToolbarPrimitive.Group>,
-  ToolbarPrimitive.Group.Props
->(({ className, ...props }, ref) => (
-  <ToolbarPrimitive.Group
-    ref={ref}
-    className={cx(styles.group, className)}
-    {...props}
-  />
-));
+const ToolbarGroup = ({
+  className,
+  ...props
+}: ToolbarPrimitive.Group.Props) => (
+  <ToolbarPrimitive.Group className={cx(styles.group, className)} {...props} />
+);
 ToolbarGroup.displayName = 'Toolbar.Group';
 
-const ToolbarSeparator = forwardRef<
-  ElementRef<typeof ToolbarPrimitive.Separator>,
-  ToolbarPrimitive.Separator.Props
->(({ className, ...props }, ref) => (
+const ToolbarSeparator = ({
+  className,
+  ...props
+}: ToolbarPrimitive.Separator.Props) => (
   <ToolbarPrimitive.Separator
-    ref={ref}
     className={cx(styles.separator, className)}
     {...props}
   />
-));
+);
 ToolbarSeparator.displayName = 'Toolbar.Separator';
 
 export const Toolbar = Object.assign(ToolbarRoot, {
diff --git a/packages/raystack/components/tooltip/tooltip-content.tsx b/packages/raystack/components/tooltip/tooltip-content.tsx
index 2e613348a..557648253 100644
--- a/packages/raystack/components/tooltip/tooltip-content.tsx
+++ b/packages/raystack/components/tooltip/tooltip-content.tsx
@@ -2,14 +2,13 @@
 
 import { Tooltip as TooltipPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
 import { Text } from '../text';
 import styles from './tooltip.module.css';
 
 export interface TooltipContentProps
   extends Omit<
       TooltipPrimitive.Positioner.Props,
-      'className' | 'style' | 'render'
+      'className' | 'style' | 'render' | 'ref'
     >,
     TooltipPrimitive.Popup.Props {
   /**
@@ -19,58 +18,51 @@ export interface TooltipContentProps
   showArrow?: boolean;
 }
 
-export const TooltipContent = forwardRef<
-  ElementRef<typeof TooltipPrimitive.Popup>,
-  TooltipContentProps
->(
-  (
-    {
-      className,
-      children,
-      showArrow = false,
-      style,
-      render,
-      ...positionerProps
-    },
-    ref
-  ) => {
-    return (
-      <TooltipPrimitive.Portal>
-        <TooltipPrimitive.Positioner
-          side='top'
-          align='center'
-          sideOffset={showArrow ? 10 : 4}
-          className={styles.positioner}
-          {...positionerProps}
+export function TooltipContent({
+  ref,
+  className,
+  children,
+  showArrow = false,
+  style,
+  render,
+  ...positionerProps
+}: TooltipContentProps) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        side='top'
+        align='center'
+        sideOffset={showArrow ? 10 : 4}
+        className={styles.positioner}
+        {...positionerProps}
+      >
+        <TooltipPrimitive.Popup
+          ref={ref}
+          className={cx(styles.content, className)}
+          style={style}
+          render={render}
         >
-          <TooltipPrimitive.Popup
-            ref={ref}
-            className={cx(styles.content, className)}
-            style={style}
-            render={render}
-          >
-            {typeof children === 'string' ? <Text>{children}</Text> : children}
-            {showArrow && (
-              <TooltipPrimitive.Arrow className={styles.arrow}>
-                <svg
-                  xmlns='http://www.w3.org/2000/svg'
-                  width='6'
-                  height='7'
-                  viewBox='0 0 6 7'
-                  fill='none'
-                >
-                  <path
-                    d='M2.90809 6.78553L0 0H6L3.09191 6.78553C3.05728 6.86634 2.94272 6.86634 2.90809 6.78553Z'
-                    fill='currentColor'
-                  />
-                </svg>
-              </TooltipPrimitive.Arrow>
-            )}
-          </TooltipPrimitive.Popup>
-        </TooltipPrimitive.Positioner>
-      </TooltipPrimitive.Portal>
-    );
-  }
-);
+          {typeof children === 'string' ? <Text>{children}</Text> : children}
+          {showArrow && (
+            <TooltipPrimitive.Arrow className={styles.arrow}>
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                width='6'
+                height='7'
+                viewBox='0 0 6 7'
+                fill='none'
+              >
+                <path
+                  d='M2.90809 6.78553L0 0H6L3.09191 6.78553C3.05728 6.86634 2.94272 6.86634 2.90809 6.78553Z'
+                  fill='currentColor'
+                />
+              </svg>
+            </TooltipPrimitive.Arrow>
+          )}
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
 
 TooltipContent.displayName = 'Tooltip.Content';
diff --git a/packages/raystack/components/tooltip/tooltip-misc.tsx b/packages/raystack/components/tooltip/tooltip-misc.tsx
index e273e0f2b..5f17f9839 100644
--- a/packages/raystack/components/tooltip/tooltip-misc.tsx
+++ b/packages/raystack/components/tooltip/tooltip-misc.tsx
@@ -1,16 +1,12 @@
 'use client';
 
 import { Tooltip as TooltipPrimitive } from '@base-ui/react';
-import { forwardRef } from 'react';
 
 export interface TooltipTriggerProps extends TooltipPrimitive.Trigger.Props {}
 
-export const TooltipTrigger = forwardRef<
-  HTMLButtonElement,
-  TooltipPrimitive.Trigger.Props
->((props, ref) => {
-  return <TooltipPrimitive.Trigger ref={ref} delay={200} {...props} />;
-});
+export function TooltipTrigger(props: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger delay={200} {...props} />;
+}
 
 TooltipTrigger.displayName = 'Tooltip.Trigger';
 
diff --git a/packages/raystack/package.json b/packages/raystack/package.json
index 50c6ffd5e..36f01acd5 100644
--- a/packages/raystack/package.json
+++ b/packages/raystack/package.json
@@ -128,9 +128,9 @@
     "react-day-picker": "^9.6.7"
   },
   "peerDependencies": {
-    "@types/react": "^18 || ^19",
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
+    "@types/react": "^19",
+    "react": "^19",
+    "react-dom": "^19"
   },
   "peerDependenciesMeta": {
     "@types/react": {