diff --git a/packages/@react-spectrum/s2/src/SegmentedControl.tsx b/packages/@react-spectrum/s2/src/SegmentedControl.tsx
index de31da5bde6..0dafd0cc08d 100644
--- a/packages/@react-spectrum/s2/src/SegmentedControl.tsx
+++ b/packages/@react-spectrum/s2/src/SegmentedControl.tsx
@@ -13,13 +13,13 @@
 import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';
 import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
-import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';
+import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SelectionIndicator, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';
 import {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';
+import {createContext, forwardRef, ReactNode, useCallback, useContext, useRef} from 'react';
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
 import {Text, TextContext} from './Content';
-import {useDOMRef, useFocusableRef, useMediaQuery} from '@react-spectrum/utils';
+import {useDOMRef, useFocusableRef} from '@react-spectrum/utils';
 import {useLayoutEffect} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -113,6 +113,13 @@ const slider = style<{isDisabled: boolean}>({
   left: 0,
   width: 'full',
   height: 'full',
+  contain: 'strict',
+  transition: {
+    default: '[translate,width]',
+    '@media (prefers-reduced-motion: reduce)': 'none'
+  },
+  transitionDuration: 200,
+  transitionTimingFunction: 'out',
   position: 'absolute',
   boxSizing: 'border-box',
   borderStyle: 'solid',
@@ -130,8 +137,6 @@ const slider = style<{isDisabled: boolean}>({
 
 interface InternalSegmentedControlContextProps {
   register?: (value: Key, isDisabled?: boolean) => void,
-  prevRef?: RefObject<DOMRect | null>,
-  currentSelectedRef?: RefObject<HTMLDivElement | null>,
   isJustified?: boolean
 }
 
@@ -139,8 +144,6 @@ interface DefaultSelectionTrackProps {
   defaultValue?: Key | null,
   value?: Key | null,
   children: ReactNode,
-  prevRef: RefObject<DOMRect | null>,
-  currentSelectedRef: RefObject<HTMLDivElement | null>,
   isJustified?: boolean
 }
 
@@ -158,14 +161,7 @@ export const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedContr
   } = props;
   let domRef = useDOMRef(ref);
 
-  let prevRef = useRef<DOMRect>(null);
-  let currentSelectedRef = useRef<HTMLDivElement>(null);
-
   let onChange = (values: Set<Key>) => {
-    if (currentSelectedRef.current) {
-      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();
-    }
-
     if (onSelectionChange) {
       let firstKey = values.values().next().value;
       if (firstKey != null) {
@@ -186,7 +182,7 @@ export const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedContr
       onSelectionChange={onChange}
       className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}
       aria-label={props['aria-label']}>
-      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>
+      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} isJustified={props.isJustified}>
         {props.children}
       </DefaultSelectionTracker>
     </ToggleButtonGroup>
@@ -209,7 +205,7 @@ function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
   return (
     <Provider
       values={[
-        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]
+        [InternalSegmentedControlContext, {register: register, isJustified: props.isJustified}]
       ]}>
       {props.children}
     </Provider>
@@ -222,46 +218,21 @@ function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
 export const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {
   let domRef = useFocusableRef(ref);
   let divRef = useRef<HTMLDivElement>(null);
-  let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);
-  let state = useContext(ToggleGroupStateContext);
-  let isSelected = state?.selectedKeys.has(props.id);
-  // do not apply animation if a user has the prefers-reduced-motion setting
-  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+  let {register, isJustified} = useContext(InternalSegmentedControlContext);
 
   useLayoutEffect(() => {
     register?.(props.id);
   }, [register, props.id]);
 
-  useLayoutEffect(() => {
-    if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {
-      let currentItem = currentSelectedRef?.current.getBoundingClientRect();
-
-      let deltaX = prevRef?.current.left - currentItem?.left;
-
-      currentSelectedRef.current.animate(
-        [
-          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},
-          {transform: 'translateX(0px)', width: `${currentItem.width}px`}
-        ],
-        {
-          duration: 200,
-          easing: 'ease-out'
-        }
-      );
-
-      prevRef.current = null;
-    }
-  }, [isSelected, reduceMotion, prevRef, currentSelectedRef]);
-
   return (
     <ToggleButton
       {...props}
       ref={domRef}
       style={props.UNSAFE_style}
       className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >
-      {({isSelected, isPressed, isDisabled}) => (
+      {({isPressed, isDisabled}) => (
         <>
-          {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}
+          <SelectionIndicator className={slider({isDisabled})} />
           <Provider
             values={[
               [IconContext, {
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index eb27172a324..329a6284daa 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -22,6 +22,7 @@ import {
   Tab as RACTab,
   TabList as RACTabList,
   Tabs as RACTabs,
+  SelectionIndicator,
   TabListStateContext,
   TabRenderProps
 } from 'react-aria-components';
@@ -36,7 +37,7 @@ import {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResize
 import {Picker, PickerItem} from './TabsPicker';
 import {Text, TextContext} from './Content';
 import {useControlledState} from '@react-stately/utils';
-import {useDOMRef, useMediaQuery} from '@react-spectrum/utils';
+import {useDOMRef} from '@react-spectrum/utils';
 import {useHasTabbableChild} from '@react-aria/focus';
 import {useLocale} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -79,7 +80,6 @@ export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'sty
 export const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);
 const InternalTabsContext = createContext<Partial<TabsProps> & {
   tablistRef?: RefObject<HTMLDivElement | null>,
-  prevRef?: RefObject<DOMRect | null>,
   selectedKey?: Key | null
 }>({});
 
@@ -133,14 +133,6 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
   }
 
   let tablistRef = useRef<HTMLDivElement | null>(null);
-  let prevRef = useRef<DOMRect | null>(null);
-
-  let onChange = useEffectEvent((val: Key) => {
-    if (tablistRef.current) {
-      prevRef.current = tablistRef.current.querySelector('[role=tab][data-selected=true]')?.getBoundingClientRect() ?? null;
-    }
-    setValue(val);
-  });
 
   return (
     <Provider
@@ -152,8 +144,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
           disabledKeys,
           selectedKey: value,
           tablistRef,
-          prevRef,
-          onSelectionChange: onChange,
+          onSelectionChange: setValue,
           labelBehavior,
           'aria-label': props['aria-label'],
           'aria-labelledby': props['aria-labelledby']
@@ -164,7 +155,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
           <CollapsingTabs
             {...props}
             selectedKey={value}
-            onSelectionChange={onChange}
+            onSelectionChange={setValue}
             collection={collection}
             containerRef={domRef} />
         )}
@@ -294,6 +285,13 @@ const selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}
       vertical: '[2px]'
     }
   },
+  contain: 'strict',
+  transition: {
+    default: '[translate,width,height]',
+    '@media (prefers-reduced-motion: reduce)': 'none'
+  },
+  transitionDuration: 200,
+  transitionTimingFunction: 'out',
   bottom: {
     default: 0
   },
@@ -374,7 +372,7 @@ const icon = style({
 });
 
 export function Tab(props: TabProps): ReactNode {
-  let {density, orientation, labelBehavior, prevRef} = useContext(InternalTabsContext) ?? {};
+  let {density, orientation, labelBehavior} = useContext(InternalTabsContext) ?? {};
 
   let contentId = useId();
   let ariaLabelledBy = props['aria-labelledby'] || '';
@@ -390,7 +388,6 @@ export function Tab(props: TabProps): ReactNode {
       {({
           // @ts-ignore
           isMenu,
-          isSelected,
           isDisabled
         }) => {
         if (isMenu) {
@@ -417,10 +414,8 @@ export function Tab(props: TabProps): ReactNode {
                 }]
               ]}>
               <TabInner
-                isSelected={isSelected}
                 orientation={orientation!}
-                isDisabled={isDisabled}
-                prevRef={prevRef}>
+                isDisabled={isDisabled}>
                 {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
               </TabInner>
             </Provider>
@@ -431,53 +426,17 @@ export function Tab(props: TabProps): ReactNode {
   );
 }
 
-function TabInner({isSelected, isDisabled, orientation, children, prevRef}: {
-  isSelected: boolean,
+function TabInner({isDisabled, orientation, children}: {
   isDisabled: boolean,
   orientation: Orientation,
-  children: ReactNode,
-  prevRef?: RefObject<DOMRect | null>
+  children: ReactNode
 }) {
-  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
   let ref = useRef<HTMLDivElement | null>(null);
-
-  useLayoutEffect(() => {
-    if (isSelected && prevRef?.current && ref?.current && !reduceMotion) {
-      let currentItem = ref?.current.getBoundingClientRect();
-
-      if (orientation === 'horizontal') {
-        let deltaX = prevRef.current.left - currentItem.left;
-        ref.current.animate(
-          [
-            {transform: `translateX(${deltaX}px)`, width: `${prevRef.current.width}px`},
-            {transform: 'translateX(0px)', width: '100%'}
-          ],
-          {
-            duration: 200,
-            easing: 'ease-out'
-          }
-        );
-      } else {
-        let deltaY = prevRef.current.top - currentItem.top;
-        ref.current.animate(
-          [
-            {transform: `translateY(${deltaY}px)`, height: `${prevRef.current.height}px`},
-            {transform: 'translateY(0px)', height: '100%'}
-          ],
-          {
-            duration: 200,
-            easing: 'ease-out'
-          }
-        );
-      }
-
-      prevRef.current = null;
-    }
-  }, [isSelected, reduceMotion, prevRef, orientation]);
+  let isHidden = useContext(HiddenTabsContext);
 
   return (
     <>
-      {isSelected && <div ref={ref} className={selectedIndicator({isDisabled, orientation})} />}
+      {!isHidden && <SelectionIndicator ref={ref} className={selectedIndicator({isDisabled, orientation})} />}
       {children}
     </>
   );
@@ -549,6 +508,8 @@ function isEveryTabDisabled<T>(collection: Collection<Node<T>> | undefined, disa
   return false;
 }
 
+const HiddenTabsContext = createContext(false);
+
 let HiddenTabs = function (props: {
   listRef: RefObject<HTMLDivElement | null>,
   items: Array<Node<any>>,
@@ -573,18 +534,20 @@ let HiddenTabs = function (props: {
         overflow: 'hidden',
         opacity: 0
       })}>
-      {items.map((item) => {
-        // pull off individual props as an allow list, don't want refs or other props getting through
-        return (
-          <div
-            data-hidden-tab
-            style={item.props.UNSAFE_style}
-            key={item.key}
-            className={item.props.className({size, density})}>
-            {item.props.children({size, density})}
-          </div>
-        );
-      })}
+      <HiddenTabsContext.Provider value>
+        {items.map((item) => {
+          // pull off individual props as an allow list, don't want refs or other props getting through
+          return (
+            <div
+              data-hidden-tab
+              style={item.props.UNSAFE_style}
+              key={item.key}
+              className={item.props.className({size, density})}>
+              {item.props.children({size, density})}
+            </div>
+          );
+        })}
+      </HiddenTabsContext.Provider>
     </div>
   );
 };
diff --git a/packages/dev/s2-docs/pages/react-aria/GridList.mdx b/packages/dev/s2-docs/pages/react-aria/GridList.mdx
index 7fcb080411e..894d2be8efb 100644
--- a/packages/dev/s2-docs/pages/react-aria/GridList.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/GridList.mdx
@@ -263,11 +263,11 @@ function Example() {
 
 <Anatomy role="img" aria-label="Anatomy diagram of a list container, consisting of multiple list items. Each list item contains a drag button, a selection checkbox, an icon, a title, and a description." />
 
-```tsx links={{GridList: '#gridlist', GridListItem: '#gridlistitem', GridListLoadMoreItem: '#gridlistloadmoreitem', Button: 'Button.html', Checkbox: 'Checkbox.html'}}
+```tsx links={{GridList: '#gridlist', GridListItem: '#gridlistitem', GridListLoadMoreItem: '#gridlistloadmoreitem', Button: 'Button.html', Checkbox: 'Checkbox.html', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
 <GridList>
   <GridListItem>
     <Button slot="drag" />
-    <Checkbox slot="selection" />
+    <Checkbox slot="selection" /> or <SelectionIndicator />
   </GridListItem>
   <GridListLoadMoreItem />
 </GridList>
diff --git a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx
index 7d8bae47b64..1737a7ff767 100644
--- a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx
@@ -372,11 +372,12 @@ function Example() {
 
 <Anatomy role="img" aria-label="Anatomy diagram of a list container, consisting of multiple list items. Each list item contains a label and description. The items are grouped into a section with a header." />
 
-```tsx links={{ListBox: '#listbox', ListBoxItem: '#listboxitem', ListBoxSection: '#listboxsection', ListBoxLoadMoreItem: '#listboxloadmoreitem'}}
+```tsx links={{ListBox: '#listbox', ListBoxItem: '#listboxitem', ListBoxSection: '#listboxsection', ListBoxLoadMoreItem: '#listboxloadmoreitem', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
 <ListBox>
   <ListBoxItem>
     <Text slot="label" />
     <Text slot="description" />
+    <SelectionIndicator />
   </ListBoxItem>
   <ListBoxSection>
     <Header />
diff --git a/packages/dev/s2-docs/pages/react-aria/Menu.mdx b/packages/dev/s2-docs/pages/react-aria/Menu.mdx
index f191d4a3ee2..a375873ff6e 100644
--- a/packages/dev/s2-docs/pages/react-aria/Menu.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Menu.mdx
@@ -469,7 +469,7 @@ import {MenuTrigger, Menu, MenuItem, Button, Popover} from 'react-aria-component
 
 <Anatomy />
 
-```tsx links={{MenuTrigger: '#menutrigger', Button: 'Button.html', Popover: 'Popover.html', Menu: '#menu', MenuItem: '#menuitem', Separator: 'Separator.html', MenuSection: '#menusection', SubmenuTrigger: '#submenutrigger'}}
+```tsx links={{MenuTrigger: '#menutrigger', Button: 'Button.html', Popover: 'Popover.html', Menu: '#menu', MenuItem: '#menuitem', Separator: 'Separator.html', MenuSection: '#menusection', SubmenuTrigger: '#submenutrigger', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
 <MenuTrigger>
   <Button />
   <Popover>
@@ -478,6 +478,7 @@ import {MenuTrigger, Menu, MenuItem, Button, Popover} from 'react-aria-component
         <Text slot="label" />
         <Text slot="description" />
         <Keyboard />
+        <SelectionIndicator />
       </MenuItem>
       <Separator />
       <MenuSection>
diff --git a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx
index 4440334b0e7..749ab7297fe 100644
--- a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx
@@ -93,10 +93,12 @@ import {Form} from 'react-aria-components';
 
 <Anatomy />
 
-```tsx links={{RadioGroup: '#radiogroup', Radio: '#radio'}}
+```tsx links={{RadioGroup: '#radiogroup', Radio: '#radio', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
 <RadioGroup>
   <Label />
-  <Radio />
+  <Radio>
+    <SelectionIndicator />
+  </Radio>
   <Text slot="description" />
   <FieldError />
 </RadioGroup>
diff --git a/packages/dev/s2-docs/pages/react-aria/SegmentedControl.css b/packages/dev/s2-docs/pages/react-aria/SegmentedControl.css
new file mode 100644
index 00000000000..5fefd30e4fc
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/SegmentedControl.css
@@ -0,0 +1,51 @@
+.segmented-control {
+  display: flex;
+  background: var(--gray-100);
+  width: fit-content;
+  padding: 2px;
+  border-radius: 8px;
+
+  .react-aria-SelectionIndicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    transition-property: translate, width;
+    transition-duration: 200ms;
+    border-radius: 8px;
+    background: var(--gray-50);
+    outline: 2px solid var(--gray-600);
+  }
+
+  .segmented-control-item {
+    all: unset;
+    display: block;
+    color: var(--text-color);
+    font-size: 1rem;
+    outline: none;
+    padding: 6px 16px;
+    position: relative;
+    z-index: 1;
+    border-radius: 8px;
+
+    span {
+      display: inline-block;
+      transition: scale 200ms;
+    }
+
+     &[data-pressed] span {
+      scale: 0.95;
+    }
+
+    &[data-selected] {
+      z-index: 0;
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: 4px;
+    }
+  }
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/SelectionIndicator.css b/packages/dev/s2-docs/pages/react-aria/SelectionIndicator.css
new file mode 100644
index 00000000000..27e53546519
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/SelectionIndicator.css
@@ -0,0 +1,39 @@
+.animated-GridListItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  padding: 4px 4px 4px 12px;
+  border-radius: 6px;
+  outline: none;
+  cursor: default;
+  color: var(--text-color);
+  font-size: 14px;
+  position: relative;
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -2px;
+  }
+
+  &[data-selected] {
+    font-weight: bold;
+  }
+
+  .react-aria-SelectionIndicator {
+    position: absolute;
+    left: 4px;
+    width: 3px;
+    height: 20px;
+    border-radius: 4px;
+    background: var(--gray-600);
+    transition-property: translate, opacity;
+    transition-duration: 250ms;
+
+    &[data-entering],
+    &[data-exiting] {
+      opacity: 0;
+      translate: -20px 0;
+    }
+  }
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/Table.mdx b/packages/dev/s2-docs/pages/react-aria/Table.mdx
index 6d7655a2fd8..7674fb584ce 100644
--- a/packages/dev/s2-docs/pages/react-aria/Table.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Table.mdx
@@ -657,7 +657,7 @@ function ReorderableTable() {
 
 <Anatomy role="img" aria-label="Anatomy diagram of a table, consisting of multiple rows and columns. The table header includes a select all checkbox, file name and size columns, and a column resizer. Each row in the table body contains a drag button, a selection checkbox, and file name and size cells." />
 
-```tsx links={{ResizableTableContainer: '#resizabletablecontainer', Table: '#table', TableHeader: '#tableheader', Column: '#column', Checkbox: 'Checkbox.html', ColumnResizer: '#columnresizer', TableBody: '#tablebody', Row: '#row', Cell: '#cell', Button: 'Button.html', TableLoadMoreItem: '#tableloadmoreitem'}}
+```tsx links={{ResizableTableContainer: '#resizabletablecontainer', Table: '#table', TableHeader: '#tableheader', Column: '#column', Checkbox: 'Checkbox.html', ColumnResizer: '#columnresizer', TableBody: '#tablebody', Row: '#row', Cell: '#cell', Button: 'Button.html', TableLoadMoreItem: '#tableloadmoreitem', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
 <ResizableTableContainer>
   <Table>
     <TableHeader>
@@ -669,7 +669,9 @@ function ReorderableTable() {
     <TableBody>
       <Row>
         <Cell><Button slot="drag" /></Cell>
-        <Cell><Checkbox slot="selection" /></Cell>
+        <Cell>
+          <Checkbox slot="selection" /> or <SelectionIndicator />
+        </Cell>
         <Cell />
         <Cell />
       </Row>
diff --git a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx
index 3d0e1046bdd..6528867280f 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx
@@ -14,7 +14,7 @@ import Anatomy from '@react-aria/tabs/docs/anatomy.svg';
 <ExampleSwitcher>
   ```tsx render docs={docs.exports.Tabs} links={docs.links} props={['orientation', 'keyboardActivation', 'isDisabled']} type="vanilla" files={["starters/docs/src/Tabs.tsx", "starters/docs/src/Tabs.css"]}
   "use client";
-  import {Tabs, TabList, Tab, TabPanel} from 'react-aria-components';
+  import {Tabs, TabList, Tab, TabPanel} from 'vanilla-starter/Tabs';
   import Home from '@react-spectrum/s2/illustrations/gradient/generic2/Home';
   import Folder from '@react-spectrum/s2/illustrations/gradient/generic2/FolderOpen';
   import Search from '@react-spectrum/s2/illustrations/gradient/generic2/Search';
@@ -80,7 +80,9 @@ import Anatomy from '@react-aria/tabs/docs/anatomy.svg';
 
 ```tsx render
 "use client";
-import {Tabs, TabList, Tab, TabPanel, Collection, Button} from 'react-aria-components';
+import {Tabs, TabList, Tab, TabPanel} from 'vanilla-starter/Tabs';
+import {Button} from 'vanilla-starter/Button';
+import {Collection} from 'react-aria-components';
 import {useState} from 'react';
 
 function Example() {
@@ -146,7 +148,7 @@ Use the `href` prop on a `<Tab>` to create a link. See the **client side routing
 
 ```tsx render
 "use client";
-import {Tabs, TabList, Tab, TabPanel} from 'react-aria-components';
+import {Tabs, TabList, Tab, TabPanel} from 'vanilla-starter/Tabs';
 import {useSyncExternalStore} from 'react';
 
 export default function Example() {
@@ -189,7 +191,7 @@ Use the `defaultSelectedKey` or `selectedKey` prop to set the selected tab. The
 ```tsx render
 "use client";
 import type {Key} from 'react-aria-components';
-import {Tabs, TabList, Tab, TabPanel} from 'react-aria-components';
+import {Tabs, TabList, Tab, TabPanel} from 'vanilla-starter/Tabs';
 import Home from '@react-spectrum/s2/illustrations/gradient/generic2/Home';
 import Folder from '@react-spectrum/s2/illustrations/gradient/generic2/FolderOpen';
 import Search from '@react-spectrum/s2/illustrations/gradient/generic2/Search';
@@ -236,10 +238,12 @@ function Example() {
 
 <Anatomy />
 
-```tsx links={{Tabs: '#tabs', TabList: '#tablist', Tab: '#tab', TabPanel: '#tabpanel'}}
+```tsx links={{Tabs: '#tabs', TabList: '#tablist', Tab: '#tab', TabPanel: '#tabpanel', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
 <Tabs>
   <TabList>
-    <Tab />
+    <Tab>
+      <SelectionIndicator />
+    </Tab>
   </TabList>
   <TabPanel />
 </Tabs>
diff --git a/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx b/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx
index 779e74e9a53..fc35de3e5fd 100644
--- a/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx
@@ -131,11 +131,12 @@ function Example(props) {
 
 <Anatomy />
 
-```tsx links={{TagGroup: '#taggroup', TagList: '#taglist', Tag: '#tag', Button: 'Button.html'}}
+```tsx links={{TagGroup: '#taggroup', TagList: '#taglist', Tag: '#tag', Button: 'Button.html', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
 <TagGroup>
   <Label />
   <TagList>
     <Tag>
+      <SelectionIndicator />
       <Button slot="remove" />
     </Tag>
   </TagList>
diff --git a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx
index be58c669398..60a642b1acb 100644
--- a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx
@@ -79,13 +79,46 @@ function Example(props) {
 }
 ```
 
+### Animation
+
+Render a `SelectionIndicator` within each `ToggleButton` to animate selection changes.
+
+```tsx render files={['packages/dev/s2-docs/pages/react-aria/SegmentedControl.css']}
+"use client";
+import {ToggleButtonGroup, ToggleButton, ToggleButtonProps, SelectionIndicator} from 'react-aria-components';
+import './SegmentedControl.css';
+
+function SegmentedControlItem(props: ToggleButtonProps) {
+  return (
+    <ToggleButton {...props} className="segmented-control-item">
+      {/*- begin highlight -*/}
+      <SelectionIndicator />
+      {/*- end highlight -*/}
+      <span>{props.children}</span>
+    </ToggleButton>
+  );
+}
+
+<ToggleButtonGroup
+  className="segmented-control"
+  defaultSelectedKeys={['day']}
+  disallowEmptySelection>
+  <SegmentedControlItem id="day">Day</SegmentedControlItem>
+  <SegmentedControlItem id="week">Week</SegmentedControlItem>
+  <SegmentedControlItem id="month">Month</SegmentedControlItem>
+  <SegmentedControlItem id="year">Year</SegmentedControlItem>
+</ToggleButtonGroup>
+```
+
 ## API
 
 <Anatomy />
 
-```tsx links={{ToggleButtonGroup: '#togglebuttongroup', ToggleButton: 'ToggleButton.html'}}
+```tsx links={{ToggleButtonGroup: '#togglebuttongroup', ToggleButton: 'ToggleButton.html', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
 <ToggleButtonGroup>
-  <ToggleButton />
+  <ToggleButton>
+    <SelectionIndicator />
+  </ToggleButton>
 </ToggleButtonGroup>
 ```
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Tree.mdx b/packages/dev/s2-docs/pages/react-aria/Tree.mdx
index d738b8892d5..31c7d597628 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tree.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tree.mdx
@@ -355,12 +355,12 @@ function Example() {
 
 <Anatomy role="img" aria-label="Anatomy diagram of a Tree, consisting of multiple items. Each item in the tree contains a selection checkbox, an expand toggle button, and the name of the item." />
 
-```tsx links={{Tree: '#tree', TreeItem: '#treeitem', TreeItemContent: '#treeitemcontent', Button: 'Button.html', Checkbox: 'Checkbox.html', TreeLoadMoreItem: '#treeloadmoreitem'}}
+```tsx links={{Tree: '#tree', TreeItem: '#treeitem', TreeItemContent: '#treeitemcontent', Button: 'Button.html', Checkbox: 'Checkbox.html', TreeLoadMoreItem: '#treeloadmoreitem', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
 <Tree>
   <TreeItem>
     <TreeItemContent>
       <Button slot="chevron" />
-      <Checkbox slot="selection" />
+      <Checkbox slot="selection" /> or <SelectionIndicator />
       <Button slot="drag" />
     </TreeItemContent>
     <TreeItem>
diff --git a/packages/dev/s2-docs/pages/react-aria/selection.mdx b/packages/dev/s2-docs/pages/react-aria/selection.mdx
index acc9d1a82e7..78a12a33e7e 100644
--- a/packages/dev/s2-docs/pages/react-aria/selection.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/selection.mdx
@@ -499,6 +499,37 @@ In components which support multiple selection, you can limit the selection to a
 `selectionMode` prop. This continues to accept `selectedKeys` and `defaultSelectedKeys` as a `Set`, but it will
 only contain a single id at a time.
 
+### Animated SelectionIndicator
+
+Render a `<SelectionIndicator />` within each collection item to animate selection changes. All CSS properties listed by `transition-property` are animated. Include the `translate` property to smoothly animate the position. Use the entering and exiting states to add a transition when no items are selected.
+
+```tsx render files={['packages/dev/s2-docs/pages/react-aria/SelectionIndicator.css']}
+"use client";
+import {GridList, GridListItem, SelectionIndicator} from 'react-aria-components';
+import './SelectionIndicator.css';
+
+function SelectableItem({id, children}) {
+  return (
+    <GridListItem id={id} className="animated-GridListItem">
+      {/*- begin highlight -*/}
+      <SelectionIndicator />
+      {/*- end highlight -*/}
+      {children}
+    </GridListItem>
+  );
+}
+
+<GridList
+  aria-label="Animated GridList"
+  selectionMode="single">
+  <SelectableItem>Home</SelectableItem>
+  <SelectableItem>Getting Started</SelectableItem>
+  <SelectableItem>Components</SelectableItem>
+</GridList>
+```
+
+<StateTable defaultClassName="react-aria-SelectionIndicator" properties={docs.exports.SharedElementRenderProps.properties} links={docs.links} />
+
 ## Item actions
 
 In addition to selection, some collection components support item actions via the `onAction` prop. In the default `"toggle"` selection behavior, when nothing is selected, clicking, tapping, or pressing the <Keyboard>Enter</Keyboard> key triggers the item action. Items may be selected using the checkbox, or by pressing the <Keyboard>Space</Keyboard> key. When at least one item is selected, clicking or tapping a row toggles the selection.
diff --git a/packages/dev/s2-docs/src/StateTable.tsx b/packages/dev/s2-docs/src/StateTable.tsx
index eee6c3e962a..068cea9a390 100644
--- a/packages/dev/s2-docs/src/StateTable.tsx
+++ b/packages/dev/s2-docs/src/StateTable.tsx
@@ -1,6 +1,6 @@
 import {Code, styles as codeStyles} from './Code';
 import {Fragment} from 'react';
-import {renderHTMLfromMarkdown, TInterface} from './types';
+import {renderHTMLfromMarkdown, setLinks, TInterface} from './types';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from './Table';
 
@@ -8,12 +8,17 @@ const codeStyle = style({font: {default: 'code-xs', lg: 'code-sm'}});
 
 interface StateTableProps {
   properties: TInterface['properties'],
+  links?: any,
   showOptional?: boolean,
   hideSelector?: boolean,
   defaultClassName?: string
 }
 
-export function StateTable({properties, showOptional, hideSelector, defaultClassName}: StateTableProps) {
+export function StateTable({properties, links, showOptional, hideSelector, defaultClassName}: StateTableProps) {
+  if (links) {
+    setLinks(links);
+  }
+
   let props = Object.values(properties);
   if (!showOptional) {
     props = props.filter(prop => !prop.optional);
diff --git a/packages/react-aria-components/docs/GridList.mdx b/packages/react-aria-components/docs/GridList.mdx
index b2699c6060f..bdf21081e2f 100644
--- a/packages/react-aria-components/docs/GridList.mdx
+++ b/packages/react-aria-components/docs/GridList.mdx
@@ -231,12 +231,12 @@ A grid list consists of a container element, with rows of data inside. The rows
 If the list supports row selection, each row can optionally include a selection checkbox.
 
 ```tsx
-import {GridList, GridListItem, Checkbox, Button} from 'react-aria-components';
+import {GridList, GridListItem, Checkbox, Button, SelectionIndicator} from 'react-aria-components';
 
 <GridList>
   <GridListItem>
     <Button slot="drag" />
-    <Checkbox slot="selection" />
+    <Checkbox slot="selection" /> or <SelectionIndicator />
   </GridListItem>
 </GridList>
 ```
diff --git a/packages/react-aria-components/docs/ListBox.mdx b/packages/react-aria-components/docs/ListBox.mdx
index db270c9b4d4..dae009ba866 100644
--- a/packages/react-aria-components/docs/ListBox.mdx
+++ b/packages/react-aria-components/docs/ListBox.mdx
@@ -149,12 +149,13 @@ A listbox consists of a container element, with a list of items or sections insi
 Users can select one or more items by clicking, tapping, or navigating with the keyboard.
 
 ```tsx
-import {ListBox, ListBoxItem, ListBoxSection, Header, Text} from 'react-aria-components';
+import {ListBox, ListBoxItem, ListBoxSection, Header, Text, SelectionIndicator} from 'react-aria-components';
 
 <ListBox>
   <ListBoxItem>
     <Text slot="label" />
     <Text slot="description" />
+    <SelectionIndicator />
   </ListBoxItem>
   <ListBoxSection>
     <Header />
diff --git a/packages/react-aria-components/docs/Menu.mdx b/packages/react-aria-components/docs/Menu.mdx
index ba5de3a0c6d..231b8a6de6a 100644
--- a/packages/react-aria-components/docs/Menu.mdx
+++ b/packages/react-aria-components/docs/Menu.mdx
@@ -128,7 +128,7 @@ A menu trigger consists of a button or other trigger element combined with a men
 with a list of menu items or sections inside. Users can click, touch, or use the keyboard on the button to open the menu.
 
 ```tsx
-import {MenuTrigger, Button, Popover, Menu, MenuItem, MenuSection, Separator, Header, Text, Keyboard} from 'react-aria-components';
+import {MenuTrigger, Button, Popover, Menu, MenuItem, MenuSection, Separator, Header, Text, Keyboard, SelectionIndicator} from 'react-aria-components';
 
 <MenuTrigger>
   <Button />
@@ -138,6 +138,7 @@ import {MenuTrigger, Button, Popover, Menu, MenuItem, MenuSection, Separator, He
         <Text slot="label" />
         <Text slot="description" />
         <Keyboard />
+        <SelectionIndicator />
       </MenuItem>
       <Separator />
       <MenuSection>
diff --git a/packages/react-aria-components/docs/RadioGroup.mdx b/packages/react-aria-components/docs/RadioGroup.mdx
index 2241e6bbcf9..ac492baff71 100644
--- a/packages/react-aria-components/docs/RadioGroup.mdx
+++ b/packages/react-aria-components/docs/RadioGroup.mdx
@@ -148,11 +148,13 @@ to provide more context about the field, and any validation messages. These are
 inputs via the `aria-describedby` attribute.
 
 ```tsx
-import {RadioGroup, Radio, Label, Text, FieldError} from 'react-aria-components';
+import {RadioGroup, Radio, Label, Text, FieldError, SelectionIndicator} from 'react-aria-components';
 
 <RadioGroup>
   <Label />
-  <Radio />
+  <Radio>
+    <SelectionIndicator />
+  </Radio>
   <Text slot="description" />
   <FieldError />
 </RadioGroup>
diff --git a/packages/react-aria-components/docs/Table.mdx b/packages/react-aria-components/docs/Table.mdx
index c9fdcc99420..fc2f3c52e57 100644
--- a/packages/react-aria-components/docs/Table.mdx
+++ b/packages/react-aria-components/docs/Table.mdx
@@ -251,7 +251,7 @@ If the table supports row selection, each row can optionally include a selection
 If a table supports column resizing, then it should also be wrapped in a `<ResizableTableContainer>`, and a `<ColumnResizer>` should be included in each resizable column.
 
 ```tsx
-import {Table, TableHeader, TableBody, Column, Row, Cell, Button, Checkbox, ResizableTableContainer, ColumnResizer} from 'react-aria-components';
+import {Table, TableHeader, TableBody, Column, Row, Cell, Button, Checkbox, ResizableTableContainer, ColumnResizer, SelectionIndicator} from 'react-aria-components';
 
 <ResizableTableContainer>
   <Table>
@@ -267,7 +267,9 @@ import {Table, TableHeader, TableBody, Column, Row, Cell, Button, Checkbox, Resi
     <TableBody>
       <Row>
         <Cell><Button slot="drag" /></Cell>
-        <Cell><Checkbox slot="selection" /></Cell>
+        <Cell>
+          <Checkbox slot="selection" /> or <SelectionIndicator />
+        </Cell>
         <Cell />
         <Cell />
         <Cell />
diff --git a/packages/react-aria-components/docs/Tabs.mdx b/packages/react-aria-components/docs/Tabs.mdx
index f06157ba739..220e265bb8b 100644
--- a/packages/react-aria-components/docs/Tabs.mdx
+++ b/packages/react-aria-components/docs/Tabs.mdx
@@ -46,13 +46,22 @@ type: component
 ## Example
 
 ```tsx example
-import {Tabs, TabList, Tab, TabPanel} from 'react-aria-components';
+import {Tabs, TabList, Tab, TabPanel, SelectionIndicator} from 'react-aria-components';
 
 <Tabs>
   <TabList aria-label="History of Ancient Rome">
-    <Tab id="FoR">Founding of Rome</Tab>
-    <Tab id="MaR">Monarchy and Republic</Tab>
-    <Tab id="Emp">Empire</Tab>
+    <Tab id="FoR">
+      <span>Founding of Rome</span>
+      <SelectionIndicator />
+    </Tab>
+    <Tab id="MaR">
+      <span>Monarchy and Republic</span>
+      <SelectionIndicator />
+    </Tab>
+    <Tab id="Emp">
+      <span>Empire</span>
+      <SelectionIndicator />
+    </Tab>
   </TabList>
   <TabPanel id="FoR">
     Arma virumque cano, Troiae qui primus ab oris.
@@ -91,7 +100,10 @@ import {Tabs, TabList, Tab, TabPanel} from 'react-aria-components';
   &[data-orientation=horizontal] {
     border-bottom: 1px solid var(--border-color);
 
-    .react-aria-Tab {
+    .react-aria-SelectionIndicator {
+      left: 0;
+      bottom: 0;
+      width: 100%;
       border-bottom: 3px solid var(--border-color);
     }
   }
@@ -107,6 +119,12 @@ import {Tabs, TabList, Tab, TabPanel} from 'react-aria-components';
   --border-color: transparent;
   forced-color-adjust: none;
 
+  .react-aria-SelectionIndicator {
+    position: absolute;
+    transition-property: translate, width, height;
+    transition-duration: 200ms;
+  }
+
   &[data-hovered],
   &[data-focused] {
     color: var(--text-color-hover);
@@ -164,11 +182,13 @@ Tabs consist of a tab list with one or more visually separated tabs. Each tab ha
 Each tab can be clicked, tapped, or navigated to via arrow keys. Depending on the `keyboardActivation` prop, the tab can be selected by receiving keyboard focus, or it can be selected with the <Keyboard>Enter</Keyboard> key.
 
 ```tsx
-import {Tabs, TabList, Tab, TabPanel} from 'react-aria-components';
+import {Tabs, TabList, Tab, TabPanel, SelectionIndicator} from 'react-aria-components';
 
 <Tabs>
   <TabList>
-    <Tab />
+    <Tab>
+      <SelectionIndicator />
+    </Tab>
   </TabList>
   <TabPanel />
 </Tabs>
@@ -206,6 +226,36 @@ To help kick-start your project, we offer starter kits that include example impl
 
 <StarterKits component="tabs" />
 
+## Reusable wrappers
+
+This example wraps the `Tab` component to include a `SelectionIndicator`, which enables animating the tab selection state.
+
+```tsx example export=true
+import {Tabs, TabList, Tab, TabProps, TabPanel, SelectionIndicator, composeRenderProps} from 'react-aria-components';
+
+function MyTab(props: TabProps) {
+  return (
+    <Tab {...props}>
+      {composeRenderProps(props.children, children => (<>
+        {children}
+        <SelectionIndicator />
+      </>))}
+    </Tab>
+  );
+}
+
+<Tabs>
+  <TabList aria-label="History of Ancient Rome">
+    <MyTab id="home">Home</MyTab>
+    <MyTab id="search">Search</MyTab>
+    <MyTab id="notifications">Notifications</MyTab>
+  </TabList>
+  <TabPanel id="home">Home content</TabPanel>
+  <TabPanel id="search">Search content</TabPanel>
+  <TabPanel id="notifications">Notifications content</TabPanel>
+</Tabs>
+```
+
 ## Selection
 
 ### Default selection
@@ -217,9 +267,9 @@ See the [Selection](selection.html) guide for more details.
 ```tsx example
 <Tabs defaultSelectedKey="keyboard">
   <TabList aria-label="Input settings">
-    <Tab id="mouse">Mouse Settings</Tab>
-    <Tab id="keyboard">Keyboard Settings</Tab>
-    <Tab id="gamepad">Gamepad Settings</Tab>
+    <MyTab id="mouse">Mouse Settings</MyTab>
+    <MyTab id="keyboard">Keyboard Settings</MyTab>
+    <MyTab id="gamepad">Gamepad Settings</MyTab>
   </TabList>
   <TabPanel id="mouse">Mouse Settings</TabPanel>
   <TabPanel id="keyboard">Keyboard Settings</TabPanel>
@@ -242,9 +292,9 @@ function Example() {
       <p>Selected time period: {timePeriod}</p>
       <Tabs selectedKey={timePeriod} onSelectionChange={setTimePeriod}>
         <TabList aria-label="Mesozoic time periods">
-          <Tab id="triassic">Triassic</Tab>
-          <Tab id="jurassic">Jurassic</Tab>
-          <Tab id="cretaceous">Cretaceous</Tab>
+          <MyTab id="triassic">Triassic</MyTab>
+          <MyTab id="jurassic">Jurassic</MyTab>
+          <MyTab id="cretaceous">Cretaceous</MyTab>
         </TabList>
         <TabPanel id="triassic">
           The Triassic ranges roughly from 252 million to 201 million years ago, preceding the Jurassic Period.
@@ -270,9 +320,9 @@ tab selection.
 ```tsx example
 <Tabs keyboardActivation="manual">
   <TabList aria-label="Input settings">
-    <Tab id="mouse">Mouse Settings</Tab>
-    <Tab id="keyboard">Keyboard Settings</Tab>
-    <Tab id="gamepad">Gamepad Settings</Tab>
+    <MyTab id="mouse">Mouse Settings</MyTab>
+    <MyTab id="keyboard">Keyboard Settings</MyTab>
+    <MyTab id="gamepad">Gamepad Settings</MyTab>
   </TabList>
   <TabPanel id="mouse">Mouse Settings</TabPanel>
   <TabPanel id="keyboard">Keyboard Settings</TabPanel>
@@ -291,9 +341,9 @@ This example uses the same `Tabs` component from above. Try navigating from the
 ```tsx example
 <Tabs>
   <TabList aria-label="Notes app">
-    <Tab id="1">Jane Doe</Tab>
-    <Tab id="2">John Doe</Tab>
-    <Tab id="3">Joe Bloggs</Tab>
+    <MyTab id="1">Jane Doe</MyTab>
+    <MyTab id="2">John Doe</MyTab>
+    <MyTab id="3">Joe Bloggs</MyTab>
   </TabList>
   <TabPanel id="1">
     <label>Leave a note for Jane: <input type="text" /></label>
@@ -340,7 +390,7 @@ function Example() {
     <Tabs>
       <div style={{display: 'flex'}}>
         <TabList aria-label="Dynamic tabs" items={tabs} style={{flex: 1}}>
-          {item => <Tab>{item.title}</Tab>}
+          {item => <MyTab>{item.title}</MyTab>}
         </TabList>
         <div className="button-group">
           <Button onPress={addTab}>Add tab</Button>
@@ -376,9 +426,9 @@ By default, tabs are horizontally oriented. The `orientation` prop can be set to
 ```tsx example
 <Tabs orientation="vertical">
   <TabList aria-label="Chat log orientation example">
-    <Tab id="1">John Doe</Tab>
-    <Tab id="2">Jane Doe</Tab>
-    <Tab id="3">Joe Bloggs</Tab>
+    <MyTab id="1">John Doe</MyTab>
+    <MyTab id="2">Jane Doe</MyTab>
+    <MyTab id="3">Joe Bloggs</MyTab>
   </TabList>
   <TabPanel id="1">There is no prior chat history with John Doe.</TabPanel>
   <TabPanel id="2">There is no prior chat history with Jane Doe.</TabPanel>
@@ -402,7 +452,10 @@ By default, tabs are horizontally oriented. The `orientation` prop can be set to
     flex-direction: column;
     border-inline-end: 1px solid gray;
 
-    .react-aria-Tab {
+    .react-aria-SelectionIndicator {
+      top: 0;
+      right: 0;
+      height: 100%;
       border-inline-end: 3px solid var(--border-color, transparent);
     }
   }
@@ -418,9 +471,9 @@ All tabs can be disabled using the `isDisabled` prop.
 ```tsx example
 <Tabs isDisabled>
   <TabList aria-label="Input settings">
-    <Tab id="mouse">Mouse Settings</Tab>
-    <Tab id="keyboard">Keyboard Settings</Tab>
-    <Tab id="gamepad">Gamepad Settings</Tab>
+    <MyTab id="mouse">Mouse Settings</MyTab>
+    <MyTab id="keyboard">Keyboard Settings</MyTab>
+    <MyTab id="gamepad">Gamepad Settings</MyTab>
   </TabList>
   <TabPanel id="mouse">Mouse Settings</TabPanel>
   <TabPanel id="keyboard">Keyboard Settings</TabPanel>
@@ -451,10 +504,10 @@ An individual `Tab` can be disabled with the `isDisabled` prop. Disabled tabs ar
 ```tsx example
 <Tabs>
   <TabList aria-label="Input settings">
-    <Tab id="mouse">Mouse Settings</Tab>
-    <Tab id="keyboard">Keyboard Settings</Tab>
+    <MyTab id="mouse">Mouse Settings</MyTab>
+    <MyTab id="keyboard">Keyboard Settings</MyTab>
     {/*- begin highlight -*/}
-    <Tab id="gamepad" isDisabled>Gamepad Settings</Tab>
+    <MyTab id="gamepad" isDisabled>Gamepad Settings</MyTab>
     {/*- end highlight -*/}
   </TabList>
   <TabPanel id="mouse">Mouse Settings</TabPanel>
@@ -478,7 +531,7 @@ function Example() {
   return (
     <Tabs disabledKeys={[2]}>
       <TabList aria-label="Input settings" items={tabs}>
-        {item => <Tab>{item.title}</Tab>}
+        {item => <MyTab>{item.title}</MyTab>}
       </TabList>
       <Collection items={tabs}>
         {item => <TabPanel>{item.title}</TabPanel>}
@@ -507,9 +560,9 @@ function AppTabs() {
   return (
     <Tabs selectedKey={pathname}>
       <TabList aria-label="Tabs">
-        <Tab id="/" href="/">Home</Tab>
-        <Tab id="/shared" href="/shared">Shared</Tab>
-        <Tab id="/deleted" href="/deleted">Deleted</Tab>
+        <MyTab id="/" href="/">Home</MyTab>
+        <MyTab id="/shared" href="/shared">Shared</MyTab>
+        <MyTab id="/deleted" href="/deleted">Deleted</MyTab>
       </TabList>
       <TabPanel id={pathname}>
         <Routes>
diff --git a/packages/react-aria-components/docs/TagGroup.mdx b/packages/react-aria-components/docs/TagGroup.mdx
index ded18519853..8be420f143b 100644
--- a/packages/react-aria-components/docs/TagGroup.mdx
+++ b/packages/react-aria-components/docs/TagGroup.mdx
@@ -135,12 +135,13 @@ to provide more context about the tag group, and any validation messages. These
 tag group via the `aria-describedby` attribute.
 
 ```tsx
-import {TagGroup, TagList, Tag, Label, Button, Text} from 'react-aria-components';
+import {TagGroup, TagList, Tag, Label, Button, Text, SelectionIndicator} from 'react-aria-components';
 
 <TagGroup>
   <Label />
   <TagList>
     <Tag>
+      <SelectionIndicator />
       <Button slot="remove" />
     </Tag>
   </TagList>
diff --git a/packages/react-aria-components/docs/ToggleButtonGroup.mdx b/packages/react-aria-components/docs/ToggleButtonGroup.mdx
index 4d14698924e..e2631cbb57a 100644
--- a/packages/react-aria-components/docs/ToggleButtonGroup.mdx
+++ b/packages/react-aria-components/docs/ToggleButtonGroup.mdx
@@ -116,10 +116,12 @@ There is no built in element for toggle button groups in HTML. `ToggleButtonGrou
 A toggle button group consists of a set of toggle buttons, and coordinates the selection state between them. Users can navigate between buttons with the arrow keys in either horizontal or vertical orientations.
 
 ```tsx
-import {ToggleButtonGroup, ToggleButton} from 'react-aria-components';
+import {ToggleButtonGroup, ToggleButton, SelectionIndicator} from 'react-aria-components';
 
 <ToggleButtonGroup>
-  <ToggleButton />
+  <ToggleButton>
+    <SelectionIndicator />
+  </ToggleButton>
 </ToggleButtonGroup>
 ```
 
@@ -187,6 +189,94 @@ function Example() {
 }
 ```
 
+### Animation
+
+Use the `SelectionIndicator` component to animate selection changes.
+
+```tsx example
+import {ToggleButtonGroup, ToggleButton, SelectionIndicator} from 'react-aria-components';
+
+<ToggleButtonGroup
+  className="segmented-control"
+  defaultSelectedKeys={['day']}
+  disallowEmptySelection>
+  <ToggleButton id="day">
+    <SelectionIndicator />
+    <span>Day</span>
+  </ToggleButton>
+  <ToggleButton id="week">
+    <SelectionIndicator />
+    <span>Week</span>
+  </ToggleButton>
+  <ToggleButton id="month">
+    <SelectionIndicator />
+    <span>Month</span>
+  </ToggleButton>
+  <ToggleButton id="year">
+    <SelectionIndicator />
+    <span>Year</span>
+  </ToggleButton>
+</ToggleButtonGroup>
+```
+
+<details>
+  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
+
+```css
+.segmented-control {
+  display: flex;
+  background: var(--gray-100);
+  width: fit-content;
+  padding: 2px;
+  border-radius: 8px;
+
+  .react-aria-SelectionIndicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    transition-property: translate, width;
+    transition-duration: 200ms;
+    border-radius: 8px;
+    background: var(--gray-50);
+    outline: 2px solid var(--gray-600);
+  }
+
+  .react-aria-ToggleButton {
+    all: unset;
+    color: var(--text-color);
+    font-size: 1rem;
+    outline: none;
+    padding: 4px 16px;
+    position: relative;
+    z-index: 1;
+    border-radius: 8px;
+
+    span {
+      display: inline-block;
+      transition: scale 200ms;
+    }
+
+     &[data-pressed] span {
+      scale: 0.95;
+    }
+
+    &[data-selected] {
+      z-index: 0;
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: 4px;
+    }
+  }
+}
+```
+
+</details>
+
 ## Disabled
 
 All buttons within a `ToggleButtonGroup` can be disabled using the `isDisabled` prop.
diff --git a/packages/react-aria-components/docs/Tree.mdx b/packages/react-aria-components/docs/Tree.mdx
index f27ad710d5a..3309a3d57e5 100644
--- a/packages/react-aria-components/docs/Tree.mdx
+++ b/packages/react-aria-components/docs/Tree.mdx
@@ -282,13 +282,13 @@ A Tree consists of a container element, with items containing data inside. The i
 If the tree supports item selection, each item can optionally include a selection checkbox.
 
 ```tsx render=false
-import {Tree, TreeItem, TreeItemContent, Button, Checkbox} from 'react-aria-components';
+import {Tree, TreeItem, TreeItemContent, Button, Checkbox, SelectionIndicator} from 'react-aria-components';
 
 <Tree>
   <TreeItem>
     <TreeItemContent>
       <Button slot="chevron" />
-      <Checkbox slot="selection" />
+      <Checkbox slot="selection" /> or <SelectionIndicator />
       <Button slot="drag" />
     </TreeItemContent>
     <TreeItem>
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index d3a87620b09..5229595ea62 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -24,6 +24,8 @@ import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, Pre
 import {HeaderContext} from './Header';
 import {ListStateContext} from './ListBox';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
+import {SelectionIndicatorContext} from './SelectionIndicator';
+import {SharedElementTransition} from './SharedElementTransition';
 import {TextContext} from './Text';
 
 export interface GridListRenderProps {
@@ -259,11 +261,13 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
             [DropIndicatorContext, {render: GridListDropIndicatorWrapper}]
           ]}>
           {isListDroppable && <RootDropIndicator />}
-          <CollectionRoot
-            collection={filteredState.collection}
-            scrollRef={ref}
-            persistedKeys={useDndPersistedKeys(selectionManager, dragAndDropHooks, dropState)}
-            renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState)} />
+          <SharedElementTransition>
+            <CollectionRoot
+              collection={filteredState.collection}
+              scrollRef={ref}
+              persistedKeys={useDndPersistedKeys(selectionManager, dragAndDropHooks, dropState)}
+              renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState)} />
+          </SharedElementTransition>
         </Provider>
         {emptyState}
         {dragPreview}
@@ -425,7 +429,8 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
               [CollectionRendererContext, DefaultCollectionRenderer],
               [ListStateContext, null],
               [SelectableCollectionContext, null],
-              [FieldInputContext, null]
+              [FieldInputContext, null],
+              [SelectionIndicatorContext, {isSelected: states.isSelected}]
             ]}>
             {renderProps.children}
           </Provider>
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
index 0421d790022..5e0ba0d5e22 100644
--- a/packages/react-aria-components/src/ListBox.tsx
+++ b/packages/react-aria-components/src/ListBox.tsx
@@ -22,7 +22,9 @@ import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, Pre
 import {HeaderContext} from './Header';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {SelectableCollectionContext, SelectableCollectionContextValue} from './context';
+import {SelectionIndicatorContext} from './SelectionIndicator';
 import {SeparatorContext} from './Separator';
+import {SharedElementTransition} from './SharedElementTransition';
 import {TextContext} from './Text';
 
 export interface ListBoxRenderProps {
@@ -254,11 +256,13 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
             [DropIndicatorContext, {render: ListBoxDropIndicatorWrapper}],
             [SectionContext, {name: 'ListBoxSection', render: ListBoxSectionInner}]
           ]}>
-          <CollectionRoot
-            collection={collection}
-            scrollRef={listBoxRef}
-            persistedKeys={useDndPersistedKeys(selectionManager, dragAndDropHooks, dropState)}
-            renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState)} />
+          <SharedElementTransition>
+            <CollectionRoot
+              collection={collection}
+              scrollRef={listBoxRef}
+              persistedKeys={useDndPersistedKeys(selectionManager, dragAndDropHooks, dropState)}
+              renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState)} />
+          </SharedElementTransition>
         </Provider>
         {emptyState}
         {dragPreview}
@@ -410,7 +414,8 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
               label: labelProps,
               description: descriptionProps
             }
-          }]
+          }],
+          [SelectionIndicatorContext, {isSelected: states.isSelected}]
         ]}>
         {renderProps.children}
       </Provider>
diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx
index 5798c5d43bc..c9eac9b1c93 100644
--- a/packages/react-aria-components/src/Menu.tsx
+++ b/packages/react-aria-components/src/Menu.tsx
@@ -38,7 +38,9 @@ import React, {
   useRef,
   useState
 } from 'react';
+import {SelectionIndicatorContext} from './SelectionIndicator';
 import {SeparatorContext} from './Separator';
+import {SharedElementTransition} from './SharedElementTransition';
 import {TextContext} from './Text';
 
 export const MenuContext = createContext<ContextValue<MenuProps<any>, HTMLDivElement>>(null);
@@ -257,10 +259,12 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
             /* eslint-disable-next-line react-hooks/rules-of-hooks */
             [RootMenuTriggerStateContext, triggerState ?? useMenuTriggerState({})]
           ]}>
-          <CollectionRoot
-            collection={state.collection}
-            persistedKeys={usePersistedKeys(state.selectionManager.focusedKey)}
-            scrollRef={ref} />
+          <SharedElementTransition>
+            <CollectionRoot
+              collection={state.collection}
+              persistedKeys={usePersistedKeys(state.selectionManager.focusedKey)}
+              scrollRef={ref} />
+          </SharedElementTransition>
         </Provider>
         {emptyState}
       </div>
@@ -438,7 +442,8 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent(ItemNode, function Men
               description: descriptionProps
             }
           }],
-          [KeyboardContext, keyboardShortcutProps]
+          [KeyboardContext, keyboardShortcutProps],
+          [SelectionIndicatorContext, {isSelected: states.isSelected}]
         ]}>
         {renderProps.children}
       </Provider>
diff --git a/packages/react-aria-components/src/RadioGroup.tsx b/packages/react-aria-components/src/RadioGroup.tsx
index e89910ba2d7..f09d39debad 100644
--- a/packages/react-aria-components/src/RadioGroup.tsx
+++ b/packages/react-aria-components/src/RadioGroup.tsx
@@ -19,6 +19,8 @@ import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/share
 import {LabelContext} from './Label';
 import {RadioGroupState, useRadioGroupState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, useMemo} from 'react';
+import {SelectionIndicatorContext} from './SelectionIndicator';
+import {SharedElementTransition} from './SharedElementTransition';
 import {TextContext} from './Text';
 
 export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<RadioGroupRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
@@ -171,7 +173,9 @@ export const RadioGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function
           }],
           [FieldErrorContext, validation]
         ]}>
-        {renderProps.children}
+        <SharedElementTransition>
+          {renderProps.children}
+        </SharedElementTransition>
       </Provider>
     </div>
   );
@@ -237,7 +241,9 @@ export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio
       <VisuallyHidden elementType="span">
         <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
       </VisuallyHidden>
-      {renderProps.children}
+      <SelectionIndicatorContext.Provider value={{isSelected}}>
+        {renderProps.children}
+      </SelectionIndicatorContext.Provider>
     </label>
   );
 });
diff --git a/packages/react-aria-components/src/SelectionIndicator.tsx b/packages/react-aria-components/src/SelectionIndicator.tsx
new file mode 100644
index 00000000000..606c24d8643
--- /dev/null
+++ b/packages/react-aria-components/src/SelectionIndicator.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ContextValue, useContextProps} from './utils';
+import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import {SharedElement, SharedElementPropsBase} from './SharedElementTransition';
+
+export interface SelectionIndicatorProps extends SharedElementPropsBase {
+  isSelected?: boolean
+}
+
+export const SelectionIndicatorContext = createContext<ContextValue<SelectionIndicatorProps, HTMLDivElement>>({
+  isSelected: false
+});
+
+
+/**
+ * An animated indicator of selection state within a group of items.
+ */
+export const SelectionIndicator = forwardRef(function SelectionIndicator(props: SelectionIndicatorProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, SelectionIndicatorContext);
+  let {isSelected, ...otherProps} = props;
+  return (
+    <SharedElement
+      {...otherProps}
+      ref={ref}
+      className={props.className || 'react-aria-SelectionIndicator'}
+      name="SelectionIndicator"
+      isVisible={isSelected} />
+  );
+});
diff --git a/packages/react-aria-components/src/SharedElementTransition.tsx b/packages/react-aria-components/src/SharedElementTransition.tsx
new file mode 100644
index 00000000000..668830adb72
--- /dev/null
+++ b/packages/react-aria-components/src/SharedElementTransition.tsx
@@ -0,0 +1,185 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {flushSync} from 'react-dom';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactNode, RefObject, useContext, useRef, useState} from 'react';
+import {RenderProps, useRenderProps} from './utils';
+import {useLayoutEffect} from '@react-aria/utils';
+import {useObjectRef} from 'react-aria';
+
+interface Snapshot {
+  rect: DOMRect,
+  style: [string, string][]
+}
+
+const SharedElementContext = createContext<RefObject<{[name: string]: Snapshot}> | null>(null);
+
+export interface SharedElementTransitionProps {
+  children: ReactNode
+}
+
+/**
+ * A scope for SharedElements, which animate between parents.
+ */
+export function SharedElementTransition(props: SharedElementTransitionProps) {
+  let ref = useRef({});
+  return (
+    <SharedElementContext.Provider value={ref}>
+      {props.children}
+    </SharedElementContext.Provider>
+  );
+}
+
+export interface SharedElementRenderProps {
+  /**
+   * Whether the element is currently entering.
+   * @selector [data-entering]
+   */
+  isEntering: boolean,
+  /**
+   * Whether the element is currently exiting.
+   * @selector [data-exiting]
+   */
+  isExiting: boolean
+}
+
+export interface SharedElementPropsBase extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>, RenderProps<SharedElementRenderProps> {}
+
+export interface SharedElementProps extends SharedElementPropsBase {
+  name: string,
+  isVisible?: boolean
+}
+
+/**
+ * An element that animates between its old and new position when moving between parents.
+ */
+export const SharedElement = forwardRef(function SharedElement(props: SharedElementProps, ref: ForwardedRef<HTMLDivElement>) {
+  let {name, isVisible = true, children, className, style, ...divProps} = props;
+  let [state, setState] = useState(isVisible ? 'visible' : 'hidden');
+  let scopeRef = useContext(SharedElementContext);
+  if (!scopeRef) {
+    throw new Error('<SharedElement> must be rendered inside a <SharedElementTransition>');
+  }
+
+  if (isVisible && state === 'hidden') {
+    setState('visible');
+  }
+
+  ref = useObjectRef(ref);
+  useLayoutEffect(() => {
+    let element = ref.current;
+    let scope = scopeRef.current;
+    let prevSnapshot = scope[name];
+    let frame: number | null = null;
+
+    if (element && isVisible && prevSnapshot) {
+      // Element is transitioning from a previous instance.
+      setState('visible');
+      let animations = element.getAnimations();
+
+      // Set properties to animate from.
+      let values = prevSnapshot.style.map(([property, prevValue]) => {
+        let value = element.style[property];
+        if (property === 'translate') {
+          let prevRect = prevSnapshot.rect;
+          let currentItem = element.getBoundingClientRect();
+          let deltaX = prevRect.left - currentItem?.left;
+          let deltaY = prevRect.top - currentItem?.top;
+          element.style.translate = `${deltaX}px ${deltaY}px`;
+        } else {
+          element.style[property] = prevValue;
+        }
+        return [property, value];
+      });
+
+      // Cancel any new animations triggered by these properties.
+      for (let a of element.getAnimations()) {
+        if (!animations.includes(a)) {
+          a.cancel();
+        }
+      }
+
+      // Remove overrides after one frame to animate to the current values.
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        for (let [property, value] of values) {
+          element.style[property] = value;
+        }
+      });
+
+      delete scope[name];
+    } else if (element && isVisible && !prevSnapshot) {
+      // No previous instance exists, apply the entering state.
+      queueMicrotask(() => flushSync(() => setState('entering')));
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        setState('visible');
+      });
+    } else if (element && !isVisible) {
+      // Wait until layout effects finish, and check if a snapshot still exists.
+      // If so, no new SharedElement consumed it, so enter the exiting state.
+      queueMicrotask(() => {
+        if (scope[name]) {
+          delete scope[name];
+          flushSync(() => setState('exiting'));
+          Promise.all(element.getAnimations().map(a => a.finished))
+            .then(() => setState('hidden'))
+            .catch(() => {});
+        } else {
+          // Snapshot was consumed by another instance, unmount.
+          setState('hidden');
+        }
+      });
+    }
+
+    return () => {
+      if (frame != null) {
+        cancelAnimationFrame(frame);
+      }
+
+      if (element && element.isConnected && !element.hasAttribute('data-exiting')) {
+        // On unmount, store a snapshot of the rectangle and computed style for transitioning properties.
+        let style = window.getComputedStyle(element);
+        if (style.transitionProperty !== 'none') {
+          let transitionProperty = style.transitionProperty.split(/\s*,\s*/);
+          scope[name] = {
+            rect: element.getBoundingClientRect(),
+            style: transitionProperty.map(p => [p, style[p]])
+          };
+        }
+      }
+    };
+  }, [ref, scopeRef, name, isVisible]);
+
+  let renderProps = useRenderProps({
+    children,
+    className,
+    style,
+    values: {
+      isEntering: state === 'entering',
+      isExiting: state === 'exiting'
+    }
+  });
+
+  if (state === 'hidden') {
+    return null;
+  }
+
+  return (
+    <div
+      {...divProps}
+      {...renderProps}
+      ref={ref}
+      data-entering={state === 'entering' || undefined}
+      data-exiting={state === 'exiting' || undefined} />
+  );
+});
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index 497346964ef..19d2ae1a46b 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -17,6 +17,8 @@ import {GridNode} from '@react-types/grid';
 import intlMessages from '../intl/*.json';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import ReactDOM from 'react-dom';
+import {SelectionIndicatorContext} from './SelectionIndicator';
+import {SharedElementTransition} from './SharedElementTransition';
 
 class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T> {
   headerRows: GridNode<T>[] = [];
@@ -500,10 +502,12 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
           data-drop-target={isRootDropTarget || undefined}
           data-focused={isFocused || undefined}
           data-focus-visible={isFocusVisible || undefined}>
-          <CollectionRoot
-            collection={filteredState.collection}
-            scrollRef={tableContainerContext?.scrollRef ?? ref}
-            persistedKeys={useDndPersistedKeys(selectionManager, dragAndDropHooks, dropState)} />
+          <SharedElementTransition>
+            <CollectionRoot
+              collection={filteredState.collection}
+              scrollRef={tableContainerContext?.scrollRef ?? ref}
+              persistedKeys={useDndPersistedKeys(selectionManager, dragAndDropHooks, dropState)} />
+          </SharedElementTransition>
         </ElementType>
       </FocusScope>
       {dragPreview}
@@ -1182,7 +1186,8 @@ export const Row = /*#__PURE__*/ createBranchComponent(
                     }
                   }
                 }
-              }]
+              }],
+              [SelectionIndicatorContext, {isSelected: states.isSelected}]
             ]}>
             <CollectionBranch collection={state.collection} parent={item} />
           </Provider>
