Skip to content

slot: Add customizable mergeProps#3953

Open
chaance wants to merge 6 commits into
mainfrom
chance/fix-2631
Open

slot: Add customizable mergeProps#3953
chaance wants to merge 6 commits into
mainfrom
chance/fix-2631

Conversation

@chaance

@chaance chaance commented Jun 8, 2026

Copy link
Copy Markdown
Member

This PR adds entrypoints to control how Slot merges props with its child. You can now:

  1. pass a mergeProps function to an individual Slot for one-off needs, or
  2. Use the new Slot.Provider to apply a custom merge strategy to all nested components that use Slot under the hood.
import { Slot } from "radix-ui";

const mergeProps: Slot.MergePropsFunction = (slotProps, childProps) => {
  // your custom merge strategy, optionally delegating to the default
  const merged = Slot.mergeProps(slotProps, childProps);
  return {
    ...merged,
    className: classNameProcessor(slotProps, childProps),
    'data-custom-merge': 'true',
  };
};

// one-off
<Slot.Root mergeProps={mergeProps}>{child}</Slot.Root>

// applies to all nested `asChild` components
<Slot.Provider mergeProps={mergeProps}>
  <App />
</Slot.Provider>

Closes #2631

@changeset-bot

changeset-bot Bot commented Jun 8, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: cabda16

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 44 packages
Name Type
@radix-ui/react-slot Minor
radix-ui Minor
@radix-ui/react-collection Patch
@radix-ui/react-dialog Patch
@radix-ui/react-menu Patch
@radix-ui/react-popover Patch
@radix-ui/react-primitive Patch
@radix-ui/react-select Patch
@radix-ui/react-tooltip Patch
@radix-ui/react-accordion Patch
@radix-ui/react-menubar Patch
@radix-ui/react-navigation-menu Patch
@radix-ui/react-one-time-password-field Patch
@radix-ui/react-roving-focus Patch
@radix-ui/react-slider Patch
@radix-ui/react-toast Patch
@radix-ui/react-alert-dialog Patch
@radix-ui/react-context-menu Patch
@radix-ui/react-dropdown-menu Patch
@radix-ui/react-announce Patch
@radix-ui/react-arrow Patch
@radix-ui/react-aspect-ratio Patch
@radix-ui/react-avatar Patch
@radix-ui/react-checkbox Patch
@radix-ui/react-collapsible Patch
@radix-ui/react-dismissable-layer Patch
@radix-ui/react-focus-scope Patch
@radix-ui/react-form Patch
@radix-ui/react-hover-card Patch
@radix-ui/react-label Patch
@radix-ui/react-password-toggle-field Patch
@radix-ui/react-popper Patch
@radix-ui/react-portal Patch
@radix-ui/react-progress Patch
@radix-ui/react-radio-group Patch
@radix-ui/react-scroll-area Patch
@radix-ui/react-separator Patch
@radix-ui/react-switch Patch
@radix-ui/react-tabs Patch
@radix-ui/react-toggle-group Patch
@radix-ui/react-toggle Patch
@radix-ui/react-toolbar Patch
@radix-ui/react-visually-hidden Patch
@radix-ui/react-accessible-icon Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@chaance chaance requested a review from dcwither June 8, 2026 20:07
@chaance chaance force-pushed the chance/fix-2631 branch from 76402de to cabda16 Compare June 8, 2026 20:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow customizing the mergeProps behavior for Slot

1 participant