diff --git a/.changeset/headless-primitives-use-render.md b/.changeset/headless-primitives-use-render.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/headless-primitives-use-render.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/headless/src/primitives/accordion/accordion-header.tsx b/packages/headless/src/primitives/accordion/accordion-header.tsx
index 8987def3e40..903235f2a07 100644
--- a/packages/headless/src/primitives/accordion/accordion-header.tsx
+++ b/packages/headless/src/primitives/accordion/accordion-header.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 
 export type AccordionHeaderProps = ComponentProps<'h3'>;
 
@@ -11,7 +11,7 @@ export function AccordionHeader(props: AccordionHeaderProps) {
     'data-cl-slot': 'accordion-header',
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'h3',
     render,
     props: mergeProps<'h3'>(defaultProps, otherProps),
diff --git a/packages/headless/src/primitives/accordion/accordion-item.tsx b/packages/headless/src/primitives/accordion/accordion-item.tsx
index d9ed9d6d488..f772793544c 100644
--- a/packages/headless/src/primitives/accordion/accordion-item.tsx
+++ b/packages/headless/src/primitives/accordion/accordion-item.tsx
@@ -2,7 +2,7 @@
 
 import { useMemo } from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { AccordionItemContext, type AccordionItemContextValue, useAccordionContext } from './accordion-context';
 
 export interface AccordionItemProps extends ComponentProps<'div'> {
@@ -34,7 +34,7 @@ export function AccordionItem(props: AccordionItemProps) {
 
   return (
     <AccordionItemContext.Provider value={itemContextValue}>
-      {renderElement({
+      {useRender({
         defaultTagName: 'div',
         render,
         state,
diff --git a/packages/headless/src/primitives/accordion/accordion-panel.tsx b/packages/headless/src/primitives/accordion/accordion-panel.tsx
index 8e2fe7d668f..fab5eca48ee 100644
--- a/packages/headless/src/primitives/accordion/accordion-panel.tsx
+++ b/packages/headless/src/primitives/accordion/accordion-panel.tsx
@@ -1,11 +1,10 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React, { type RefObject, useLayoutEffect, useRef, useState } from 'react';
 
 import { useAnimationsFinished } from '../../hooks/use-animations-finished';
 import { useTransition } from '../../hooks/use-transition';
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { resetLayoutStyles } from '../../utils/reset-layout-styles';
 import { useAccordionItemContext } from './accordion-context';
 
@@ -17,9 +16,6 @@ export const AccordionPanel = React.forwardRef<HTMLDivElement, AccordionPanelPro
     const { open, triggerId, panelId } = useAccordionItemContext();
 
     const panelRef = useRef<HTMLElement | null>(null);
-    // Merge the consumer ref with the internal panelRef so passing a ref does not
-    // clobber the ref the panel relies on for height measurement.
-    const combinedRef = useMergeRefs([panelRef, ref]);
     const [height, setHeight] = useState<number | undefined>(undefined);
 
     // Track whether open has ever transitioned from true→false.
@@ -108,7 +104,6 @@ export const AccordionPanel = React.forwardRef<HTMLDivElement, AccordionPanelPro
       id: panelId,
       role: 'region' as const,
       'aria-labelledby': triggerId,
-      ref: combinedRef,
       ...effectiveTransitionProps,
       style: {
         '--cl-accordion-panel-height': height != null ? `${height}px` : undefined,
@@ -121,10 +116,11 @@ export const AccordionPanel = React.forwardRef<HTMLDivElement, AccordionPanelPro
     // override it, or the trigger/panel aria pairing would silently break.
     merged.id = panelId;
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'div',
       render,
       enabled: mounted,
+      ref: [panelRef, ref],
       state,
       stateAttributesMapping: {
         open: (v: boolean): Record<string, string> | null => (v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' }),
diff --git a/packages/headless/src/primitives/accordion/accordion-root.tsx b/packages/headless/src/primitives/accordion/accordion-root.tsx
index d00c2aa84f7..c7f6e93d7ae 100644
--- a/packages/headless/src/primitives/accordion/accordion-root.tsx
+++ b/packages/headless/src/primitives/accordion/accordion-root.tsx
@@ -4,7 +4,7 @@ import { Composite } from '@floating-ui/react';
 import React, { type ReactNode, useCallback, useId, useMemo } from 'react';
 
 import { useControllableState } from '../../hooks/use-controllable-state';
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { AccordionContext, type AccordionContextValue } from './accordion-context';
 
 export interface AccordionProps extends ComponentProps<'div'> {
@@ -79,10 +79,22 @@ export function AccordionRoot(props: AccordionProps) {
             mergeProps<'div'>(otherProps, restCompositeProps as Record<string, unknown>),
           );
 
-          return renderElement({
+          // Composite may inject a ref via compositeProps; hand it to useRender's ref
+          // param (which owns ref-merging) instead of leaving it in props, where
+          // useRender's merged ref would overwrite it.
+          const { ref: compositeRef, ...mergedProps } = merged;
+
+          // floating-ui's Composite invokes this render callback synchronously and
+          // unconditionally during its own render (see renderJsx), so useRender runs in a
+          // stable hook position on the Composite fiber. The rule can't see that.
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useRender({
             defaultTagName: 'div',
             render,
-            props: merged,
+            // SAFETY: mergeProps returns Record<string, unknown>; a ref Composite injected
+            // is a valid React ref at runtime.
+            ref: compositeRef as React.Ref<unknown>,
+            props: mergedProps,
           });
         }}
       >
diff --git a/packages/headless/src/primitives/accordion/accordion-trigger.tsx b/packages/headless/src/primitives/accordion/accordion-trigger.tsx
index 7d3bc999ba2..4e6ca83f46e 100644
--- a/packages/headless/src/primitives/accordion/accordion-trigger.tsx
+++ b/packages/headless/src/primitives/accordion/accordion-trigger.tsx
@@ -3,7 +3,7 @@
 import { CompositeItem } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useAccordionContext, useAccordionItemContext } from './accordion-context';
 
 export type AccordionTriggerProps = ComponentProps<'button'>;
@@ -42,16 +42,28 @@ export function AccordionTrigger(props: AccordionTriggerProps) {
         // not override it, or the trigger/panel aria pairing would silently break.
         merged.id = triggerId;
 
-        return renderElement({
+        // CompositeItem injects its roving-tabindex ref via compositeProps; hand it to
+        // useRender's ref param (which owns ref-merging) instead of leaving it in props,
+        // where useRender's merged ref would overwrite it and break focus navigation.
+        const { ref: compositeRef, ...mergedProps } = merged;
+
+        // floating-ui's CompositeItem invokes this render callback synchronously and
+        // unconditionally during its own render (see renderJsx), so useRender runs in a
+        // stable hook position on the CompositeItem fiber. The rule can't see that.
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useRender({
           defaultTagName: 'button',
           render,
+          // SAFETY: mergeProps returns Record<string, unknown>; the ref CompositeItem
+          // injected is a valid React ref at runtime.
+          ref: compositeRef as React.Ref<unknown>,
           state,
           stateAttributesMapping: {
             open: (v: boolean): Record<string, string> | null =>
               v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' },
             disabled: (v: boolean) => (v ? { 'data-cl-disabled': '' } : null),
           },
-          props: merged,
+          props: mergedProps,
         });
       }}
     >
diff --git a/packages/headless/src/primitives/autocomplete/autocomplete-input.tsx b/packages/headless/src/primitives/autocomplete/autocomplete-input.tsx
index 0a432545e3a..68ee1645fa1 100644
--- a/packages/headless/src/primitives/autocomplete/autocomplete-input.tsx
+++ b/packages/headless/src/primitives/autocomplete/autocomplete-input.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useAutocompleteContext } from './autocomplete-context';
 
 export type AutocompleteInputProps = ComponentProps<'input'>;
@@ -23,18 +22,11 @@ export const AutocompleteInput = React.forwardRef<HTMLInputElement, Autocomplete
       valuesByIndexRef,
     } = useAutocompleteContext();
 
-    // floating-ui types `setReference` as a method signature, but at runtime it's
-    // a stable callback that doesn't use `this`, so the unbound-method check is a
-    // false positive here.
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const combinedRef = useMergeRefs([refs.setReference, ref]);
-
     const state = { open };
 
     const defaultProps = {
       'data-cl-slot': 'autocomplete-input',
       ...getReferenceProps({
-        ref: combinedRef,
         value: inputValue,
         'aria-autocomplete': 'list' as const,
         onChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -53,9 +45,14 @@ export const AutocompleteInput = React.forwardRef<HTMLInputElement, Autocomplete
       }),
     };
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'input',
       render,
+      // floating-ui types `setReference` as a method signature, but at runtime it's
+      // a stable callback that doesn't use `this`, so the unbound-method check is a
+      // false positive here.
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      ref: [refs.setReference, ref],
       state,
       stateAttributesMapping: {
         open: (v: boolean): Record<string, string> | null => (v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' }),
diff --git a/packages/headless/src/primitives/autocomplete/autocomplete-list.tsx b/packages/headless/src/primitives/autocomplete/autocomplete-list.tsx
index a31cf55c764..6820b00d6d1 100644
--- a/packages/headless/src/primitives/autocomplete/autocomplete-list.tsx
+++ b/packages/headless/src/primitives/autocomplete/autocomplete-list.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { FloatingList, useMergeRefs } from '@floating-ui/react';
+import { FloatingList } from '@floating-ui/react';
 import React, { useEffect } from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useAutocompleteContext } from './autocomplete-context';
 
 export type AutocompleteListProps = ComponentProps<'div'>;
@@ -18,18 +18,11 @@ export const AutocompleteList = React.forwardRef<HTMLDivElement, AutocompleteLis
       return () => setInlineMode(false);
     }, [setInlineMode]);
 
-    // floating-ui types `setFloating` as a method signature, but at runtime it's
-    // a stable callback that doesn't use `this`, so the unbound-method check is a
-    // false positive here.
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const combinedRef = useMergeRefs([refs.setFloating, ref]);
-
     const floatingProps = getFloatingProps();
     const wiredId = floatingProps.id;
 
     const ownProps = {
       'data-cl-slot': 'autocomplete-list',
-      ref: combinedRef,
     } satisfies DefaultProps<'div'>;
 
     const defaultProps = { ...ownProps, ...floatingProps };
@@ -46,9 +39,14 @@ export const AutocompleteList = React.forwardRef<HTMLDivElement, AutocompleteLis
         elementsRef={elementsRef}
         labelsRef={labelsRef}
       >
-        {renderElement({
+        {useRender({
           defaultTagName: 'div',
           render,
+          // floating-ui types `setFloating` as a method signature, but at runtime it's
+          // a stable callback that doesn't use `this`, so the unbound-method check is a
+          // false positive here.
+          // eslint-disable-next-line @typescript-eslint/unbound-method
+          ref: [refs.setFloating, ref],
           props: merged,
         })}
       </FloatingList>
diff --git a/packages/headless/src/primitives/autocomplete/autocomplete-option.tsx b/packages/headless/src/primitives/autocomplete/autocomplete-option.tsx
index ddd22e1b799..4d13f5525b7 100644
--- a/packages/headless/src/primitives/autocomplete/autocomplete-option.tsx
+++ b/packages/headless/src/primitives/autocomplete/autocomplete-option.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { useListItem, useMergeRefs } from '@floating-ui/react';
+import { useListItem } from '@floating-ui/react';
 import React, { useEffect, useId } from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useAutocompleteContext } from './autocomplete-context';
 
 export interface AutocompleteOptionProps extends ComponentProps<'div'> {
@@ -21,7 +21,6 @@ export const AutocompleteOption = React.forwardRef<HTMLDivElement, AutocompleteO
     const id = useId();
     const displayLabel = label ?? value;
     const { ref: itemRef, index } = useListItem({ label: displayLabel });
-    const combinedRef = useMergeRefs([itemRef, ref]);
 
     const isSelected = selectedValue === value;
     const isActive = activeIndex === index;
@@ -46,7 +45,6 @@ export const AutocompleteOption = React.forwardRef<HTMLDivElement, AutocompleteO
     const ownProps = {
       'data-cl-slot': 'autocomplete-option',
       id,
-      ref: combinedRef,
       role: 'option',
       'aria-selected': isActive,
       'aria-disabled': disabled || undefined,
@@ -69,9 +67,10 @@ export const AutocompleteOption = React.forwardRef<HTMLDivElement, AutocompleteO
     // aria-activedescendant linkage: a consumer-supplied id must not override it.
     merged.id = id;
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'div',
       render,
+      ref: [itemRef, ref],
       state,
       stateAttributesMapping: {
         selected: (v: boolean) => (v ? { 'data-cl-selected': '' } : null),
diff --git a/packages/headless/src/primitives/autocomplete/autocomplete-popup.tsx b/packages/headless/src/primitives/autocomplete/autocomplete-popup.tsx
index 74f443ec5be..8acfaf2dff2 100644
--- a/packages/headless/src/primitives/autocomplete/autocomplete-popup.tsx
+++ b/packages/headless/src/primitives/autocomplete/autocomplete-popup.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useAutocompleteContext } from './autocomplete-context';
 
 export type AutocompletePopupProps = ComponentProps<'div'>;
@@ -13,17 +12,15 @@ export const AutocompletePopup = React.forwardRef<HTMLDivElement, AutocompletePo
     const { render, ...otherProps } = props;
     const { popupRef, transitionProps } = useAutocompleteContext();
 
-    const combinedRef = useMergeRefs([popupRef, ref]);
-
     const defaultProps = {
       'data-cl-slot': 'autocomplete-popup',
-      ref: combinedRef,
       ...transitionProps,
     };
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'div',
       render,
+      ref: [popupRef, ref],
       props: mergeProps<'div'>(defaultProps, otherProps),
     });
   },
diff --git a/packages/headless/src/primitives/autocomplete/autocomplete-positioner.tsx b/packages/headless/src/primitives/autocomplete/autocomplete-positioner.tsx
index ccb90a6cdf2..140cf07d921 100644
--- a/packages/headless/src/primitives/autocomplete/autocomplete-positioner.tsx
+++ b/packages/headless/src/primitives/autocomplete/autocomplete-positioner.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { FloatingFocusManager, FloatingList, useMergeRefs } from '@floating-ui/react';
+import { FloatingFocusManager, FloatingList } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useAutocompleteContext } from './autocomplete-context';
 
 export type AutocompletePositionerProps = ComponentProps<'div'>;
@@ -16,19 +16,12 @@ export const AutocompletePositioner = React.forwardRef<HTMLDivElement, Autocompl
 
     const side = placement.split('-')[0];
 
-    // floating-ui types `setFloating` as a method signature, but at runtime it's
-    // a stable callback that doesn't use `this`, so the unbound-method check is a
-    // false positive here.
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const combinedRef = useMergeRefs([refs.setFloating, ref]);
-
     const floatingProps = getFloatingProps();
     const wiredId = floatingProps.id;
 
     const ownProps = {
       'data-cl-slot': 'autocomplete-positioner',
       'data-cl-side': side,
-      ref: combinedRef,
       style: floatingStyles,
     } satisfies DefaultProps<'div'>;
 
@@ -41,6 +34,22 @@ export const AutocompletePositioner = React.forwardRef<HTMLDivElement, Autocompl
       merged.id = wiredId;
     }
 
+    const element = useRender({
+      defaultTagName: 'div',
+      render,
+      // floating-ui types `setFloating` as a method signature, but at runtime it's
+      // a stable callback that doesn't use `this`, so the unbound-method check is a
+      // false positive here.
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      ref: [refs.setFloating, ref],
+      enabled: mounted,
+      props: merged,
+    });
+
+    if (!element) {
+      return null;
+    }
+
     return (
       <FloatingFocusManager
         context={floatingContext}
@@ -52,12 +61,7 @@ export const AutocompletePositioner = React.forwardRef<HTMLDivElement, Autocompl
           elementsRef={elementsRef}
           labelsRef={labelsRef}
         >
-          {renderElement({
-            defaultTagName: 'div',
-            render,
-            enabled: mounted,
-            props: merged,
-          })}
+          {element}
         </FloatingList>
       </FloatingFocusManager>
     );
diff --git a/packages/headless/src/primitives/collapsible/collapsible-panel.tsx b/packages/headless/src/primitives/collapsible/collapsible-panel.tsx
index 2b0d8f3b1c0..65257b9fb9d 100644
--- a/packages/headless/src/primitives/collapsible/collapsible-panel.tsx
+++ b/packages/headless/src/primitives/collapsible/collapsible-panel.tsx
@@ -1,11 +1,10 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React, { type RefObject, useLayoutEffect, useRef, useState } from 'react';
 
 import { useAnimationsFinished } from '../../hooks/use-animations-finished';
 import { useTransition } from '../../hooks/use-transition';
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { resetLayoutStyles } from '../../utils/reset-layout-styles';
 import { useCollapsibleContext } from './collapsible-context';
 
@@ -17,9 +16,6 @@ export const CollapsiblePanel = React.forwardRef<HTMLDivElement, CollapsiblePane
     const { open, triggerId, panelId } = useCollapsibleContext();
 
     const panelRef = useRef<HTMLElement | null>(null);
-    // Merge the consumer ref with the internal panelRef so passing a ref does not
-    // clobber the ref the panel relies on for height measurement.
-    const combinedRef = useMergeRefs([panelRef, ref]);
     const [height, setHeight] = useState<number | undefined>(undefined);
     const [width, setWidth] = useState<number | undefined>(undefined);
 
@@ -109,7 +105,6 @@ export const CollapsiblePanel = React.forwardRef<HTMLDivElement, CollapsiblePane
       id: panelId,
       role: 'region' as const,
       'aria-labelledby': triggerId,
-      ref: combinedRef,
       ...effectiveTransitionProps,
       style: {
         '--collapsible-panel-height': height != null ? `${height}px` : undefined,
@@ -123,10 +118,11 @@ export const CollapsiblePanel = React.forwardRef<HTMLDivElement, CollapsiblePane
     // override it, or the trigger/panel aria pairing would silently break.
     merged.id = panelId;
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'div',
       render,
       enabled: mounted,
+      ref: [panelRef, ref],
       state,
       stateAttributesMapping: {
         open: (v: boolean): Record<string, string> | null => (v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' }),
diff --git a/packages/headless/src/primitives/collapsible/collapsible-root.tsx b/packages/headless/src/primitives/collapsible/collapsible-root.tsx
index 4c94e060e75..eccdbd10aa8 100644
--- a/packages/headless/src/primitives/collapsible/collapsible-root.tsx
+++ b/packages/headless/src/primitives/collapsible/collapsible-root.tsx
@@ -3,7 +3,7 @@
 import { type ReactNode, useId, useMemo } from 'react';
 
 import { useControllableState } from '../../hooks/use-controllable-state';
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { CollapsibleContext, type CollapsibleContextValue } from './collapsible-context';
 
 export interface CollapsibleProps extends ComponentProps<'div'> {
@@ -41,7 +41,7 @@ export function CollapsibleRoot(props: CollapsibleProps) {
 
   return (
     <CollapsibleContext.Provider value={contextValue}>
-      {renderElement({
+      {useRender({
         defaultTagName: 'div',
         render,
         state,
diff --git a/packages/headless/src/primitives/collapsible/collapsible-trigger.tsx b/packages/headless/src/primitives/collapsible/collapsible-trigger.tsx
index 63d9555e973..c034db78fb7 100644
--- a/packages/headless/src/primitives/collapsible/collapsible-trigger.tsx
+++ b/packages/headless/src/primitives/collapsible/collapsible-trigger.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useCollapsibleContext } from './collapsible-context';
 
 export type CollapsibleTriggerProps = ComponentProps<'button'>;
@@ -30,7 +30,7 @@ export function CollapsibleTrigger(props: CollapsibleTriggerProps) {
   // override it, or the trigger/panel aria pairing would silently break.
   merged.id = triggerId;
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'button',
     render,
     state,
diff --git a/packages/headless/src/primitives/dialog/README.md b/packages/headless/src/primitives/dialog/README.md
index c68f4440467..49c02236eaf 100644
--- a/packages/headless/src/primitives/dialog/README.md
+++ b/packages/headless/src/primitives/dialog/README.md
@@ -112,7 +112,7 @@ Slot identity (`data-cl-slot`) is applied by the styled (mosaic) layer, not by t
 
 ## Authoring rule for new primitives
 
-Each styleable surface = one part. Layout infrastructure (overlay, scroll lock, focus manager, portal) wraps a `renderElement` call rather than fusing with it. The dialog split — `Backdrop` (semi-transparent surface) vs. `Viewport` (fixed centering + scroll lock) — exists because mosaic needs to style each layer independently. Apply the same decomposition to future primitives that combine positioning with a styled surface.
+Each styleable surface = one part. Layout infrastructure (overlay, scroll lock, focus manager, portal) wraps a `useRender` call rather than fusing with it. The dialog split — `Backdrop` (semi-transparent surface) vs. `Viewport` (fixed centering + scroll lock) — exists because mosaic needs to style each layer independently. Apply the same decomposition to future primitives that combine positioning with a styled surface.
 
 ## ARIA
 
diff --git a/packages/headless/src/primitives/dialog/dialog-backdrop.tsx b/packages/headless/src/primitives/dialog/dialog-backdrop.tsx
index 373b66c138c..59b28aea094 100644
--- a/packages/headless/src/primitives/dialog/dialog-backdrop.tsx
+++ b/packages/headless/src/primitives/dialog/dialog-backdrop.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useDialogContext } from './dialog-context';
 
 /** Props for {@link DialogBackdrop}. */
@@ -14,20 +14,17 @@ export const DialogBackdrop = React.forwardRef<HTMLDivElement, DialogBackdropPro
     const { render, ...otherProps } = props;
     const { open, mounted, transitionProps } = useDialogContext();
 
-    if (!mounted) {
-      return null;
-    }
-
     const state = { open };
 
     const defaultProps = {
-      ref,
       ...transitionProps,
     } satisfies DefaultProps<'div'>;
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'div',
       render,
+      enabled: mounted,
+      ref,
       state,
       stateAttributesMapping: {
         open: (v: boolean): Record<string, string> | null => (v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' }),
diff --git a/packages/headless/src/primitives/dialog/dialog-close.tsx b/packages/headless/src/primitives/dialog/dialog-close.tsx
index 1a126dada2f..23a388df9da 100644
--- a/packages/headless/src/primitives/dialog/dialog-close.tsx
+++ b/packages/headless/src/primitives/dialog/dialog-close.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useDialogContext } from './dialog-context';
 
 /** Props for {@link DialogClose}. */
@@ -15,15 +15,15 @@ export const DialogClose = React.forwardRef<HTMLButtonElement, DialogCloseProps>
 
   const defaultProps = {
     type: 'button' as const,
-    ref,
     onClick() {
       setOpen(false);
     },
   } satisfies DefaultProps<'button'>;
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'button',
     render,
+    ref,
     props: mergeProps<'button'>(defaultProps, otherProps),
   });
 });
diff --git a/packages/headless/src/primitives/dialog/dialog-description.tsx b/packages/headless/src/primitives/dialog/dialog-description.tsx
index 81637b0b4be..c130e81a50c 100644
--- a/packages/headless/src/primitives/dialog/dialog-description.tsx
+++ b/packages/headless/src/primitives/dialog/dialog-description.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useDialogContext } from './dialog-context';
 
 /** Props for {@link DialogDescription}. */
@@ -16,12 +16,12 @@ export const DialogDescription = React.forwardRef<HTMLParagraphElement, DialogDe
 
     const defaultProps = {
       id: descriptionId,
-      ref,
     } satisfies DefaultProps<'p'>;
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'p',
       render,
+      ref,
       props: mergeProps<'p'>(defaultProps, otherProps),
     });
   },
diff --git a/packages/headless/src/primitives/dialog/dialog-title.tsx b/packages/headless/src/primitives/dialog/dialog-title.tsx
index 875559defd7..323c17b3d5f 100644
--- a/packages/headless/src/primitives/dialog/dialog-title.tsx
+++ b/packages/headless/src/primitives/dialog/dialog-title.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useDialogContext } from './dialog-context';
 
 /** Props for {@link DialogTitle}. */
@@ -15,12 +15,12 @@ export const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps
 
   const defaultProps = {
     id: labelId,
-    ref,
   } satisfies DefaultProps<'h2'>;
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'h2',
     render,
+    ref,
     props: mergeProps<'h2'>(defaultProps, otherProps),
   });
 });
diff --git a/packages/headless/src/primitives/dialog/dialog-viewport.tsx b/packages/headless/src/primitives/dialog/dialog-viewport.tsx
index bab6325ccdf..00303b17604 100644
--- a/packages/headless/src/primitives/dialog/dialog-viewport.tsx
+++ b/packages/headless/src/primitives/dialog/dialog-viewport.tsx
@@ -3,7 +3,7 @@
 import { FloatingOverlay } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useDialogContext } from './dialog-context';
 
 /** Props for {@link DialogViewport}. */
@@ -25,33 +25,35 @@ export const DialogViewport = React.forwardRef<HTMLDivElement, DialogViewportPro
     const { render, lockScroll = true, ...otherProps } = props;
     const { open, mounted, transitionProps, modal } = useDialogContext();
 
-    if (!mounted) {
-      return null;
-    }
-
     const state = { open };
 
     const defaultProps = {
-      ref,
       ...transitionProps,
       style: modal ? undefined : { pointerEvents: 'auto' as const },
     } satisfies DefaultProps<'div'>;
 
+    const element = useRender({
+      defaultTagName: 'div',
+      render,
+      enabled: mounted,
+      ref,
+      state,
+      stateAttributesMapping: {
+        open: (v: boolean): Record<string, string> | null => (v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' }),
+      },
+      props: mergeProps<'div'>(defaultProps, otherProps),
+    });
+
+    if (!element) {
+      return null;
+    }
+
     return (
       <FloatingOverlay
         lockScroll={lockScroll}
         style={modal ? undefined : { pointerEvents: 'none' }}
       >
-        {renderElement({
-          defaultTagName: 'div',
-          render,
-          state,
-          stateAttributesMapping: {
-            open: (v: boolean): Record<string, string> | null =>
-              v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' },
-          },
-          props: mergeProps<'div'>(defaultProps, otherProps),
-        })}
+        {element}
       </FloatingOverlay>
     );
   },
diff --git a/packages/headless/src/primitives/drawer/drawer-backdrop.tsx b/packages/headless/src/primitives/drawer/drawer-backdrop.tsx
index 33a40fdb63c..e82b6d6a7d9 100644
--- a/packages/headless/src/primitives/drawer/drawer-backdrop.tsx
+++ b/packages/headless/src/primitives/drawer/drawer-backdrop.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { DrawerAttrs } from './css-vars';
 import { useDrawerContext } from './drawer-context';
 
@@ -16,22 +15,17 @@ export const DrawerBackdrop = React.forwardRef<HTMLDivElement, DrawerBackdropPro
     const { render, ...otherProps } = props;
     const { open, mounted, transitionProps, backdropRef, drag } = useDrawerContext();
 
-    const combinedRef = useMergeRefs([backdropRef, ref]);
-
-    if (!mounted) {
-      return null;
-    }
-
     const state = { open, swiping: drag.isDragging };
 
     const defaultProps = {
-      ref: combinedRef,
       ...transitionProps,
     } satisfies DefaultProps<'div'>;
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'div',
       render,
+      enabled: mounted,
+      ref: [backdropRef, ref],
       state,
       stateAttributesMapping: {
         open: (v: boolean): Record<string, string> | null => (v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' }),
diff --git a/packages/headless/src/primitives/drawer/drawer-close.tsx b/packages/headless/src/primitives/drawer/drawer-close.tsx
index cb9b1a43845..80f7ac42dd5 100644
--- a/packages/headless/src/primitives/drawer/drawer-close.tsx
+++ b/packages/headless/src/primitives/drawer/drawer-close.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useDrawerContext } from './drawer-context';
 
 /** Props for {@link DrawerClose}. */
@@ -15,15 +15,15 @@ export const DrawerClose = React.forwardRef<HTMLButtonElement, DrawerCloseProps>
 
   const defaultProps = {
     type: 'button' as const,
-    ref,
     onClick() {
       setOpen(false);
     },
   } satisfies DefaultProps<'button'>;
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'button',
     render,
+    ref,
     props: mergeProps<'button'>(defaultProps, otherProps),
   });
 });
diff --git a/packages/headless/src/primitives/drawer/drawer-description.tsx b/packages/headless/src/primitives/drawer/drawer-description.tsx
index 347e4cd9896..4b65ccd859d 100644
--- a/packages/headless/src/primitives/drawer/drawer-description.tsx
+++ b/packages/headless/src/primitives/drawer/drawer-description.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useDrawerContext } from './drawer-context';
 
 /** Props for {@link DrawerDescription}. */
@@ -16,12 +16,12 @@ export const DrawerDescription = React.forwardRef<HTMLParagraphElement, DrawerDe
 
     const defaultProps = {
       id: descriptionId,
-      ref,
     } satisfies DefaultProps<'p'>;
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'p',
       render,
+      ref,
       props: mergeProps<'p'>(defaultProps, otherProps),
     });
   },
diff --git a/packages/headless/src/primitives/drawer/drawer-handle-grip.tsx b/packages/headless/src/primitives/drawer/drawer-handle-grip.tsx
index ebd380ff0dc..2e3369b6054 100644
--- a/packages/headless/src/primitives/drawer/drawer-handle-grip.tsx
+++ b/packages/headless/src/primitives/drawer/drawer-handle-grip.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { DrawerAttrs } from './css-vars';
 
 /** Props for {@link DrawerHandleGrip}. */
@@ -20,13 +20,13 @@ export const DrawerHandleGrip = React.forwardRef<HTMLDivElement, DrawerHandlePro
     const { render, ...otherProps } = props;
 
     const defaultProps = {
-      ref,
       [DrawerAttrs.handle]: '',
     } satisfies DefaultProps<'div'>;
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'div',
       render,
+      ref,
       props: mergeProps<'div'>(defaultProps, otherProps),
     });
   },