diff --git a/packages/react-aria-components/src/Tabs.tsx b/packages/react-aria-components/src/Tabs.tsx
index 7a0114a8606..412a1553128 100644
--- a/packages/react-aria-components/src/Tabs.tsx
+++ b/packages/react-aria-components/src/Tabs.tsx
@@ -18,6 +18,8 @@ import {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useCon
 import {filterDOMProps, inertValue, useObjectRef} from '@react-aria/utils';
 import {Collection as ICollection, Node, TabListState, useTabListState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, JSX, useContext, useMemo} from 'react';
+import {SelectionIndicatorContext} from './SelectionIndicator';
+import {SharedElementTransition} from './SharedElementTransition';
 
 export interface TabsProps extends Omit<AriaTabListProps<any>, 'items' | 'children'>, RenderProps<TabsRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
@@ -230,7 +232,9 @@ function TabListInner<T extends object>({props, forwardedRef: ref}: TabListInner
       {...mergeProps(DOMProps, renderProps, tabListProps)}
       ref={objectRef}
       data-orientation={orientation || undefined}>
-      <CollectionRoot collection={state.collection} persistedKeys={usePersistedKeys(state.selectionManager.focusedKey)} />
+      <SharedElementTransition>
+        <CollectionRoot collection={state.collection} persistedKeys={usePersistedKeys(state.selectionManager.focusedKey)} />
+      </SharedElementTransition>
     </div>
   );
 }
