diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 1ea0a612c88..a686e1961ba 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -239,7 +239,7 @@ module.exports = {
             paths: [
               {
                 name: '@sanity/ui',
-                importNames: ['Tooltip', 'TooltipProps'],
+                importNames: ['Tooltip', 'TooltipProps', 'MenuItem', 'MenuItemProps'],
                 message:
                   'Please use the (more opinionated) exported components in sanity/src/ui instead.',
               },
diff --git a/dev/test-studio/schema/book.ts b/dev/test-studio/schema/book.ts
index 738957b4c37..b9d29e24272 100644
--- a/dev/test-studio/schema/book.ts
+++ b/dev/test-studio/schema/book.ts
@@ -88,6 +88,18 @@ export default {
         },
       ],
     },
+    {
+      name: 'genre',
+      title: 'Genre',
+      type: 'string',
+      options: {
+        list: [
+          {title: 'Fiction', value: 'fiction'},
+          {title: 'Non Fiction', value: 'nonfiction'},
+          {title: 'Poetry', value: 'poetry'},
+        ],
+      },
+    },
   ],
   orderings: [
     {
diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx
index 77d8627eaaf..2bc6ab71d52 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseOverflowMenu.tsx
@@ -1,5 +1,6 @@
-import {Menu, MenuButton, MenuButtonProps, MenuDivider, MenuItem} from '@sanity/ui'
+import {Menu, MenuButton, MenuButtonProps, MenuDivider} from '@sanity/ui'
 import React, {ForwardedRef, forwardRef} from 'react'
+import {MenuItem} from '../../../ui'
 import {CollapseMenuProps} from './CollapseMenu'
 
 const MENU_BUTTON_POPOVER_PROPS: MenuButtonProps['popover'] = {
diff --git a/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx b/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx
index 88cc5017289..497bd052de2 100644
--- a/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx
+++ b/packages/sanity/src/core/form/field/actions/FieldActionMenuItem.tsx
@@ -1,8 +1,9 @@
-import {MenuItem, Text} from '@sanity/ui'
+import {Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
 import {CheckmarkIcon} from '@sanity/icons'
 import {TooltipOfDisabled} from '../../../components'
 import {DocumentFieldActionItem} from '../../../config'
+import {MenuItem} from '../../../../ui'
 
 export function FieldActionMenuItem(props: {action: DocumentFieldActionItem}) {
   const {action} = props
@@ -19,13 +20,10 @@ export function FieldActionMenuItem(props: {action: DocumentFieldActionItem}) {
     <TooltipOfDisabled content={disabledTooltipContent} placement="left">
       <MenuItem
         disabled={Boolean(action.disabled)}
-        fontSize={1}
         icon={action.icon}
         iconRight={action.iconRight || (action.selected ? CheckmarkIcon : undefined)}
         onClick={handleClick}
-        padding={3}
         pressed={action.selected}
-        space={3}
         text={action.title}
         tone={action.tone}
       />
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
index 39483104ad7..a34d03095a2 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
@@ -1,14 +1,5 @@
 import {EditIcon, LinkIcon, TrashIcon, EyeOpenIcon, EllipsisVerticalIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuButtonProps,
-  MenuItem,
-  useGlobalKeyDown,
-} from '@sanity/ui'
+import {Box, Button, Flex, Menu, MenuButton, MenuButtonProps, useGlobalKeyDown} from '@sanity/ui'
 import React, {
   forwardRef,
   ReactElement,
@@ -20,6 +11,7 @@ import React, {
   PropsWithChildren,
 } from 'react'
 import {PortableTextBlock, isReference} from '@sanity/types'
+import {MenuItem} from '../../../../../ui'
 import {IntentLink} from 'sanity/router'
 
 interface BlockObjectActionsMenuProps extends PropsWithChildren {
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
index 394aef5f0d3..6209b67cce2 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/BlockStyleSelect.tsx
@@ -1,6 +1,14 @@
 import React, {memo, useCallback, useMemo} from 'react'
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
-import {Button, Menu, MenuButton, MenuButtonProps, MenuItem, Text} from '@sanity/ui'
+import {
+  Button,
+  Menu,
+  MenuButton,
+  MenuButtonProps,
+  Text,
+  // eslint-disable-next-line no-restricted-imports
+  MenuItem,
+} from '@sanity/ui'
 import {SelectIcon} from '@sanity/icons'
 import styled from 'styled-components'
 import {
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
index b8d48facae4..2cfff485e89 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
@@ -17,7 +17,6 @@ import {
   Menu,
   MenuButton,
   MenuDivider,
-  MenuItem,
   Stack,
   Text,
 } from '@sanity/ui'
@@ -36,6 +35,7 @@ import {AlertStrip} from '../../components/AlertStrip'
 import {FieldActionsProvider, FieldActionsResolver} from '../../field'
 import {DocumentFieldActionNode} from '../../../config'
 import {useFormPublishedId} from '../../useFormPublishedId'
+import {MenuItem} from '../../../../ui'
 import {useReferenceInput} from './useReferenceInput'
 import {useReferenceInfo} from './useReferenceInfo'
 import {PreviewReferenceValue} from './PreviewReferenceValue'
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
index 9ab53889c0a..3069a4761f2 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
@@ -8,7 +8,6 @@ import {
   Menu,
   MenuButton,
   MenuDivider,
-  MenuItem,
   Spinner,
   Stack,
   Text,
@@ -36,6 +35,7 @@ import {AlertStrip} from '../../components/AlertStrip'
 import {set, unset} from '../../patch'
 import {createProtoArrayValue} from '../arrays/ArrayOfObjectsInput/createProtoArrayValue'
 import {InsertMenu} from '../arrays/ArrayOfObjectsInput/InsertMenu'
+import {MenuItem} from '../../../../ui'
 import {useReferenceInfo} from './useReferenceInfo'
 import {PreviewReferenceValue} from './PreviewReferenceValue'
 import {useReferenceInput} from './useReferenceInput'
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
index 9292d07f32c..9a7ec0d0371 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
@@ -1,9 +1,9 @@
 import {ArraySchemaType, isReferenceSchemaType} from '@sanity/types'
 import {AddIcon} from '@sanity/icons'
 import React, {useId, useCallback} from 'react'
-import {Box, Button, Grid, Menu, MenuButton, MenuItem, Text, MenuButtonProps} from '@sanity/ui'
+import {Button, Grid, Menu, MenuButton, MenuButtonProps} from '@sanity/ui'
 import {ArrayInputFunctionsProps, ObjectItem} from '../../../types'
-import {Tooltip} from '../../../../../ui'
+import {MenuItem, Tooltip} from '../../../../../ui'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
index cef935910e3..d1a7bb30fad 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
@@ -1,10 +1,11 @@
 import React, {useCallback, useId} from 'react'
 import {EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
-import {Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import {Button, Menu, MenuButton} from '@sanity/ui'
 import {ArrayItemError} from '../../../../store'
 import {useFormCallbacks} from '../../../../studio/contexts/FormCallbacks'
 import {PatchEvent, unset} from '../../../../patch'
 import {CellLayout} from '../../layouts/CellLayout'
+import {MenuItem} from '../../../../../../ui'
 import {IncompatibleItemType} from './IncompatibleItemType'
 
 const MENU_POPOVER_PROPS = {portal: true, tone: 'default'} as const
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
index f663756ff43..32a24dc9652 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
@@ -1,15 +1,4 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardTone,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Spinner,
-  Text,
-} from '@sanity/ui'
+import {Box, Button, Card, CardTone, Flex, Menu, MenuButton, Spinner, Text} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
 import {SchemaType} from '@sanity/types'
 import {CopyIcon as DuplicateIcon, EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
@@ -29,6 +18,7 @@ import {createProtoArrayValue} from '../createProtoArrayValue'
 import {InsertMenu} from '../InsertMenu'
 import {FIXME} from '../../../../../FIXME'
 import {EditPortal} from '../../../../components/EditPortal'
+import {MenuItem} from '../../../../../../ui'
 
 type GridItemProps<Item extends ObjectItem> = Omit<ObjectItemProps<Item>, 'renderDefault'>
 
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx
index 507511b649d..b2b62830570 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/InsertMenu.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable react/jsx-no-bind */
 import {SchemaType} from '@sanity/types'
 import React, {ComponentProps, memo} from 'react'
-import {MenuGroup, MenuItem, PopoverProps} from '@sanity/ui'
+import {MenuGroup, PopoverProps} from '@sanity/ui'
 import {InsertAboveIcon, InsertBelowIcon} from '@sanity/icons'
+import {MenuItem} from '../../../../../ui'
 
 interface Props {
   types?: SchemaType[]
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
index d3a72602c6d..7b895e9c706 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
@@ -1,6 +1,7 @@
-import React, {useCallback, useId} from 'react'
+import React, {useId} from 'react'
 import {EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import {Box, Button, Menu, MenuButton} from '@sanity/ui'
+import {MenuItem} from '../../../../../../ui'
 import {ArrayItemError} from '../../../../store'
 import {RowLayout} from '../../layouts/RowLayout'
 import {IncompatibleItemType} from './IncompatibleItemType'
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
index 64e9c890564..0d4ac3b93ae 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
@@ -1,15 +1,4 @@
-import {
-  Box,
-  Button,
-  Card,
-  CardTone,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Spinner,
-  Text,
-} from '@sanity/ui'
+import {Box, Button, Card, CardTone, Flex, Menu, MenuButton, Spinner, Text} from '@sanity/ui'
 import React, {useCallback, useMemo, useRef} from 'react'
 import {SchemaType} from '@sanity/types'
 import {CopyIcon as DuplicateIcon, EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
@@ -27,6 +16,7 @@ import {RowLayout} from '../../layouts/RowLayout'
 import {createProtoArrayValue} from '../createProtoArrayValue'
 import {InsertMenu} from '../InsertMenu'
 import {EditPortal} from '../../../../components/EditPortal'
+import {MenuItem} from '../../../../../../ui'
 
 type PreviewItemProps<Item extends ObjectItem> = Omit<ObjectItemProps<Item>, 'renderDefault'>
 
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
index ec19d867195..e28e7272031 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
@@ -1,5 +1,5 @@
 import React, {useCallback, useMemo} from 'react'
-import {Box, Button, Flex, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import {Box, Button, Flex, Menu, MenuButton} from '@sanity/ui'
 import {SchemaType} from '@sanity/types'
 import {CopyIcon as DuplicateIcon, EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
 import {FormFieldValidationStatus} from '../../../components/formField'
@@ -7,6 +7,7 @@ import {InsertMenu} from '../ArrayOfObjectsInput/InsertMenu'
 import {PrimitiveItemProps} from '../../../types/itemProps'
 import {RowLayout} from '../layouts/RowLayout'
 import {FieldPresence} from '../../../../presence'
+import {MenuItem} from '../../../../../ui'
 import {getEmptyValue} from './getEmptyValue'
 
 export type DefaultItemProps = Omit<PrimitiveItemProps, 'renderDefault'> & {
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
index d1f463ca7ac..6574ccfc77e 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/FileInput.tsx
@@ -13,16 +13,7 @@ import {
   UploadState,
 } from '@sanity/types'
 import {ImageIcon, SearchIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Menu,
-  MenuButton,
-  MenuItem,
-  ThemeColorToneKey,
-  ToastParams,
-} from '@sanity/ui'
+import {Box, Button, Card, Menu, MenuButton, ThemeColorToneKey, ToastParams} from '@sanity/ui'
 import {SanityClient} from '@sanity/client'
 import {isFileSource} from '@sanity/asset-utils'
 import {WithReferencedAsset} from '../../../utils/WithReferencedAsset'
@@ -38,6 +29,7 @@ import {InputProps, ObjectInputProps} from '../../../types'
 import {PatchEvent, setIfMissing, unset} from '../../../patch'
 import {MemberField, MemberFieldError, MemberFieldSet} from '../../../members'
 import {ImperativeToast} from '../../../../components'
+import {MenuItem} from '../../../../../ui'
 import {ChangeIndicator} from '../../../../changeIndicators'
 import {CardOverlay, FlexContainer} from './styles'
 import {FileActionsMenu} from './FileActionsMenu'
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
index 6187bd0165a..56265924c77 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
@@ -9,7 +9,6 @@ import {
   Menu,
   MenuButton,
   MenuButtonProps,
-  MenuItem,
   Stack,
   ToastParams,
 } from '@sanity/ui'
@@ -52,6 +51,7 @@ import {PresenceOverlay} from '../../../../presence'
 import {FIXME} from '../../../../FIXME'
 import {ImperativeToast} from '../../../../components'
 import {ChangeIndicator} from '../../../../changeIndicators'
+import {MenuItem} from '../../../../../ui'
 import {ImageActionsMenu} from './ImageActionsMenu'
 import {ImagePreview} from './ImagePreview'
 import {InvalidImageWarning} from './InvalidImageWarning'
diff --git a/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx
index d254d1bd653..2c0502a4574 100644
--- a/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx
@@ -1,7 +1,8 @@
 import React, {MouseEventHandler, useCallback} from 'react'
 
 import {UploadIcon, CopyIcon, ResetIcon, DownloadIcon} from '@sanity/icons'
-import {Box, MenuItem, MenuDivider, Label, useToast} from '@sanity/ui'
+import {Box, MenuDivider, Label, useToast} from '@sanity/ui'
+import {MenuItem} from '../../../../../ui'
 import {FileInputMenuItem} from './FileInputMenuItem/FileInputMenuItem'
 
 interface Props {
@@ -40,7 +41,6 @@ export function ActionsMenu(props: Props) {
         text="Upload"
         data-testid="file-input-upload-button"
         disabled={readOnly || !directUploads}
-        fontSize={2}
       />
       {browse}
 
diff --git a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx
index a6b29dd6acd..45a574b13b2 100644
--- a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.styled.tsx
@@ -1,5 +1,5 @@
-import {MenuItem} from '@sanity/ui'
 import styled from 'styled-components'
+import {MenuItem} from '../../../../../../ui'
 
 export const FileMenuItem = styled(MenuItem)`
   position: relative;
diff --git a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx
index de864737015..3f1c12b4a21 100644
--- a/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/FileInputMenuItem/FileInputMenuItem.tsx
@@ -1,4 +1,4 @@
-import React, {createElement, isValidElement, useId} from 'react'
+import React, {createElement, isValidElement, useCallback, useId} from 'react'
 import {isValidElementType} from 'react-is'
 import {Box, ButtonProps, Flex, Text} from '@sanity/ui'
 import {FileMenuItem} from './FileInputMenuItem.styled'
@@ -16,21 +16,7 @@ export const FileInputMenuItem = React.forwardRef(function FileInputMenuItem(
     Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref' | 'type' | 'value' | 'onSelect'>,
   forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
-  const {
-    icon,
-    id: idProp,
-    accept,
-    capture,
-    fontSize,
-    multiple,
-    onSelect,
-    padding = 3,
-    space = 3,
-    textAlign,
-    text,
-    disabled,
-    ...rest
-  } = props
+  const {icon, id: idProp, accept, capture, multiple, onSelect, text, disabled, ...rest} = props
   const id = `${idProp || ''}-${useId()}`
 
   const handleChange = React.useCallback(
@@ -42,50 +28,35 @@ export const FileInputMenuItem = React.forwardRef(function FileInputMenuItem(
     [onSelect],
   )
 
-  const content = (
-    <Flex align="center" justify="flex-start" padding={padding}>
-      {/* Icon */}
-      {icon && (
-        <Box marginRight={text ? space : undefined}>
-          <Text size={fontSize}>
-            {isValidElement(icon) && icon}
-            {isValidElementType(icon) && createElement(icon)}
-          </Text>
-        </Box>
-      )}
-
-      {/* Text */}
-      {text && (
-        <Text align={textAlign} size={fontSize} textOverflow="ellipsis">
-          {text}
-        </Text>
-      )}
-    </Flex>
+  const renderMenuItem = useCallback(
+    (item: React.JSX.Element) => (
+      <div>
+        {item}
+        {/* Visibly hidden input */}
+        <input
+          data-testid="file-menuitem-input"
+          accept={accept}
+          capture={capture}
+          id={id}
+          multiple={multiple}
+          onChange={handleChange}
+          type="file"
+          value=""
+          disabled={disabled}
+        />
+      </div>
+    ),
+    [accept, capture, disabled, handleChange, id, multiple],
   )
-
   return (
     <FileMenuItem
       {...rest}
       htmlFor={id}
-      padding={0}
-      fontSize={2}
       disabled={disabled}
       ref={forwardedRef}
-    >
-      {content}
-
-      {/* Visibly hidden input */}
-      <input
-        data-testid="file-menuitem-input"
-        accept={accept}
-        capture={capture}
-        id={id}
-        multiple={multiple}
-        onChange={handleChange}
-        type="file"
-        value=""
-        disabled={disabled}
-      />
-    </FileMenuItem>
+      icon={icon}
+      text={text}
+      renderMenuItem={renderMenuItem}
+    />
   )
 })
diff --git a/packages/sanity/src/core/form/studio/assetSource/AssetMenu.tsx b/packages/sanity/src/core/form/studio/assetSource/AssetMenu.tsx
index 8a21b03382c..fb379fd9c80 100644
--- a/packages/sanity/src/core/form/studio/assetSource/AssetMenu.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/AssetMenu.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import {LinkIcon, EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
-import {Button, Menu, MenuItem, MenuButton} from '@sanity/ui'
+import {Button, Menu, MenuButton} from '@sanity/ui'
+import {MenuItem} from '../../../../ui'
 import {AssetMenuAction} from './types'
 
 export function AssetMenu({
diff --git a/packages/sanity/src/core/studio/Studio.test.tsx b/packages/sanity/src/core/studio/Studio.test.tsx
index f0367b0d30d..20d1abafdeb 100644
--- a/packages/sanity/src/core/studio/Studio.test.tsx
+++ b/packages/sanity/src/core/studio/Studio.test.tsx
@@ -43,9 +43,8 @@ describe('Studio', () => {
     const sheet = new ServerStyleSheet()
     try {
       const html = renderToStaticMarkup(sheet.collectStyles(<Studio config={config} />))
-
       expect(html).toMatchInlineSnapshot(
-        `"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-dLMFU bVnOTN sc-jXbUNg gwUwPO sc-jlZhew blWHRn\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg fsTqmC\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg fsTqmC sc-cwHptR hNIzxo\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-jEACwC icLxTH sc-jXbUNg gwUwPO sc-kpDqfm byEEoI\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg fsTqmC\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg fsTqmC sc-dAlyuH hFIkQL\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -62,7 +61,7 @@ describe('Studio', () => {
     try {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       expect(html).toMatchInlineSnapshot(
-        `"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-dLMFU bVnOTN sc-jXbUNg gwUwPO sc-jlZhew blWHRn\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg fsTqmC\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg fsTqmC sc-cwHptR hNIzxo\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-jEACwC icLxTH sc-jXbUNg gwUwPO sc-kpDqfm byEEoI\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg fsTqmC\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg fsTqmC sc-dAlyuH hFIkQL\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -82,7 +81,7 @@ describe('Studio', () => {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       node.innerHTML = html
       expect(html).toMatchInlineSnapshot(
-        `"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-dLMFU bVnOTN sc-jXbUNg gwUwPO sc-jlZhew blWHRn\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg fsTqmC\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg fsTqmC sc-cwHptR hNIzxo\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-jEACwC icLxTH sc-jXbUNg gwUwPO sc-kpDqfm byEEoI\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg fsTqmC\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg fsTqmC sc-dAlyuH hFIkQL\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
       document.head.innerHTML += sheet.getStyleTags()
 
diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
index d5eb2eb940d..6ca5e19d1cb 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
@@ -7,7 +7,6 @@ import {
   Menu,
   MenuButton,
   MenuDivider,
-  MenuItem,
   Stack,
   Text,
 } from '@sanity/ui'
@@ -16,6 +15,7 @@ import styled from 'styled-components'
 import {StatusButton, UserAvatar} from '../../../../components'
 import {useGlobalPresence} from '../../../../store'
 import {useColorScheme} from '../../../colorScheme'
+import {MenuItem} from '../../../../../ui'
 import {useWorkspace} from '../../../workspace'
 import {PresenceMenuItem} from './PresenceMenuItem'
 
@@ -131,7 +131,6 @@ export function PresenceMenu(props: PresenceMenuProps) {
               href={`https://sanity.io/manage/project/${projectId}`}
               iconRight={CogIcon}
               onFocus={handleClearFocusedItem}
-              paddingY={4}
               rel="noopener noreferrer"
               target="_blank"
               text="Manage members"
diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
index 581adbec073..e5c60003a84 100644
--- a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenuItem.tsx
@@ -1,17 +1,11 @@
 import React, {forwardRef, memo, useCallback, useEffect, useMemo, useState} from 'react'
 import {orderBy} from 'lodash'
 import * as PathUtils from '@sanity/util/paths'
-import {Card, Flex, MenuItem, Stack, Text} from '@sanity/ui'
-import styled from 'styled-components'
 import {GlobalPresence} from '../../../../store'
 import {UserAvatar} from '../../../../components'
+import {MenuItem} from '../../../../../ui'
 import {IntentLink} from 'sanity/router'
 
-const AvatarCard = styled(Card)`
-  background: transparent;
-  margin: calc((-35px + 11px) / 2);
-`
-
 interface PresenceListRowProps {
   focused: boolean
   onFocus: (id: string) => void
@@ -72,30 +66,17 @@ export const PresenceMenuItem = memo(function PresenceMenuItem(props: PresenceLi
       as={lastActiveLocation ? LinkComponent : 'div'}
       data-as={lastActiveLocation ? 'a' : 'div'}
       onFocus={handleFocus}
-      paddingY={hasLink ? 4 : 3}
-      paddingLeft={4}
-      paddingRight={3}
       ref={setMenuItemElement}
-    >
-      <Flex align="center">
-        <AvatarCard>
-          <UserAvatar
-            size={1}
-            key={presence.user.id}
-            user={presence.user}
-            status={hasLink ? 'editing' : 'inactive'}
-          />
-        </AvatarCard>
-
-        <Stack space={2} marginLeft={4}>
-          <Text textOverflow="ellipsis">{presence.user.displayName}</Text>
-          {!hasLink && (
-            <Text size={0} muted textOverflow="ellipsis">
-              Not in a document
-            </Text>
-          )}
-        </Stack>
-      </Flex>
-    </MenuItem>
+      text={presence.user.displayName}
+      subtitle={hasLink ? undefined : 'Not in a document'}
+      preview={
+        <UserAvatar
+          size={1}
+          key={presence.user.id}
+          user={presence.user}
+          status={hasLink ? 'editing' : 'inactive'}
+        />
+      }
+    />
   )
 })
diff --git a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx
index a106b0fec1e..6166d1f2700 100644
--- a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesMenuItems.tsx
@@ -1,6 +1,7 @@
-import {Box, Card, Flex, Label, MenuDivider, MenuItem, Spinner, Text} from '@sanity/ui'
+import {Box, Card, Flex, Label, MenuDivider, Spinner, Text} from '@sanity/ui'
 import React from 'react'
 import {SANITY_VERSION} from '../../../../version'
+import {MenuItem} from '../../../../../ui'
 import {ResourcesResponse, Section} from './helper-functions/types'
 
 interface ResourcesMenuItemProps {
@@ -54,26 +55,20 @@ const fallbackLinks = (
     <MenuItem
       as="a"
       text="Join our community"
-      size={0}
       href="https://www.sanity.io/exchange/community"
       target="_blank"
-      muted={false}
     />
     <MenuItem
       as="a"
       text="Help and support"
-      size={0}
       href="https://www.sanity.io/contact/support"
       target="_blank"
-      muted={false}
     />
     <MenuItem
       as="a"
       text="Contact sales"
-      size={0}
       href="https://www.sanity.io/contact/sales?ref=studio"
       target="_blank"
-      muted={false}
     />
     <MenuDivider />
   </>
@@ -100,7 +95,6 @@ function SubSection({subSection}: {subSection: Section}) {
                 tone="default"
                 key={item._key}
                 text={item.title}
-                size={0}
                 href={item.url}
                 target="_blank"
               />
@@ -108,9 +102,7 @@ function SubSection({subSection}: {subSection: Section}) {
           case 'internalAction': // TODO: Add support for internal actions (MVI-2)
             if (!item.type) return null
             return (
-              item.type === 'show-welcome-modal' && (
-                <MenuItem key={item._key} text={item.title} size={0} />
-              )
+              item.type === 'show-welcome-modal' && <MenuItem key={item._key} text={item.title} />
             )
 
           default:
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx
index 0b8b844ce58..57e16f75650 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/SortMenu.tsx
@@ -1,22 +1,12 @@
 import {SortIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Flex,
-  Inline,
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuItem,
-  Text,
-} from '@sanity/ui'
+import {Box, Button, Card, Flex, Inline, Menu, MenuButton, MenuDivider, Text} from '@sanity/ui'
 import isEqual from 'lodash/isEqual'
 import React, {useCallback, useId, useMemo} from 'react'
 import styled from 'styled-components'
 import {ORDERINGS} from '../definitions/orderings'
 import {useSearchState} from '../contexts/search/useSearchState'
 import type {SearchOrdering} from '../types'
+import {MenuItem} from '../../../../../../ui'
 
 interface SearchDivider {
   type: 'divider'
@@ -53,13 +43,7 @@ function CustomMenuItem({ordering}: {ordering: SearchOrdering}) {
   const isSelected = useMemo(() => isEqual(currentOrdering, ordering), [currentOrdering, ordering])
 
   return (
-    <MenuItem onClick={handleClick} padding={3} pressed={isSelected} tone="default">
-      <Flex align="center" justify="space-between" paddingRight={2}>
-        <Text size={1} weight="medium">
-          {ordering.title}
-        </Text>
-      </Flex>
-    </MenuItem>
+    <MenuItem onClick={handleClick} pressed={isSelected} tone="default" text={ordering.title} />
   )
 }
 
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx
index 588fd80c362..2b752aa5c87 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/OperatorsMenuButton.tsx
@@ -1,11 +1,12 @@
 import {SelectIcon} from '@sanity/icons'
-import {Box, Button, Flex, Inline, Menu, MenuButton, MenuDivider, MenuItem, Text} from '@sanity/ui'
-import React, {createElement, useCallback, useId} from 'react'
+import {Box, Button, Flex, Inline, Menu, MenuButton, MenuDivider, Text} from '@sanity/ui'
+import React, {useCallback, useId} from 'react'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import {getFilterDefinition} from '../../../definitions/filters'
 import {getOperatorDefinition, SearchOperatorDefinition} from '../../../definitions/operators'
 import type {SearchFilter} from '../../../types'
 import {getFilterKey} from '../../../utils/filterUtils'
+import {MenuItem} from '../../../../../../../../ui'
 
 interface OperatorsMenuButtonProps {
   filter: SearchFilter
@@ -24,20 +25,13 @@ function CustomMenuItem({
   const handleClick = useCallback(() => onClick(operator.type), [onClick, operator.type])
 
   return (
-    <MenuItem onClick={handleClick} padding={3} pressed={selected} tone="default">
-      <Flex align="center" justify="space-between" gap={3}>
-        <Box paddingRight={2}>
-          <Text size={1} weight="regular">
-            {operator.label}
-          </Text>
-        </Box>
-        {operator?.icon && (
-          <Text muted size={1}>
-            {createElement(operator.icon)}
-          </Text>
-        )}
-      </Flex>
-    </MenuItem>
+    <MenuItem
+      onClick={handleClick}
+      pressed={selected}
+      tone="default"
+      text={operator.label}
+      iconRight={operator?.icon}
+    />
   )
 }
 
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx
index 914953d0347..2ecff253bc3 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/asset/Asset.tsx
@@ -1,6 +1,6 @@
 import {ChevronDownIcon, ImageIcon, SearchIcon, UndoIcon} from '@sanity/icons'
 import type {AssetFromSource, AssetSource, ReferenceValue} from '@sanity/types'
-import {Box, Button, Flex, Menu, MenuButton, MenuItem, Portal, Stack} from '@sanity/ui'
+import {Box, Button, Flex, Menu, MenuButton, Portal, Stack} from '@sanity/ui'
 import {get} from 'lodash'
 import React, {useCallback, useEffect, useId, useMemo, useState} from 'react'
 import styled from 'styled-components'
@@ -11,6 +11,7 @@ import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../../../../../../studioCl
 import {useSource} from '../../../../../../../../source'
 import {useSearchState} from '../../../../../contexts/search/useSearchState'
 import type {OperatorInputComponentProps} from '../../../../../definitions/operators/operatorTypes'
+import {MenuItem} from '../../../../../../../../../../ui'
 import {AssetSourceError} from './AssetSourceError'
 import {AssetPreview} from './preview/AssetPreview'
 
@@ -149,7 +150,6 @@ export function SearchFilterAssetInput(type?: AssetType) {
                       <Menu>
                         {assetSources.map((source) => (
                           <MenuItem
-                            fontSize={fontSize}
                             icon={source.icon || ImageIcon}
                             key={source.name}
                             // eslint-disable-next-line react/jsx-no-bind
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
index c04b1aef5fa..888bcc1ceee 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/string/StringList.tsx
@@ -1,6 +1,6 @@
 import {SelectIcon} from '@sanity/icons'
 import {isTitledListValue, StringOptions, TitledListValue} from '@sanity/types'
-import {Box, Button, Code, Flex, Menu, MenuButton, MenuItem, Stack, Text} from '@sanity/ui'
+import {Box, Button, Code, Flex, Menu, MenuButton, Stack, Text} from '@sanity/ui'
 import {capitalize, uniq} from 'lodash'
 import React, {useCallback, useId, useMemo} from 'react'
 import {useSchema} from '../../../../../../../../../hooks'
@@ -8,6 +8,7 @@ import {isNonNullable} from '../../../../../../../../../util'
 import {useSearchState} from '../../../../../contexts/search/useSearchState'
 import {OperatorInputComponentProps} from '../../../../../definitions/operators/operatorTypes'
 import {getSchemaField} from '../../../../../utils/getSchemaField'
+import {MenuItem} from '../../../../../../../../../../ui'
 
 interface TitledListValueGroup extends Omit<TitledListValue<number | string>, 'title'> {
   title: (number | string)[]
@@ -27,20 +28,13 @@ function CustomMenuItem({
   const handleClick = useCallback(() => onClick(value), [onClick, value])
 
   return (
-    <MenuItem onClick={handleClick} padding={3} pressed={selected} tone="default">
-      <Flex align="center" justify="space-between" gap={3}>
-        <Stack paddingRight={2} space={2}>
-          <Text size={1} weight="regular">
-            {title}
-          </Text>
-          {value && (
-            <Code muted size={0}>
-              {value}
-            </Code>
-          )}
-        </Stack>
-      </Flex>
-    </MenuItem>
+    <MenuItem
+      onClick={handleClick}
+      pressed={selected}
+      tone="default"
+      text={title}
+      subtitle={value ? `${value}` : undefined}
+    />
   )
 }
 
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
index 315d97dc54c..3bd57028132 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
@@ -9,7 +9,6 @@ import {
   MenuButton,
   MenuButtonProps,
   MenuDivider,
-  MenuItem,
   Stack,
   Text,
 } from '@sanity/ui'
@@ -18,7 +17,6 @@ import styled from 'styled-components'
 import {UserAvatar} from '../../../../components'
 import {getProviderTitle} from '../../../../store'
 import {type StudioThemeColorSchemeKey} from '../../../../theme'
-import {Tooltip} from '../../../../../ui'
 import {
   useColorSchemeOptions,
   useColorSchemeSetValue,
@@ -26,6 +24,7 @@ import {
 } from '../../../colorScheme'
 import {useWorkspace} from '../../../workspace'
 import {userHasRole} from '../../../../util/userHasRole'
+import {MenuItem, Tooltip} from '../../../../../ui'
 import {LoginProviderLogo} from './LoginProviderLogo'
 
 const AVATAR_SIZE = 1
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
index aa7b1b72a88..0144f9d770b 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
@@ -1,23 +1,13 @@
-import {SelectIcon} from '@sanity/icons'
-import {
-  Button,
-  MenuButton,
-  MenuItem,
-  Menu,
-  MenuButtonProps,
-  Box,
-  Label,
-  Text,
-  Stack,
-} from '@sanity/ui'
+import {CheckmarkIcon, SelectIcon} from '@sanity/icons'
+import {Button, MenuButton, Menu, MenuButtonProps, Box, Label, Stack, Card} from '@sanity/ui'
 import React, {useCallback, useMemo, useState} from 'react'
 import styled from 'styled-components'
 import {useActiveWorkspace} from '../../../activeWorkspaceMatcher'
 import {useColorScheme} from '../../../colorScheme'
 import {useWorkspaces} from '../../../workspaces'
-import {Tooltip} from '../../../../../ui'
+import {Tooltip, MenuItem} from '../../../../../ui'
 import {useWorkspaceAuthStates} from './hooks'
-import {WorkspacePreview} from './WorkspacePreview'
+import {STATE_TITLES, WorkspacePreviewIcon} from './WorkspacePreview'
 import {useRouter} from 'sanity/router'
 
 const StyledMenu = styled(Menu)`
@@ -102,23 +92,20 @@ export function WorkspaceMenuButton(props: WorkspaceMenuButtonProps) {
                       navigateUrl({path: workspace.basePath})
                     }
                   }
-
+                  const isSelected = workspace.name === activeWorkspace.name
                   return (
                     <MenuItem
                       key={workspace.name}
                       // eslint-disable-next-line react/jsx-no-bind
                       onClick={handleSelectWorkspace}
-                      padding={2}
-                      pressed={workspace.name === activeWorkspace.name}
-                    >
-                      <WorkspacePreview
-                        icon={workspace?.icon}
-                        selected={workspace.name === activeWorkspace.name}
-                        state={state}
-                        subtitle={workspace?.subtitle}
-                        title={workspace?.title || workspace.name}
-                      />
-                    </MenuItem>
+                      pressed={isSelected}
+                      selected={isSelected}
+                      iconRight={isSelected ? CheckmarkIcon : undefined}
+                      badgeText={STATE_TITLES[state]}
+                      preview={<WorkspacePreviewIcon icon={workspace.icon} size="large" />}
+                      text={workspace?.title || workspace.name}
+                      subtitle={workspace?.subtitle}
+                    />
                   )
                 })}
             </StyledMenu>
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx
index 8ea2e464a53..843f347ab74 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx
@@ -4,15 +4,20 @@ import React, {createElement, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
 
-const STATE_TITLES = {
+export const STATE_TITLES = {
   'logged-in': '',
   'logged-out': 'Signed out',
   'no-access': '',
 }
 
-export const MediaCard = styled(Card)`
-  width: 35px;
-  height: 35px;
+type PreviewIconSize = 'small' | 'large'
+interface MediaCardProps {
+  $size: PreviewIconSize
+}
+
+export const MediaCard = styled(Card)<MediaCardProps>`
+  width: ${(props) => (props.$size === 'small' ? '35px' : '41px')};
+  height: ${(props) => (props.$size === 'small' ? '35px' : '41px')};
 
   svg {
     width: 100%;
@@ -20,6 +25,22 @@ export const MediaCard = styled(Card)`
   }
 `
 
+export const WorkspacePreviewIcon = ({
+  icon,
+  size = 'small',
+}: {
+  icon: React.ComponentType | React.ReactNode
+  size: PreviewIconSize
+}) => {
+  const iconComponent = useMemo(() => createIcon(icon), [icon])
+
+  return (
+    <MediaCard radius={2} tone="transparent" $size={size}>
+      {iconComponent}
+    </MediaCard>
+  )
+}
+
 const createIcon = (icon: React.ComponentType | React.ReactNode) => {
   if (isValidElementType(icon)) return createElement(icon)
   if (isValidElement(icon)) return icon
@@ -38,14 +59,11 @@ export interface WorkspacePreviewProps {
 export function WorkspacePreview(props: WorkspacePreviewProps) {
   const {state, subtitle, selected, title, icon, iconRight} = props
 
-  const iconComponent = useMemo(() => createIcon(icon), [icon])
   const iconRightComponent = useMemo(() => createIcon(iconRight), [iconRight])
 
   return (
     <Flex align="center" flex="none" gap={3}>
-      <MediaCard radius={2} tone="transparent">
-        {iconComponent}
-      </MediaCard>
+      <WorkspacePreviewIcon icon={icon} size="small" />
 
       <Stack flex={1} space={2}>
         <Text textOverflow="ellipsis" weight="medium">
diff --git a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
index a89ebc4bd73..53dc63d2135 100644
--- a/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
+++ b/packages/sanity/src/desk/components/pane/__workshop__/SplitPanesStory/DocumentPane/DocumentActions.tsx
@@ -1,15 +1,7 @@
 import {ChevronDownIcon, PublishIcon} from '@sanity/icons'
-import {
-  Button,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuButtonProps,
-  MenuItem,
-  Stack,
-  useToast,
-} from '@sanity/ui'
+import {Button, Flex, Menu, MenuButton, MenuButtonProps, Stack, useToast} from '@sanity/ui'
 import React, {useCallback} from 'react'
+import {MenuItem} from '../../../../../../ui'
 
 const MENU_BUTTON_POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,
diff --git a/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx b/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
index 6507d0aa279..ac807d1433d 100644
--- a/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
+++ b/packages/sanity/src/desk/components/paneHeaderActions/PaneHeaderCreateButton.tsx
@@ -1,8 +1,9 @@
 import {ComposeIcon} from '@sanity/icons'
 import React, {useMemo, forwardRef} from 'react'
-import {Box, Button, Label, Menu, MenuButton, MenuItem, PopoverProps} from '@sanity/ui'
+import {Box, Button, Label, Menu, MenuButton, PopoverProps} from '@sanity/ui'
 import {Schema} from '@sanity/types'
 import {IntentButton} from '../IntentButton'
+import {MenuItem} from '../../../ui'
 import {InsufficientPermissionsMessageTooltip} from './InsufficientPermissionsMessageTooltip'
 import {IntentLink} from 'sanity/router'
 import {
diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
index 1fd879b4e53..6536a54a4d4 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
@@ -1,27 +1,9 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  PopoverProps,
-  Text,
-} from '@sanity/ui'
-import React, {
-  createElement,
-  isValidElement,
-  useCallback,
-  useRef,
-  useState,
-  useMemo,
-  useId,
-} from 'react'
-import {isValidElementType} from 'react-is'
-import {Tooltip} from '../../../../ui'
+import {Button, Menu, MenuButton, PopoverProps} from '@sanity/ui'
+import React, {useCallback, useRef, useState, useMemo, useId} from 'react'
+import {MenuItem, Tooltip} from '../../../../ui/'
 import {ActionStateDialog} from './ActionStateDialog'
-import {DocumentActionDescription, Hotkeys, LegacyLayerProvider} from 'sanity'
+import {DocumentActionDescription, LegacyLayerProvider} from 'sanity'
 
 export interface ActionMenuButtonProps {
   actionStates: DocumentActionDescription[]
@@ -107,46 +89,34 @@ function ActionMenuListItem(props: ActionMenuListItemProps) {
     if (onHandle) onHandle()
   }, [index, onAction, onHandle])
 
+  const menuItemContent = useCallback(
+    (item: React.JSX.Element) => {
+      // TODO: Once the tooltip changes land, we can use the new `content` prop instead
+
+      return (
+        <Tooltip content={actionState.title} disabled={!actionState.title} placement="top" portal>
+          {item}
+        </Tooltip>
+      )
+    },
+    [actionState.title],
+  )
   return (
     <MenuItem
       data-testid={`action-${actionState.label.replace(' ', '')}`}
       disabled={disabled || Boolean(actionState.disabled)}
       onClick={handleClick}
-      padding={0}
       tone={actionState.tone}
-    >
-      <Tooltip
-        content={actionState.title}
-        disabled={!actionState.title}
-        fallbackPlacements={['left', 'bottom']}
-        placement="top"
-        portal
-      >
-        <Flex align="center" paddingX={3}>
-          <Flex flex={1} paddingY={3}>
-            {actionState.icon && (
-              <Box marginRight={3}>
-                <Text>
-                  {isValidElement(actionState.icon) && actionState.icon}
-                  {isValidElementType(actionState.icon) && createElement(actionState.icon)}
-                </Text>
-              </Box>
-            )}
-
-            <Text>{actionState.label}</Text>
-          </Flex>
-
-          {actionState.shortcut && (
-            <Box marginLeft={3}>
-              <Hotkeys
-                keys={String(actionState.shortcut)
-                  .split('+')
-                  .map((s) => s.slice(0, 1).toUpperCase() + s.slice(1))}
-              />
-            </Box>
-          )}
-        </Flex>
-      </Tooltip>
-    </MenuItem>
+      icon={actionState.icon}
+      text={actionState.label}
+      hotkeys={
+        actionState.shortcut
+          ? String(actionState.shortcut)
+              .split('+')
+              .map((s) => s.slice(0, 1).toUpperCase() + s.slice(1))
+          : undefined
+      }
+      renderMenuItem={menuItemContent}
+    />
   )
 }
diff --git a/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx b/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx
new file mode 100644
index 00000000000..aca77242ccd
--- /dev/null
+++ b/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx
@@ -0,0 +1,106 @@
+import {CheckmarkIcon, CircleIcon, WarningOutlineIcon} from '@sanity/icons'
+import {Avatar, Box, Card, Container, Menu, MenuDivider, Text, Flex} from '@sanity/ui'
+import {useString} from '@sanity/ui-workshop'
+import React from 'react'
+import {MenuItem} from '../menuItem'
+import {hues} from '@sanity/color'
+
+const HOTKEYS = ['Ctrl', 'Alt', 'P']
+const AVATAR_INITIALS = 'A.W.'
+
+export default function MenuItemStory() {
+  const subtitle = useString('Subtitle', 'Subtitle', 'Props') || ''
+  const text = useString('Text', 'Text', 'Props') || ''
+
+  return (
+    <Container width={0} padding={4}>
+      <Card border>
+        <Menu>
+          <MenuItem text={text} />
+          <MenuItem icon={CircleIcon} text={text} />
+          <MenuItem iconRight={CheckmarkIcon} text={text} />
+          <MenuItem hotkeys={HOTKEYS} text={text} />
+          <MenuItem
+            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+            text={text}
+            subtitle={subtitle}
+          />
+          <MenuItem
+            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+            text={text}
+            subtitle={subtitle}
+            iconRight={CheckmarkIcon}
+          />
+          <MenuItem
+            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+            text={text}
+            subtitle={subtitle}
+            badgeText="badge"
+          />
+          <MenuDivider />
+          <Box padding={2}>
+            <Text size={1}>Not recommended</Text>
+          </Box>
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}> Don't use left icons in large menu items</Text>
+          </Box>
+
+          <MenuItem icon={CircleIcon} text={text} subtitle={subtitle} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don't use keyboard shortcuts with large menu items</Text>
+          </Box>
+          <MenuItem text={text} hotkeys={HOTKEYS} subtitle={subtitle} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don't use badges in small menu items</Text>
+          </Box>
+          <MenuItem text={text} badgeText={'badge'} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don't use icons and previews in the same item</Text>
+          </Box>
+          <MenuItem
+            icon={CircleIcon}
+            preview={
+              <Card
+                radius={2}
+                style={{width: '41px', height: '41px', background: hues.cyan[500].hex}}
+              />
+            }
+            text={text}
+            subtitle={subtitle}
+          />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don't use icon right and hotkeys in the same item</Text>
+          </Box>
+          <MenuItem icon={CircleIcon} text={text} iconRight={CheckmarkIcon} hotkeys={HOTKEYS} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don't use icon right and badge in the same item</Text>
+          </Box>
+          <MenuItem icon={CircleIcon} text={text} iconRight={CheckmarkIcon} badgeText={'badge'} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don't use hotkeys and badge in the same item</Text>
+          </Box>
+          <MenuItem icon={CircleIcon} text={text} hotkeys={HOTKEYS} badgeText={'badge'} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don't use everything at once</Text>
+          </Box>
+          <MenuItem
+            icon={CircleIcon}
+            text={text}
+            hotkeys={HOTKEYS}
+            badgeText={'badge'}
+            iconRight={CheckmarkIcon}
+          />
+          <MenuItem
+            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+            subtitle={subtitle}
+            icon={CircleIcon}
+            text={text}
+            hotkeys={HOTKEYS}
+            badgeText={'badge'}
+            iconRight={CheckmarkIcon}
+          />
+        </Menu>
+      </Card>
+    </Container>
+  )
+}
diff --git a/packages/sanity/src/ui/__workshop__/index.ts b/packages/sanity/src/ui/__workshop__/index.ts
new file mode 100644
index 00000000000..37dc3793fec
--- /dev/null
+++ b/packages/sanity/src/ui/__workshop__/index.ts
@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'studio-ui',
+  title: 'Studio UI',
+  stories: [
+    {
+      name: 'menu-item',
+      title: 'MenuItem',
+      component: lazy(() => import('./MenuItemStory')),
+    },
+  ],
+})
diff --git a/packages/sanity/src/ui/index.ts b/packages/sanity/src/ui/index.ts
index fa5a7e52455..d1786efffbb 100644
--- a/packages/sanity/src/ui/index.ts
+++ b/packages/sanity/src/ui/index.ts
@@ -1 +1,2 @@
 export * from './tooltip'
+export * from './menuItem'
diff --git a/packages/sanity/src/ui/menuItem/MenuItem.tsx b/packages/sanity/src/ui/menuItem/MenuItem.tsx
new file mode 100644
index 00000000000..c266391850c
--- /dev/null
+++ b/packages/sanity/src/ui/menuItem/MenuItem.tsx
@@ -0,0 +1,126 @@
+import {
+  Flex,
+  MenuItem as UIMenuItem,
+  MenuItemProps as UIMenuItemProps,
+  Text,
+  Badge,
+  Stack,
+  Hotkeys,
+} from '@sanity/ui'
+import React, {createElement, forwardRef, isValidElement, useMemo} from 'react'
+import {isValidElementType} from 'react-is'
+import styled from 'styled-components'
+
+const FONT_SIZE = 1
+
+/** @internal */
+export type MenuItemProps = Pick<
+  UIMenuItemProps,
+  'as' | 'icon' | 'iconRight' | 'pressed' | 'selected' | 'text' | 'tone' | 'hotkeys'
+> &
+  Omit<
+    React.HTMLProps<HTMLDivElement>,
+    'as' | 'height' | 'ref' | 'selected' | 'tabIndex' | 'size'
+  > & {
+    subtitle?: string
+    badgeText?: string
+    /**
+     * Max allowed size is 41x41.
+     */
+    preview?: React.ReactNode
+    /**
+     * Allows to add wrappers to the menu item, e.g. `Tooltip`.
+     */
+    renderMenuItem?: (menuItem: React.JSX.Element) => React.ReactNode
+    /**
+     * Usage of `children` is not supported, import `MenuItem` from `@sanity/ui` instead.
+     */
+    children?: undefined
+  }
+
+const PreviewWrapper = styled.div`
+  width: 41px;
+  height: 41px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+`
+/**
+ * Studio UI <MenuItem>.
+ *
+ * Studio UI components are opinionated `@sanity/ui` components meant for internal use only.
+ * Props and options are intentionally limited to ensure consistency and ease of use.
+ *
+ * @internal
+ */
+export const MenuItem = forwardRef(function MenuItem(
+  {
+    badgeText,
+    subtitle,
+    text,
+    preview = null,
+    icon,
+    iconRight,
+    hotkeys,
+    children,
+    renderMenuItem,
+    ...rest
+  }: MenuItemProps,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const menuItemContent = useMemo(() => {
+    return (
+      <Flex gap={3} align="center">
+        {icon && (
+          <Text size={FONT_SIZE}>
+            {isValidElement(icon) && icon}
+            {isValidElementType(icon) && createElement(icon)}
+          </Text>
+        )}
+
+        {preview && <PreviewWrapper>{preview}</PreviewWrapper>}
+
+        {(text || subtitle) && (
+          <Stack flex={1} space={2}>
+            {text && (
+              <Text size={FONT_SIZE} textOverflow="ellipsis" weight="medium">
+                {text}
+              </Text>
+            )}
+            {subtitle && (
+              <Text size={FONT_SIZE} textOverflow="ellipsis" weight={'regular'} muted>
+                {subtitle}
+              </Text>
+            )}
+          </Stack>
+        )}
+
+        {hotkeys && (
+          <Hotkeys fontSize={FONT_SIZE} keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />
+        )}
+
+        {badgeText && (
+          <Badge fontSize={FONT_SIZE} mode="default">
+            {badgeText}
+          </Badge>
+        )}
+
+        {iconRight && (
+          <Text size={FONT_SIZE}>
+            {isValidElement(iconRight) && iconRight}
+            {isValidElementType(iconRight) && createElement(iconRight)}
+          </Text>
+        )}
+      </Flex>
+    )
+  }, [icon, text, hotkeys, iconRight, preview, subtitle, badgeText])
+
+  return (
+    <UIMenuItem ref={ref} {...rest}>
+      {typeof children === 'undefined' && typeof renderMenuItem === 'function'
+        ? renderMenuItem(menuItemContent)
+        : menuItemContent}
+    </UIMenuItem>
+  )
+})
diff --git a/packages/sanity/src/ui/menuItem/index.ts b/packages/sanity/src/ui/menuItem/index.ts
new file mode 100644
index 00000000000..7f0d25e4824
--- /dev/null
+++ b/packages/sanity/src/ui/menuItem/index.ts
@@ -0,0 +1 @@
+export * from './MenuItem'