diff --git a/packages/headless/src/primitives/drawer/drawer-popup.tsx b/packages/headless/src/primitives/drawer/drawer-popup.tsx
index e90a8ae6c07..77df11eedd3 100644
--- a/packages/headless/src/primitives/drawer/drawer-popup.tsx
+++ b/packages/headless/src/primitives/drawer/drawer-popup.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { FloatingFocusManager, useMergeRefs } from '@floating-ui/react';
+import { FloatingFocusManager } from '@floating-ui/react';
 import React, { useEffect } from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { DrawerAttrs, DrawerCssVars } from './css-vars';
 import { useDrawerContext } from './drawer-context';
 
@@ -37,12 +37,6 @@ export const DrawerPopup = React.forwardRef<HTMLDivElement, DrawerPopupProps>(fu
     nestedOpenCount,
   } = useDrawerContext();
 
-  // floating-ui types `setFloating` as a method signature, but at runtime it's
-  // a stable callback that doesn't use `this`, so the unbound-method check is a
-  // false positive here.
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const combinedRef = useMergeRefs([popupRef, refs.setFloating, ref]);
-
   // The nested-child count is a raw CSS input for the styled stack math. Written
   // imperatively (a `--*` custom property) rather than via React inline style.
   useEffect(() => {
@@ -58,12 +52,7 @@ export const DrawerPopup = React.forwardRef<HTMLDivElement, DrawerPopupProps>(fu
     popupRef.current?.style.setProperty(DrawerCssVars.snapOffset, `${snapRestOffset}px`);
   }, [popupRef, snapRestOffset]);
 
-  if (!mounted) {
-    return null;
-  }
-
   const ownProps = {
-    ref: combinedRef,
     tabIndex: -1,
     'aria-labelledby': labelId,
     'aria-describedby': descriptionId,
@@ -88,6 +77,30 @@ export const DrawerPopup = React.forwardRef<HTMLDivElement, DrawerPopupProps>(fu
     nestedOpen: nestedOpenCount > 0,
   };
 
+  const element = useRender({
+    defaultTagName: 'div',
+    render,
+    enabled: mounted,
+    // floating-ui types `setFloating` as a method signature, but at runtime it's
+    // a stable callback that doesn't use `this`, so the unbound-method check is a
+    // false positive here.
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    ref: [popupRef, refs.setFloating, ref],
+    state,
+    stateAttributesMapping: {
+      swiping: (v): Record<string, string> | null => (v ? { [DrawerAttrs.swiping]: '' } : null),
+      snap: (v): Record<string, string> | null => (v === null ? null : { [DrawerAttrs.snap]: String(v) }),
+      expanded: (v): Record<string, string> | null => (v ? { [DrawerAttrs.expanded]: '' } : null),
+      nested: (v): Record<string, string> | null => (v ? { [DrawerAttrs.nested]: '' } : null),
+      nestedOpen: (v): Record<string, string> | null => (v ? { [DrawerAttrs.nestedOpen]: '' } : null),
+    },
+    props: mergeProps<'div'>(defaultProps, otherProps),
+  });
+
+  if (!element) {
+    return null;
+  }
+
   return (
     <FloatingFocusManager
       context={floatingContext}
@@ -95,19 +108,7 @@ export const DrawerPopup = React.forwardRef<HTMLDivElement, DrawerPopupProps>(fu
       outsideElementsInert={modal}
       initialFocus={autoFocus ? undefined : popupRef}
     >
-      {renderElement({
-        defaultTagName: 'div',
-        render,
-        state,
-        stateAttributesMapping: {
-          swiping: (v): Record<string, string> | null => (v ? { [DrawerAttrs.swiping]: '' } : null),
-          snap: (v): Record<string, string> | null => (v === null ? null : { [DrawerAttrs.snap]: String(v) }),
-          expanded: (v): Record<string, string> | null => (v ? { [DrawerAttrs.expanded]: '' } : null),
-          nested: (v): Record<string, string> | null => (v ? { [DrawerAttrs.nested]: '' } : null),
-          nestedOpen: (v): Record<string, string> | null => (v ? { [DrawerAttrs.nestedOpen]: '' } : null),
-        },
-        props: mergeProps<'div'>(defaultProps, otherProps),
-      })}
+      {element}
     </FloatingFocusManager>
   );
 });
diff --git a/packages/headless/src/primitives/drawer/drawer-title.tsx b/packages/headless/src/primitives/drawer/drawer-title.tsx
index bceb9385030..6ae6b37555d 100644
--- a/packages/headless/src/primitives/drawer/drawer-title.tsx
+++ b/packages/headless/src/primitives/drawer/drawer-title.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useDrawerContext } from './drawer-context';
 
 /** Props for {@link DrawerTitle}. */