@@ -284,7 +288,9 @@ export const Tab = /*#__PURE__*/ createLeafComponent(TabItemNode, (props: TabPro
       data-focus-visible={isFocusVisible || undefined}
       data-pressed={isPressed || undefined}
       data-hovered={isHovered || undefined}>
-      {renderProps.children}
+      <SelectionIndicatorContext.Provider value={{isSelected}}>
+        {renderProps.children}
+      </SelectionIndicatorContext.Provider>
     </ElementType>
   );
 });
diff --git a/packages/react-aria-components/src/TagGroup.tsx b/packages/react-aria-components/src/TagGroup.tsx
index 22b781a693a..3fd30b4455f 100644
--- a/packages/react-aria-components/src/TagGroup.tsx
+++ b/packages/react-aria-components/src/TagGroup.tsx
@@ -22,6 +22,8 @@ import {ListState, Node, UNSTABLE_useFilteredListState, useListState} from 'reac
 import {ListStateContext} from './ListBox';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useRef} from 'react';
 import {SelectableCollectionContext} from './context';
+import {SelectionIndicatorContext} from './SelectionIndicator';
+import {SharedElementTransition} from './SharedElementTransition';
 import {TextContext} from './Text';
 
 export interface TagGroupProps extends Omit<AriaTagGroupProps<unknown>, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
