diff --git a/CHANGELOG.md b/CHANGELOG.md
index f977426818..ea05d41315 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -40,6 +40,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Update Silver color scheme, adding `foregroundHover`, `foregroundPressed` and `background` definitions @pompomon ([#2078](https://github.com/microsoft/fluent-ui-react/pull/2078))
 - Expanding experimental accessibility schema to more components @mshoho ([#2052](https://github.com/stardust-ui/react/pull/2052))
 - Add base `Carousel` component @silviuavram ([#1979](https://github.com/microsoft/fluent-ui-react/pull/1979))
+- Add support for render props pattern via `children` prop to shorthands @layershifter ([#1951](https://github.com/stardust-ui/react/pull/1951))
 
 ### Documentation
 - Add usage example for `Tooltip` on disabled elements @mnajdova ([#2091](https://github.com/microsoft/fluent-ui-react/pull/2091))
diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index 31b9e9c535..bcf9058881 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -342,8 +342,9 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
         onClick: this.resetSourceCode,
         disabled: !wasCodeChanged,
       },
-      render =>
-        render({ content: 'Copy' }, (Component, props) => (
+      {
+        content: 'Copy',
+        children: (Component, props) => (
           <CopyToClipboard key="copy" value={currentCode}>
             {(active, onClick) => (
               <Component
@@ -354,7 +355,8 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
               />
             )}
           </CopyToClipboard>
-        )),
+        ),
+      },
       {
         disabled: currentCodeLanguage !== 'ts',
         icon: 'github',
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
index 1dd39a16eb..566c56fa1a 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
@@ -14,10 +14,11 @@ const AvatarExampleImageCustomizationShorthand = () => (
     />
     &emsp;
     <Avatar
-      image={render =>
+      image={{
+        name: 'chess rook',
         // This example does not react to the avatar size variable
         // and otherwise produces bad results when border is applied compared to "normal" image
-        render({ name: 'chess rook' }, (ComponentType, props) => (
+        children: (ComponentType, props) => (
           <Icon
             {...{ ...props, avatar: undefined, fluid: undefined }}
             name="lock"
@@ -26,8 +27,8 @@ const AvatarExampleImageCustomizationShorthand = () => (
             variables={{ color: 'blue' }}
             styles={{ boxSizing: 'border-box', padding: '8px' }}
           />
-        ))
-      }
+        ),
+      }}
       status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
     />
   </>
diff --git a/docs/src/examples/components/Menu/Usage/MenuExampleWithTooltip.shorthand.tsx b/docs/src/examples/components/Menu/Usage/MenuExampleWithTooltip.shorthand.tsx
index 5c2eecfafe..8deff759ab 100644
--- a/docs/src/examples/components/Menu/Usage/MenuExampleWithTooltip.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Usage/MenuExampleWithTooltip.shorthand.tsx
@@ -1,32 +1,36 @@
 import * as React from 'react'
 import { Menu, Tooltip } from '@fluentui/react'
 
+const itemRenderer = (MenuItem, props) => {
+  const { tooltip = '', ...rest } = props
+
+  return (
+    <Tooltip content={tooltip}>
+      <MenuItem {...rest} />
+    </Tooltip>
+  )
+}
 const items = [
-  { key: 'editorials', content: 'Editorials', tooltip: 'Click for opening Editorials' },
-  { key: 'review', content: 'Reviews', tooltip: 'Click for opening Reviews' },
-  { key: 'events', content: 'Upcoming Events', tooltip: 'Click for opening Upcoming Events' },
+  {
+    key: 'editorials',
+    content: 'Editorials',
+    tooltip: 'Click for opening Editorials',
+    children: itemRenderer,
+  },
+  {
+    key: 'review',
+    content: 'Reviews',
+    tooltip: 'Click for opening Reviews',
+    children: itemRenderer,
+  },
+  {
+    key: 'events',
+    content: 'Upcoming Events',
+    tooltip: 'Click for opening Upcoming Events',
+    children: itemRenderer,
+  },
 ]
 
-const MenuExampleWithTooltip = () => (
-  <Menu
-    defaultActiveIndex={0}
-    items={items.map(item => render =>
-      render(
-        /* what to render */
-        item,
-
-        /* how to render */
-        (MenuItem, props) => {
-          const { tooltip = '', ...rest } = props || {}
-          return (
-            <Tooltip content={tooltip}>
-              <MenuItem {...rest} />
-            </Tooltip>
-          )
-        },
-      ),
-    )}
-  />
-)
+const MenuExampleWithTooltip = () => <Menu defaultActiveIndex={0} items={items} />
 
 export default MenuExampleWithTooltip
diff --git a/docs/src/examples/components/Toolbar/Performance/CustomToolbar.perf.tsx b/docs/src/examples/components/Toolbar/Performance/CustomToolbar.perf.tsx
index 88884a24fc..458e39aae1 100644
--- a/docs/src/examples/components/Toolbar/Performance/CustomToolbar.perf.tsx
+++ b/docs/src/examples/components/Toolbar/Performance/CustomToolbar.perf.tsx
@@ -517,26 +517,23 @@ const layouts: Record<CustomToolbarProps['layout'], CustomToolbarLayout> = {
 const CustomToolbar: React.FunctionComponent<CustomToolbarProps> = props => {
   const { layout = 'standard' } = props
 
-  const items = layouts[layout](props).map(item =>
-    _.isNil((item as any).tooltip)
-      ? item
-      : render =>
-          render(
-            item, // rendering Tooltip for the Toolbar Item
-            (ToolbarItem, props) => {
-              const { tooltip, key, ...rest } = props // Adding tooltipAsLabelBehavior as the ToolbarItems contains only icon
-
-              return (
-                <Tooltip
-                  key={key}
-                  trigger={<ToolbarItem {...rest} />}
-                  accessibility={tooltipAsLabelBehavior}
-                  content={tooltip}
-                />
-              )
-            },
-          ),
-  )
+  const items = layouts[layout](props).map((item: ToolbarItemProps) => ({
+    ...item,
+    children: (item as any).tooltip
+      ? (ToolbarItem, props) => {
+          const { tooltip, key, ...rest } = props // Adding tooltipAsLabelBehavior as the ToolbarItems contains only icon
+
+          return (
+            <Tooltip
+              key={key}
+              trigger={<ToolbarItem {...rest} />}
+              accessibility={tooltipAsLabelBehavior}
+              content={tooltip}
+            />
+          )
+        }
+      : null,
+  }))
 
   return <Toolbar variables={{ isCt: true }} items={items} />
 }
diff --git a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx
index 32eb3e0937..10f8d097ff 100644
--- a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx
+++ b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react'
-import * as _ from 'lodash'
 import {
   Toolbar,
   Tooltip,
@@ -58,27 +57,24 @@ const ToolbarExampleShorthand = () => {
           menuOpen: moreMenuOpen,
           onMenuOpenChange: (e, { menuOpen }) => setMoreMenuOpen(menuOpen),
         },
-      ].map(item =>
-        _.isNil(item.tooltip)
-          ? item
-          : render =>
-              render(
-                item,
-                // rendering Tooltip for the Toolbar Item
-                (ToolbarItem, props) => {
-                  const { tooltip, key, ...rest } = props
-                  // Adding tooltipAsLabelBehavior as the ToolbarItems contains only icon
-                  return (
-                    <Tooltip
-                      key={key}
-                      trigger={<ToolbarItem {...rest} />}
-                      accessibility={tooltipAsLabelBehavior}
-                      content={tooltip}
-                    />
-                  )
-                },
-              ),
-      )}
+      ].map(item => ({
+        ...item,
+        // rendering Tooltip for the Toolbar Item
+        children: item.tooltip
+          ? (ToolbarItem, props) => {
+              const { tooltip, key, ...rest } = props
+              // Adding tooltipAsLabelBehavior as the ToolbarItems contains only icon
+              return (
+                <Tooltip
+                  key={key}
+                  trigger={<ToolbarItem {...rest} />}
+                  accessibility={tooltipAsLabelBehavior}
+                  content={tooltip}
+                />
+              )
+            }
+          : undefined,
+      }))}
     />
   )
 }
diff --git a/docs/src/pages/ShorthandProps.mdx b/docs/src/pages/ShorthandProps.mdx
index 7a9ae66ddf..f49aa16c2a 100644
--- a/docs/src/pages/ShorthandProps.mdx
+++ b/docs/src/pages/ShorthandProps.mdx
@@ -56,126 +56,53 @@ It is also possible to pass falsy values (`false`, `null` or
 <Dropdown toggleIndicator={null} />
 ```
 
-## Function as value
+## Using Render Props
 
-Providing function as a shorthand value is the most involving but, at the same time, the most
-powerful option for customizing component's slot. The only requirements for this function are:
-
-- it should finish synchronously
-- it should return React Element as a result
-
-Thus, in its simplest form, it could be used the following way:
-
-```jsx
-<Button icon={() => <Icon name="emoji" />} />
-```
-
-However, if it will be just about that, this function form wouldn't introduce any additional value. So, lets take a look on the scenarios where it is really helpful.
-
-### 'Render' callback argument
-
-When function is provided as a shorthand value, there is a `render` callback provided
-as its argument. This `render` argument is a function that 'knows' how to render all
-the previously considered shorthand types - i.e. primitive values, objects, React Elements.
-
-Here is an example that represents this:
-
-```jsx
-<>
-  {/* All three have the same effect: */}
-  <Button icon="emoji" />
-  {/* render() transforms string to <Icon /> element */}
-  <Button icon={render => render('emoji')} />
-  {/* render() transforms object to <Icon /> element */}
-  <Button icon={render => render({ name: 'emoji' })} />
-</>
-```
-
-### Handle Async data loading scenarios
-
-This 'render callback' arg makes it possible for the client to tackle scenarios where slot's data may be fetched asynchronously.
-
-Consider the following scenario: suppose we need to render `Button`'s icon, but the
-problem is that icon's name is fetched from some remote source. Thus, we cannot do it as
-simply as that, as icon's name is not known at the moment `Button` is rendered:
-
-```jsx
-<Button icon={{ name: /* unknown yet */ undefined }} />
-```
-
-It is quite common case that there is some component that is responsible for data fetching
-abstraction - and it is possible to 'tell' this component what should be rendered while data
-is loading, as well as what should be rendered when data is fetched.
+Our components implement [`render props`](https://reactjs.org/docs/render-props.html) technique to allow customize rendered output or wrap component slots. All Stardust components support it via `children` prop on shorthand objects, for example:
 
 ```jsx
-<AsyncData
-  getData={fetch('https://some/url')}
-  onLoading={<div>Loading..</div>} // renders when data is loading
-  onLoaded={data => <div>Loaded Data: {data}</div>} // renders once data is fetched
+<Attachment
+  header="Contacts.docx"
+  action={{
+    content: '?',
+    children: (
+      Component /* evaluated `ElementType`, `Button` in this case */,
+      props /* necessary attributes (including accessibility) that should be applied */,
+    ) => <Tooltip content="Help..." trigger={<Component {...props} />} />,
+  }}
 />
 ```
 
-Lets suppose that we want to render `loading` icon before data is fetched, and switch it with
-the icon which `name` will be provided by fetched `data` object. Also, note
-that we have `render` arg that knows _how_ to render `Button`'s icons.
-
-Putting it all together, we will address our async data fetch case:
+You can also use this technique to completely replace slot contents:
 
 ```jsx
 <Button
-  icon={render => (
-    <AsyncData
-      getData={fetch('https://some/url')}
-      onLoading={<Icon name="loading" />}
-      /* using 'render' arg here to render icon from loaded na */
-      onLoaded={data => render({ name: data.iconName })}
-    />
-  )}
+  content="Click me"
+  icon={{
+    /* ⚠️ Replacement without applying props can break accessibility and styling concerns */
+    children: () => <FaBeer />,
+  }}
 />
 ```
 
-Note that this example can be further simplified, as `render` can be used to render
-'loading' icon as well:
+### Use with shorthand collections
 
-```jsx
-<Button
-  icon={render => (
-    <AsyncData
-      getData={fetch('https://some/url')}
-      /* using 'render' arg here to render loading icon as well */
-      onLoading={render('loading')}
-      onLoaded={data => render({ name: data.iconName })}
-    />
-  )}
-/>
-```
-
-### Customizing rendered tree
-
-There is another use case that `render` callback arg is very useful for - this is the
-case where custom element's tree should be rendered for the slot, but, at the same time, all
-the evaluated styles and accessibility behaviors should be preserved for rendered custom
-element.
+The same approach can be used with components that accept shorthand collections, for example `Menu`:
 
 ```jsx
-<Button
-  icon={render =>
-    render(
-      /* what to render */
-      { name: 'emoji' },
-
-      /* how to render */
-      (ComponentType, props) => (
-        <div class="my-icon-container">
-          <i class="my-emoji-icon" {...props.accessibility.root} />
-        </div>
-      ),
-    )
-  }
+<Menu
+  items={[
+    {
+      key: 'first',
+      content: 'First',
+      tooltip: 'First item',
+      children: (Component, props) => {
+        /* ☝️ `tooltip` comes from shorthand object */
+        const { tooltip, ...rest } = props
+
+        return <Tooltip content={tooltip} trigger={<Component {...props} />} />
+      },
+    },
+  ]}
 />
 ```
-
-Here we are passing a recipe of how evaluated `ComponentType` (`Icon` in our
-case, which is ignored by the rendered tree) and `props` should be passed to custom
-elements tree. Note that `props` object, amongst others, contains all the necessary
-evaluated accessibility attributes that should be applied to rendered element.
diff --git a/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx b/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx
index 98bbec16d2..348750c118 100644
--- a/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx
+++ b/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx
@@ -90,10 +90,10 @@ class CustomChatMessage extends React.Component {
               iconOnly
               className="actions"
               items={[
-                { key: 'a', icon: 'thumbs up' },
-                { key: 'b', icon: 'user' },
-                { key: 'c', icon: 'ellipsis horizontal' },
-              ].map(item => render => render(item, this.renderMenuItem))}
+                { key: 'a', icon: 'thumbs up', children: this.renderMenuItem },
+                { key: 'b', icon: 'user', children: this.renderMenuItem },
+                { key: 'c', icon: 'ellipsis horizontal', children: this.renderMenuItem },
+              ]}
             />
           </div>
         }
diff --git a/docs/src/prototypes/CopyToClipboard/index.tsx b/docs/src/prototypes/CopyToClipboard/index.tsx
index cc71e7d0a8..6e51c814ba 100644
--- a/docs/src/prototypes/CopyToClipboard/index.tsx
+++ b/docs/src/prototypes/CopyToClipboard/index.tsx
@@ -34,10 +34,12 @@ const CopyToClipboardInMenu: React.FC = props => {
     menu: [
       'Open File...',
       'Save File...',
-      render =>
-        render('Copy text', (Component, props) => {
-          return <CopyToClipboard value={'Julius Caesar'} trigger={<Component {...props} />} />
-        }),
+      {
+        content: 'Copy text',
+        children: (Component, props) => {
+          return <CopyToClipboard value="Julius Caesar" trigger={<Component {...props} />} />
+        },
+      },
     ],
   }
 
@@ -47,33 +49,32 @@ const CopyToClipboardInMenu: React.FC = props => {
 const CopyToClipboardAttached: React.FC = props => {
   const [target, setTarget] = React.useState<HTMLElement>(null)
 
-  const item = {
-    key: 'edit',
-    content: 'Edit',
-    menu: [
-      'Open File...',
-      'Save File...',
-      render =>
-        render('Copy text', (Component, props) => {
-          return (
+  const items = [
+    {
+      key: 'edit',
+      content: 'Edit',
+      children: (Component, props) => (
+        <Ref innerRef={setTarget}>
+          <Component {...props} />
+        </Ref>
+      ),
+      menu: [
+        'Open File...',
+        'Save File...',
+        {
+          content: 'Copy text',
+          children: (Component, props) => (
             <CopyToClipboard
               target={target}
               value="Julius Caesar"
               trigger={<Component {...props} />}
             />
-          )
-        }),
-    ],
-  }
-
-  const items = [
-    render =>
-      render(item, (Component, props) => (
-        <Ref innerRef={setTarget}>
-          <Component {...props} />
-        </Ref>
-      )),
+          ),
+        },
+      ],
+    },
   ]
+
   return <Menu items={items} />
 }
 
diff --git a/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx b/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx
index 71250e5aa8..fa3722e676 100644
--- a/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx
+++ b/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx
@@ -117,8 +117,8 @@ const EditorToolbar: React.FC<EditorToolbarProps> = props => {
         popup: {
           align: 'center',
           position: 'before',
-          content: render =>
-            render(null, () => (
+          content: {
+            children: () => (
               <Menu
                 items={fontFormattingItems}
                 onItemClick={() => {
@@ -126,7 +126,8 @@ const EditorToolbar: React.FC<EditorToolbarProps> = props => {
                 }}
                 vertical
               />
-            )),
+            ),
+          },
           onOpenChange: (e, { open }) => {
             props.dispatch({ type: 'FONT_FORMATTING_OPEN', value: open })
           },
@@ -165,20 +166,17 @@ const EditorToolbar: React.FC<EditorToolbarProps> = props => {
     { toolbarItem: { key: 'divider-3', kind: 'divider' } },
 
     {
-      toolbarItem: render =>
-        render(
-          {
-            key: 'link',
-            icon: 'link',
-            active: props.link,
-            onClick: () => props.dispatch({ type: 'LINK', value: true }),
-          },
-          (Component, props) => (
-            <Ref innerRef={linkItemRef}>
-              <Component {...props} />
-            </Ref>
-          ),
+      toolbarItem: {
+        key: 'link',
+        icon: 'link',
+        active: props.link,
+        children: (Component, props) => (
+          <Ref innerRef={linkItemRef}>
+            <Component {...props} />
+          </Ref>
         ),
+        onClick: () => props.dispatch({ type: 'LINK', value: true }),
+      },
       overflowItem: {
         key: 'link',
         icon: 'link',
diff --git a/docs/src/prototypes/ParticipantsList/index.tsx b/docs/src/prototypes/ParticipantsList/index.tsx
index 3d1eae2bb2..3b0bd1e315 100644
--- a/docs/src/prototypes/ParticipantsList/index.tsx
+++ b/docs/src/prototypes/ParticipantsList/index.tsx
@@ -14,25 +14,27 @@ const ActiveBarItem = props => (
   </Flex>
 )
 
-const addContextMenu = item => render =>
-  render(item, (Component, props) => {
-    return <MenuButton contextMenu trigger={<Component {...props} />} menu={menu} />
-  })
+const itemRenderer = (Component, props) => (
+  <MenuButton contextMenu trigger={<Component {...props} />} menu={menu} />
+)
 
 const items3 = [
   {
     key: 'irving',
     content: <ActiveBarItem name="Irving Kuhic" />,
+    children: itemRenderer,
   },
   {
     key: 'skyler',
     content: <ActiveBarItem name="Skyler Parks" />,
+    children: itemRenderer,
   },
   {
     key: 'dante',
     content: <ActiveBarItem name="Dante Schneider" />,
+    children: itemRenderer,
   },
-].map(addContextMenu)
+]
 
 const ParticipantsList = () => (
   <>
diff --git a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
index 0465b4f24d..74b4266d8f 100644
--- a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
+++ b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
@@ -137,16 +137,16 @@ const TeamsChatMessage: React.FC<ChatMessageProps> = (props: ChatMessageProps) =
     <Ref innerRef={setChatMessageElement}>
       <Chat.Message
         {...props}
-        actionMenu={render =>
-          render({}, (ComponentType, props) => (
+        actionMenu={{
+          children: (Component, props) => (
             <Popover
               chatMessageElement={chatMessageElement}
               onForceShowActionMenuChange={setForceShowActionMenu}
               onShowActionMenuChange={setShowActionMenu}
               {...props}
             />
-          ))
-        }
+          ),
+        }}
         onMouseEnter={() => setShowActionMenu(true)}
         onMouseLeave={() => !forceShowActionMenu && setShowActionMenu(false)}
         onFocus={() => setShowActionMenu(true)}
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index 9cd9a02bce..4d437940eb 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -728,9 +728,10 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
     } = this.props
     const { filteredItems, value } = this.state
 
-    const items = _.map(filteredItems, (item, index) => render =>
-      render(item, () => {
+    const items = _.map(filteredItems, (item, index) => ({
+      children: () => {
         const selected = value.indexOf(item) !== -1
+
         return DropdownItem.create(item, {
           defaultProps: () => ({
             className: Dropdown.slotClassNames.item,
@@ -748,8 +749,8 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
           overrideProps: this.handleItemOverrides(item, index, getItemProps, selected),
           render: renderItem,
         })
-      }),
-    )
+      },
+    }))
 
     return [
       ...items,
diff --git a/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx b/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx
index d6984cccce..90ea984e93 100644
--- a/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx
+++ b/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx
@@ -139,10 +139,11 @@ class DropdownSelectedItem extends UIComponent<WithAsProp<DropdownSelectedItemPr
         styles: styles.header,
       }),
     })
-    const renderIcon = _.isNil(icon)
+    const iconProps = _.isNil(icon)
       ? icon
-      : render =>
-          render(icon, (ComponentType, props) =>
+      : {
+          name: null,
+          children: (ComponentType, props) =>
             Icon.create(icon, {
               defaultProps: () => ({
                 'aria-label': `Remove ${header} from selection.`, // TODO: Extract this in a behaviour.
@@ -151,11 +152,11 @@ class DropdownSelectedItem extends UIComponent<WithAsProp<DropdownSelectedItemPr
               }),
               overrideProps: this.handleIconOverrides(props),
             }),
-          )
-    const renderImage = _.isNil(image)
+        }
+    const imageProps = _.isNil(image)
       ? image
-      : render =>
-          render(image, (ComponentType, props) =>
+      : {
+          children: (ComponentType, props) =>
             Image.create(image, {
               defaultProps: () => ({
                 avatar: true,
@@ -164,7 +165,7 @@ class DropdownSelectedItem extends UIComponent<WithAsProp<DropdownSelectedItemPr
               }),
               overrideProps: props,
             }),
-          )
+        }
 
     return (
       <Ref innerRef={this.itemRef}>
@@ -176,8 +177,8 @@ class DropdownSelectedItem extends UIComponent<WithAsProp<DropdownSelectedItemPr
           onClick={this.handleClick}
           onKeyDown={this.handleKeyDown}
           content={contentElement}
-          icon={renderIcon}
-          image={renderImage}
+          icon={iconProps}
+          image={imageProps}
           {...unhandledProps}
         />
       </Ref>
diff --git a/packages/react/src/lib/factories.ts b/packages/react/src/lib/factories.ts
index d55da7c03f..a379e9ab76 100644
--- a/packages/react/src/lib/factories.ts
+++ b/packages/react/src/lib/factories.ts
@@ -58,6 +58,16 @@ export function createShorthand<P>({
   const valIsRenderFunction =
     typeof valueOrRenderCallback === 'function' && !React.isValidElement(valueOrRenderCallback)
   if (valIsRenderFunction) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        [
+          '@stardust-ui/react:',
+          'The usage of render callback is deprecated and will be removed soon. Please use render props for shorthands instead.',
+          'See: https://stardust-ui.github.io/react/shorthand-props',
+        ].join(' '),
+      )
+    }
+
     return createShorthandFromRenderCallback({
       allowsJSX,
       Component,
@@ -279,6 +289,10 @@ function createShorthandFromValue<P>({
     return render(Component, props)
   }
 
+  if (typeof props.children === 'function') {
+    return props.children(Component, { ...props, children: undefined })
+  }
+
   if (!allowsJSX && valIsReactElement) {
     return null
   }
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index 00d14f8544..9eca600af0 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -72,7 +72,11 @@ type ReactNode =
   | null
   | undefined
 
-export type ShorthandValue<P> = ReactNode | Props<P>
+export type ShorthandRenderProp<P> = (Component: React.ElementType, props: P) => React.ReactNode
+
+export type ShorthandValue<P extends Props> =
+  | ReactNode
+  | Props<P> & { children?: P['children'] | ShorthandRenderProp<P> }
 export type ShorthandCollection<P, K = never> = ShorthandValue<P & { kind?: K }>[]
 
 // ========================================================
diff --git a/packages/react/test/specs/lib/factories-test.tsx b/packages/react/test/specs/lib/factories-test.tsx
index fa3ff59a19..5c6743e43c 100644
--- a/packages/react/test/specs/lib/factories-test.tsx
+++ b/packages/react/test/specs/lib/factories-test.tsx
@@ -240,6 +240,9 @@ describe('factories', () => {
 
         const shorthandValue = { dataFoo: 'bar' }
 
+        // render callback is deprecated an throws deprecation warnings
+        consoleUtil.disableOnce()
+
         const elementFromShorthandValue = createShorthandElement(shorthandValue)
         const elementFromRenderCallback = createShorthandElement(render => render(shorthandValue))
 
@@ -249,6 +252,9 @@ describe('factories', () => {
 
       describe('custom tree renderer', () => {
         test('passes evaluated Component type as the first argument', () => {
+          // render callback is deprecated an throws deprecation warnings
+          consoleUtil.disableOnce()
+
           getShorthand({
             valueOrRenderCallback: render =>
               render({}, (Component, props) => {
@@ -261,6 +267,9 @@ describe('factories', () => {
         test('passes evaluated props as the second argument', () => {
           const shorthandProps = { bar: 'foo' }
 
+          // render callback is deprecated an throws deprecation warnings
+          consoleUtil.disableOnce()
+
           getShorthand({
             valueOrRenderCallback: render =>
               render(shorthandProps, (Component, props) => {
@@ -272,6 +281,9 @@ describe('factories', () => {
         test('overrides render prop from shorthand options', () => {
           const CustomComponent = 'overriden-div' as any
 
+          // render callback is deprecated an throws deprecation warnings
+          consoleUtil.disableOnce()
+
           const shorthandElement = getShorthand({
             valueOrRenderCallback: render => render({}, (Component, props) => <CustomComponent />),
             render: (Component, props) => <div>Default</div>,
@@ -296,6 +308,9 @@ describe('factories', () => {
           styles: { color: 'black' },
         }
 
+        // render callback is deprecated an throws deprecation warnings
+        consoleUtil.disableOnce()
+
         getShorthand({
           valueOrRenderCallback: render =>
             render(props, (Component, props) => {
@@ -331,6 +346,9 @@ describe('factories', () => {
           },
         }
 
+        // render callback is deprecated an throws deprecation warnings
+        consoleUtil.disableOnce()
+
         getShorthand({
           valueOrRenderCallback: render =>
             render(props, (Component, props) => {
@@ -361,6 +379,9 @@ describe('factories', () => {
           styles: { color: 'black' },
         }
 
+        // render callback is deprecated an throws deprecation warnings
+        consoleUtil.disableOnce()
+
         getShorthand({
           valueOrRenderCallback: render =>
             render(props, (Component, props) => {
@@ -396,6 +417,9 @@ describe('factories', () => {
           },
         }
 
+        // render callback is deprecated an throws deprecation warnings
+        consoleUtil.disableOnce()
+
         getShorthand({
           valueOrRenderCallback: render =>
             render(props, (Component, props) => {