code · pull · May 8, 2026 · May 8, 2026 · May 8, 2026 · May 8, 2026
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/bottomsheet.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/bottomsheet.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI BottomSheet matches the official SwiftUI [sheet API](<https://developer.apple.com/documentation/swiftui/view/sheet(ispresented:ondismiss:content:)>) and presents content from the bottom of the screen.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/bottomsheet/ios-light.webp"
-    darkSource="/static/images/expo-ui/bottomsheet/ios-dark.webp"
-    alt="A BottomSheet at medium detent showing a Sort By list with Most Recent selected"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="portrait"
+  source="/static/images/expo-ui/bottomsheet/ios-light.webp"
+  darkSource="/static/images/expo-ui/bottomsheet/ios-dark.webp"
+  alt="A BottomSheet at medium detent showing a Sort By list with Most Recent selected"
+/>
 
 ## Installation
 

diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/button.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/button.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Button matches the official SwiftUI [Button API](https://developer.apple.com/documentation/swiftui/button) and supports styling via the [`buttonStyle`](modifiers/#buttonstylestyle), [`controlSize`](modifiers/#controlsizesize), and other modifiers.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/button/ios-light.webp"
-    darkSource="/static/images/expo-ui/button/ios-dark.webp"
-    alt="Two iOS 26 Liquid Glass buttons — a glassProminent Get started above a glass Learn more"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/button/ios-light.webp"
+  darkSource="/static/images/expo-ui/button/ios-dark.webp"
+  alt="Two iOS 26 Liquid Glass buttons — a glassProminent Get started above a glass Learn more"
+/>
 
 ## Installation
 

diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/colorpicker.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/colorpicker.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ColorPicker matches the official SwiftUI [ColorPicker API](https://developer.apple.com/documentation/swiftui/colorpicker) and allows app users to select colors from a palette.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/colorpicker/ios-light.webp"
-    darkSource="/static/images/expo-ui/colorpicker/ios-dark.webp"
-    alt="ColorPicker row inside a Form, showing the current color swatch"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/colorpicker/ios-light.webp"
+  darkSource="/static/images/expo-ui/colorpicker/ios-dark.webp"
+  alt="ColorPicker row inside a Form, showing the current color swatch"
+/>
 
 ## Installation
 

diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/confirmationdialog.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/confirmationdialog.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ConfirmationDialog matches the official SwiftUI [confirmationDialog API](<https://developer.apple.com/documentation/swiftui/view/confirmationdialog(_:ispresented:titlevisibility:actions:message:)>) and presents an action sheet-style dialog with a title, actions, and an optional message.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/confirmationdialog/ios-light.webp"
-    darkSource="/static/images/expo-ui/confirmationdialog/ios-dark.webp"
-    alt="ConfirmationDialog asking the user to confirm a destructive action"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/confirmationdialog/ios-light.webp"
+  darkSource="/static/images/expo-ui/confirmationdialog/ios-dark.webp"
+  alt="ConfirmationDialog asking the user to confirm a destructive action"
+/>
 
 ## Installation
 

diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/contextmenu.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/contextmenu.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ContextMenu matches the official SwiftUI [contextMenu API](<https://developer.apple.com/documentation/swiftui/view/contextmenu(menuitems:)>) and displays a menu when long-pressed. For single-tap menu interactions, use [`Menu`](menu) instead.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/contextmenu/ios-light.webp"
-    darkSource="/static/images/expo-ui/contextmenu/ios-dark.webp"
-    alt="A long-pressed tile shown as an enlarged preview with a Share, Favorite, Delete menu beneath it"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="portrait"
+  source="/static/images/expo-ui/contextmenu/ios-light.webp"
+  darkSource="/static/images/expo-ui/contextmenu/ios-dark.webp"
+  alt="A long-pressed tile shown as an enlarged preview with a Share, Favorite, Delete menu beneath it"
+/>
 
 ## Installation
 

diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/controlgroup.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/controlgroup.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI ControlGroup matches the official SwiftUI [ControlGroup API](https://developer.apple.com/documentation/swiftui/controlgroup). When placed inside a [`Menu`](menu), the children are rendered as a compact horizontal row of buttons.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/controlgroup/ios-light.webp"
-    darkSource="/static/images/expo-ui/controlgroup/ios-dark.webp"
-    alt="An open Menu showing a ControlGroup row of Add, Favorite, Share icon buttons above Rename and Delete entries"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/controlgroup/ios-light.webp"
+  darkSource="/static/images/expo-ui/controlgroup/ios-dark.webp"
+  alt="An open Menu showing a ControlGroup row of Add, Favorite, Share icon buttons above Rename and Delete entries"
+/>
 
 > **Note:** On tvOS, `ControlGroup` requires tvOS 17.0 or later.
 

diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/datepicker.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/datepicker.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI DatePicker matches the official SwiftUI [DatePicker API](https://developer.apple.com/documentation/swiftui/datepicker) and supports styling via the [`datePickerStyle`](modifiers/#datepickerstylestyle) modifier.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/datepicker/ios-light.webp"
-    darkSource="/static/images/expo-ui/datepicker/ios-dark.webp"
-    alt="Date and time DatePicker rows inside a Form"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/datepicker/ios-light.webp"
+  darkSource="/static/images/expo-ui/datepicker/ios-dark.webp"
+  alt="Date and time DatePicker rows inside a Form"
+/>
 
 ## Installation
 

diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/disclosuregroup.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/disclosuregroup.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI DisclosureGroup matches the official SwiftUI [DisclosureGroup API](https://developer.apple.com/documentation/swiftui/disclosuregroup) and displays a disclosure indicator that reveals or hides content.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/disclosuregroup/ios-light.webp"
-    darkSource="/static/images/expo-ui/disclosuregroup/ios-dark.webp"
-    alt="DisclosureGroup expanded inside a Form"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/disclosuregroup/ios-light.webp"
+  darkSource="/static/images/expo-ui/disclosuregroup/ios-dark.webp"
+  alt="DisclosureGroup expanded inside a Form"
+/>
 
 ## Installation
 

diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/divider.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/divider.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Divider matches the official SwiftUI [Divider API](https://developer.apple.com/documentation/swiftui/divider) and creates a visual separator between content.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/divider/ios-light.webp"
-    darkSource="/static/images/expo-ui/divider/ios-dark.webp"
-    alt="Divider separating a heading from body text"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/divider/ios-light.webp"
+  darkSource="/static/images/expo-ui/divider/ios-dark.webp"
+  alt="Divider separating a heading from body text"
+/>
 
 ## Installation
 

diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/form.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/form.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Form matches the official SwiftUI [Form API](https://developer.apple.com/documentation/swiftui/form). It provides a container for grouping controls used for data entry, such as in settings or inspection panes.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/form/ios-light.webp"
-    darkSource="/static/images/expo-ui/form/ios-dark.webp"
-    alt="A Form with two grouped Sections of Toggles and a footer caption"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/form/ios-light.webp"
+  darkSource="/static/images/expo-ui/form/ios-dark.webp"
+  alt="A Form with two grouped Sections of Toggles and a footer caption"
+/>
 
 ## Installation
 

diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/gauge.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/gauge.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Gauge matches the official SwiftUI [Gauge API](https://developer.apple.com/documentation/swiftui/gauge) and supports styling via the [`gaugeStyle`](modifiers/#gaugestylestyle) modifier.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/gauge/ios-light.webp"
-    darkSource="/static/images/expo-ui/gauge/ios-dark.webp"
-    alt="Circular capacity Gauge showing 70%"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/gauge/ios-light.webp"
+  darkSource="/static/images/expo-ui/gauge/ios-dark.webp"
+  alt="Circular capacity Gauge showing 70%"
+/>
 
 ## Installation
 

diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/group.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/group.mdx
@@ -8,19 +8,9 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
 
 Expo UI Group matches the official SwiftUI [Group API](https://developer.apple.com/documentation/swiftui/group) and groups views together without introducing additional layout structure.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/group/ios-light.webp"
-    darkSource="/static/images/expo-ui/group/ios-dark.webp"
-    alt="Three text items rendered in blue bold via a single foregroundStyle modifier applied to a Group"
-    disableSrcSet
-  />
-</div>
-
 ## Installation
 
 <APIInstallSection />

diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/hstack.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/hstack.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI HStack matches the official SwiftUI [HStack API](https://developer.apple.com/documentation/swiftui/hstack) and arranges its children horizontally.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/hstack/ios-light.webp"
-    darkSource="/static/images/expo-ui/hstack/ios-dark.webp"
-    alt="Four numbered colored rounded squares arranged horizontally in an HStack"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/hstack/ios-light.webp"
+  darkSource="/static/images/expo-ui/hstack/ios-dark.webp"
+  alt="Four numbered colored rounded squares arranged horizontally in an HStack"
+/>
 
 ## Installation
 

diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/image.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/image.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Image displays SF Symbols using the SwiftUI [Image API](https://developer.apple.com/documentation/swiftui/image). SF Symbols are a library of configurable symbols provided by Apple.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/image/ios-light.webp"
-    darkSource="/static/images/expo-ui/image/ios-dark.webp"
-    alt="A row of colored SF Symbol images"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/image/ios-light.webp"
+  darkSource="/static/images/expo-ui/image/ios-dark.webp"
+  alt="A row of colored SF Symbol images"
+/>
 
 ## Installation
 

diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/label.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/label.mdx
@@ -8,18 +8,16 @@ platforms: ['ios', 'tvos', 'expo-go']
 
 import APISection from '~/components/plugins/APISection';
 import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { Diagram } from '~/ui/components/Diagram';
+import { ComponentDiagram } from '~/ui/components/Diagram';
 
 Expo UI Label matches the official SwiftUI [Label API](https://developer.apple.com/documentation/swiftui/label) and displays a title alongside an icon.
 
-<div className="mx-auto w-fit [&_img]:max-h-[360px] [&_img]:w-auto">
-  <Diagram
-    source="/static/images/expo-ui/label/ios-light.webp"
-    darkSource="/static/images/expo-ui/label/ios-dark.webp"
-    alt="Three Label rows with SF Symbols inside a Form"
-    disableSrcSet
-  />
-</div>
+<ComponentDiagram
+  mode="landscape"
+  source="/static/images/expo-ui/label/ios-light.webp"
+  darkSource="/static/images/expo-ui/label/ios-dark.webp"
+  alt="Three Label rows with SF Symbols inside a Form"
+/>
 
 ## Installation