@@ -178,9 +180,11 @@ function TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps
       data-empty={state.collection.size === 0 || undefined}
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}>
-      {state.collection.size === 0 && props.renderEmptyState
-        ? props.renderEmptyState(renderValues)
-        : <CollectionRoot collection={state.collection} persistedKeys={persistedKeys} />}
+      <SharedElementTransition>
+        {state.collection.size === 0 && props.renderEmptyState
+          ? props.renderEmptyState(renderValues)
+          : <CollectionRoot collection={state.collection} persistedKeys={persistedKeys} />}
+      </SharedElementTransition>
     </div>
   );
 }
@@ -265,7 +269,8 @@ export const Tag = /*#__PURE__*/ createLeafComponent(ItemNode, (props: TagProps,
                 remove: removeButtonProps
               }
             }],
-            [CollectionRendererContext, DefaultCollectionRenderer]
+            [CollectionRendererContext, DefaultCollectionRenderer],
+            [SelectionIndicatorContext, {isSelected: states.isSelected}]
           ]}>
           {renderProps.children}
         </Provider>
diff --git a/packages/react-aria-components/src/ToggleButton.tsx b/packages/react-aria-components/src/ToggleButton.tsx
index c42b7f6881d..846c95797eb 100644
--- a/packages/react-aria-components/src/ToggleButton.tsx
+++ b/packages/react-aria-components/src/ToggleButton.tsx
@@ -16,6 +16,7 @@ import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} f
 import {filterDOMProps} from '@react-aria/utils';
 import {forwardRefType, GlobalDOMAttributes, Key} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