@@ -15,12 +15,12 @@ export const DrawerTitle = React.forwardRef<HTMLHeadingElement, DrawerTitleProps
 
   const defaultProps = {
     id: labelId,
-    ref,
   } satisfies DefaultProps<'h2'>;
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'h2',
     render,
+    ref,
     props: mergeProps<'h2'>(defaultProps, otherProps),
   });
 });
diff --git a/packages/headless/src/primitives/drawer/drawer-trigger.tsx b/packages/headless/src/primitives/drawer/drawer-trigger.tsx
index 9c52f96e1d0..4b826833fd0 100644
--- a/packages/headless/src/primitives/drawer/drawer-trigger.tsx
+++ b/packages/headless/src/primitives/drawer/drawer-trigger.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React, { useCallback, useContext, useSyncExternalStore } from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { DrawerContext } from './drawer-context';
 import type { DrawerHandle } from './drawer-handle';
 
@@ -35,12 +34,6 @@ export const DrawerTrigger = React.forwardRef<HTMLButtonElement, DrawerTriggerPr
       () => handle?.isOpen ?? false,
     );
 
-    // floating-ui types `setReference` as a method signature, but at runtime it's
-    // a stable callback that doesn't use `this`, so the unbound-method check is a
-    // false positive here.
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const combinedRef = useMergeRefs([ctx?.refs.setReference, ref]);
-
     if (!handle && !ctx) {
       throw new Error('Drawer.Trigger must be used within <Drawer.Root> or be given a `handle`');
     }
