diff --git a/examples/s2-esbuild-starter-app/src/app.tsx b/examples/s2-esbuild-starter-app/src/app.tsx
index d37245142e1..3601a66c91c 100644
--- a/examples/s2-esbuild-starter-app/src/app.tsx
+++ b/examples/s2-esbuild-starter-app/src/app.tsx
@@ -13,11 +13,11 @@
 
 import "@react-spectrum/s2/page.css";
 import { style } from "@react-spectrum/s2/style" with { type: "macro" };
-import { Button } from "@react-spectrum/s2";
+import { Button, Provider } from "@react-spectrum/s2";
 
 function App() {
   return (
-    <main>
+    <Provider elementType="main">
       <Button
         styles={style({
           marginStart: 16,
@@ -25,7 +25,7 @@ function App() {
       >
         Hello Spectrum 2!
       </Button>
-    </main>
+    </Provider>
   );
 }
 
diff --git a/examples/s2-next-macros/src/app/page.tsx b/examples/s2-next-macros/src/app/page.tsx
index 9c6897e905e..44456c9bf0e 100644
--- a/examples/s2-next-macros/src/app/page.tsx
+++ b/examples/s2-next-macros/src/app/page.tsx
@@ -32,6 +32,7 @@ import {
   NotificationBadge,
   Picker,
   PickerItem,
+  Provider,
   Row,
   SubmenuTrigger,
   TableBody,
@@ -72,7 +73,7 @@ function App() {
     {id: 'waterfall', label: 'Waterfall'}
   ];
   return (
-    <main>
+    <Provider elementType="main">
       <Heading
         styles={style({ font: "heading-xl", textAlign: "center" })}
         level={1}
@@ -98,10 +99,11 @@ function App() {
         <Section title="Buttons">
           <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
-            <Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
+            <Button variant="secondary"><Text>Secondary</Text></Button>
             <ActionButton>
               <Edit />
               <Text>Action Button</Text>
+              <NotificationBadge value={2} />
             </ActionButton>
             <ToggleButton>Toggle Button</ToggleButton>
             <LinkButton
@@ -185,6 +187,7 @@ function App() {
           <TableView
             aria-label="Files"
             styles={style({width: 320, height: 320})}
+            selectionMode="multiple"
             renderActionBar={selectedKeys => (
               <ActionBar>
                 <ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
@@ -268,7 +271,7 @@ function App() {
           <Lazy />
         </React.Suspense>}
       </div>
-    </main>
+    </Provider>
   );
 }
 
diff --git a/examples/s2-parcel-example/src/App.js b/examples/s2-parcel-example/src/App.js
index 6ce4cf2a2ed..5d214e1d9a5 100644
--- a/examples/s2-parcel-example/src/App.js
+++ b/examples/s2-parcel-example/src/App.js
@@ -30,6 +30,7 @@ import {
   NotificationBadge,
   Picker,
   PickerItem,
+  Provider,
   Row,
   SubmenuTrigger,
   TableBody,
@@ -70,7 +71,7 @@ function App() {
     {id: 'waterfall', label: 'Waterfall'}
   ];
   return (
-    <main>
+    <Provider elementType="main">
       <Heading
         styles={style({ font: "heading-xl", textAlign: "center" })}
         level={1}
@@ -96,10 +97,11 @@ function App() {
         <Section title="Buttons">
           <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
-            <Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
+            <Button variant="secondary"><Text>Secondary</Text></Button>
             <ActionButton>
               <Edit />
               <Text>Action Button</Text>
+              <NotificationBadge value={2} />
             </ActionButton>
             <ToggleButton>Toggle Button</ToggleButton>
             <LinkButton
@@ -183,6 +185,7 @@ function App() {
           <TableView
             aria-label="Files"
             styles={style({width: 320, height: 320})}
+            selectionMode="multiple"
             renderActionBar={selectedKeys => (
               <ActionBar>
                 <ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
@@ -266,7 +269,7 @@ function App() {
           <Lazy />
         </React.Suspense>}
       </div>
-    </main>
+    </Provider>
   );
 }
 
diff --git a/examples/s2-vite-project/src/App.tsx b/examples/s2-vite-project/src/App.tsx
index 22b35908784..b4058c9937b 100644
--- a/examples/s2-vite-project/src/App.tsx
+++ b/examples/s2-vite-project/src/App.tsx
@@ -30,6 +30,7 @@ import {
   NotificationBadge,
   Picker,
   PickerItem,
+  Provider,
   Row,
   SubmenuTrigger,
   TableBody,
@@ -70,7 +71,7 @@ function App() {
     {id: 'waterfall', label: 'Waterfall'}
   ];
   return (
-    <main>
+    <Provider elementType="main">
       <Heading
         styles={style({ font: "heading-xl", textAlign: "center" })}
         level={1}
@@ -96,10 +97,11 @@ function App() {
         <Section title="Buttons">
           <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
-            <Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
+            <Button variant="secondary"><Text>Secondary</Text></Button>
             <ActionButton>
               <Edit />
               <Text>Action Button</Text>
+              <NotificationBadge value={2} />
             </ActionButton>
             <ToggleButton>Toggle Button</ToggleButton>
             <LinkButton
@@ -183,6 +185,7 @@ function App() {
           <TableView
             aria-label="Files"
             styles={style({width: 320, height: 320})}
+            selectionMode="multiple"
             renderActionBar={selectedKeys => (
               <ActionBar>
                 <ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
@@ -266,7 +269,7 @@ function App() {
           <Lazy />
         </React.Suspense>}
       </div>
-    </main>
+    </Provider>
   );
 }
 
diff --git a/examples/s2-webpack-5-example/src/App.js b/examples/s2-webpack-5-example/src/App.js
index a9178b59e5e..ae32bf391cc 100644
--- a/examples/s2-webpack-5-example/src/App.js
+++ b/examples/s2-webpack-5-example/src/App.js
@@ -30,6 +30,7 @@ import {
   NotificationBadge,
   Picker,
   PickerItem,
+  Provider,
   Row,
   SubmenuTrigger,
   TableBody,
@@ -70,7 +71,7 @@ function App() {
     {id: 'waterfall', label: 'Waterfall'}
   ];
   return (
-    <main>
+    <Provider elementType="main">
       <Heading
         styles={style({ font: "heading-xl", textAlign: "center" })}
         level={1}
@@ -96,10 +97,11 @@ function App() {
         <Section title="Buttons">
           <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
-            <Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
+            <Button variant="secondary"><Text>Secondary</Text></Button>
             <ActionButton>
               <Edit />
               <Text>Action Button</Text>
+              <NotificationBadge value={2} />
             </ActionButton>
             <ToggleButton>Toggle Button</ToggleButton>
             <LinkButton
@@ -183,6 +185,7 @@ function App() {
           <TableView
             aria-label="Files"
             styles={style({width: 320, height: 320})}
+            selectionMode="multiple"
             renderActionBar={selectedKeys => (
               <ActionBar>
                 <ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
@@ -266,7 +269,7 @@ function App() {
           <Lazy />
         </React.Suspense>}
       </div>
-    </main>
+    </Provider>
   );
 }
 
diff --git a/examples/s2-webpack-5-typescript-example/src/App.tsx b/examples/s2-webpack-5-typescript-example/src/App.tsx
index dd380117008..679aec74c58 100644
--- a/examples/s2-webpack-5-typescript-example/src/App.tsx
+++ b/examples/s2-webpack-5-typescript-example/src/App.tsx
@@ -12,6 +12,7 @@
 
 import "@react-spectrum/s2/page.css";
 import {
+  ActionBar,
   ActionButton,
   ActionButtonGroup,
   ActionMenu,
@@ -25,8 +26,10 @@ import {
   Menu,
   MenuItem,
   MenuTrigger,
+  NotificationBadge,
   Picker,
   PickerItem,
+  Provider,
   Row,
   SubmenuTrigger,
   TableBody,
@@ -69,7 +72,7 @@ function App() {
     {id: 'waterfall', label: 'Waterfall'}
   ];
   return (
-    <main>
+    <Provider elementType="main">
       <Heading
         styles={style({ font: "heading-xl", textAlign: "center" })}
         level={1}
@@ -95,10 +98,11 @@ function App() {
         <Section title="Buttons">
           <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
-            <Button variant="secondary">Secondary</Button>
+            <Button variant="secondary"><Text>Secondary</Text></Button>
             <ActionButton>
               <Edit />
               <Text>Action Button</Text>
+              <NotificationBadge value={2} />
             </ActionButton>
             <ToggleButton>Toggle Button</ToggleButton>
             <LinkButton
@@ -179,7 +183,17 @@ function App() {
               <MenuItem>Paste</MenuItem>
             </Menu>
           </MenuTrigger>
-          <TableView aria-label="Files" styles={style({width: 320, height: 320})}>
+          <TableView
+            aria-label="Files"
+            styles={style({width: 320, height: 320})}
+            selectionMode="multiple"
+            renderActionBar={selectedKeys => (
+              <ActionBar>
+                <ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
+                <ActionButton onPress={() => console.log('copy', selectedKeys)}>Copy</ActionButton>
+                <ActionButton onPress={() => console.log('delete', selectedKeys)}>Delete</ActionButton>
+              </ActionBar>
+            )}>
             <TableHeader>
               <Column isRowHeader>Name</Column>
               <Column>Type</Column>
@@ -256,7 +270,7 @@ function App() {
           <Lazy />
         </React.Suspense>}
       </div>
-    </main>
+    </Provider>
   );
 }