+import {SelectionIndicatorContext} from './SelectionIndicator';
 import {ToggleGroupStateContext} from './ToggleButtonGroup';
 import {ToggleState, useToggleState} from 'react-stately';
 
@@ -80,6 +81,10 @@ export const ToggleButton = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
       data-pressed={isPressed || undefined}
       data-selected={isSelected || undefined}
       data-hovered={isHovered || undefined}
-      data-focus-visible={isFocusVisible || undefined} />
+      data-focus-visible={isFocusVisible || undefined}>
+      <SelectionIndicatorContext.Provider value={{isSelected}}>
+        {renderProps.children}
+      </SelectionIndicatorContext.Provider>
+    </button>
   );
 });
diff --git a/packages/react-aria-components/src/ToggleButtonGroup.tsx b/packages/react-aria-components/src/ToggleButtonGroup.tsx
index e22ab95d300..5a84cf46ca3 100644
--- a/packages/react-aria-components/src/ToggleButtonGroup.tsx
+++ b/packages/react-aria-components/src/ToggleButtonGroup.tsx
@@ -14,6 +14,7 @@ import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} f
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import {SharedElementTransition} from './SharedElementTransition';
 import {ToggleGroupState, useToggleGroupState} from 'react-stately';
 
 export interface ToggleButtonGroupRenderProps {
@@ -60,7 +61,9 @@ export const ToggleButtonGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(fu
       data-orientation={props.orientation || 'horizontal'}
       data-disabled={props.isDisabled || undefined}>
       <ToggleGroupStateContext.Provider value={state}>
-        {renderProps.children}
+        <SharedElementTransition>
+          {renderProps.children}
+        </SharedElementTransition>
       </ToggleGroupStateContext.Provider>
     </div>
   );
diff --git a/packages/react-aria-components/src/Tree.tsx b/packages/react-aria-components/src/Tree.tsx
index 232a4956459..26ae321e74e 100644
--- a/packages/react-aria-components/src/Tree.tsx
+++ b/packages/react-aria-components/src/Tree.tsx
@@ -22,6 +22,8 @@ import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, Collection as ICollection, Node, SelectionBehavior, TreeState, useTreeState} from 'react-stately';
 import {filterDOMProps, inertValue, LoadMoreSentinelProps, useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {SelectionIndicatorContext} from './SelectionIndicator';
+import {SharedElementTransition} from './SharedElementTransition';
 import {TreeDropTargetDelegate} from './TreeDropTargetDelegate';
 import {useControlledState} from '@react-stately/utils';
 
@@ -400,11 +402,13 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
               [DropIndicatorContext, {render: TreeDropIndicatorWrapper}]
             ]}>
             {hasDropHooks && <RootDropIndicator />}
