diff --git a/packages/raystack/components/image/image.tsx b/packages/raystack/components/image/image.tsx
index 57b5c04b9..ae9e5cff9 100644
--- a/packages/raystack/components/image/image.tsx
+++ b/packages/raystack/components/image/image.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { type VariantProps, cva } from 'class-variance-authority';
-import { ImgHTMLAttributes } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ComponentProps, SyntheticEvent } from 'react';
 
 import styles from './image.module.css';
 
@@ -25,12 +25,8 @@ const image = cva(styles.image, {
   }
 });
 
-interface ImageProps
-  extends ImgHTMLAttributes<HTMLImageElement>,
-    VariantProps<typeof image> {
+interface ImageProps extends ComponentProps<'img'>, VariantProps<typeof image> {
   fallback?: string;
-  width?: string | number;
-  height?: string | number;
 }
 
 export function Image({
@@ -47,9 +43,7 @@ export function Image({
   decoding = 'async',
   ...props
 }: ImageProps) {
-  const handleError = (
-    event: React.SyntheticEvent<HTMLImageElement, Event>
-  ) => {
+  const handleError = (event: SyntheticEvent<HTMLImageElement, Event>) => {
     if (fallback) {
       event.currentTarget.src = fallback;
     }
diff --git a/packages/raystack/components/indicator/indicator.tsx b/packages/raystack/components/indicator/indicator.tsx
index 8fbc0a660..d78f82688 100644
--- a/packages/raystack/components/indicator/indicator.tsx
+++ b/packages/raystack/components/indicator/indicator.tsx
@@ -1,61 +1,55 @@
-import { cva, VariantProps } from "class-variance-authority";
-import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cva, VariantProps } from 'class-variance-authority';
+import { ComponentProps, ReactNode } from 'react';
 
 import styles from './indicator.module.css';
 
 const indicator = cva(styles.indicator, {
   variants: {
     variant: {
-      accent: styles["indicator-variant-accent"],
-      warning: styles["indicator-variant-warning"],
-      danger: styles["indicator-variant-danger"],
-      success: styles["indicator-variant-success"],
-      neutral: styles["indicator-variant-neutral"],
+      accent: styles['indicator-variant-accent'],
+      warning: styles['indicator-variant-warning'],
+      danger: styles['indicator-variant-danger'],
+      success: styles['indicator-variant-success'],
+      neutral: styles['indicator-variant-neutral']
     }
   },
   defaultVariants: {
-    variant: "accent",
-  },
+    variant: 'accent'
+  }
 });
 
 export interface IndicatorProps
-  extends ComponentPropsWithoutRef<"div">,
+  extends ComponentProps<'div'>,
     VariantProps<typeof indicator> {
   label?: string;
   children?: ReactNode;
-  "aria-label"?: string;
+  'aria-label'?: string;
 }
 
-export const Indicator = ({ 
-  className, 
-  variant, 
-  label, 
-  children, 
-  "aria-label": ariaLabel,
-  ...props 
+export const Indicator = ({
+  className,
+  variant,
+  label,
+  children,
+  'aria-label': ariaLabel,
+  ...props
 }: IndicatorProps) => {
   const accessibilityLabel = ariaLabel || label || `${variant} indicator`;
 
   return (
     <div className={styles.wrapper} {...props}>
       {children}
-      <div 
+      <div
         className={indicator({ variant, className })}
-        role="status"
+        role='status'
         aria-label={accessibilityLabel}
       >
         {label ? (
-          <span 
-            className={styles.label} 
-            data-length={label.length.toString()}
-          >
+          <span className={styles.label} data-length={label.length.toString()}>
             {label}
           </span>
         ) : (
-          <span 
-            className={styles.dot} 
-            aria-hidden="true" 
-          />
+          <span className={styles.dot} aria-hidden='true' />
         )}
       </div>
     </div>
diff --git a/packages/raystack/components/input-field/input-field.tsx b/packages/raystack/components/input-field/input-field.tsx
index d5b5847b3..026c29931 100644
--- a/packages/raystack/components/input-field/input-field.tsx
+++ b/packages/raystack/components/input-field/input-field.tsx
@@ -2,12 +2,7 @@
 
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { cva, cx, type VariantProps } from 'class-variance-authority';
-import {
-  ComponentPropsWithoutRef,
-  forwardRef,
-  ReactNode,
-  RefObject
-} from 'react';
+import { ComponentProps, ReactNode, RefObject } from 'react';
 import { Chip } from '../chip';
 import { Tooltip } from '../tooltip';
 import styles from './input-field.module.css';
@@ -32,7 +27,7 @@ const inputWrapper = cva(styles.inputWrapper, {
 });
 
 export interface InputFieldProps
-  extends Omit<ComponentPropsWithoutRef<'input'>, 'error' | 'size'>,
+  extends Omit<ComponentProps<'input'>, 'error' | 'size'>,
     VariantProps<typeof inputWrapper> {
   label?: string;
   helperText?: string;
@@ -51,124 +46,118 @@ export interface InputFieldProps
   containerRef?: RefObject<HTMLDivElement | null>;
 }
 
-export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
-  (
-    {
-      className,
-      disabled,
-      label,
-      helperText,
-      placeholder,
-      error,
-      leadingIcon,
-      trailingIcon,
-      optional,
-      prefix,
-      suffix,
-      width,
-      chips,
-      maxChipsVisible = 2,
-      size,
-      infoTooltip,
-      variant = 'default',
-      containerRef,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <div className={styles.container} style={{ width: width || '100%' }}>
-        {label && (
-          <div className={styles.labelContainer}>
-            <label
-              className={cx(styles.label, disabled && styles['label-disabled'])}
-            >
-              {label}
-              {optional && <span className={styles.optional}>(optional)</span>}
-            </label>
-            {infoTooltip && (
-              <Tooltip>
-                <Tooltip.Trigger
-                  render={
-                    <span className={styles.helpIcon}>
-                      <InfoCircledIcon />
-                    </span>
-                  }
-                />
-                <Tooltip.Content side='right'>{infoTooltip}</Tooltip.Content>
-              </Tooltip>
-            )}
-          </div>
-        )}
-        <div
-          className={cx(
-            inputWrapper({ size, variant, className }),
-            error && styles['input-error-wrapper'],
-            disabled && styles['input-disabled-wrapper'],
-            chips?.length && styles['has-chips']
-          )}
-          ref={containerRef}
-        >
-          {leadingIcon && (
-            <div className={styles['leading-icon']}>{leadingIcon}</div>
+export function InputField({
+  className,
+  disabled,
+  label,
+  helperText,
+  placeholder,
+  error,
+  leadingIcon,
+  trailingIcon,
+  optional,
+  prefix,
+  suffix,
+  width,
+  chips,
+  maxChipsVisible = 2,
+  size,
+  infoTooltip,
+  variant = 'default',
+  containerRef,
+  ...props
+}: InputFieldProps) {
+  return (
+    <div className={styles.container} style={{ width: width || '100%' }}>
+      {label && (
+        <div className={styles.labelContainer}>
+          <label
+            className={cx(styles.label, disabled && styles['label-disabled'])}
+          >
+            {label}
+            {optional && <span className={styles.optional}>(optional)</span>}
+          </label>
+          {infoTooltip && (
+            <Tooltip>
+              <Tooltip.Trigger
+                render={
+                  <span className={styles.helpIcon}>
+                    <InfoCircledIcon />
+                  </span>
+                }
+              />
+              <Tooltip.Content side='right'>{infoTooltip}</Tooltip.Content>
+            </Tooltip>
           )}
-          {prefix && <div className={styles.prefix}>{prefix}</div>}
-
-          <div className={styles['chip-input-container']}>
-            {chips?.slice(0, maxChipsVisible).map((chip, index) => (
-              <Chip
-                key={index}
-                variant='outline'
-                isDismissible={!!chip.onRemove}
-                onDismiss={chip.onRemove}
-                className={styles.chip}
-              >
-                {chip.label}
-              </Chip>
-            ))}
-            {chips && chips.length > maxChipsVisible && (
-              <span className={styles['chip-overflow']}>
-                +{chips.length - maxChipsVisible}
-              </span>
-            )}
-            <input
-              ref={ref}
-              className={cx(
-                styles['input-field'],
-                leadingIcon && styles['has-leading-icon'],
-                trailingIcon && styles['has-trailing-icon'],
-                prefix && styles['has-prefix'],
-                suffix && styles['has-suffix'],
-                error && styles['input-error'],
-                disabled && styles['input-disabled'],
-                className
-              )}
-              aria-invalid={!!error}
-              placeholder={placeholder}
-              disabled={disabled}
-              {...props}
-            />
-          </div>
+        </div>
+      )}
+      <div
+        className={cx(
+          inputWrapper({ size, variant, className }),
+          error && styles['input-error-wrapper'],
+          disabled && styles['input-disabled-wrapper'],
+          chips?.length && styles['has-chips']
+        )}
+        ref={containerRef}
+      >
+        {leadingIcon && (
+          <div className={styles['leading-icon']}>{leadingIcon}</div>
+        )}
+        {prefix && <div className={styles.prefix}>{prefix}</div>}
 
-          {suffix && <div className={styles.suffix}>{suffix}</div>}
-          {trailingIcon && (
-            <div className={styles['trailing-icon']}>{trailingIcon}</div>
+        <div className={styles['chip-input-container']}>
+          {chips?.slice(0, maxChipsVisible).map((chip, index) => (
+            <Chip
+              key={index}
+              variant='outline'
+              isDismissible={!!chip.onRemove}
+              onDismiss={chip.onRemove}
+              className={styles.chip}
+            >
+              {chip.label}
+            </Chip>
+          ))}
+          {chips && chips.length > maxChipsVisible && (
+            <span className={styles['chip-overflow']}>
+              +{chips.length - maxChipsVisible}
+            </span>
           )}
-        </div>
-        {(error || helperText) && (
-          <span
+          <input
             className={cx(
-              styles['helper-text'],
-              error && styles['helper-text-error'],
-              disabled && styles['helper-text-disabled']
+              styles['input-field'],
+              leadingIcon && styles['has-leading-icon'],
+              trailingIcon && styles['has-trailing-icon'],
+              prefix && styles['has-prefix'],
+              suffix && styles['has-suffix'],
+              error && styles['input-error'],
+              disabled && styles['input-disabled'],
+              className
             )}
-          >
-            {error || helperText}
-          </span>
+            aria-invalid={!!error}
+            placeholder={placeholder}
+            disabled={disabled}
+            {...props}
+          />
+        </div>
+
+        {suffix && <div className={styles.suffix}>{suffix}</div>}
+        {trailingIcon && (
+          <div className={styles['trailing-icon']}>{trailingIcon}</div>
         )}
       </div>
-    );
-  }
-);
+      {(error || helperText) && (
+        <span
+          className={cx(
+            styles['helper-text'],
+            error && styles['helper-text-error'],
+            disabled && styles['helper-text-disabled']
+          )}
+        >
+          {error || helperText}
+        </span>
+      )}
+    </div>
+  );
+}
 
 InputField.displayName = 'InputField';
diff --git a/packages/raystack/components/label/label.tsx b/packages/raystack/components/label/label.tsx
index 40c8e59eb..e50f36959 100644
--- a/packages/raystack/components/label/label.tsx
+++ b/packages/raystack/components/label/label.tsx
@@ -1,40 +1,41 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { HTMLAttributes, PropsWithChildren } from "react";
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ComponentProps, PropsWithChildren } from 'react';
 
-import styles from "./label.module.css";
+import styles from './label.module.css';
 
 const label = cva(styles.label, {
   variants: {
     size: {
-      small: styles["label-small"],
-      medium: styles["label-medium"],
-      large: styles["label-large"],
+      small: styles['label-small'],
+      medium: styles['label-medium'],
+      large: styles['label-large']
     },
     required: {
-      true: styles["label-required"],
+      true: styles['label-required']
     }
   },
   defaultVariants: {
-    size: "small",
-    required: false,
-  },
+    size: 'small',
+    required: false
+  }
 });
 
-interface LabelProps extends PropsWithChildren<VariantProps<typeof label>>, 
-  Omit<HTMLAttributes<HTMLLabelElement>, 'required'> {
+interface LabelProps
+  extends PropsWithChildren<VariantProps<typeof label>>,
+    Omit<ComponentProps<'label'>, 'required'> {
   required?: boolean;
   requiredIndicator?: string;
   htmlFor?: string;
 }
 
-export function Label({ 
-  children, 
-  className, 
-  size, 
-  required, 
-  requiredIndicator = "*",
+export function Label({
+  children,
+  className,
+  size,
+  required,
+  requiredIndicator = '*',
   htmlFor,
-  ...props 
+  ...props
 }: LabelProps) {
   return (
     <label
@@ -44,10 +45,10 @@ export function Label({
     >
       {children}
       {required && (
-        <span 
-          className={styles["required-indicator"]} 
-          aria-hidden="true"
-          role="presentation"
+        <span
+          className={styles['required-indicator']}
+          aria-hidden='true'
+          role='presentation'
         >
           {requiredIndicator}
         </span>
@@ -56,4 +57,6 @@ export function Label({
   );
 }
 
-export type { LabelProps }; 
\ No newline at end of file
+Label.displayName = 'Label';
+
+export type { LabelProps };
diff --git a/packages/raystack/components/link/link.tsx b/packages/raystack/components/link/link.tsx
index 37e94204c..95009982b 100644
--- a/packages/raystack/components/link/link.tsx
+++ b/packages/raystack/components/link/link.tsx
@@ -1,59 +1,52 @@
-import { AnchorHTMLAttributes, forwardRef } from "react";
-import { cx } from "class-variance-authority";
-import { Text, type TextBaseProps } from "../text";
-import styles from "./link.module.css";
+import { cx } from 'class-variance-authority';
+import { ComponentProps } from 'react';
+import { Text, type TextBaseProps } from '../text';
+import styles from './link.module.css';
 
-export interface LinkProps
-  extends TextBaseProps,
-    AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface LinkProps extends TextBaseProps, ComponentProps<'a'> {
   href: string;
   external?: boolean;
   download?: boolean | string;
 }
 
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  (
-    {
-      children,
-      className,
-      variant = "accent",
-      size = "small",
-      external,
-      download,
-      ...props
-    },
-    ref,
-  ) => {
-    const externalProps = external
-      ? {
-          target: "_blank",
-          rel: "noopener noreferrer",
-          "aria-label": `${children} (opens in new tab)`,
-        }
-      : {};
+export function Link({
+  children,
+  className,
+  variant = 'accent',
+  size = 'small',
+  external,
+  download,
+  ...props
+}: LinkProps) {
+  const externalProps = external
+    ? {
+        target: '_blank',
+        rel: 'noopener noreferrer',
+        'aria-label': `${children} (opens in new tab)`
+      }
+    : {};
 
-    const downloadProps = download
-      ? {
-          download: typeof download === "string" ? download : true,
-          "aria-label": `${children} (download)`,
-        }
-      : {};
+  const downloadProps = download
+    ? {
+        download: typeof download === 'string' ? download : true,
+        'aria-label': `${children} (download)`
+      }
+    : {};
 
-    return (
-      <Text
-        ref={ref}
-        className={cx(styles.link, className)}
-        variant={variant}
-        size={size}
-        role="link"
-        {...externalProps}
-        {...downloadProps}
-        {...props}
-        as="a">
-        {children}
-      </Text>
-    );
-  },
-);
+  return (
+    <Text
+      className={cx(styles.link, className)}
+      variant={variant}
+      size={size}
+      role='link'
+      {...externalProps}
+      {...downloadProps}
+      {...props}
+      as='a'
+    >
+      {children}
+    </Text>
+  );
+}
 
-Link.displayName = "Link";
+Link.displayName = 'Link';
diff --git a/packages/raystack/components/list/list.tsx b/packages/raystack/components/list/list.tsx
index 8a01174f2..d4fcd6961 100644
--- a/packages/raystack/components/list/list.tsx
+++ b/packages/raystack/components/list/list.tsx
@@ -1,5 +1,5 @@
-import { type VariantProps, cva } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ComponentProps, ReactNode } from 'react';
 
 import styles from './list.module.css';
 
@@ -11,26 +11,26 @@ const header = cva(styles.header);
 const headerText = cva(styles['header-text']);
 
 interface ListRootProps
-  extends ComponentPropsWithoutRef<'ul'>,
+  extends ComponentProps<'ul'>,
     VariantProps<typeof list> {
   children: ReactNode;
   maxWidth?: string | number;
 }
 
-interface ListItemProps extends ComponentPropsWithoutRef<'li'> {
+interface ListItemProps extends ComponentProps<'li'> {
   children: ReactNode;
 }
 
-interface ListLabelProps extends ComponentPropsWithoutRef<'span'> {
+interface ListLabelProps extends ComponentProps<'span'> {
   minWidth?: string;
   children: ReactNode;
 }
 
-interface ListValueProps extends ComponentPropsWithoutRef<'span'> {
+interface ListValueProps extends ComponentProps<'span'> {
   children: ReactNode;
 }
 
-interface ListHeaderProps extends ComponentPropsWithoutRef<'div'> {
+interface ListHeaderProps extends ComponentProps<'div'> {
   children: ReactNode;
 }
 
@@ -102,10 +102,10 @@ const ListHeader = ({ children, className, ...props }: ListHeaderProps) => {
 };
 
 ListRoot.displayName = 'List';
-ListHeader.displayName = 'ListHeader';
-ListItem.displayName = 'ListItem';
-ListLabel.displayName = 'ListLabel';
-ListValue.displayName = 'ListValue';
+ListHeader.displayName = 'List.Header';
+ListItem.displayName = 'List.Item';
+ListLabel.displayName = 'List.Label';
+ListValue.displayName = 'List.Value';
 
 export const List = Object.assign(ListRoot, {
   Header: ListHeader,
diff --git a/packages/raystack/components/menu/cell.tsx b/packages/raystack/components/menu/cell.tsx
index 55652fe87..5ce559aab 100644
--- a/packages/raystack/components/menu/cell.tsx
+++ b/packages/raystack/components/menu/cell.tsx
@@ -1,28 +1,32 @@
 import { cx } from 'class-variance-authority';
-import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import styles from './cell.module.css';
 
 export type CellBaseProps = {
   leadingIcon?: ReactNode;
   trailingIcon?: ReactNode;
 };
-export type CellProps = HTMLAttributes<HTMLDivElement> &
+export type CellProps = ComponentProps<'div'> &
   CellBaseProps & {
     type?: 'select' | 'item';
   };
 
-export const Cell = forwardRef<HTMLDivElement, CellProps>(
-  (
-    { className, children, leadingIcon, trailingIcon, type = 'item', ...props },
-    ref
-  ) => (
-    <div ref={ref} {...props} className={cx(styles.cell, className)}>
+export function Cell({
+  className,
+  children,
+  leadingIcon,
+  trailingIcon,
+  type = 'item',
+  ...props
+}: CellProps) {
+  return (
+    <div {...props} className={cx(styles.cell, className)}>
       {leadingIcon && <span className={styles.leadingIcon}>{leadingIcon}</span>}
       {children}
       {trailingIcon && (
         <span className={styles.trailingIcon}>{trailingIcon}</span>
       )}
     </div>
-  )
-);
+  );
+}
 Cell.displayName = 'Menu.Cell';
diff --git a/packages/raystack/components/menu/menu-content.tsx b/packages/raystack/components/menu/menu-content.tsx
index 0f2505d84..5b508e474 100644
--- a/packages/raystack/components/menu/menu-content.tsx
+++ b/packages/raystack/components/menu/menu-content.tsx
@@ -5,7 +5,7 @@ import {
   Menu as MenuPrimitive
 } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { forwardRef, KeyboardEvent, useCallback, useRef } from 'react';
+import { KeyboardEvent, useCallback, useRef } from 'react';
 import styles from './menu.module.css';
 import { useMenuContext } from './menu-root';
 import {
@@ -24,76 +24,58 @@ export interface MenuContentProps
   searchPlaceholder?: string;
 }
 
-export const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(
-  (
-    {
-      className,
-      children,
-      searchPlaceholder = 'Search...',
-      render,
-      finalFocus,
-      style,
-      sideOffset = 4,
-      align = 'start',
-      onFocus,
-      ...positionerProps
-    },
-    ref
-  ) => {
-    const {
-      autocomplete,
-      inputValue,
-      onInputValueChange,
-      inputRef,
-      isInitialRender,
-      parent
-    } = useMenuContext();
+export function MenuContent({
+  ref,
+  className,
+  children,
+  searchPlaceholder = 'Search...',
+  render,
+  finalFocus,
+  style,
+  sideOffset = 4,
+  align = 'start',
+  onFocus,
+  ...positionerProps
+}: MenuContentProps) {
+  const {
+    autocomplete,
+    inputValue,
+    onInputValueChange,
+    inputRef,
+    isInitialRender,
+    parent
+  } = useMenuContext();
+
+  const focusInput = useCallback(() => {
+    if (document?.activeElement !== inputRef?.current)
+      inputRef?.current?.focus();
+  }, [inputRef]);
+  const highlightedItem = useRef<
+    [index: number, reason: 'keyboard' | 'pointer' | 'none']
+  >([-1, 'none']);
+  const containerRef = useRef<HTMLDivElement>(null);
 
-    const focusInput = useCallback(() => {
-      if (document?.activeElement !== inputRef?.current)
-        inputRef?.current?.focus();
-    }, [inputRef]);
-    const highlightedItem = useRef<
-      [index: number, reason: 'keyboard' | 'pointer' | 'none']
-    >([-1, 'none']);
-    const containerRef = useRef<HTMLDivElement>(null);
+  const highlightFirstItem = useCallback(() => {
+    if (!isInitialRender?.current) return;
+    isInitialRender.current = false;
+    const item = containerRef.current?.querySelector('[role="option"]');
+    if (!item) return;
+    item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));
+  }, [isInitialRender]);
 
-    const highlightFirstItem = useCallback(() => {
-      if (!isInitialRender?.current) return;
-      isInitialRender.current = false;
-      const item = containerRef.current?.querySelector('[role="option"]');
-      if (!item) return;
-      item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));
-    }, [isInitialRender]);
+  const checkAndOpenSubMenu = useCallback(() => {
+    if (highlightedItem.current[0] === -1) return;
+    const items = containerRef.current?.querySelectorAll('[role="option"]');
+    const item = items?.[highlightedItem.current[0]];
+    if (!item || !isElementSubMenuTrigger(item)) return;
+    dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);
+  }, []);
 
-    const checkAndOpenSubMenu = useCallback(() => {
+  const checkAndCloseSubMenu = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
       if (highlightedItem.current[0] === -1) return;
       const items = containerRef.current?.querySelectorAll('[role="option"]');
       const item = items?.[highlightedItem.current[0]];
-      if (!item || !isElementSubMenuTrigger(item)) return;
-      dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);
-    }, []);
-
-    const checkAndCloseSubMenu = useCallback(
-      (e: KeyboardEvent<HTMLInputElement>) => {
-        if (highlightedItem.current[0] === -1) return;
-        const items = containerRef.current?.querySelectorAll('[role="option"]');
-        const item = items?.[highlightedItem.current[0]];
-        if (
-          !item ||
-          !isElementSubMenuTrigger(item) ||
-          !isElementSubMenuOpen(item)
-        )
-          return;
-        dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
-        e.stopPropagation();
-      },
-      []
-    );
-
-    const blurStaleMenuItem = useCallback((index: number) => {
-      const items = containerRef.current?.querySelectorAll('[role="option"]');
-      const item = items?.[index];
       if (
         !item ||
         !isElementSubMenuTrigger(item) ||
@@ -101,97 +83,107 @@ export const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(
       )
         return;
       dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
-      item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));
-    }, []);
+      e.stopPropagation();
+    },
+    []
+  );
+
+  const blurStaleMenuItem = useCallback((index: number) => {
+    const items = containerRef.current?.querySelectorAll('[role="option"]');
+    const item = items?.[index];
+    if (!item || !isElementSubMenuTrigger(item) || !isElementSubMenuOpen(item))
+      return;
+    dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
+    item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));
+  }, []);
 
-    return (
-      <MenuPrimitive.Portal>
-        <MenuPrimitive.Positioner
-          className={styles.positioner}
-          sideOffset={sideOffset}
-          align={align}
-          {...positionerProps}
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className={styles.positioner}
+        sideOffset={sideOffset}
+        align={align}
+        {...positionerProps}
+      >
+        <MenuPrimitive.Popup
+          ref={ref}
+          className={cx(
+            styles.content,
+            autocomplete && styles.comboboxContainer,
+            className
+          )}
+          style={style}
+          render={render}
+          finalFocus={finalFocus}
+          role={autocomplete ? 'dialog' : 'menu'}
+          onFocus={
+            autocomplete || parent?.autocomplete
+              ? e => {
+                  focusInput();
+                  e.stopPropagation();
+                  highlightFirstItem();
+                  onFocus?.(e);
+                }
+              : undefined
+          }
         >
-          <MenuPrimitive.Popup
-            ref={ref}
-            className={cx(
-              styles.content,
-              autocomplete && styles.comboboxContainer,
-              className
-            )}
-            style={style}
-            render={render}
-            finalFocus={finalFocus}
-            role={autocomplete ? 'dialog' : 'menu'}
-            onFocus={
-              autocomplete || parent?.autocomplete
-                ? e => {
-                    focusInput();
-                    e.stopPropagation();
-                    highlightFirstItem();
-                    onFocus?.(e);
-                  }
-                : undefined
-            }
-          >
-            {autocomplete ? (
-              <AutocompletePrimitive.Root
-                inline
-                open
-                value={inputValue}
-                onValueChange={(value: string) => onInputValueChange?.(value)}
-                autoHighlight={!!inputValue?.length}
-                mode='none'
-                loopFocus={false}
-                onItemHighlighted={(value, eventDetails) => {
-                  if (
-                    highlightedItem.current[1] === 'pointer' &&
-                    eventDetails.reason === 'keyboard'
-                  ) {
-                    // focus moved using keyboard after using pointer
-                    blurStaleMenuItem(highlightedItem.current[0]);
-                  }
-                  highlightedItem.current = [
-                    eventDetails.index,
-                    eventDetails.reason
-                  ];
+          {autocomplete ? (
+            <AutocompletePrimitive.Root
+              inline
+              open
+              value={inputValue}
+              onValueChange={(value: string) => onInputValueChange?.(value)}
+              autoHighlight={!!inputValue?.length}
+              mode='none'
+              loopFocus={false}
+              onItemHighlighted={(value, eventDetails) => {
+                if (
+                  highlightedItem.current[1] === 'pointer' &&
+                  eventDetails.reason === 'keyboard'
+                ) {
+                  // focus moved using keyboard after using pointer
+                  blurStaleMenuItem(highlightedItem.current[0]);
+                }
+                highlightedItem.current = [
+                  eventDetails.index,
+                  eventDetails.reason
+                ];
+              }}
+            >
+              <AutocompletePrimitive.Input
+                placeholder={searchPlaceholder}
+                className={styles.comboboxInput}
+                ref={inputRef}
+                onPointerEnter={e => {
+                  focusInput();
+                }}
+                onKeyDown={e => {
+                  if (e.key === 'ArrowLeft') return;
+                  if (e.key === 'Escape') return checkAndCloseSubMenu(e);
+                  if (e.key === 'ArrowRight' || e.key === 'Enter')
+                    checkAndOpenSubMenu();
+                  e.stopPropagation();
                 }}
+                tabIndex={-1}
+              />
+              <AutocompletePrimitive.List
+                className={styles.comboboxContent}
+                ref={containerRef}
               >
-                <AutocompletePrimitive.Input
-                  placeholder={searchPlaceholder}
-                  className={styles.comboboxInput}
-                  ref={inputRef}
-                  onPointerEnter={e => {
-                    focusInput();
-                  }}
-                  onKeyDown={e => {
-                    if (e.key === 'ArrowLeft') return;
-                    if (e.key === 'Escape') return checkAndCloseSubMenu(e);
-                    if (e.key === 'ArrowRight' || e.key === 'Enter')
-                      checkAndOpenSubMenu();
-                    e.stopPropagation();
-                  }}
-                  tabIndex={-1}
-                />
-                <AutocompletePrimitive.List
-                  className={styles.comboboxContent}
-                  ref={containerRef}
-                >
-                  {children}
-                </AutocompletePrimitive.List>
-              </AutocompletePrimitive.Root>
-            ) : (
-              children
-            )}
-          </MenuPrimitive.Popup>
-        </MenuPrimitive.Positioner>
-      </MenuPrimitive.Portal>
-    );
-  }
-);
+                {children}
+              </AutocompletePrimitive.List>
+            </AutocompletePrimitive.Root>
+          ) : (
+            children
+          )}
+        </MenuPrimitive.Popup>
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
 MenuContent.displayName = 'Menu.Content';
 
-export const MenuSubContent = forwardRef<HTMLDivElement, MenuContentProps>(
-  ({ ...props }, ref) => <MenuContent ref={ref} sideOffset={2} {...props} />
-);
-MenuSubContent.displayName = 'Menu.SubContent';
+export function MenuSubContent(props: MenuContentProps) {
+  return <MenuContent sideOffset={2} {...props} />;
+}
+MenuSubContent.displayName = 'Menu.SubmenuContent';
diff --git a/packages/raystack/components/menu/menu-item.tsx b/packages/raystack/components/menu/menu-item.tsx
index 546b66f6c..27c9d011c 100644
--- a/packages/raystack/components/menu/menu-item.tsx
+++ b/packages/raystack/components/menu/menu-item.tsx
@@ -4,7 +4,6 @@ import {
   Autocomplete as AutocompletePrimitive,
   Menu as MenuPrimitive
 } from '@base-ui/react';
-import { forwardRef } from 'react';
 import { Cell, CellBaseProps } from './cell';
 import { useMenuContext } from './menu-root';
 import { getMatch } from './utils';
@@ -13,46 +12,49 @@ export interface MenuItemProps extends MenuPrimitive.Item.Props, CellBaseProps {
   value?: string;
 }
 
-export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
-  ({ children, value, leadingIcon, trailingIcon, render, ...props }, ref) => {
-    const { autocomplete, inputValue, shouldFilter } = useMenuContext();
+export function MenuItem({
+  children,
+  value,
+  leadingIcon,
+  trailingIcon,
+  render,
+  ...props
+}: MenuItemProps) {
+  const { autocomplete, inputValue, shouldFilter } = useMenuContext();
 
-    const cell = render ?? (
-      <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />
-    );
-
-    // In auto mode, hide items that don't match the search value
-    if (shouldFilter && !getMatch(value, children, inputValue)) {
-      return null;
-    }
+  const cell = render ?? (
+    <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />
+  );
 
-    if (autocomplete) {
-      return (
-        <AutocompletePrimitive.Item
-          ref={ref}
-          value={value}
-          render={<MenuPrimitive.Item render={cell} />}
-          {...props}
-        >
-          {children}
-        </AutocompletePrimitive.Item>
-      );
-    }
+  // In auto mode, hide items that don't match the search value
+  if (shouldFilter && !getMatch(value, children, inputValue)) {
+    return null;
+  }
 
+  if (autocomplete) {
     return (
-      <MenuPrimitive.Item
-        ref={ref}
-        render={cell}
+      <AutocompletePrimitive.Item
+        value={value}
+        render={<MenuPrimitive.Item render={cell} />}
         {...props}
-        onFocus={e => {
-          e.stopPropagation();
-          e.preventDefault();
-          e.preventBaseUIHandler();
-        }}
       >
         {children}
-      </MenuPrimitive.Item>
+      </AutocompletePrimitive.Item>
     );
   }
-);
+
+  return (
+    <MenuPrimitive.Item
+      render={cell}
+      {...props}
+      onFocus={e => {
+        e.stopPropagation();
+        e.preventDefault();
+        e.preventBaseUIHandler();
+      }}
+    >
+      {children}
+    </MenuPrimitive.Item>
+  );
+}
 MenuItem.displayName = 'Menu.Item';
diff --git a/packages/raystack/components/menu/menu-misc.tsx b/packages/raystack/components/menu/menu-misc.tsx
index 929f8b80c..1072642b5 100644
--- a/packages/raystack/components/menu/menu-misc.tsx
+++ b/packages/raystack/components/menu/menu-misc.tsx
@@ -2,31 +2,33 @@
 
 import { Menu as MenuPrimitive } from '@base-ui/react/menu';
 import { cx } from 'class-variance-authority';
-import { Fragment, forwardRef, HTMLAttributes, ReactNode } from 'react';
+import { ComponentProps, Fragment, ReactNode } from 'react';
 import styles from './menu.module.css';
 import { useMenuContext } from './menu-root';
 
-export const MenuGroup = forwardRef<HTMLDivElement, MenuPrimitive.Group.Props>(
-  ({ className, children, ...props }, ref) => {
-    const { shouldFilter } = useMenuContext();
-
-    if (shouldFilter) {
-      return <Fragment>{children}</Fragment>;
-    }
+export function MenuGroup({
+  className,
+  children,
+  ...props
+}: MenuPrimitive.Group.Props) {
+  const { shouldFilter } = useMenuContext();
 
-    return (
-      <MenuPrimitive.Group ref={ref} className={cx(className)} {...props}>
-        {children}
-      </MenuPrimitive.Group>
-    );
+  if (shouldFilter) {
+    return <Fragment>{children}</Fragment>;
   }
-);
+
+  return (
+    <MenuPrimitive.Group className={cx(className)} {...props}>
+      {children}
+    </MenuPrimitive.Group>
+  );
+}
 MenuGroup.displayName = 'Menu.Group';
 
-export const MenuLabel = forwardRef<
-  HTMLDivElement,
-  MenuPrimitive.GroupLabel.Props
->(({ className, ...props }, ref) => {
+export function MenuLabel({
+  className,
+  ...props
+}: MenuPrimitive.GroupLabel.Props) {
   const { shouldFilter } = useMenuContext();
 
   if (shouldFilter) {
@@ -35,18 +37,14 @@ export const MenuLabel = forwardRef<
 
   return (
     <MenuPrimitive.GroupLabel
-      ref={ref}
       className={cx(styles.label, className)}
       {...props}
     />
   );
-});
+}
 MenuLabel.displayName = 'Menu.Label';
 
-export const MenuSeparator = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+export function MenuSeparator({ className, ...props }: ComponentProps<'div'>) {
   const { shouldFilter } = useMenuContext();
 
   if (shouldFilter) {
@@ -55,23 +53,23 @@ export const MenuSeparator = forwardRef<
 
   return (
     <div
-      ref={ref}
       role='separator'
       className={cx(styles.separator, className)}
       {...props}
     />
   );
-});
+}
 MenuSeparator.displayName = 'Menu.Separator';
 
-export const MenuEmptyState = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & {
-    children: ReactNode;
-  }
->(({ className, children, ...props }, ref) => (
-  <div ref={ref} className={cx(styles.empty, className)} {...props}>
-    {children}
-  </div>
-));
+export function MenuEmptyState({
+  className,
+  children,
+  ...props
+}: ComponentProps<'div'> & { children: ReactNode }) {
+  return (
+    <div className={cx(styles.empty, className)} {...props}>
+      {children}
+    </div>
+  );
+}
 MenuEmptyState.displayName = 'Menu.EmptyState';
diff --git a/packages/raystack/components/menu/menu-root.tsx b/packages/raystack/components/menu/menu-root.tsx
index 878cce912..3af2ef47e 100644
--- a/packages/raystack/components/menu/menu-root.tsx
+++ b/packages/raystack/components/menu/menu-root.tsx
@@ -135,7 +135,7 @@ export const MenuRoot = ({
     );
 
   return (
-    <MenuContext.Provider
+    <MenuContext
       value={{
         autocomplete,
         inputRef,
@@ -154,7 +154,7 @@ export const MenuRoot = ({
         modal
         {...props}
       />
-    </MenuContext.Provider>
+    </MenuContext>
   );
 };
 MenuRoot.displayName = 'Menu';
@@ -224,7 +224,7 @@ export const MenuSubMenu = ({
     );
 
   return (
-    <MenuContext.Provider
+    <MenuContext
       value={{
         autocomplete,
         inputRef,
@@ -243,7 +243,7 @@ export const MenuSubMenu = ({
         onOpenChange={handleOpenChange}
         {...props}
       />
-    </MenuContext.Provider>
+    </MenuContext>
   );
 };
-MenuSubMenu.displayName = 'Menu.SubMenu';
+MenuSubMenu.displayName = 'Menu.Submenu';
diff --git a/packages/raystack/components/menu/menu-trigger.tsx b/packages/raystack/components/menu/menu-trigger.tsx
index 1c2f6b230..3c8d2f42f 100644
--- a/packages/raystack/components/menu/menu-trigger.tsx
+++ b/packages/raystack/components/menu/menu-trigger.tsx
@@ -2,7 +2,6 @@
 
 import { Autocomplete as AutocompletePrimitive } from '@base-ui/react';
 import { Menu as MenuPrimitive } from '@base-ui/react/menu';
-import { forwardRef } from 'react';
 import { TriangleRightIcon } from '~/icons';
 import { Button } from '../button';
 import { useMenubarContext } from '../menubar/menubar';
@@ -15,33 +14,36 @@ export interface MenuTriggerProps extends MenuPrimitive.Trigger.Props {
   stopPropagation?: boolean;
 }
 
-export const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(
-  ({ children, stopPropagation = true, onClick, render, ...props }, ref) => {
-    const inMenubarContext = useMenubarContext();
-    const menubarRender = inMenubarContext ? (
-      <Button
-        variant='text'
-        color='neutral'
-        size='small'
-        className={`${styles.menuBarTrigger} rs-menu-trigger`}
-      />
-    ) : undefined;
+export function MenuTrigger({
+  children,
+  stopPropagation = true,
+  onClick,
+  render,
+  ...props
+}: MenuTriggerProps) {
+  const inMenubarContext = useMenubarContext();
+  const menubarRender = inMenubarContext ? (
+    <Button
+      variant='text'
+      color='neutral'
+      size='small'
+      className={`${styles.menuBarTrigger} rs-menu-trigger`}
+    />
+  ) : undefined;
 
-    return (
-      <MenuPrimitive.Trigger
-        ref={ref}
-        render={render ?? menubarRender}
-        onClick={e => {
-          if (stopPropagation) e.stopPropagation();
-          onClick?.(e);
-        }}
-        {...props}
-      >
-        {children}
-      </MenuPrimitive.Trigger>
-    );
-  }
-);
+  return (
+    <MenuPrimitive.Trigger
+      render={render ?? menubarRender}
+      onClick={e => {
+        if (stopPropagation) e.stopPropagation();
+        onClick?.(e);
+      }}
+      {...props}
+    >
+      {children}
+    </MenuPrimitive.Trigger>
+  );
+}
 MenuTrigger.displayName = 'Menu.Trigger';
 
 export interface MenuSubTriggerProps
@@ -50,58 +52,49 @@ export interface MenuSubTriggerProps
   value?: string;
 }
 
-export const MenuSubTrigger = forwardRef<HTMLDivElement, MenuSubTriggerProps>(
-  (
-    {
-      children,
-      value,
-      trailingIcon = <TriangleRightIcon />,
-      leadingIcon,
-      ...props
-    },
-    ref
-  ) => {
-    const { parent, inputRef } = useMenuContext();
-
-    if (
-      parent?.shouldFilter &&
-      !getMatch(value, children, parent?.inputValue)
-    ) {
-      return null;
-    }
+export function MenuSubTrigger({
+  children,
+  value,
+  trailingIcon = <TriangleRightIcon />,
+  leadingIcon,
+  ...props
+}: MenuSubTriggerProps) {
+  const { parent, inputRef } = useMenuContext();
 
-    const cell = <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />;
-    return (
-      <MenuPrimitive.SubmenuTrigger
-        ref={ref}
-        render={
-          parent?.autocomplete ? (
-            <AutocompletePrimitive.Item
-              value={value}
-              render={cell}
-              onPointerEnter={e => {
-                if (document?.activeElement !== parent?.inputRef?.current)
-                  parent?.inputRef?.current?.focus();
-                props?.onPointerEnter?.(e);
-              }}
-              onKeyDown={e => {
-                requestAnimationFrame(() => {
-                  inputRef?.current?.focus();
-                });
-                props?.onKeyDown?.(e);
-              }}
-            />
-          ) : (
-            cell
-          )
-        }
-        {...props}
-        role={parent?.autocomplete ? 'option' : 'menuitem'}
-        data-slot='menu-subtrigger'
-      >
-        {children}
-      </MenuPrimitive.SubmenuTrigger>
-    );
+  if (parent?.shouldFilter && !getMatch(value, children, parent?.inputValue)) {
+    return null;
   }
-);
-MenuSubTrigger.displayName = 'Menu.SubTrigger';
+
+  const cell = <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />;
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      render={
+        parent?.autocomplete ? (
+          <AutocompletePrimitive.Item
+            value={value}
+            render={cell}
+            onPointerEnter={e => {
+              if (document?.activeElement !== parent?.inputRef?.current)
+                parent?.inputRef?.current?.focus();
+              props?.onPointerEnter?.(e);
+            }}
+            onKeyDown={e => {
+              requestAnimationFrame(() => {
+                inputRef?.current?.focus();
+              });
+              props?.onKeyDown?.(e);
+            }}
+          />
+        ) : (
+          cell
+        )
+      }
+      {...props}
+      role={parent?.autocomplete ? 'option' : 'menuitem'}
+      data-slot='menu-subtrigger'
+    >
+      {children}
+    </MenuPrimitive.SubmenuTrigger>
+  );
+}
+MenuSubTrigger.displayName = 'Menu.SubmenuTrigger';
diff --git a/packages/raystack/components/menubar/menubar.tsx b/packages/raystack/components/menubar/menubar.tsx
index 0758ce46b..8088c6c00 100644
--- a/packages/raystack/components/menubar/menubar.tsx
+++ b/packages/raystack/components/menubar/menubar.tsx
@@ -2,7 +2,7 @@
 
 import { Menubar as MenubarPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { createContext, ElementRef, forwardRef, useContext } from 'react';
+import { createContext, useContext } from 'react';
 import styles from './menubar.module.css';
 
 const MenubarContext = createContext(false);
@@ -11,18 +11,13 @@ export function useMenubarContext() {
   return useContext(MenubarContext);
 }
 
-const MenubarRoot = forwardRef<
-  ElementRef<typeof MenubarPrimitive>,
-  MenubarPrimitive.Props
->(({ className, ...props }, ref) => (
-  <MenubarContext.Provider value={true}>
-    <MenubarPrimitive
-      ref={ref}
-      className={cx(styles.menubar, className)}
-      {...props}
-    />
-  </MenubarContext.Provider>
-));
+function MenubarRoot({ className, ...props }: MenubarPrimitive.Props) {
+  return (
+    <MenubarContext value={true}>
+      <MenubarPrimitive className={cx(styles.menubar, className)} {...props} />
+    </MenubarContext>
+  );
+}
 MenubarRoot.displayName = 'Menubar';
 
 export const Menubar = MenubarRoot;
diff --git a/packages/raystack/components/meter/meter-misc.tsx b/packages/raystack/components/meter/meter-misc.tsx
index 5ccb5e85a..0590970a7 100644
--- a/packages/raystack/components/meter/meter-misc.tsx
+++ b/packages/raystack/components/meter/meter-misc.tsx
@@ -2,31 +2,26 @@
 
 import { Meter as MeterPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
 import styles from './meter.module.css';
 
-export const MeterLabel = forwardRef<
-  ElementRef<typeof MeterPrimitive.Label>,
-  MeterPrimitive.Label.Props
->(({ className, ...props }, ref) => (
-  <MeterPrimitive.Label
-    ref={ref}
-    className={cx(styles.label, className)}
-    {...props}
-  />
-));
+export function MeterLabel({
+  className,
+  ...props
+}: MeterPrimitive.Label.Props) {
+  return (
+    <MeterPrimitive.Label className={cx(styles.label, className)} {...props} />
+  );
+}
 
-MeterLabel.displayName = 'MeterLabel';
+MeterLabel.displayName = 'Meter.Label';
 
-export const MeterValue = forwardRef<
-  ElementRef<typeof MeterPrimitive.Value>,
-  MeterPrimitive.Value.Props
->(({ className, ...props }, ref) => (
-  <MeterPrimitive.Value
-    ref={ref}
-    className={cx(styles.value, className)}
-    {...props}
-  />
-));
+export function MeterValue({
+  className,
+  ...props
+}: MeterPrimitive.Value.Props) {
+  return (
+    <MeterPrimitive.Value className={cx(styles.value, className)} {...props} />
+  );
+}
 
-MeterValue.displayName = 'MeterValue';
+MeterValue.displayName = 'Meter.Value';
diff --git a/packages/raystack/components/meter/meter-root.tsx b/packages/raystack/components/meter/meter-root.tsx
index f791240ad..f00d838d4 100644
--- a/packages/raystack/components/meter/meter-root.tsx
+++ b/packages/raystack/components/meter/meter-root.tsx
@@ -2,7 +2,7 @@
 
 import { Meter as MeterPrimitive } from '@base-ui/react';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { createContext, type ElementRef, forwardRef } from 'react';
+import { CSSProperties, createContext } from 'react';
 import styles from './meter.module.css';
 import { MeterTrack } from './meter-track';
 
@@ -34,48 +34,37 @@ export const MeterContext = createContext<MeterContextValue>({
   percentage: 0
 });
 
-export const MeterRoot = forwardRef<
-  ElementRef<typeof MeterPrimitive.Root>,
-  MeterProps
->(
-  (
-    {
-      className,
-      style = {},
-      variant = 'linear',
-      children = <MeterTrack />,
-      value = 0,
-      min = 0,
-      max = 100,
-      ...props
-    },
-    ref
-  ) => {
-    const percentage = ((value - min) * 100) / (max - min);
+export function MeterRoot({
+  className,
+  style = {},
+  variant = 'linear',
+  children = <MeterTrack />,
+  value = 0,
+  min = 0,
+  max = 100,
+  ...props
+}: MeterProps) {
+  const percentage = ((value - min) * 100) / (max - min);
 
-    return (
-      <MeterContext.Provider
-        value={{ variant: variant ?? 'linear', value, percentage }}
+  return (
+    <MeterContext value={{ variant: variant ?? 'linear', value, percentage }}>
+      <MeterPrimitive.Root
+        className={meter({ variant, className })}
+        style={
+          {
+            ...style,
+            '--rs-meter-percentage': percentage
+          } as CSSProperties
+        }
+        value={value}
+        min={min}
+        max={max}
+        {...props}
       >
-        <MeterPrimitive.Root
-          ref={ref}
-          className={meter({ variant, className })}
-          style={
-            {
-              ...style,
-              '--rs-meter-percentage': percentage
-            } as React.CSSProperties
-          }
-          value={value}
-          min={min}
-          max={max}
-          {...props}
-        >
-          {children}
-        </MeterPrimitive.Root>
-      </MeterContext.Provider>
-    );
-  }
-);
+        {children}
+      </MeterPrimitive.Root>
+    </MeterContext>
+  );
+}
 
-MeterRoot.displayName = 'MeterRoot';
+MeterRoot.displayName = 'Meter';
diff --git a/packages/raystack/components/meter/meter-track.tsx b/packages/raystack/components/meter/meter-track.tsx
index 791d2f258..cf8173386 100644
--- a/packages/raystack/components/meter/meter-track.tsx
+++ b/packages/raystack/components/meter/meter-track.tsx
@@ -2,20 +2,20 @@
 
 import { Meter as MeterPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef, useContext } from 'react';
+import { useContext } from 'react';
 import styles from './meter.module.css';
 import { MeterContext } from './meter-root';
 
-export const MeterTrack = forwardRef<
-  ElementRef<typeof MeterPrimitive.Track>,
-  MeterPrimitive.Track.Props
->(({ className, children, ...props }, ref) => {
+export function MeterTrack({
+  className,
+  children,
+  ...props
+}: MeterPrimitive.Track.Props) {
   const { variant } = useContext(MeterContext);
 
   if (variant === 'circular') {
     return (
       <MeterPrimitive.Track
-        ref={ref}
         className={cx(styles.circularSvg, className)}
         {...props}
         render={({ children: trackChildren, ...trackProps }) => (
@@ -34,15 +34,11 @@ export const MeterTrack = forwardRef<
   }
 
   return (
-    <MeterPrimitive.Track
-      ref={ref}
-      className={cx(styles.track, className)}
-      {...props}
-    >
+    <MeterPrimitive.Track className={cx(styles.track, className)} {...props}>
       <MeterPrimitive.Indicator className={styles.indicator} />
       {children}
     </MeterPrimitive.Track>
   );
-});
+}
 
-MeterTrack.displayName = 'MeterTrack';
+MeterTrack.displayName = 'Meter.Track';
diff --git a/packages/raystack/components/navbar/navbar-root.tsx b/packages/raystack/components/navbar/navbar-root.tsx
index 4c394a32d..80706313f 100644
--- a/packages/raystack/components/navbar/navbar-root.tsx
+++ b/packages/raystack/components/navbar/navbar-root.tsx
@@ -2,14 +2,7 @@
 
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { cx } from 'class-variance-authority';
-import type { RefObject } from 'react';
-import {
-  ComponentPropsWithoutRef,
-  ComponentRef,
-  forwardRef,
-  useEffect,
-  useRef
-} from 'react';
+import { type ComponentProps, type RefObject, useEffect, useRef } from 'react';
 import styles from './navbar.module.css';
 
 /** Px to accumulate in one scroll direction before hiding (down) or showing (up) the navbar */
@@ -39,7 +32,7 @@ function getScrollParent(el: HTMLElement | null): HTMLElement | null {
   return null;
 }
 
-export interface NavbarRootProps extends ComponentPropsWithoutRef<'nav'> {
+export interface NavbarRootProps extends ComponentProps<'nav'> {
   /** Stick navbar to top of viewport (or scroll container) while scrolling */
   sticky?: boolean;
   /** Hide navbar when scrolling down, show when scrolling up or near top */
@@ -48,95 +41,91 @@ export interface NavbarRootProps extends ComponentPropsWithoutRef<'nav'> {
   scrollContainerRef?: RefObject<HTMLElement | null>;
 }
 
-export const NavbarRoot = forwardRef<ComponentRef<'nav'>, NavbarRootProps>(
-  (
-    {
-      className,
-      sticky = false,
-      hideOnScroll = false,
-      scrollContainerRef,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    // Last scroll position at which we updated data-hidden; only updated when we show/hide or are at top
-    const lastScrollY = useRef(0);
-    // Nav DOM node; used to find scroll container, attach listeners, and set data-hidden
-    const navRef = useRef<HTMLElement>(null);
-
-    useEffect(() => {
-      if (!hideOnScroll) return;
-
-      const el = navRef.current;
-      if (!el) return;
-
-      // Use custom ref if provided and set; else detect scroll parent; else window
-      const scrollContainer: HTMLElement | null =
-        scrollContainerRef?.current ?? getScrollParent(el);
-      const isWindow = scrollContainer === null;
-
-      if (isWindow && typeof window === 'undefined') return;
-
-      const target: Window | HTMLElement = isWindow
-        ? window
-        : (scrollContainer as HTMLElement);
-
-      // Throttle scroll work to one update per frame
-      let ticking = false;
-      const getScrollTop = () =>
-        target === window
-          ? (window.scrollY ?? document.documentElement.scrollTop)
-          : (target as HTMLElement).scrollTop;
-
-      const handleScroll = () => {
-        if (ticking) return;
-        ticking = true;
-        requestAnimationFrame(() => {
-          const scrollY = getScrollTop();
-          const nav = navRef.current;
-          if (!nav) {
-            ticking = false;
-            return;
-          }
-
-          if (scrollY <= SHOW_AT_TOP_THRESHOLD) {
-            nav.setAttribute('data-hidden', 'false');
-            lastScrollY.current = scrollY;
-          } else if (scrollY > lastScrollY.current + SCROLL_THRESHOLD) {
-            nav.setAttribute('data-hidden', 'true');
-            lastScrollY.current = scrollY;
-          } else if (scrollY < lastScrollY.current - SCROLL_THRESHOLD) {
-            nav.setAttribute('data-hidden', 'false');
-            lastScrollY.current = scrollY;
-          }
+export const NavbarRoot = ({
+  className,
+  sticky = false,
+  hideOnScroll = false,
+  scrollContainerRef,
+  children,
+  ref,
+  ...props
+}: NavbarRootProps) => {
+  // Last scroll position at which we updated data-hidden; only updated when we show/hide or are at top
+  const lastScrollY = useRef(0);
+  // Nav DOM node; used to find scroll container, attach listeners, and set data-hidden
+  const navRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (!hideOnScroll) return;
+
+    const el = navRef.current;
+    if (!el) return;
+
+    // Use custom ref if provided and set; else detect scroll parent; else window
+    const scrollContainer: HTMLElement | null =
+      scrollContainerRef?.current ?? getScrollParent(el);
+    const isWindow = scrollContainer === null;
+
+    if (isWindow && typeof window === 'undefined') return;
+
+    const target: Window | HTMLElement = isWindow
+      ? window
+      : (scrollContainer as HTMLElement);
+
+    // Throttle scroll work to one update per frame
+    let ticking = false;
+    const getScrollTop = () =>
+      target === window
+        ? (window.scrollY ?? document.documentElement.scrollTop)
+        : (target as HTMLElement).scrollTop;
+
+    const handleScroll = () => {
+      if (ticking) return;
+      ticking = true;
+      requestAnimationFrame(() => {
+        const scrollY = getScrollTop();
+        const nav = navRef.current;
+        if (!nav) {
           ticking = false;
-        });
-      };
-
-      lastScrollY.current = getScrollTop();
-      el.setAttribute('data-hidden', 'false');
-      target.addEventListener('scroll', handleScroll, { passive: true });
-      return () => {
-        target.removeEventListener('scroll', handleScroll);
-        el.removeAttribute('data-hidden');
-      };
-    }, [hideOnScroll]);
-
-    const mergedRef = useMergedRefs(navRef, ref);
-
-    return (
-      <nav
-        ref={mergedRef}
-        className={cx(styles.root, className)}
-        data-sticky={sticky}
-        role='navigation'
-        {...props}
-      >
-        <div className={styles.container}>{children}</div>
-      </nav>
-    );
-  }
-);
+          return;
+        }
+
+        if (scrollY <= SHOW_AT_TOP_THRESHOLD) {
+          nav.setAttribute('data-hidden', 'false');
+          lastScrollY.current = scrollY;
+        } else if (scrollY > lastScrollY.current + SCROLL_THRESHOLD) {
+          nav.setAttribute('data-hidden', 'true');
+          lastScrollY.current = scrollY;
+        } else if (scrollY < lastScrollY.current - SCROLL_THRESHOLD) {
+          nav.setAttribute('data-hidden', 'false');
+          lastScrollY.current = scrollY;
+        }
+        ticking = false;
+      });
+    };
+
+    lastScrollY.current = getScrollTop();
+    el.setAttribute('data-hidden', 'false');
+    target.addEventListener('scroll', handleScroll, { passive: true });
+    return () => {
+      target.removeEventListener('scroll', handleScroll);
+      el.removeAttribute('data-hidden');
+    };
+  }, [hideOnScroll]);
+
+  const mergedRef = useMergedRefs(navRef, ref);
+
+  return (
+    <nav
+      ref={mergedRef}
+      className={cx(styles.root, className)}
+      data-sticky={sticky}
+      role='navigation'
+      {...props}
+    >
+      <div className={styles.container}>{children}</div>
+    </nav>
+  );
+};
 
 NavbarRoot.displayName = 'Navbar';
diff --git a/packages/raystack/components/navbar/navbar-sections.tsx b/packages/raystack/components/navbar/navbar-sections.tsx
index 98aebdb74..c8389b404 100644
--- a/packages/raystack/components/navbar/navbar-sections.tsx
+++ b/packages/raystack/components/navbar/navbar-sections.tsx
@@ -1,27 +1,22 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, forwardRef } from 'react';
+import { ComponentProps } from 'react';
 import { Flex } from '../flex';
 import styles from './navbar.module.css';
 
-export interface NavbarStartProps
-  extends ComponentPropsWithoutRef<typeof Flex> {}
+export interface NavbarStartProps extends ComponentProps<typeof Flex> {}
 
-export const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(
-  (
-    {
-      className,
-      children,
-      'aria-label': ariaLabel,
-      align = 'center',
-      gap = 5,
-      ...props
-    },
-    ref
-  ) => (
+export const NavbarStart = ({
+  className,
+  children,
+  'aria-label': ariaLabel,
+  align = 'center',
+  gap = 5,
+  ...props
+}: NavbarStartProps) => {
+  return (
     <Flex
-      ref={ref}
       align={align}
       gap={gap}
       className={cx(styles.start, className)}
@@ -31,28 +26,23 @@ export const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(
     >
       {children}
     </Flex>
-  )
-);
+  );
+};
 
 NavbarStart.displayName = 'Navbar.Start';
 
-export interface NavbarCenterProps
-  extends ComponentPropsWithoutRef<typeof Flex> {}
+export interface NavbarCenterProps extends ComponentProps<typeof Flex> {}
 
-export const NavbarCenter = forwardRef<HTMLDivElement, NavbarCenterProps>(
-  (
-    {
-      className,
-      children,
-      'aria-label': ariaLabel,
-      align = 'center',
-      gap = 5,
-      ...props
-    },
-    ref
-  ) => (
+export const NavbarCenter = ({
+  className,
+  children,
+  'aria-label': ariaLabel,
+  align = 'center',
+  gap = 5,
+  ...props
+}: NavbarCenterProps) => {
+  return (
     <Flex
-      ref={ref}
       align={align}
       gap={gap}
       className={cx(styles.center, className)}
@@ -62,27 +52,23 @@ export const NavbarCenter = forwardRef<HTMLDivElement, NavbarCenterProps>(
     >
       {children}
     </Flex>
-  )
-);
+  );
+};
 
 NavbarCenter.displayName = 'Navbar.Center';
 
-export interface NavbarEndProps extends ComponentPropsWithoutRef<typeof Flex> {}
+export interface NavbarEndProps extends ComponentProps<typeof Flex> {}
 
-export const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(
-  (
-    {
-      className,
-      children,
-      'aria-label': ariaLabel,
-      align = 'center',
-      gap = 5,
-      ...props
-    },
-    ref
-  ) => (
+export const NavbarEnd = ({
+  className,
+  children,
+  'aria-label': ariaLabel,
+  align = 'center',
+  gap = 5,
+  ...props
+}: NavbarEndProps) => {
+  return (
     <Flex
-      ref={ref}
       align={align}
       gap={gap}
       className={cx(styles.end, className)}
@@ -92,7 +78,7 @@ export const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(
     >
       {children}
     </Flex>
-  )
-);
+  );
+};
 
 NavbarEnd.displayName = 'Navbar.End';