@@ -50,14 +43,25 @@ export const DrawerTrigger = React.forwardRef<HTMLButtonElement, DrawerTriggerPr
     const defaultProps = handle
       ? {
           type: 'button' as const,
-          ref,
           onClick: () => handle.toggle(),
         }
-      : { type: 'button' as const, ref: combinedRef, ...ctx?.getReferenceProps() };
+      : { type: 'button' as const, ...ctx?.getReferenceProps() };
+
+    // floating-ui types `setReference` as a method signature, but at runtime it's
+    // a stable callback that doesn't use `this`, so the unbound-method check is a
+    // false positive here.
+    const finalRef = handle
+      ? ref
+      : [
+          // eslint-disable-next-line @typescript-eslint/unbound-method
+          ctx?.refs.setReference,
+          ref,
+        ];
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'button',
       render,
+      ref: finalRef,
       state: { open },
       stateAttributesMapping: {
         open: (v: boolean): Record<string, string> | null => (v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' }),
diff --git a/packages/headless/src/primitives/drawer/drawer-viewport.tsx b/packages/headless/src/primitives/drawer/drawer-viewport.tsx
index 8d74cf801c0..cb3cfee1422 100644
--- a/packages/headless/src/primitives/drawer/drawer-viewport.tsx
+++ b/packages/headless/src/primitives/drawer/drawer-viewport.tsx
@@ -3,7 +3,7 @@
 import { FloatingOverlay } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useDrawerContext } from './drawer-context';
 
 /** Props for {@link DrawerViewport}. */
@@ -23,33 +23,35 @@ export const DrawerViewport = React.forwardRef<HTMLDivElement, DrawerViewportPro
     const { render, lockScroll = true, ...otherProps } = props;
     const { open, mounted, transitionProps, modal } = useDrawerContext();
 
-    if (!mounted) {
-      return null;
-    }
-
     const state = { open };
 
     const defaultProps = {
-      ref,
       ...transitionProps,
       style: modal ? undefined : { pointerEvents: 'auto' as const },
     } satisfies DefaultProps<'div'>;
 
+    const element = useRender({
+      defaultTagName: 'div',
+      render,
+      enabled: mounted,
+      ref,
+      state,
+      stateAttributesMapping: {
+        open: (v: boolean): Record<string, string> | null => (v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' }),
+      },
+      props: mergeProps<'div'>(defaultProps, otherProps),
+    });
+
+    if (!element) {
+      return null;
+    }
+
     return (
       <FloatingOverlay
         lockScroll={lockScroll}
         style={modal ? undefined : { pointerEvents: 'none' }}
       >
-        {renderElement({
-          defaultTagName: 'div',
-          render,
-          state,
-          stateAttributesMapping: {
-            open: (v: boolean): Record<string, string> | null =>
-              v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' },
-          },
-          props: mergeProps<'div'>(defaultProps, otherProps),
-        })}
+        {element}
       </FloatingOverlay>
     );
   },
diff --git a/packages/headless/src/primitives/file-upload/file-upload-dropzone.tsx b/packages/headless/src/primitives/file-upload/file-upload-dropzone.tsx
index 378ef383024..1da90680ea9 100644
--- a/packages/headless/src/primitives/file-upload/file-upload-dropzone.tsx
+++ b/packages/headless/src/primitives/file-upload/file-upload-dropzone.tsx
@@ -2,7 +2,7 @@
 
 import { type DragEvent, useRef, useState } from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useFileUploadContext } from './file-upload-context';
 
 export type FileUploadDropzoneProps = ComponentProps<'div'>;
@@ -61,7 +61,7 @@ export function FileUploadDropzone(props: FileUploadDropzoneProps) {
     },
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'div',
     render,
     state,
diff --git a/packages/headless/src/primitives/file-upload/file-upload-item-delete.tsx b/packages/headless/src/primitives/file-upload/file-upload-item-delete.tsx
index eb571e7bcd6..3e8138d5680 100644
--- a/packages/headless/src/primitives/file-upload/file-upload-item-delete.tsx
+++ b/packages/headless/src/primitives/file-upload/file-upload-item-delete.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useFileUploadContext, useFileUploadItemContext } from './file-upload-context';
 
 export type FileUploadItemDeleteProps = ComponentProps<'button'>;
@@ -23,7 +23,7 @@ export function FileUploadItemDelete(props: FileUploadItemDeleteProps) {
     },
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'button',
     render,
     state,