-            <CollectionRoot
-              collection={state.collection}
-              persistedKeys={useDndPersistedKeys(state.selectionManager, dragAndDropHooks, dropState)}
-              scrollRef={ref}
-              renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState)} />
+            <SharedElementTransition>
+              <CollectionRoot
+                collection={state.collection}
+                persistedKeys={useDndPersistedKeys(state.selectionManager, dragAndDropHooks, dropState)}
+                scrollRef={ref}
+                renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState)} />
+            </SharedElementTransition>
           </Provider>
           {emptyState}
         </div>
@@ -698,7 +702,8 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent(TreeItemNode, <T ext
               }],
               [TreeItemContentContext, {
                 ...renderPropValues
-              }]
+              }],
+              [SelectionIndicatorContext, {isSelected: states.isSelected}]
             ]}>
             {children}
           </Provider>
diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts
index 36cf3e61b43..a76ea9c6e8c 100644
--- a/packages/react-aria-components/src/index.ts
+++ b/packages/react-aria-components/src/index.ts
@@ -60,7 +60,9 @@ export {ProgressBar, ProgressBarContext} from './ProgressBar';
 export {RadioGroup, Radio, RadioGroupContext, RadioContext, RadioGroupStateContext} from './RadioGroup';
 export {SearchField, SearchFieldContext} from './SearchField';
 export {Select, SelectValue, SelectContext, SelectValueContext, SelectStateContext} from './Select';
