Slot utility

[colmtuite]

Feature request

Summary

There is interest from users in having a helper to create their own polymorphic components using render.

Examples in other libraries

https://www.radix-ui.com/primitives/docs/utilities/slot
https://github.com/radix-ui/primitives/tree/main/packages/react/slot/src

Motivation

It's quite a common need when creating a styled component library.

[seloner]

Can I work on this? I prob will follow a similar implementation with radix.
What do you think?

[oliviertassinari]

I landed here reading https://adamfratino.com/notes/base-ui-vs-radix-ui from @adamfratino that says

And seeing as how Base UI hasn't included a Slot component

Makes sense. For example, I could imagine all the Material UI components supporting this render prop instead of the component prop, hence having a public API exposed is needed to make it work.

[oliviertassinari]

Off-topic. I see potential for @samuelsycamore to help with the docs around this feature. I landed on https://base-ui.com/react/handbook/composition and read:

I had to pause and focus to understand. Maybe it's because I have some level of dyslexia or autism. I don't know, something about it made it hard for me.

To compare with https://ariakit.org/guide/composition#changing-the-html-element that documents the same concept:

I didn't feel this struggle. "The render prop lets you specify a different HTML element to be rendered instead of the default element" connected instantly for me. I wasn't 100% aware of what the prop was doing until now, so I experienced this closer to what a pristine user would.

[colmtuite]

Sure @seloner! I have already added it to the roadmap for our January cycle, so feel free to take it. Thanks!

[adamfratino]

I landed here reading https://adamfratino.com/notes/base-ui-vs-radix-ui from @adamfratino that says

And seeing as how Base UI hasn't included a Slot component

Makes sense. For example, I could imagine all the Material UI components supporting this render prop instead of the component prop, hence having a public API exposed is needed to make it work.

@oliviertassinari that's the first and only article i've written 🫣, glad it made some sense! and thanks for tagging me.

+1 the ability to easily apply a render prop to custom components would be a major QOL upgrade IMO.

for example, our team uses a few polymorphic layout primitives (box, stack, group, layer, etc.), currently leveraging Slot. if we migrate to base-ui, keeping the API of those primitives aligned with our library-driven components would be ideal.