diff --git a/packages/headless/src/primitives/file-upload/file-upload-item-preview.tsx b/packages/headless/src/primitives/file-upload/file-upload-item-preview.tsx
index b5b6f303542..bdd30807d6e 100644
--- a/packages/headless/src/primitives/file-upload/file-upload-item-preview.tsx
+++ b/packages/headless/src/primitives/file-upload/file-upload-item-preview.tsx
@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useFileUploadItemContext } from './file-upload-context';
 
 export type FileUploadItemPreviewProps = ComponentProps<'img'>;
@@ -36,12 +36,12 @@ export const FileUploadItemPreview = React.forwardRef<HTMLImageElement, FileUplo
       'data-cl-slot': 'file-upload-item-preview',
       src: objectUrl,
       alt: file.name,
-      ref,
     };
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'img',
       render,
+      ref,
       // Only render once we are an image with a ready object URL, so we never
       // emit an <img> with an empty src.
       enabled: isImage && objectUrl != null,
diff --git a/packages/headless/src/primitives/file-upload/file-upload-item.tsx b/packages/headless/src/primitives/file-upload/file-upload-item.tsx
index 3a1123d5adc..8706328f387 100644
--- a/packages/headless/src/primitives/file-upload/file-upload-item.tsx
+++ b/packages/headless/src/primitives/file-upload/file-upload-item.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback, useMemo } from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { FileUploadItemContext, type FileUploadItemContextValue, useFileUploadContext } from './file-upload-context';
 
 export interface FileUploadItemProps extends ComponentProps<'div'> {
@@ -26,7 +26,7 @@ export function FileUploadItem(props: FileUploadItemProps) {
 
   return (
     <FileUploadItemContext.Provider value={itemContextValue}>
-      {renderElement({
+      {useRender({
         defaultTagName: 'div',
         render,
         state,
diff --git a/packages/headless/src/primitives/file-upload/file-upload-root.tsx b/packages/headless/src/primitives/file-upload/file-upload-root.tsx
index eb821e02e6b..48458999567 100644
--- a/packages/headless/src/primitives/file-upload/file-upload-root.tsx
+++ b/packages/headless/src/primitives/file-upload/file-upload-root.tsx
@@ -3,7 +3,7 @@
 import { type CSSProperties, type ReactNode, useCallback, useId, useMemo, useRef } from 'react';
 
 import { useControllableState } from '../../hooks/use-controllable-state';
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { isFileAccepted } from './accept';
 import { FileUploadContext, type FileUploadContextValue } from './file-upload-context';
 
@@ -170,7 +170,7 @@ export function FileUploadRoot(props: FileUploadProps) {
 
   return (
     <FileUploadContext.Provider value={contextValue}>
-      {renderElement({
+      {useRender({
         defaultTagName: 'div',
         render,
         state,
diff --git a/packages/headless/src/primitives/file-upload/file-upload-trigger.tsx b/packages/headless/src/primitives/file-upload/file-upload-trigger.tsx
index 558e9454469..3eefb0a1356 100644
--- a/packages/headless/src/primitives/file-upload/file-upload-trigger.tsx
+++ b/packages/headless/src/primitives/file-upload/file-upload-trigger.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useFileUploadContext } from './file-upload-context';
 
 export type FileUploadTriggerProps = ComponentProps<'button'>;
@@ -18,7 +18,7 @@ export function FileUploadTrigger(props: FileUploadTriggerProps) {
     onClick: () => openFilePicker(),
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'button',
     render,
     state,
diff --git a/packages/headless/src/primitives/menu/menu-item.tsx b/packages/headless/src/primitives/menu/menu-item.tsx
index 26d74829c6a..8376f85c53c 100644
--- a/packages/headless/src/primitives/menu/menu-item.tsx
+++ b/packages/headless/src/primitives/menu/menu-item.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { useFloatingTree, useListItem, useMergeRefs } from '@floating-ui/react';
+import { useFloatingTree, useListItem } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useMenuContext } from './menu-context';
 
 export interface MenuItemProps extends ComponentProps<'button'> {
@@ -24,8 +24,6 @@ export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(funct
   const item = useListItem({ label: disabled ? null : label });
   const isActive = item.index === activeIndex;
 
-  const combinedRef = useMergeRefs([item.ref, ref]);
-
   const state = {
     active: isActive,
     disabled: !!disabled,
@@ -34,7 +32,6 @@ export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(funct
   const ownProps = {
     'data-cl-slot': 'menu-item',
     type: 'button',
-    ref: combinedRef,
     role: 'menuitem',
     tabIndex: isActive ? 0 : -1,
     ...(disabled && { 'aria-disabled': true }),
@@ -51,9 +48,10 @@ export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(funct
     }),
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'button',
     render,
+    ref: [item.ref, ref],
     state,
     stateAttributesMapping: {
       active: (v: boolean) => (v ? { 'data-cl-active': '' } : null),
diff --git a/packages/headless/src/primitives/menu/menu-popup.tsx b/packages/headless/src/primitives/menu/menu-popup.tsx
index 22e5f6ca3c2..94cc628d1e1 100644
--- a/packages/headless/src/primitives/menu/menu-popup.tsx
+++ b/packages/headless/src/primitives/menu/menu-popup.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useMenuContext } from './menu-context';
 
 export type MenuPopupProps = ComponentProps<'div'>;
@@ -12,17 +11,15 @@ export const MenuPopup = React.forwardRef<HTMLDivElement, MenuPopupProps>(functi
   const { render, ...otherProps } = props;
   const { popupRef, transitionProps } = useMenuContext();
 
-  const combinedRef = useMergeRefs([popupRef, ref]);
-
   const defaultProps = {
     'data-cl-slot': 'menu-popup',
-    ref: combinedRef,
     ...transitionProps,
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'div',
     render,
+    ref: [popupRef, ref],
     props: mergeProps<'div'>(defaultProps, otherProps),
   });
 });
diff --git a/packages/headless/src/primitives/menu/menu-positioner.tsx b/packages/headless/src/primitives/menu/menu-positioner.tsx
index db1bab027e4..844e1290f66 100644
--- a/packages/headless/src/primitives/menu/menu-positioner.tsx
+++ b/packages/headless/src/primitives/menu/menu-positioner.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { FloatingFocusManager, FloatingList, useMergeRefs } from '@floating-ui/react';
+import { FloatingFocusManager, FloatingList } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useMenuContext } from './menu-context';
 
 export type MenuPositionerProps = ComponentProps<'div'>;
@@ -24,12 +24,6 @@ export const MenuPositioner = React.forwardRef<HTMLDivElement, MenuPositionerPro
       setActiveIndex,
     } = useMenuContext();
 
-    // floating-ui types `setFloating` as a method signature, but at runtime it's
-    // a stable callback that doesn't use `this`, so the unbound-method check is a
-    // false positive here.
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const combinedRef = useMergeRefs([refs.setFloating, ref]);
-
     const side = placement.split('-')[0];
 
     const floatingProps = getFloatingProps({
@@ -58,16 +52,11 @@ export const MenuPositioner = React.forwardRef<HTMLDivElement, MenuPositionerPro
     const ownProps = {
       'data-cl-slot': 'menu-positioner',
       'data-cl-side': side,
-      ref: combinedRef,
       style: floatingStyles,
     } satisfies DefaultProps<'div'>;
 
     const defaultProps = { ...ownProps, ...floatingProps };
 
-    if (!mounted) {
-      return null;
-    }
-
     const merged = mergeProps<'div'>(defaultProps, otherProps);
     // The menu id is owned by floating-ui's menu role: a consumer-supplied id must
     // not override it, or the trigger's aria-controls pairing would silently break.
@@ -75,12 +64,22 @@ export const MenuPositioner = React.forwardRef<HTMLDivElement, MenuPositionerPro
       merged.id = floatingProps.id;
     }
 
-    const element = renderElement({
+    const element = useRender({
       defaultTagName: 'div',
       render,
+      enabled: mounted,
+      // floating-ui types `setFloating` as a method signature, but at runtime it's
+      // a stable callback that doesn't use `this`, so the unbound-method check is a
+      // false positive here.
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      ref: [refs.setFloating, ref],
       props: merged,
     });
 
+    if (!element) {
+      return null;
+    }
+
     return (
       <FloatingFocusManager
         context={floatingContext}
diff --git a/packages/headless/src/primitives/menu/menu-separator.tsx b/packages/headless/src/primitives/menu/menu-separator.tsx
index d1990043dac..c6ea5fd2bab 100644
--- a/packages/headless/src/primitives/menu/menu-separator.tsx
+++ b/packages/headless/src/primitives/menu/menu-separator.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 
 export type MenuSeparatorProps = ComponentProps<'div'>;
 
@@ -12,7 +12,7 @@ export function MenuSeparator(props: MenuSeparatorProps) {
     role: 'separator' as const,
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'div',
     render,
     props: mergeProps<'div'>(defaultProps, otherProps),
diff --git a/packages/headless/src/primitives/menu/menu-trigger.tsx b/packages/headless/src/primitives/menu/menu-trigger.tsx
index c639be8caac..c6dc10f3c2c 100644
--- a/packages/headless/src/primitives/menu/menu-trigger.tsx
+++ b/packages/headless/src/primitives/menu/menu-trigger.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { useListItem, useMergeRefs } from '@floating-ui/react';
+import { useListItem } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useMenuContext } from './menu-context';
 
 export type MenuTriggerProps = ComponentProps<'button'>;
@@ -14,12 +14,6 @@ export const MenuTrigger = React.forwardRef<HTMLButtonElement, MenuTriggerProps>
 
   const item = useListItem();
 
-  // floating-ui types `setReference` as a method signature, but at runtime it's
-  // a stable callback that doesn't use `this`, so the unbound-method check is a
-  // false positive here.
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const mergedRef = useMergeRefs([refs.setReference, isNested ? item.ref : null, ref ?? null]);
-
   const state = { open };
 
   let referenceProps: Record<string, unknown>;
@@ -33,7 +27,6 @@ export const MenuTrigger = React.forwardRef<HTMLButtonElement, MenuTriggerProps>
   const ownProps = {
     type: 'button',
     'data-cl-slot': 'menu-trigger',
-    ref: mergedRef,
     ...(isNested && {
       role: 'menuitem',
       tabIndex: parentContext?.activeIndex === item.index ? 0 : -1,
@@ -42,9 +35,14 @@ export const MenuTrigger = React.forwardRef<HTMLButtonElement, MenuTriggerProps>
 
   const defaultProps = { ...ownProps, ...referenceProps };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'button',
     render,
+    // floating-ui types `setReference` as a method signature, but at runtime it's
+    // a stable callback that doesn't use `this`, so the unbound-method check is a
+    // false positive here.
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    ref: [refs.setReference, isNested ? item.ref : null, ref ?? null],
     state,
     stateAttributesMapping: {
       open: (v: boolean): Record<string, string> | null => (v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' }),
diff --git a/packages/headless/src/primitives/otp/otp-input.tsx b/packages/headless/src/primitives/otp/otp-input.tsx
index 347dc22db03..3486a9fb856 100644
--- a/packages/headless/src/primitives/otp/otp-input.tsx
+++ b/packages/headless/src/primitives/otp/otp-input.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React, { useCallback } from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useOtpContext } from './otp-context';
 import { inputModeForPattern, removeAt, replaceAt, sanitize } from './otp-utils';
 
@@ -36,8 +35,6 @@ export const OtpInput = React.forwardRef<HTMLInputElement, OtpInputProps>(functi
     element => registerInput(index, element),
     [registerInput, index],
   );
-  // Compose our slot registration with any ref the consumer forwards.
-  const setRef = useMergeRefs([registerRef, forwardedRef]);
 
   // Roving tab order: the focused slot is the tab stop, or the next empty slot
   // when the field is unfocused, so Tab enters and leaves the group once.
@@ -47,7 +44,6 @@ export const OtpInput = React.forwardRef<HTMLInputElement, OtpInputProps>(functi
 
   const defaultProps: Record<string, unknown> = {
     'data-cl-slot': 'otp-input',
-    ref: setRef,
     value: char,
     type: mask ? 'password' : 'text',
     inputMode: inputModeForPattern(pattern),
@@ -202,9 +198,10 @@ export const OtpInput = React.forwardRef<HTMLInputElement, OtpInputProps>(functi
     },
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'input',
     render,
+    ref: [registerRef, forwardedRef],
     state,
     stateAttributesMapping: {
       active: (v: boolean) => (v ? { 'data-cl-active': '' } : null),
diff --git a/packages/headless/src/primitives/otp/otp-root.tsx b/packages/headless/src/primitives/otp/otp-root.tsx
index 27dea3b67c6..5d55aa99c35 100644
--- a/packages/headless/src/primitives/otp/otp-root.tsx
+++ b/packages/headless/src/primitives/otp/otp-root.tsx
@@ -3,7 +3,7 @@
 import { type CSSProperties, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useControllableState } from '../../hooks/use-controllable-state';
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { OtpContext, type OtpContextValue, type OtpSlot } from './otp-context';
 import { inputModeForPattern, type OtpPattern, sanitize } from './otp-utils';
 
@@ -200,7 +200,7 @@ export function OtpRoot(props: OtpProps) {
 
   return (
     <OtpContext.Provider value={contextValue}>
-      {renderElement({
+      {useRender({
         defaultTagName: 'div',
         render,
         state,
diff --git a/packages/headless/src/primitives/popover/popover-close.tsx b/packages/headless/src/primitives/popover/popover-close.tsx
index 545ee097df6..89c968a4166 100644
--- a/packages/headless/src/primitives/popover/popover-close.tsx
+++ b/packages/headless/src/primitives/popover/popover-close.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { usePopoverContext } from './popover-context';
 
 export type PopoverCloseProps = ComponentProps<'button'>;
@@ -17,7 +17,7 @@ export function PopoverClose(props: PopoverCloseProps) {
     },
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'button',
     render,
     props: mergeProps<'button'>(defaultProps, otherProps),
diff --git a/packages/headless/src/primitives/popover/popover-description.tsx b/packages/headless/src/primitives/popover/popover-description.tsx
index 598de543142..e6b3a6788fe 100644
--- a/packages/headless/src/primitives/popover/popover-description.tsx
+++ b/packages/headless/src/primitives/popover/popover-description.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { usePopoverContext } from './popover-context';
 
 export type PopoverDescriptionProps = Omit<ComponentProps<'p'>, 'id'>;
@@ -21,7 +21,7 @@ export function PopoverDescription(props: PopoverDescriptionProps) {
     id: descriptionId,
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'p',
     render,
     props: mergeProps<'p'>(defaultProps, otherProps),
diff --git a/packages/headless/src/primitives/popover/popover-popup.tsx b/packages/headless/src/primitives/popover/popover-popup.tsx
index 197ebfd9a5a..eb73b96ffe4 100644
--- a/packages/headless/src/primitives/popover/popover-popup.tsx
+++ b/packages/headless/src/primitives/popover/popover-popup.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { usePopoverContext } from './popover-context';
 
 export type PopoverPopupProps = ComponentProps<'div'>;
@@ -12,17 +11,15 @@ export const PopoverPopup = React.forwardRef<HTMLDivElement, PopoverPopupProps>(
   const { render, ...otherProps } = props;
   const { popupRef, transitionProps } = usePopoverContext();
 
-  const combinedRef = useMergeRefs([popupRef, ref]);
-
   const defaultProps = {
     'data-cl-slot': 'popover-popup',
-    ref: combinedRef,
     ...transitionProps,
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'div',
     render,
+    ref: [popupRef, ref],
     props: mergeProps<'div'>(defaultProps, otherProps),
   });
 });
diff --git a/packages/headless/src/primitives/popover/popover-positioner.tsx b/packages/headless/src/primitives/popover/popover-positioner.tsx
index 3a07a70519f..5b65eea3bac 100644
--- a/packages/headless/src/primitives/popover/popover-positioner.tsx
+++ b/packages/headless/src/primitives/popover/popover-positioner.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { FloatingFocusManager, useMergeRefs } from '@floating-ui/react';
+import { FloatingFocusManager } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { usePopoverContext } from './popover-context';
 
 export type PopoverPositionerProps = ComponentProps<'div'>;
@@ -27,16 +27,9 @@ export const PopoverPositioner = React.forwardRef<HTMLDivElement, PopoverPositio
 
     const side = placement.split('-')[0];
 
-    // floating-ui types `setFloating` as a method signature, but at runtime it's
-    // a stable callback that doesn't use `this`, so the unbound-method check is a
-    // false positive here.
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const combinedRef = useMergeRefs([refs.setFloating, ref]);
-
     const ownProps = {
       'data-cl-slot': 'popover-positioner',
       'data-cl-side': side,
-      ref: combinedRef,
       style: floatingStyles,
       ...(hasTitle && { 'aria-labelledby': labelId }),
       ...(hasDescription && { 'aria-describedby': descriptionId }),
@@ -44,10 +37,15 @@ export const PopoverPositioner = React.forwardRef<HTMLDivElement, PopoverPositio
 
     const defaultProps = { ...ownProps, ...getFloatingProps() };
 
-    const element = renderElement({
+    const element = useRender({
       defaultTagName: 'div',
       render,
       enabled: mounted,
+      // floating-ui types `setFloating` as a method signature, but at runtime it's
+      // a stable callback that doesn't use `this`, so the unbound-method check is a
+      // false positive here.
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      ref: [refs.setFloating, ref],
       props: mergeProps<'div'>(defaultProps, otherProps),
     });
 
diff --git a/packages/headless/src/primitives/popover/popover-title.tsx b/packages/headless/src/primitives/popover/popover-title.tsx
index 62d3605d007..66c7b681d22 100644
--- a/packages/headless/src/primitives/popover/popover-title.tsx
+++ b/packages/headless/src/primitives/popover/popover-title.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { usePopoverContext } from './popover-context';
 
 export type PopoverTitleProps = Omit<ComponentProps<'h2'>, 'id'>;
@@ -21,7 +21,7 @@ export function PopoverTitle(props: PopoverTitleProps) {
     id: labelId,
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'h2',
     render,
     props: mergeProps<'h2'>(defaultProps, otherProps),
diff --git a/packages/headless/src/primitives/popover/popover-trigger.tsx b/packages/headless/src/primitives/popover/popover-trigger.tsx
index b4b5bc8f17c..b96dffa15d6 100644
--- a/packages/headless/src/primitives/popover/popover-trigger.tsx
+++ b/packages/headless/src/primitives/popover/popover-trigger.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { usePopoverContext } from './popover-context';
 
 export type PopoverTriggerProps = ComponentProps<'button'>;
@@ -13,25 +12,23 @@ export const PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTrigger
     const { render, ...otherProps } = props;
     const { open, refs, getReferenceProps } = usePopoverContext();
 
-    // floating-ui types `setReference` as a method signature, but at runtime it's
-    // a stable callback that doesn't use `this`, so the unbound-method check is a
-    // false positive here.
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const combinedRef = useMergeRefs([refs.setReference, ref]);
-
     const state = { open };
 
     const ownProps = {
       type: 'button',
       'data-cl-slot': 'popover-trigger',
-      ref: combinedRef,
     } satisfies DefaultProps<'button'>;
 
     const defaultProps = { ...ownProps, ...getReferenceProps() };
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'button',
       render,
+      // floating-ui types `setReference` as a method signature, but at runtime it's
+      // a stable callback that doesn't use `this`, so the unbound-method check is a
+      // false positive here.
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      ref: [refs.setReference, ref],
       state,
       stateAttributesMapping: {
         open: (v: boolean): Record<string, string> | null => (v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' }),
diff --git a/packages/headless/src/primitives/select/select-option.tsx b/packages/headless/src/primitives/select/select-option.tsx
index f93a27b0c07..a2be6bc8d16 100644
--- a/packages/headless/src/primitives/select/select-option.tsx
+++ b/packages/headless/src/primitives/select/select-option.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { useListItem, useMergeRefs } from '@floating-ui/react';
+import { useListItem } from '@floating-ui/react';
 import { useEffect } from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useSelectContext } from './select-context';
 
 export interface SelectOptionProps extends ComponentProps<'button'> {
@@ -37,8 +37,6 @@ export function SelectOption(props: SelectOptionProps) {
     }
   }, [index, isSelected, setSelectedIndex]);
 
-  const combinedRef = useMergeRefs([itemRef, isSelected ? selectedItemRef : null]);
-
   const state = {
     selected: isSelected,
     active: isActive,
@@ -48,7 +46,6 @@ export function SelectOption(props: SelectOptionProps) {
   const ownProps = {
     'data-cl-slot': 'select-option',
     type: 'button',
-    ref: combinedRef,
     role: 'option',
     'aria-selected': isSelected,
     'aria-disabled': disabled || undefined,
@@ -66,7 +63,7 @@ export function SelectOption(props: SelectOptionProps) {
     }),
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'button',
     render,
     state,
@@ -75,6 +72,7 @@ export function SelectOption(props: SelectOptionProps) {
       active: (v: boolean) => (v ? { 'data-cl-active': '' } : null),
       disabled: (v: boolean) => (v ? { 'data-cl-disabled': '' } : null),
     },
+    ref: [itemRef, isSelected ? selectedItemRef : null],
     props: mergeProps<'button'>(defaultProps, otherProps),
   });
 }
diff --git a/packages/headless/src/primitives/select/select-popup.tsx b/packages/headless/src/primitives/select/select-popup.tsx
index 9d8ba64bc17..10fb3f0dd09 100644
--- a/packages/headless/src/primitives/select/select-popup.tsx
+++ b/packages/headless/src/primitives/select/select-popup.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useSelectContext } from './select-context';
 
 export type SelectPopupProps = ComponentProps<'div'>;
@@ -12,17 +11,15 @@ export const SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(fu
   const { render, ...otherProps } = props;
   const { popupRef, transitionProps } = useSelectContext();
 
-  const combinedRef = useMergeRefs([popupRef, ref]);
-
   const defaultProps = {
     'data-cl-slot': 'select-popup',
-    ref: combinedRef,
     ...transitionProps,
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'div',
     render,
+    ref: [popupRef, ref],
     props: mergeProps<'div'>(defaultProps, otherProps),
   });
 });
diff --git a/packages/headless/src/primitives/select/select-positioner.tsx b/packages/headless/src/primitives/select/select-positioner.tsx
index d63b4a610ac..0586c987b3f 100644
--- a/packages/headless/src/primitives/select/select-positioner.tsx
+++ b/packages/headless/src/primitives/select/select-positioner.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { FloatingFocusManager, FloatingList, useMergeRefs } from '@floating-ui/react';
+import { FloatingFocusManager, FloatingList } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useSelectContext } from './select-context';
 
 export type SelectPositionerProps = ComponentProps<'div'>;
@@ -25,12 +25,6 @@ export const SelectPositioner = React.forwardRef<HTMLDivElement, SelectPositione
 
     const side = placement.split('-')[0];
 
-    // floating-ui types `setFloating` as a method signature, but at runtime it's
-    // a stable callback that doesn't use `this`, so the unbound-method check is a
-    // false positive here.
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const combinedRef = useMergeRefs([refs.setFloating, ref]);
-
     const floatingProps = getFloatingProps({
       onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
         if (event.key === 'Home' || event.key === 'End') {
@@ -57,7 +51,6 @@ export const SelectPositioner = React.forwardRef<HTMLDivElement, SelectPositione
     const ownProps = {
       'data-cl-slot': 'select-positioner',
       'data-cl-side': side,
-      ref: combinedRef,
       style: floatingStyles,
     } satisfies DefaultProps<'div'>;
 
@@ -71,6 +64,22 @@ export const SelectPositioner = React.forwardRef<HTMLDivElement, SelectPositione
       merged.id = floatingProps.id;
     }
 
+    const element = useRender({
+      defaultTagName: 'div',
+      render,
+      enabled: mounted,
+      // floating-ui types `setFloating` as a method signature, but at runtime it's
+      // a stable callback that doesn't use `this`, so the unbound-method check is a
+      // false positive here.
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      ref: [refs.setFloating, ref],
+      props: merged,
+    });
+
+    if (!element) {
+      return null;
+    }
+
     return (
       <FloatingFocusManager
         context={floatingContext}
@@ -80,12 +89,7 @@ export const SelectPositioner = React.forwardRef<HTMLDivElement, SelectPositione
           elementsRef={elementsRef}
           labelsRef={labelsRef}
         >
-          {renderElement({
-            defaultTagName: 'div',
-            render,
-            enabled: mounted,
-            props: merged,
-          })}
+          {element}
         </FloatingList>
       </FloatingFocusManager>
     );
diff --git a/packages/headless/src/primitives/select/select-trigger.tsx b/packages/headless/src/primitives/select/select-trigger.tsx
index c02bccb4ab9..8b5ada7ce89 100644
--- a/packages/headless/src/primitives/select/select-trigger.tsx
+++ b/packages/headless/src/primitives/select/select-trigger.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useSelectContext } from './select-context';
 
 export type SelectTriggerProps = ComponentProps<'button'>;
@@ -13,29 +12,27 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
     const { render, ...otherProps } = props;
     const { open, refs, getReferenceProps } = useSelectContext();
 
-    // floating-ui types `setReference` as a method signature, but at runtime it's
-    // a stable callback that doesn't use `this`, so the unbound-method check is a
-    // false positive here.
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const combinedRef = useMergeRefs([refs.setReference, ref]);
-
     const state = { open };
 
     const ownProps = {
       type: 'button',
       'data-cl-slot': 'select-trigger',
-      ref: combinedRef,
     } satisfies DefaultProps<'button'>;
 
     const defaultProps = { ...ownProps, ...getReferenceProps() };
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'button',
       render,
       state,
       stateAttributesMapping: {
         open: (v: boolean): Record<string, string> | null => (v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' }),
       },
+      // floating-ui types `setReference` as a method signature, but at runtime it's
+      // a stable callback that doesn't use `this`, so the unbound-method check is a
+      // false positive here.
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      ref: [refs.setReference, ref],
       props: mergeProps<'button'>(defaultProps, otherProps),
     });
   },
diff --git a/packages/headless/src/primitives/select/select-value.tsx b/packages/headless/src/primitives/select/select-value.tsx
index 8c28ece29d8..dc95462efe1 100644
--- a/packages/headless/src/primitives/select/select-value.tsx
+++ b/packages/headless/src/primitives/select/select-value.tsx
@@ -2,7 +2,7 @@
 
 import type { ReactNode } from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import type { SelectItem } from './select-context';
 import { useSelectContext } from './select-context';
 
@@ -43,7 +43,7 @@ export function SelectValue(props: SelectValueProps) {
     children: displayText,
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'span',
     render,
     props: mergeProps<'span'>(defaultProps, otherProps),
diff --git a/packages/headless/src/primitives/tabs/tabs-indicator.tsx b/packages/headless/src/primitives/tabs/tabs-indicator.tsx
index 7e8d5788fea..13aabfc5d9d 100644
--- a/packages/headless/src/primitives/tabs/tabs-indicator.tsx
+++ b/packages/headless/src/primitives/tabs/tabs-indicator.tsx
@@ -3,7 +3,7 @@
 import type React from 'react';
 import { useLayoutEffect, useRef, useState } from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useTabsContext } from './tabs-context';
 
 export type TabsIndicatorProps = ComponentProps<'span'>;
@@ -74,7 +74,7 @@ export function TabsIndicator(props: TabsIndicatorProps) {
     style,
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'span',
     render,
     props: mergeProps<'span'>(defaultProps, otherProps),
diff --git a/packages/headless/src/primitives/tabs/tabs-list.tsx b/packages/headless/src/primitives/tabs/tabs-list.tsx
index a9aa700a890..93e4dd2467c 100644
--- a/packages/headless/src/primitives/tabs/tabs-list.tsx
+++ b/packages/headless/src/primitives/tabs/tabs-list.tsx
@@ -3,7 +3,7 @@
 import { Composite } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useTabsContext } from './tabs-context';
 
 export type TabsListProps = ComponentProps<'div'>;
@@ -39,10 +39,22 @@ export function TabsList(props: TabsListProps) {
           mergeProps<'div'>(otherProps, compositeProps as Record<string, unknown>),
         );
 
-        return renderElement({
+        // Composite may inject a ref via compositeProps; hand it to useRender's ref
+        // param (which owns ref-merging) instead of leaving it in props, where
+        // useRender's merged ref would overwrite it.
+        const { ref: compositeRef, ...mergedProps } = merged;
+
+        // floating-ui's Composite invokes this render callback synchronously and
+        // unconditionally during its own render (see renderJsx), so useRender runs in a
+        // stable hook position on the Composite fiber. The rule can't see that.
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useRender({
           defaultTagName: 'div',
           render,
-          props: merged,
+          // SAFETY: mergeProps returns Record<string, unknown>; a ref Composite injected
+          // is a valid React ref at runtime.
+          ref: compositeRef as React.Ref<unknown>,
+          props: mergedProps,
         });
       }}
     >
diff --git a/packages/headless/src/primitives/tabs/tabs-panel.tsx b/packages/headless/src/primitives/tabs/tabs-panel.tsx
index 9bc22eef12f..bd5593e3a28 100644
--- a/packages/headless/src/primitives/tabs/tabs-panel.tsx
+++ b/packages/headless/src/primitives/tabs/tabs-panel.tsx
@@ -1,11 +1,10 @@
 'use client';
 
 import { inertProps } from '@clerk/shared/inert';
-import { useMergeRefs } from '@floating-ui/react';
 import React, { useRef } from 'react';
 
 import { useTransition } from '../../hooks/use-transition';
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useTabsContext } from './tabs-context';
 
 export interface TabsPanelProps extends ComponentProps<'div'> {
@@ -23,9 +22,6 @@ export const TabsPanel = React.forwardRef<HTMLDivElement, TabsPanelProps>(functi
   const panelId = `${tabsId}-panel-${panelValue}`;
 
   const panelRef = useRef<HTMLDivElement | null>(null);
-  // Merge the consumer ref with the internal panelRef so passing a ref does not
-  // clobber the ref the panel relies on for transition tracking.
-  const combinedRef = useMergeRefs([panelRef, ref]);
   const { transitionProps } = useTransition({
     open: isSelected,
     ref: panelRef,
@@ -54,7 +50,6 @@ export const TabsPanel = React.forwardRef<HTMLDivElement, TabsPanelProps>(functi
     tabIndex: 0,
     ...inertProps(!isSelected),
     hidden: !isSelected && !shouldForceMount ? true : undefined,
-    ref: combinedRef,
     ...(shouldForceMount
       ? {
           ...effectiveTransitionProps,
@@ -68,9 +63,10 @@ export const TabsPanel = React.forwardRef<HTMLDivElement, TabsPanelProps>(functi
   // override it, or the tab/panel aria pairing would silently break.
   merged.id = panelId;
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'div',
     render,
+    ref: [panelRef, ref],
     state,
     stateAttributesMapping: {
       hidden: (v: boolean) => (v ? { 'data-cl-hidden': '' } : null),
diff --git a/packages/headless/src/primitives/tabs/tabs-tab.tsx b/packages/headless/src/primitives/tabs/tabs-tab.tsx
index e610e91c188..3a3bc7fb5be 100644
--- a/packages/headless/src/primitives/tabs/tabs-tab.tsx
+++ b/packages/headless/src/primitives/tabs/tabs-tab.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { CompositeItem, useMergeRefs } from '@floating-ui/react';
+import { CompositeItem } from '@floating-ui/react';
 import React, { useLayoutEffect, useRef } from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useTabsContext } from './tabs-context';
 
 export interface TabsTabProps extends ComponentProps<'button'> {
@@ -19,7 +19,6 @@ export const TabsTab = React.forwardRef<HTMLButtonElement, TabsTabProps>(functio
   const tabId = `${tabsId}-tab-${tabValue}`;
   const panelId = `${tabsId}-panel-${tabValue}`;
   const internalRef = useRef<HTMLButtonElement | null>(null);
-  const combinedRef = useMergeRefs([internalRef, ref]);
 
   useLayoutEffect(() => {
     registerTab(tabValue, internalRef.current);
@@ -33,7 +32,7 @@ export const TabsTab = React.forwardRef<HTMLButtonElement, TabsTabProps>(functio
 
   return (
     <CompositeItem
-      ref={combinedRef}
+      ref={internalRef}
       disabled={disabled}
       render={(compositeProps: React.HTMLAttributes<HTMLElement>) => {
         const defaultProps: Record<string, unknown> = {
@@ -77,15 +76,27 @@ export const TabsTab = React.forwardRef<HTMLButtonElement, TabsTabProps>(functio
         // override it, or the tab/panel aria pairing would silently break.
         merged.id = tabId;
 
-        return renderElement({
+        // CompositeItem injects its roving-tabindex ref via compositeProps; hand it to
+        // useRender's ref param (which owns ref-merging) instead of leaving it in props,
+        // where useRender's merged ref would overwrite it and break focus navigation.
+        const { ref: compositeRef, ...mergedProps } = merged;
+
+        // floating-ui's CompositeItem invokes this render callback synchronously and
+        // unconditionally during its own render (see renderJsx), so useRender runs in a
+        // stable hook position on the CompositeItem fiber. The rule can't see that.
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useRender({
           defaultTagName: 'button',
           render,
+          // SAFETY: mergeProps returns Record<string, unknown>; the ref CompositeItem
+          // injected is a valid React ref at runtime.
+          ref: [internalRef, compositeRef as React.Ref<unknown>, ref],
           state,
           stateAttributesMapping: {
             selected: (v: boolean) => (v ? { 'data-cl-selected': '' } : null),
             disabled: (v: boolean) => (v ? { 'data-cl-disabled': '' } : null),
           },
-          props: merged,
+          props: mergedProps,
         });
       }}
     >
diff --git a/packages/headless/src/primitives/tabs/tabs-trigger.tsx b/packages/headless/src/primitives/tabs/tabs-trigger.tsx
index 74b4ef72ce9..e7fbbb96aac 100644
--- a/packages/headless/src/primitives/tabs/tabs-trigger.tsx
+++ b/packages/headless/src/primitives/tabs/tabs-trigger.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React, { useLayoutEffect, useRef } from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useTabsContext } from './tabs-context';
 
 export interface TabsTriggerProps extends ComponentProps<'button'> {
@@ -15,7 +14,6 @@ export const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>
   const { render, value: tabValue, disabled, ...otherProps } = props;
   const { value: selectedValue, setValue, tabsId, registerTab } = useTabsContext();
   const triggerRef = useRef<HTMLButtonElement | null>(null);
-  const combinedRef = useMergeRefs([triggerRef, ref]);
 
   const isSelected = selectedValue === tabValue;
   const tabId = `${tabsId}-tab-${tabValue}`;
@@ -33,7 +31,6 @@ export const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>
 
   const defaultProps = {
     'data-cl-slot': 'tabs-trigger',
-    ref: combinedRef,
     id: tabId,
     role: 'tab' as const,
     type: 'button' as const,
@@ -52,9 +49,10 @@ export const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>
   // override it, or the tab/panel aria pairing would silently break.
   merged.id = tabId;
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'button',
     render,
+    ref: [triggerRef, ref],
     state,
     stateAttributesMapping: {
       selected: (v: boolean) => (v ? { 'data-cl-selected': '' } : null),
diff --git a/packages/headless/src/primitives/tooltip/tooltip-popup.tsx b/packages/headless/src/primitives/tooltip/tooltip-popup.tsx
index 8ba242a0c53..ef00ac8e71d 100644
--- a/packages/headless/src/primitives/tooltip/tooltip-popup.tsx
+++ b/packages/headless/src/primitives/tooltip/tooltip-popup.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
 import { useTooltipContext } from './tooltip-context';
 
 export type TooltipPopupProps = ComponentProps<'div'>;
@@ -12,17 +11,15 @@ export const TooltipPopup = React.forwardRef<HTMLDivElement, TooltipPopupProps>(
   const { render, ...otherProps } = props;
   const { popupRef, transitionProps } = useTooltipContext();
 
-  const combinedRef = useMergeRefs([popupRef, ref]);
-
   const defaultProps = {
     'data-cl-slot': 'tooltip-popup',
-    ref: combinedRef,
     ...transitionProps,
   };
 
-  return renderElement({
+  return useRender({
     defaultTagName: 'div',
     render,
+    ref: [popupRef, ref],
     props: mergeProps<'div'>(defaultProps, otherProps),
   });
 });
diff --git a/packages/headless/src/primitives/tooltip/tooltip-positioner.tsx b/packages/headless/src/primitives/tooltip/tooltip-positioner.tsx
index 221ba845caf..963e5856c29 100644
--- a/packages/headless/src/primitives/tooltip/tooltip-positioner.tsx
+++ b/packages/headless/src/primitives/tooltip/tooltip-positioner.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useTooltipContext } from './tooltip-context';
 
 export type TooltipPositionerProps = ComponentProps<'div'>;
@@ -13,12 +12,6 @@ export const TooltipPositioner = React.forwardRef<HTMLDivElement, TooltipPositio
     const { render, ...otherProps } = props;
     const { mounted, refs, floatingStyles, placement, getFloatingProps } = useTooltipContext();
 
-    // floating-ui types `setFloating` as a method signature, but at runtime it's
-    // a stable callback that doesn't use `this`, so the unbound-method check is a
-    // false positive here.
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const combinedRef = useMergeRefs([refs.setFloating, ref]);
-
     const side = placement.split('-')[0];
     const floatingProps = getFloatingProps();
     const wiredId = floatingProps.id;
@@ -26,7 +19,6 @@ export const TooltipPositioner = React.forwardRef<HTMLDivElement, TooltipPositio
     const ownProps = {
       'data-cl-slot': 'tooltip-positioner',
       'data-cl-side': side,
-      ref: combinedRef,
       style: floatingStyles,
     } satisfies DefaultProps<'div'>;
 
@@ -37,10 +29,15 @@ export const TooltipPositioner = React.forwardRef<HTMLDivElement, TooltipPositio
     // A consumer-supplied id must not override it, or the aria pairing would silently break.
     merged.id = wiredId;
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'div',
       render,
       enabled: mounted,
+      // floating-ui types `setFloating` as a method signature, but at runtime it's
+      // a stable callback that doesn't use `this`, so the unbound-method check is a
+      // false positive here.
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      ref: [refs.setFloating, ref],
       props: merged,
     });
   },
diff --git a/packages/headless/src/primitives/tooltip/tooltip-trigger.tsx b/packages/headless/src/primitives/tooltip/tooltip-trigger.tsx
index 86d3bbf40a4..19d3a3b05ee 100644
--- a/packages/headless/src/primitives/tooltip/tooltip-trigger.tsx
+++ b/packages/headless/src/primitives/tooltip/tooltip-trigger.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { useMergeRefs } from '@floating-ui/react';
 import React from 'react';
 
-import { type ComponentProps, type DefaultProps, mergeProps, renderElement } from '../../utils/render-element';
+import { type ComponentProps, type DefaultProps, mergeProps, useRender } from '../../utils';
 import { useTooltipContext } from './tooltip-context';
 
 export type TooltipTriggerProps = ComponentProps<'button'>;
@@ -13,29 +12,27 @@ export const TooltipTrigger = React.forwardRef<HTMLButtonElement, TooltipTrigger
     const { render, ...otherProps } = props;
     const { open, refs, getReferenceProps } = useTooltipContext();
 
-    // floating-ui types `setReference` as a method signature, but at runtime it's
-    // a stable callback that doesn't use `this`, so the unbound-method check is a
-    // false positive here.
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const combinedRef = useMergeRefs([refs.setReference, ref]);
-
     const state = { open };
 
     const ownProps = {
       type: 'button',
       'data-cl-slot': 'tooltip-trigger',
-      ref: combinedRef,
     } satisfies DefaultProps<'button'>;
 
     const defaultProps = { ...ownProps, ...getReferenceProps() };
 
-    return renderElement({
+    return useRender({
       defaultTagName: 'button',
       render,
       state,
       stateAttributesMapping: {
         open: (v: boolean): Record<string, string> | null => (v ? { 'data-cl-open': '' } : { 'data-cl-closed': '' }),
       },
+      // floating-ui types `setReference` as a method signature, but at runtime it's
+      // a stable callback that doesn't use `this`, so the unbound-method check is a
+      // false positive here.
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      ref: [refs.setReference, ref],
       props: mergeProps<'button'>(defaultProps, otherProps),
     });
   },