+export {SelectionIndicator, SelectionIndicatorContext} from './SelectionIndicator';
 export {Separator, SeparatorContext} from './Separator';
+export {SharedElementTransition, SharedElement} from './SharedElementTransition';
 export {Slider, SliderOutput, SliderTrack, SliderThumb, SliderContext, SliderOutputContext, SliderTrackContext, SliderStateContext} from './Slider';
 export {Switch, SwitchContext} from './Switch';
 export {TableLoadMoreItem, Table, Row, Cell, Column, ColumnResizer, TableHeader, TableBody, TableContext, ResizableTableContainer, useTableOptions, TableStateContext, TableColumnResizeStateContext} from './Table';
@@ -125,6 +127,8 @@ export type {ProgressBarProps, ProgressBarRenderProps} from './ProgressBar';
 export type {RadioGroupProps, RadioGroupRenderProps, RadioProps, RadioRenderProps} from './RadioGroup';
 export type {SearchFieldProps, SearchFieldRenderProps} from './SearchField';
 export type {SelectProps, SelectValueProps, SelectValueRenderProps, SelectRenderProps} from './Select';
+export type {SelectionIndicatorProps} from './SelectionIndicator';
+export type {SharedElementTransitionProps, SharedElementProps, SharedElementRenderProps} from './SharedElementTransition';
 export type {SeparatorProps} from './Separator';
 export type {SliderOutputProps, SliderProps, SliderRenderProps, SliderThumbProps, SliderTrackProps, SliderTrackRenderProps, SliderThumbRenderProps} from './Slider';
 export type {SwitchProps, SwitchRenderProps} from './Switch';
diff --git a/starters/docs/src/Tabs.css b/starters/docs/src/Tabs.css
index 66ce290a717..6b78355aedb 100644
--- a/starters/docs/src/Tabs.css
+++ b/starters/docs/src/Tabs.css
@@ -7,6 +7,10 @@
   &[data-orientation=horizontal] {
     flex-direction: column;
   }
+
+  &[data-orientation=vertical] {
+    flex-direction: row;
+  }
 }
 
 .react-aria-TabList {
@@ -15,10 +19,25 @@
   &[data-orientation=horizontal] {
     border-bottom: 1px solid var(--border-color);
 
-    .react-aria-Tab {
+    .react-aria-SelectionIndicator {
+      left: 0;
+      bottom: 0;
+      width: 100%;
       border-bottom: 3px solid var(--border-color);
     }
   }
+
+  &[data-orientation=vertical] {
+    flex-direction: column;
+    border-inline-end: 1px solid gray;
+
+    .react-aria-SelectionIndicator {
+      top: 0;
+      right: 0;
+      height: 100%;
+      border-inline-end: 3px solid var(--border-color, transparent);
+    }
+  }
 }
 
 .react-aria-Tab {
@@ -36,6 +55,12 @@
     color: var(--text-color-hover);
   }
 
+  .react-aria-SelectionIndicator {
+    position: absolute;
+    transition-property: translate, width, height;
+    transition-duration: 200ms;
+  }
+
   &[data-selected] {
     --border-color: var(--highlight-background);
     color: var(--text-color);
@@ -68,32 +93,6 @@
   }
 }
 
-.react-aria-Tabs {
-  &[data-orientation=vertical] {
-    flex-direction: row;
-  }
-}
-
-.react-aria-TabList {
-  &[data-orientation=vertical] {
-    flex-direction: column;
-    border-inline-end: 1px solid gray;
-
-    .react-aria-Tab {
-      border-inline-end: 3px solid var(--border-color, transparent);
-    }
-  }
-}
-
-.react-aria-Tab {
-  &[data-disabled] {
-    color: var(--text-color-disabled);
-    &[data-selected] {
-      --border-color: var(--border-color-disabled);
-    }
-  }
-}
-
 .react-aria-Tab[href] {
   text-decoration: none;
   cursor: pointer;
diff --git a/starters/docs/src/Tabs.tsx b/starters/docs/src/Tabs.tsx
index e0db790e1db..ac922e957e2 100644
--- a/starters/docs/src/Tabs.tsx
+++ b/starters/docs/src/Tabs.tsx
@@ -7,7 +7,10 @@ import {
   Tab as RACTab,
   TabsProps,
   TabPanelProps,
-  TabPanel as RACTabPanel} from 'react-aria-components';
+  TabPanel as RACTabPanel,
+  composeRenderProps,
+  SelectionIndicator
+} from 'react-aria-components';
 import './Tabs.css';
 
 export function Tabs(props: TabsProps) {
@@ -19,7 +22,14 @@ export function TabList<T extends object>(props: TabListProps<T>) {
 }
 
 export function Tab(props: TabProps) {
-  return <RACTab {...props} />;
+  return (
+    <RACTab {...props}>
+      {composeRenderProps(props.children, children => (<>
+        {children}
+        <SelectionIndicator />
+      </>))}
+    </RACTab>
+  );
 }
 
 export function TabPanel(props: TabPanelProps) {
diff --git a/starters/tailwind/src/Tabs.tsx b/starters/tailwind/src/Tabs.tsx
index c4632272c03..4b7182afc6a 100644
--- a/starters/tailwind/src/Tabs.tsx
+++ b/starters/tailwind/src/Tabs.tsx
@@ -5,6 +5,7 @@ import {
   TabList as RACTabList,
   TabPanel as RACTabPanel,
   Tabs as RACTabs,
+  SelectionIndicator,
   TabListProps,
   TabPanelProps,
   TabProps,
@@ -58,12 +59,8 @@ export function TabList<T extends object>(props: TabListProps<T>) {
 
 const tabProps = tv({
   extend: focusRing,
-  base: 'flex items-center cursor-default rounded-full px-4 py-1.5 text-sm font-medium transition forced-color-adjust-none',
+  base: 'relative flex items-center cursor-default rounded-full px-4 py-1.5 text-sm font-medium transition forced-color-adjust-none',
   variants: {
-    isSelected: {
-      false: 'text-gray-600 dark:text-zinc-300 hover:text-gray-700 pressed:text-gray-700 dark:hover:text-zinc-200 dark:pressed:text-zinc-200 hover:bg-gray-200 dark:hover:bg-zinc-800 pressed:bg-gray-200 dark:pressed:bg-zinc-800',
-      true: 'text-white dark:text-black forced-colors:text-[HighlightText] bg-gray-800 dark:bg-zinc-200 forced-colors:bg-[Highlight]'
-    },
     isDisabled: {
       true: 'text-gray-200 dark:text-zinc-600 forced-colors:text-[GrayText] selected:text-gray-300 dark:selected:text-zinc-500 forced-colors:selected:text-[HighlightText] selected:bg-gray-200 dark:selected:bg-zinc-600 forced-colors:selected:bg-[GrayText]'
     }
@@ -77,7 +74,12 @@ export function Tab(props: TabProps) {
       className={composeRenderProps(
         props.className,
         (className, renderProps) => tabProps({...renderProps, className})
-      )} />
+      )}>
+      {composeRenderProps(props.children, children => (<>
+        {children}
+        <SelectionIndicator className="absolute top-0 left-0 w-full h-full z-10 bg-white rounded-full mix-blend-difference transition-[translate,width,height]" />
+      </>))}
+    </RACTab>
   );
 }