diff --git a/packages/@react-spectrum/s2/src/Accordion.tsx b/packages/@react-spectrum/s2/src/Accordion.tsx
index 554d6e5d482..4df49d6066c 100644
--- a/packages/@react-spectrum/s2/src/Accordion.tsx
+++ b/packages/@react-spectrum/s2/src/Accordion.tsx
@@ -55,7 +55,7 @@ const accordion = style({
 export const AccordionContext = createContext<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
- * An accordion is a container for multiple disclosures.
+ * An accordion is a container for multiple accordion items.
  */
 export const Accordion = forwardRef(function Accordion(props: AccordionProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, AccordionContext);
diff --git a/packages/dev/docs/pages/react-aria/components.mdx b/packages/dev/docs/pages/react-aria/components.mdx
index 53cfbd2f43a..7ecc13f704f 100644
--- a/packages/dev/docs/pages/react-aria/components.mdx
+++ b/packages/dev/docs/pages/react-aria/components.mdx
@@ -167,7 +167,7 @@ order: 5
 <ExampleCard
   url="Tree.html"
   title="Tree"
-  description="A tree displays heirarchical data with selection and collapsing.">
+  description="A tree displays hierarchical data with selection and collapsing.">
   <Tree />
 </ExampleCard>
 
diff --git a/packages/dev/docs/pages/react-spectrum/index.mdx b/packages/dev/docs/pages/react-spectrum/index.mdx
index dfea46df848..be329e21923 100644
--- a/packages/dev/docs/pages/react-spectrum/index.mdx
+++ b/packages/dev/docs/pages/react-spectrum/index.mdx
@@ -231,7 +231,7 @@ A React implementation of Spectrum, Adobe’s design system.
 <ExampleCard
   url="TreeView.html"
   title="TreeView"
-  description="A tree view displays heirarchical data with selection and collapsing.">
+  description="A tree view displays hierarchical data with selection and collapsing.">
   <Tree />
 </ExampleCard>
 
diff --git a/packages/dev/s2-docs/pages/index.mdx b/packages/dev/s2-docs/pages/index.mdx
index 145df571ae6..4ea5026be6f 100644
--- a/packages/dev/s2-docs/pages/index.mdx
+++ b/packages/dev/s2-docs/pages/index.mdx
@@ -4,6 +4,7 @@ export default Layout;
 
 export const section = 'Getting started';
 export const hideNav = true;
+export const description = 'Adobe\'s collection of libraries and tools for building adaptive, accessible, and robust user experiences.';
 export const hideFromSearch = true;
 
 <WelcomeHeader />
diff --git a/packages/dev/s2-docs/pages/internationalized/date/Calendar.mdx b/packages/dev/s2-docs/pages/internationalized/date/Calendar.mdx
index 6597d1a181b..affc07a8ab8 100644
--- a/packages/dev/s2-docs/pages/internationalized/date/Calendar.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/date/Calendar.mdx
@@ -15,6 +15,7 @@ import {StaticTable} from '../../../src/StaticTable';
 
 export const section = 'Date and Time';
 export const group = 'Internationalized';
+export const description = 'Calendar systems for international date calculations.';
 
 # Calendar
 
diff --git a/packages/dev/s2-docs/pages/internationalized/date/CalendarDate.mdx b/packages/dev/s2-docs/pages/internationalized/date/CalendarDate.mdx
index 2044c291940..bc96be3a93f 100644
--- a/packages/dev/s2-docs/pages/internationalized/date/CalendarDate.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/date/CalendarDate.mdx
@@ -14,6 +14,7 @@ import docs from 'docs:@internationalized/date';
 
 export const section = 'Date and Time';
 export const group = 'Internationalized';
+export const description = 'A date without time in a specific calendar system.';
 
 # CalendarDate
 
diff --git a/packages/dev/s2-docs/pages/internationalized/date/CalendarDateTime.mdx b/packages/dev/s2-docs/pages/internationalized/date/CalendarDateTime.mdx
index f694a78ad1a..df49547bb43 100644
--- a/packages/dev/s2-docs/pages/internationalized/date/CalendarDateTime.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/date/CalendarDateTime.mdx
@@ -14,6 +14,7 @@ import docs from 'docs:@internationalized/date';
 
 export const section = 'Date and Time';
 export const group = 'Internationalized';
+export const description = 'A date and time without a time zone.';
 
 # CalendarDateTime
 
diff --git a/packages/dev/s2-docs/pages/internationalized/date/DateFormatter.mdx b/packages/dev/s2-docs/pages/internationalized/date/DateFormatter.mdx
index b790fbac2ba..0d46760795b 100644
--- a/packages/dev/s2-docs/pages/internationalized/date/DateFormatter.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/date/DateFormatter.mdx
@@ -14,6 +14,7 @@ import docs from 'docs:@internationalized/date';
 
 export const section = 'Date and Time';
 export const group = 'Internationalized';
+export const description = 'Provides locale-aware date formatting with browser bug fixes.';
 
 # DateFormatter
 
diff --git a/packages/dev/s2-docs/pages/internationalized/date/Time.mdx b/packages/dev/s2-docs/pages/internationalized/date/Time.mdx
index fb0edb08c36..0e4c9e904eb 100644
--- a/packages/dev/s2-docs/pages/internationalized/date/Time.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/date/Time.mdx
@@ -14,6 +14,7 @@ import docs from 'docs:@internationalized/date';
 
 export const section = 'Date and Time';
 export const group = 'Internationalized';
+export const description = 'A clock time without any date components.';
 
 # Time
 
diff --git a/packages/dev/s2-docs/pages/internationalized/date/ZonedDateTime.mdx b/packages/dev/s2-docs/pages/internationalized/date/ZonedDateTime.mdx
index 81711c63f3f..d90ee33354c 100644
--- a/packages/dev/s2-docs/pages/internationalized/date/ZonedDateTime.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/date/ZonedDateTime.mdx
@@ -14,6 +14,7 @@ import docs from 'docs:@internationalized/date';
 
 export const section = 'Date and Time';
 export const group = 'Internationalized';
+export const description = 'An exact date and time in a specific time zone.';
 
 # ZonedDateTime
 
diff --git a/packages/dev/s2-docs/pages/internationalized/number/NumberFormatter.mdx b/packages/dev/s2-docs/pages/internationalized/number/NumberFormatter.mdx
index 2e5d27dd06d..48d92d922bb 100644
--- a/packages/dev/s2-docs/pages/internationalized/number/NumberFormatter.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/number/NumberFormatter.mdx
@@ -14,6 +14,7 @@ import docs from 'docs:@internationalized/number';
 
 export const section = 'Numbers';
 export const group = 'Internationalized';
+export const description = 'Provides locale-aware number formatting with polyfills.';
 
 # NumberFormatter
 
diff --git a/packages/dev/s2-docs/pages/internationalized/number/NumberParser.mdx b/packages/dev/s2-docs/pages/internationalized/number/NumberParser.mdx
index 8c94bd66684..c19f36e3d86 100644
--- a/packages/dev/s2-docs/pages/internationalized/number/NumberParser.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/number/NumberParser.mdx
@@ -14,6 +14,7 @@ import docs from 'docs:@internationalized/number';
 
 export const section = 'Numbers';
 export const group = 'Internationalized';
+export const description = 'Validates and parses numbers from user input with locale support.';
 
 # NumberParser
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
index 73176705766..7c4dfe74a78 100644
--- a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
@@ -6,6 +6,8 @@ import vanillaDocs from 'docs:vanilla-starter/CommandPalette';
 import '../../tailwind/tailwind.css';
 
 export const tags = ['combobox', 'typeahead', 'input'];
+export const relatedPages = [{'title': 'useAutocomplete', 'url': 'https://react-spectrum.adobe.com/react-aria/useAutocomplete.html'}];
+export const description = 'Allows users to search or filter a list of suggestions.';
 
 # Autocomplete
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx
index 28d18faa40e..8f46e6623da 100644
--- a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx
@@ -8,6 +8,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 
 export const tags = ['navigation'];
 export const relatedPages = [{'title': 'useBreadcrumbs', 'url': 'https://react-spectrum.adobe.com/react-aria/useBreadcrumbs.html'}];
+export const description = 'Displays a hierarchy of links to the current page or resource in an application.';
 
 # Breadcrumbs
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Button.mdx b/packages/dev/s2-docs/pages/react-aria/Button.mdx
index be228def8ca..afdbb7bd056 100644
--- a/packages/dev/s2-docs/pages/react-aria/Button.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Button.mdx
@@ -13,6 +13,7 @@ import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
 
 export const tags = ['btn'];
 export const relatedPages = [{'title': 'useButton', 'url': 'https://react-spectrum.adobe.com/react-aria/useButton.html'}];
+export const description = 'Allows a user to perform an action, with mouse, touch, and keyboard interactions.';
 
 # Button
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx
index 1205c731d5b..a11002e93fb 100644
--- a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx
@@ -10,6 +10,7 @@ import Anatomy from '@react-aria/calendar/docs/calendar-anatomy.svg';
 
 export const tags = ['date'];
 export const relatedPages = [{'title': 'useCalendar', 'url': 'https://react-spectrum.adobe.com/react-aria/useCalendar.html'}];
+export const description = 'Displays one or more date grids and allows users to select a single date.';
 
 # Calendar
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx
index 8a95dae82bd..65c9f9d3404 100644
--- a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx
@@ -9,6 +9,7 @@ import Anatomy from '@react-aria/checkbox/docs/checkbox-anatomy.svg';
 
 export const tags = ['input'];
 export const relatedPages = [{'title': 'useCheckbox', 'url': 'https://react-spectrum.adobe.com/react-aria/useCheckbox.html'}];
+export const description = 'Allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.';
 
 # Checkbox
 
diff --git a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx
index d3ad42e26df..c420ff1f40b 100644
--- a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx
@@ -12,6 +12,7 @@ export const relatedPages = [
   {title: 'useCheckboxGroup', url: 'https://react-spectrum.adobe.com/react-aria/useCheckboxGroup.html'},
   {title: 'Testing', url: './CheckboxGroup/testing.html'}
 ];
+export const description = 'Allows a user to select multiple items from a list of options.';
 
 # CheckboxGroup
 
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx b/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx
index 84045da46b0..92912569a63 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx
@@ -9,6 +9,7 @@ import Anatomy from '@react-aria/color/docs/ColorAreaAnatomy.svg';
 
 export const tags = [];
 export const relatedPages = [{'title': 'useColorArea', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorArea.html'}];
+export const description = 'Allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.';
 
 # ColorArea
 
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx
index ff8079cbdc4..36a76d68ef9 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx
@@ -10,6 +10,7 @@ import Anatomy from '@react-aria/color/docs/ColorFieldAnatomy.svg';
 
 export const tags = ['input'];
 export const relatedPages = [{'title': 'useColorField', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorField.html'}];
+export const description = 'Allows users to edit a hex color or individual color channel value.';
 
 # ColorField
 
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx b/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx
index 5697e70a219..cc66d651fe4 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx
@@ -8,7 +8,7 @@ import {ColorPicker as TailwindColorPicker} from 'tailwind-starter/ColorPicker';
 import '../../tailwind/tailwind.css';
 
 export const tags = ['input'];
-export const relatedPages = [{'title': 'useColorPicker', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorPicker.html'}];
+export const description = 'Synchronizes a color value between multiple React Aria color components.';
 
 # ColorPicker
 
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx
index 5f46bb4afa7..c8cc971e9af 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx
@@ -10,6 +10,7 @@ import Anatomy from '@react-aria/color/docs/ColorSliderAnatomy.svg';
 
 export const tags = ['input'];
 export const relatedPages = [{'title': 'useColorSlider', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorSlider.html'}];
+export const description = 'Allows users to adjust an individual channel of a color value.';
 
 # ColorSlider
 
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSwatch.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSwatch.mdx
index 9ece1c24401..4c52304538f 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorSwatch.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorSwatch.mdx
@@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css';
 
 export const tags = [];
 export const relatedPages = [{'title': 'useColorSwatch', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorSwatch.html'}];
+export const description = 'Displays a preview of a selected color.';
 
 # ColorSwatch
 
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx
index 6507f370aa9..827b6453b43 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx
@@ -7,6 +7,7 @@ import '../../tailwind/tailwind.css';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['input'];
+export const description = 'Displays a list of color swatches and allows a user to select one of them.';
 
 # ColorSwatchPicker
 
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx b/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx
index f64cb81dd6e..14d06088625 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx
@@ -9,6 +9,7 @@ import Anatomy from '@react-aria/color/docs/ColorWheelAnatomy.svg';
 
 export const tags = ['input'];
 export const relatedPages = [{'title': 'useColorWheel', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorWheel.html'}];
+export const description = 'Allows users to adjust the hue of an HSL or HSB color value on a circular track.';
 
 # ColorWheel
 
diff --git a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx
index 557ad9ef05a..78318381d78 100644
--- a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx
@@ -13,6 +13,7 @@ export const relatedPages = [
   {title: 'useComboBox', url: 'https://react-spectrum.adobe.com/react-aria/useComboBox.html'},
   {title: 'Testing', url: './ComboBox/testing.html'}
 ];
+export const description = 'Combines a text input with a listbox, allowing users to filter a list of options to items matching a query.';
 
 # ComboBox
 
diff --git a/packages/dev/s2-docs/pages/react-aria/DateField.mdx b/packages/dev/s2-docs/pages/react-aria/DateField.mdx
index 9a096bf5c72..04bfad06bec 100644
--- a/packages/dev/s2-docs/pages/react-aria/DateField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DateField.mdx
@@ -10,6 +10,7 @@ import Anatomy from '@react-aria/datepicker/docs/datefield-anatomy.svg';
 
 export const tags = ['calendar', 'input'];
 export const relatedPages = [{'title': 'useDateField', 'url': 'https://react-spectrum.adobe.com/react-aria/useDateField.html'}];
+export const description = 'Allows users to enter and edit date and time values using a keyboard.';
 
 # DateField
 
diff --git a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx
index 7e3b353e5dd..fb4caa77e8d 100644
--- a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx
@@ -10,6 +10,7 @@ import Anatomy from '@react-aria/datepicker/docs/datepicker-anatomy.svg';
 
 export const tags = ['calendar', 'input'];
 export const relatedPages = [{'title': 'useDatePicker', 'url': 'https://react-spectrum.adobe.com/react-aria/useDatePicker.html'}];
+export const description = 'Combines a DateField and a Calendar popover to allow users to enter or select a date and time value.';
 
 # DatePicker
 
diff --git a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx
index 2a866146f31..a4265cbd67b 100644
--- a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx
@@ -10,6 +10,7 @@ import Anatomy from '@react-aria/datepicker/docs/daterangepicker-anatomy.svg';
 
 export const tags = ['calendar', 'input'];
 export const relatedPages = [{'title': 'useDateRangePicker', 'url': 'https://react-spectrum.adobe.com/react-aria/useDateRangePicker.html'}];
+export const description = 'Combines two DateFields and a RangeCalendar popover to allow users to enter or select a date range.';
 
 # DateRangePicker
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx b/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx
index 45bdbe7084f..5eac4b68d01 100644
--- a/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx
@@ -8,6 +8,7 @@ import Anatomy from 'react-aria-components/docs/DisclosureAnatomy.svg';
 
 export const tags = ['accordion', 'collapsible', 'expandable', 'details'];
 export const relatedPages = [{'title': 'useDisclosure', 'url': 'https://react-spectrum.adobe.com/react-aria/useDisclosure.html'}];
+export const description = 'A collapsible section of content composed of a header with a heading and trigger button, and a panel that contains the content.';
 
 # Disclosure
 
diff --git a/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx b/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx
index 15017daedf3..f826ba279b0 100644
--- a/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx
@@ -7,7 +7,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from 'react-aria-components/docs/DisclosureGroupAnatomy.svg';
 
 export const tags = ['accordion', 'collapsible', 'expandable', 'details'];
-export const relatedPages = [{'title': 'useDisclosureGroup', 'url': 'https://react-spectrum.adobe.com/react-aria/useDisclosureGroup.html'}];
+export const description = 'A grouping of related disclosures, sometimes called an accordion.';
 
 # DisclosureGroup
 
diff --git a/packages/dev/s2-docs/pages/react-aria/DropZone.mdx b/packages/dev/s2-docs/pages/react-aria/DropZone.mdx
index aacc3bfb5b4..4db278e8941 100644
--- a/packages/dev/s2-docs/pages/react-aria/DropZone.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DropZone.mdx
@@ -6,6 +6,7 @@ import '../../tailwind/tailwind.css';
 
 export const tags = ['file', 'drag', 'dnd', 'upload'];
 export const relatedPages = [{'title': 'useDrop', 'url': 'https://react-spectrum.adobe.com/react-aria/useDrop.html'}];
+export const description = 'An area into which one or multiple objects can be dragged and dropped.';
 
 # DropZone
 
diff --git a/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx b/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx
index 65faff1d806..513bc78f0ac 100644
--- a/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx
@@ -6,6 +6,7 @@ import '../../tailwind/tailwind.css';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['upload', 'input'];
+export const description = 'Allows a user to access the file system with any pressable React Aria or React Spectrum component.';
 
 # FileTrigger
 
diff --git a/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx b/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx
index e357743a85a..33c59885622 100644
--- a/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx
@@ -14,6 +14,7 @@ import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/focus';
 
 export const section = 'Interactions';
+export const description = 'A utility component that applies a visual focus indicator to its child element when focused via keyboard.';
 
 # FocusRing
 
diff --git a/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx b/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx
index e687fffb72d..ef34e800876 100644
--- a/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx
@@ -14,6 +14,7 @@ import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/focus';
 
 export const section = 'Interactions';
+export const description = 'Manages focus within a group of elements, supporting features like focus containment and restoration.';
 
 # FocusScope
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Form.mdx b/packages/dev/s2-docs/pages/react-aria/Form.mdx
index 7f7098c97c5..d5c55e7b498 100644
--- a/packages/dev/s2-docs/pages/react-aria/Form.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Form.mdx
@@ -5,6 +5,7 @@ import docs from 'docs:react-aria-components';
 import '../../tailwind/tailwind.css';
 
 export const tags = ['input', 'field'];
+export const description = 'A group of inputs that allows users to submit data to a server.';
 
 # Form
 
diff --git a/packages/dev/s2-docs/pages/react-aria/GridList.mdx b/packages/dev/s2-docs/pages/react-aria/GridList.mdx
index 005e42f5d1d..106012170b4 100644
--- a/packages/dev/s2-docs/pages/react-aria/GridList.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/GridList.mdx
@@ -13,6 +13,7 @@ export const relatedPages = [
   {title: 'useGridList', url: 'https://react-spectrum.adobe.com/react-aria/useGridList.html'},
   {title: 'Testing', url: './GridList/testing.html'}
 ];
+export const description = 'Displays a list of interactive items, with support for keyboard navigation, selection, and actions.';
 
 # GridList
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Group.mdx b/packages/dev/s2-docs/pages/react-aria/Group.mdx
index 1cac683c7bd..79abe6a79c4 100644
--- a/packages/dev/s2-docs/pages/react-aria/Group.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Group.mdx
@@ -6,6 +6,7 @@ import vanillaDocs from 'docs:vanilla-starter/InputGroup';
 import '../../tailwind/tailwind.css';
 
 export const tags = [];
+export const description = 'Represents a set of related UI controls, and supports interactive states for styling.';
 
 # Group
 
diff --git a/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx b/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx
index b0c5a8f9d0b..2b00b4bfe1f 100644
--- a/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx
@@ -13,7 +13,7 @@ import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/i18n';
 
 export const section = 'Utilities';
-export const description = 'Implementing collections in React Aria';
+export const description = 'Override the default browser locale with an application-defined locale for all child components.';
 
 
 # I18nProvider
diff --git a/packages/dev/s2-docs/pages/react-aria/Link.mdx b/packages/dev/s2-docs/pages/react-aria/Link.mdx
index a8592ce551c..ebc143d991b 100644
--- a/packages/dev/s2-docs/pages/react-aria/Link.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Link.mdx
@@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css';
 
 export const tags = ['anchor', 'hyperlink', 'href'];
 export const relatedPages = [{'title': 'useLink', 'url': 'https://react-spectrum.adobe.com/react-aria/useLink.html'}];
+export const description = 'Allows a user to navigate to another page or resource within a web page or application.';
 
 # Link
 
diff --git a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx
index 1904ce22d17..9de1c8dd81c 100644
--- a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx
@@ -13,6 +13,7 @@ export const relatedPages = [
   {title: 'useListBox', url: 'https://react-spectrum.adobe.com/react-aria/useListBox.html'},
   {title: 'Testing', url: './ListBox/testing.html'}
 ];
+export const description = 'Displays a list of options and allows a user to select one or more of them.';
 
 # ListBox
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Menu.mdx b/packages/dev/s2-docs/pages/react-aria/Menu.mdx
index 4ce87ca3d83..1bb490753ae 100644
--- a/packages/dev/s2-docs/pages/react-aria/Menu.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Menu.mdx
@@ -11,6 +11,7 @@ export const relatedPages = [
   {title: 'useMenu', url: 'https://react-spectrum.adobe.com/react-aria/useMenu.html'},
   {title: 'Testing', url: './Menu/testing.html'}
 ];
+export const description = 'Displays a list of actions or options that a user can choose.';
 
 # Menu
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Meter.mdx b/packages/dev/s2-docs/pages/react-aria/Meter.mdx
index 249980dbe37..a9bd4dcebb2 100644
--- a/packages/dev/s2-docs/pages/react-aria/Meter.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Meter.mdx
@@ -10,6 +10,7 @@ import Anatomy from '@react-aria/meter/docs/anatomy.svg';
 
 export const tags = ['gauge', 'progress', 'level'];
 export const relatedPages = [{'title': 'useMeter', 'url': 'https://react-spectrum.adobe.com/react-aria/useMeter.html'}];
+export const description = 'Represents a quantity within a known range, or a fractional value.';
 
 # Meter
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Modal.mdx b/packages/dev/s2-docs/pages/react-aria/Modal.mdx
index 88e37422af7..cae2e534a9d 100644
--- a/packages/dev/s2-docs/pages/react-aria/Modal.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Modal.mdx
@@ -9,6 +9,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['dialog', 'popup', 'overlay'];
 export const relatedPages = [{'title': 'useModalOverlay', 'url': 'https://react-spectrum.adobe.com/react-aria/useModalOverlay.html'}];
+export const description = 'An overlay element which blocks interaction with elements outside it.';
 
 # Modal
 
diff --git a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx
index 3331df35bcf..fc4d57f0792 100644
--- a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx
@@ -10,6 +10,7 @@ import Anatomy from '@react-aria/numberfield/docs/anatomy.svg';
 
 export const tags = ['input'];
 export const relatedPages = [{'title': 'useNumberField', 'url': 'https://react-spectrum.adobe.com/react-aria/useNumberField.html'}];
+export const description = 'Allows a user to enter a number, and increment or decrement the value using stepper buttons.';
 
 # NumberField
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Popover.mdx b/packages/dev/s2-docs/pages/react-aria/Popover.mdx
index a5c763a0142..a0a754f9522 100644
--- a/packages/dev/s2-docs/pages/react-aria/Popover.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Popover.mdx
@@ -9,6 +9,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['popup', 'overlay'];
 export const relatedPages = [{'title': 'usePopover', 'url': 'https://react-spectrum.adobe.com/react-aria/usePopover.html'}];
+export const description = 'An overlay element positioned relative to a trigger.';
 
 # Popover
 
diff --git a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx
index d6d45cb6115..027f9c4a608 100644
--- a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx
@@ -13,6 +13,7 @@ import docs from 'docs:@react-aria/overlays';
 import {FunctionAPI} from '../../src/FunctionAPI';
 
 export const section = 'Utilities';
+export const description = 'Allows specifying the container element where overlays like modals and popovers are rendered.';
 
 # PortalProvider
 
diff --git a/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx b/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx
index f6f8756b30d..03ebdbee71e 100644
--- a/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx
@@ -12,6 +12,7 @@ import Anatomy from '@react-aria/progress/docs/anatomy.svg';
 
 export const tags = ['loading', 'progress'];
 export const relatedPages = [{'title': 'useProgressBar', 'url': 'https://react-spectrum.adobe.com/react-aria/useProgressBar.html'}];
+export const description = 'Shows either determinate or indeterminate progress of an operation over time.';
 
 # ProgressBar
 
diff --git a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx
index 581d25b0933..7d0efc978e1 100644
--- a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx
@@ -12,6 +12,7 @@ export const relatedPages = [
   {title: 'useRadioGroup', url: 'https://react-spectrum.adobe.com/react-aria/useRadioGroup.html'},
   {title: 'Testing', url: './RadioGroup/testing.html'}
 ];
+export const description = 'Allows a user to select a single item from a list of mutually exclusive options.';
 
 # RadioGroup
 
diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx
index 0967abe328d..b90feb7ecc0 100644
--- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx
@@ -10,6 +10,7 @@ import Anatomy from '@react-aria/calendar/docs/rangecalendar-anatomy.svg';
 
 export const tags = ['calendar'];
 export const relatedPages = [{'title': 'useRangeCalendar', 'url': 'https://react-spectrum.adobe.com/react-aria/useRangeCalendar.html'}];
+export const description = 'Displays one or more date grids and allows users to select a contiguous range of dates.';
 
 # RangeCalendar
 
diff --git a/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx b/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx
index 11d26466884..3a04beed616 100644
--- a/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx
@@ -12,7 +12,7 @@ export default Layout;
 import docs from 'docs:@react-aria/ssr';
 
 export const section = 'Utilities';
-export const description = 'Implementing collections in React Aria';
+export const description = 'Ensure consistent auto-generated IDs between server and client in React 16 and 17.';
 
 # SSRProvider
 
diff --git a/packages/dev/s2-docs/pages/react-aria/SearchField.mdx b/packages/dev/s2-docs/pages/react-aria/SearchField.mdx
index ed5f120338e..56286cb6cb0 100644
--- a/packages/dev/s2-docs/pages/react-aria/SearchField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/SearchField.mdx
@@ -10,6 +10,7 @@ import Anatomy from '@react-aria/searchfield/docs/anatomy.svg';
 
 export const tags = ['input'];
 export const relatedPages = [{'title': 'useSearchField', 'url': 'https://react-spectrum.adobe.com/react-aria/useSearchField.html'}];
+export const description = 'Allows a user to enter and clear a search query.';
 
 # SearchField
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Select.mdx b/packages/dev/s2-docs/pages/react-aria/Select.mdx
index e84ce2e8687..b272e993b7f 100644
--- a/packages/dev/s2-docs/pages/react-aria/Select.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Select.mdx
@@ -12,6 +12,7 @@ export const relatedPages = [
   {title: 'useSelect', url: 'https://react-spectrum.adobe.com/react-aria/useSelect.html'},
   {title: 'Testing', url: './Select/testing.html'}
 ];
+export const description = 'Displays a collapsible list of options and allows a user to select one of them.';
 
 # Select
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Slider.mdx b/packages/dev/s2-docs/pages/react-aria/Slider.mdx
index 3548cf73e05..0be73dcdb90 100644
--- a/packages/dev/s2-docs/pages/react-aria/Slider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Slider.mdx
@@ -10,6 +10,7 @@ import Anatomy from '@react-aria/slider/docs/anatomy.svg';
 
 export const tags = ['range input', 'track', 'scrubber'];
 export const relatedPages = [{'title': 'useSlider', 'url': 'https://react-spectrum.adobe.com/react-aria/useSlider.html'}];
+export const description = 'Allows a user to select one or more values within a range.';
 
 # Slider
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Switch.mdx b/packages/dev/s2-docs/pages/react-aria/Switch.mdx
index fb452c06c5e..f5b16d51f6a 100644
--- a/packages/dev/s2-docs/pages/react-aria/Switch.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Switch.mdx
@@ -9,6 +9,7 @@ import Anatomy from '@react-aria/switch/docs/anatomy.svg';
 
 export const tags = ['toggle', 'input'];
 export const relatedPages = [{'title': 'useSwitch', 'url': 'https://react-spectrum.adobe.com/react-aria/useSwitch.html'}];
+export const description = 'Allows a user to turn a setting on or off.';
 
 # Switch
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Table.mdx b/packages/dev/s2-docs/pages/react-aria/Table.mdx
index c76a0ef2bbe..2edbe5339c5 100644
--- a/packages/dev/s2-docs/pages/react-aria/Table.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Table.mdx
@@ -13,6 +13,7 @@ export const relatedPages = [
   {title: 'useTable', url: 'https://react-spectrum.adobe.com/react-aria/useTable.html'},
   {title: 'Testing', url: './Table/testing.html'}
 ];
+export const description = 'Displays data in rows and columns and enables a user to navigate its contents via directional navigation keys.';
 
 # Table
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx
index df218265d64..689e6fddd4a 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx
@@ -13,6 +13,7 @@ export const relatedPages = [
   {title: 'useTabs', url: 'https://react-spectrum.adobe.com/react-aria/useTabs.html'},
   {title: 'Testing', url: './Tabs/testing.html'}
 ];
+export const description = 'Organizes content into multiple sections and allows users to navigate between them.';
 
 # Tabs
 
diff --git a/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx b/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx
index 472218b461d..af5f8c4b09b 100644
--- a/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx
@@ -9,6 +9,7 @@ import Anatomy from '@react-aria/tag/docs/anatomy.svg';
 
 export const tags = ['chips', 'pills'];
 export const relatedPages = [{'title': 'useTagGroup', 'url': 'https://react-spectrum.adobe.com/react-aria/useTagGroup.html'}];
+export const description = 'A focusable list of labels, categories, keywords, filters, or other items.';
 
 # TagGroup
 
diff --git a/packages/dev/s2-docs/pages/react-aria/TextField.mdx b/packages/dev/s2-docs/pages/react-aria/TextField.mdx
index bd2629eb852..2a263fa4b11 100644
--- a/packages/dev/s2-docs/pages/react-aria/TextField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/TextField.mdx
@@ -10,6 +10,7 @@ import Anatomy from '@react-aria/textfield/docs/anatomy.svg';
 
 export const tags = ['input'];
 export const relatedPages = [{'title': 'useTextField', 'url': 'https://react-spectrum.adobe.com/react-aria/useTextField.html'}];
+export const description = 'Allows a user to enter a plain text value with a keyboard.';
 
 # TextField
 
diff --git a/packages/dev/s2-docs/pages/react-aria/TimeField.mdx b/packages/dev/s2-docs/pages/react-aria/TimeField.mdx
index 5aa02dd2c3e..d15774c68cc 100644
--- a/packages/dev/s2-docs/pages/react-aria/TimeField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/TimeField.mdx
@@ -10,6 +10,7 @@ import Anatomy from '@react-aria/datepicker/docs/timefield-anatomy.svg';
 
 export const tags = ['date', 'input'];
 export const relatedPages = [{'title': 'useTimeField', 'url': 'https://react-spectrum.adobe.com/react-aria/useTimeField.html'}];
+export const description = 'Allows users to enter and edit time values using a keyboard.';
 
 # TimeField
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Toast.mdx b/packages/dev/s2-docs/pages/react-aria/Toast.mdx
index 0b39ee77e56..ec14013517e 100644
--- a/packages/dev/s2-docs/pages/react-aria/Toast.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Toast.mdx
@@ -9,6 +9,8 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 
 export const tags = ['notifications'];
 export const version = 'alpha';
+export const relatedPages = [{'title': 'useToast', 'url': 'https://react-spectrum.adobe.com/react-aria/useToast.html'}];
+export const description = 'Displays brief, temporary notifications of actions, errors, or other events in an application.';
 
 # Toast
 
diff --git a/packages/dev/s2-docs/pages/react-aria/ToggleButton.mdx b/packages/dev/s2-docs/pages/react-aria/ToggleButton.mdx
index cf5048a5a03..1a0f5f091d0 100644
--- a/packages/dev/s2-docs/pages/react-aria/ToggleButton.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ToggleButton.mdx
@@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css';
 
 export const tags = ['button', 'btn'];
 export const relatedPages = [{'title': 'useToggleButton', 'url': 'https://react-spectrum.adobe.com/react-aria/useToggleButton.html'}];
+export const description = 'Allows a user to toggle a selection on or off.';
 
 # ToggleButton
 
diff --git a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx
index a3115e6e4ae..c7a64e89452 100644
--- a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx
@@ -7,6 +7,7 @@ import Anatomy from '@react-aria/button/docs/ToggleButtonGroupAnatomy.svg';
 
 export const tags = ['toggle', 'btn'];
 export const relatedPages = [{'title': 'useToggleButtonGroup', 'url': 'https://react-spectrum.adobe.com/react-aria/useToggleButtonGroup.html'}];
+export const description = 'Allows a user to toggle multiple options, with single or multiple selection.';
 
 # ToggleButtonGroup
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx
index 0f52b14a63a..282c1a2636d 100644
--- a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx
@@ -7,6 +7,7 @@ import Anatomy from '@react-aria/toolbar/docs/toolbar-anatomy.svg';
 
 export const tags = ['group'];
 export const relatedPages = [{'title': 'useToolbar', 'url': 'https://react-spectrum.adobe.com/react-aria/useToolbar.html'}];
+export const description = 'A container for a set of interactive controls, such as buttons, dropdown menus, or checkboxes.';
 
 # Toolbar
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx
index 6beda0e9349..c5f8534d342 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx
@@ -9,6 +9,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['hint', 'popup', 'info'];
 export const relatedPages = [{'title': 'useTooltipTrigger', 'url': 'https://react-spectrum.adobe.com/react-aria/useTooltipTrigger.html'}];
+export const description = 'Displays a description of an element on hover or focus.';
 
 # Tooltip
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Tree.mdx b/packages/dev/s2-docs/pages/react-aria/Tree.mdx
index 49d25521ab6..e318dc15ce8 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tree.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tree.mdx
@@ -12,6 +12,7 @@ export const tags = ['data', 'tree', 'nested', 'hierarchy'];
 export const relatedPages = [
   {title: 'Testing', url: './Tree/testing.html'}
 ];
+export const description = 'Provides users with a way to navigate nested hierarchical information.';
 
 # Tree
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx b/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx
index bcc24aa04b2..40b0c6b3a87 100644
--- a/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx
@@ -5,6 +5,7 @@ import docs from 'docs:react-aria-components';
 import {GroupedPropTable} from '../../src/PropTable';
 
 export const tags = ['windowing', 'list', 'grid', 'infinite'];
+export const description = 'Renders a scrollable collection of data using customizable layouts.';
 
 # Virtualizer
 
diff --git a/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx b/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx
index 1c59d28d698..23fad7226f7 100644
--- a/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx
@@ -13,6 +13,7 @@ import docs from 'docs:@react-aria/visually-hidden';
 import {FunctionAPI} from '../../src/FunctionAPI';
 
 export const section = 'Utilities';
+export const description = 'Hides its children visually but keeps content accessible to screen readers.';
 
 # VisuallyHidden
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/index.mdx b/packages/dev/s2-docs/pages/react-aria/blog/index.mdx
index dd6e3fcb049..b1ef5236044 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/index.mdx
@@ -16,6 +16,7 @@ export const hideNav = true;
 export const section = 'Blog';
 export const title = 'Blog';
 export const hideFromSearch = true;
+export const description = 'Blog posts from the React Aria team.';
 export const tags = ['blog', 'articles', 'posts'];
 export const isPostList = true;
 
diff --git a/packages/dev/s2-docs/pages/react-aria/examples/index.mdx b/packages/dev/s2-docs/pages/react-aria/examples/index.mdx
index 202a3363822..83c6c91651b 100644
--- a/packages/dev/s2-docs/pages/react-aria/examples/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/examples/index.mdx
@@ -5,6 +5,7 @@ export const section = 'Overview';
 export const hideFromSearch = true;
 export const title = 'Examples';
 export const isPostList = true;
+export const description = 'Examples built with React Aria.';
 
 # Examples
 
diff --git a/packages/dev/s2-docs/pages/react-aria/index.mdx b/packages/dev/s2-docs/pages/react-aria/index.mdx
index 92a588f780e..37f5fb65afd 100644
--- a/packages/dev/s2-docs/pages/react-aria/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/index.mdx
@@ -25,6 +25,7 @@ import SearchMenuWrapper from '../../src/SearchMenuWrapper';
 export const section = 'Overview';
 export const title = 'Home';
 export const hideFromSearch = true;
+export const description = 'Accessible, high quality UI components and hooks for building design systems.';
 
 <html>
   <head>
diff --git a/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx b/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx
index 5bd8bf6b915..ccb7909b895 100644
--- a/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx
@@ -13,6 +13,7 @@ import docs from 'docs:@react-aria/utils';
 import {FunctionAPI} from '../../src/FunctionAPI';
 
 export const section = 'Utilities';
+export const description = 'Combines multiple prop objects together, merging event handlers, classNames, styles, and other properties.';
 
 # mergeProps
 
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/index.mdx b/packages/dev/s2-docs/pages/react-aria/releases/index.mdx
index f10e1b48439..7a2d9c2b43f 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/index.mdx
@@ -17,6 +17,7 @@ export const tags = ['changelog', 'versions', 'updates'];
 export const title = 'Releases';
 export const hideFromSearch = true;
 export const isPostList = true;
+export const description = 'Release notes for React Aria.';
 
 # Releases
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx b/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx
index e60693d2d9a..4bfddecdf88 100644
--- a/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx
@@ -15,6 +15,7 @@ import docs from 'docs:@react-aria/dnd';
 import sharedDocs from 'docs:@react-types/shared/src/dnd.d.ts';
 
 export const section = 'Interactions';
+export const description = 'Handles interactions with the clipboard, including copy and paste operations.';
 
 # useClipboard
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useCollator.mdx b/packages/dev/s2-docs/pages/react-aria/useCollator.mdx
index eae2aa7f72f..128f7f72898 100644
--- a/packages/dev/s2-docs/pages/react-aria/useCollator.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useCollator.mdx
@@ -13,7 +13,7 @@ import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/i18n';
 
 export const section = 'Utilities';
-export const description = 'Implementing collections in React Aria';
+export const description = 'Wraps Intl.Collator and compares and sorts strings according to the current locale.';
 
 
 # useCollator
diff --git a/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx b/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx
index 2200b1df9be..f8335a739dc 100644
--- a/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx
@@ -14,7 +14,7 @@ import {InterfaceType} from '../../src/types';
 import docs from 'docs:@react-aria/i18n';
 
 export const section = 'Utilities';
-export const description = 'Implementing collections in React Aria';
+export const description = 'Wraps Intl.DateTimeFormat and formats dates for the current locale.';
 
 # useDateFormatter
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useDrag.mdx b/packages/dev/s2-docs/pages/react-aria/useDrag.mdx
index f23fce97bb4..ab28cda2797 100644
--- a/packages/dev/s2-docs/pages/react-aria/useDrag.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useDrag.mdx
@@ -16,6 +16,7 @@ import docs from 'docs:@react-aria/dnd';
 import sharedDocs from 'docs:@react-types/shared/src/dnd.d.ts';
 
 export const section = 'Interactions';
+export const description = 'Handles drag interactions for an element, providing accessibility and cross-browser support.';
 
 # useDrag
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useDrop.mdx b/packages/dev/s2-docs/pages/react-aria/useDrop.mdx
index 3c8d7eca42e..3a7b936cb24 100644
--- a/packages/dev/s2-docs/pages/react-aria/useDrop.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useDrop.mdx
@@ -16,6 +16,7 @@ import sharedDocs from 'docs:@react-types/shared/src/dnd.d.ts';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
 
 export const section = 'Interactions';
+export const description = 'Handles drop interactions for a target element, providing accessibility and cross-browser support.';
 
 # useDrop
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useField.mdx b/packages/dev/s2-docs/pages/react-aria/useField.mdx
index 5d337f9d0b0..236e7a63788 100644
--- a/packages/dev/s2-docs/pages/react-aria/useField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useField.mdx
@@ -14,6 +14,7 @@ import {FunctionAPI} from '../../src/FunctionAPI';
 import {InterfaceType} from '../../src/types';
 
 export const section = 'Utilities';
+export const description = 'Provides accessibility and labeling support for form field components.';
 
 # useField
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useFilter.mdx b/packages/dev/s2-docs/pages/react-aria/useFilter.mdx
index 8cbcb7121d0..167ca7a72ac 100644
--- a/packages/dev/s2-docs/pages/react-aria/useFilter.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useFilter.mdx
@@ -13,7 +13,7 @@ import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/i18n';
 
 export const section = 'Utilities';
-export const description = 'Implementing collections in React Aria';
+export const description = 'Provides locale-sensitive string matching for filtering and searching.';
 
 # useFilter
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocus.mdx b/packages/dev/s2-docs/pages/react-aria/useFocus.mdx
index db4b707e80c..481a84271b0 100644
--- a/packages/dev/s2-docs/pages/react-aria/useFocus.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useFocus.mdx
@@ -13,6 +13,7 @@ import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/interactions';
 import {InterfaceType} from '../../src/types';
 export const section = 'Interactions';
+export const description = 'Handles focus events for the target element only, not descendants.';
 
 # useFocus
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx
index d3c3cae7a4b..7fba23c08d3 100644
--- a/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx
@@ -14,6 +14,7 @@ import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/focus';
 
 export const section = 'Interactions';
+export const description = 'Determines whether a focus ring should be displayed for keyboard focus.';
 
 # useFocusRing
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx
index 53b02e28e41..f70608fcfc3 100644
--- a/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx
@@ -14,6 +14,7 @@ import {InterfaceType} from '../../src/types';
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/interactions';
 export const section = 'Interactions';
+export const description = 'Determines whether keyboard focus should be visible based on interaction mode.';
 
 # useFocusVisible
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx
index aa2aa2b4ae6..e798626f53a 100644
--- a/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx
@@ -13,6 +13,7 @@ import {InterfaceType} from '../../src/types';
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/interactions';
 export const section = 'Interactions';
+export const description = 'Handles focus interactions for an element and its descendants.';
 
 # useFocusWithin
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useHover.mdx b/packages/dev/s2-docs/pages/react-aria/useHover.mdx
index b834c730e12..54be1e4eb45 100644
--- a/packages/dev/s2-docs/pages/react-aria/useHover.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useHover.mdx
@@ -14,6 +14,7 @@ import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/interactions';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
 export const section = 'Interactions';
+export const description = 'Handles hover interactions with proper support for touch devices.';
 
 # useHover
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useId.mdx b/packages/dev/s2-docs/pages/react-aria/useId.mdx
index c68111d397b..8d37f686f0f 100644
--- a/packages/dev/s2-docs/pages/react-aria/useId.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useId.mdx
@@ -13,6 +13,7 @@ import docs from 'docs:@react-aria/utils';
 import {FunctionAPI} from '../../src/FunctionAPI';
 
 export const section = 'Utilities';
+export const description = 'Generates unique element ids with SSR support.';
 
 # useId
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx b/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx
index 0a0c6cdcc81..8bffb01881f 100644
--- a/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx
@@ -13,6 +13,7 @@ import docs from 'docs:@react-aria/ssr';
 import {FunctionAPI} from '../../src/FunctionAPI';
 
 export const section = 'Utilities';
+export const description = 'Returns whether the app is currently in server-side rendering or hydration.';
 
 # useIsSSR
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx b/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx
index d969cd86d47..625c1c0e0e2 100644
--- a/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx
@@ -13,6 +13,7 @@ import {InterfaceType} from '../../src/types';
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/interactions';
 export const section = 'Interactions';
+export const description = 'Handles keyboard interactions with improved event propagation behavior.';
 
 # useKeyboard
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useLabel.mdx b/packages/dev/s2-docs/pages/react-aria/useLabel.mdx
index f912caff4b7..1e345bb8e52 100644
--- a/packages/dev/s2-docs/pages/react-aria/useLabel.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useLabel.mdx
@@ -14,6 +14,7 @@ import {FunctionAPI} from '../../src/FunctionAPI';
 import {InterfaceType} from '../../src/types';
 
 export const section = 'Utilities';
+export const description = 'Associates a label with a form field for accessibility.';
 
 # useLabel
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx b/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx
index 74714b61f1d..c8c78745f2b 100644
--- a/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx
@@ -13,6 +13,7 @@ import {InterfaceType} from '../../src/types';
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/landmark';
 export const section = 'Interactions';
+export const description = 'Enables keyboard navigation between page landmarks.';
 
 # useLandmark
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useLocale.mdx b/packages/dev/s2-docs/pages/react-aria/useLocale.mdx
index 5acf845fd6d..ec59bd6cf6c 100644
--- a/packages/dev/s2-docs/pages/react-aria/useLocale.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useLocale.mdx
@@ -13,7 +13,7 @@ import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/i18n';
 
 export const section = 'Utilities';
-export const description = 'Implementing collections in React Aria';
+export const description = 'Provides access to the current locale and layout direction.';
 
 # useLocale
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx b/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx
index f1aecc1e016..560827c67f7 100644
--- a/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx
@@ -14,6 +14,7 @@ import docs from 'docs:@react-aria/interactions';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
 import {InterfaceType} from '../../src/types';
 export const section = 'Interactions';
+export const description = 'Handles long press interactions across mouse and touch devices.';
 
 # useLongPress
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useMove.mdx b/packages/dev/s2-docs/pages/react-aria/useMove.mdx
index 3891c093099..b8b1db60d4a 100644
--- a/packages/dev/s2-docs/pages/react-aria/useMove.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useMove.mdx
@@ -14,6 +14,7 @@ import docs from 'docs:@react-aria/interactions';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
 import {InterfaceType} from '../../src/types';
 export const section = 'Interactions';
+export const description = 'Handles move interactions for pointer and keyboard, useful for sliders and drag operations.';
 
 # useMove
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx b/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx
index a094baf1ab3..8a6a78028dc 100644
--- a/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx
@@ -15,7 +15,7 @@ import docs from 'docs:@react-aria/i18n';
 import typeDocs from 'docs:@internationalized/number';
 
 export const section = 'Utilities';
-export const description = 'Implementing collections in React Aria';
+export const description = 'Wraps Intl.NumberFormat and formats numbers for the current locale.';
 
 # useNumberFormatter
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useObjectRef.mdx b/packages/dev/s2-docs/pages/react-aria/useObjectRef.mdx
index 295b57c23e3..895bdb83666 100644
--- a/packages/dev/s2-docs/pages/react-aria/useObjectRef.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useObjectRef.mdx
@@ -13,6 +13,7 @@ import docs from 'docs:@react-aria/utils';
 import {FunctionAPI} from '../../src/FunctionAPI';
 
 export const section = 'Utilities';
+export const description = 'Converts a callback ref or object ref to an object ref.';
 
 # useObjectRef
 
diff --git a/packages/dev/s2-docs/pages/react-aria/usePress.mdx b/packages/dev/s2-docs/pages/react-aria/usePress.mdx
index 7e118b18af9..3ba871e4cf2 100644
--- a/packages/dev/s2-docs/pages/react-aria/usePress.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/usePress.mdx
@@ -14,6 +14,7 @@ import docs from 'docs:@react-aria/interactions';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
 import {InterfaceType} from '../../src/types';
 export const section = 'Interactions';
+export const description = 'Handles press interactions across mouse, touch, and keyboard.';
 
 # usePress
 
diff --git a/packages/dev/s2-docs/pages/s2/Accordion.mdx b/packages/dev/s2-docs/pages/s2/Accordion.mdx
index 305acb95dd3..5af1318f734 100644
--- a/packages/dev/s2-docs/pages/s2/Accordion.mdx
+++ b/packages/dev/s2-docs/pages/s2/Accordion.mdx
@@ -4,6 +4,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['collapsible', 'expandable', 'disclosure'];
+export const description = 'A grouping of related disclosures.';
 
 # Accordion
 
diff --git a/packages/dev/s2-docs/pages/s2/ActionBar.mdx b/packages/dev/s2-docs/pages/s2/ActionBar.mdx
index 6793685fca7..52161cc8ad1 100644
--- a/packages/dev/s2-docs/pages/s2/ActionBar.mdx
+++ b/packages/dev/s2-docs/pages/s2/ActionBar.mdx
@@ -4,6 +4,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['toolbar'];
+export const description = 'Used when a user needs to perform actions on one or more items at the same time.';
 
 # ActionBar
 
diff --git a/packages/dev/s2-docs/pages/s2/ActionButton.mdx b/packages/dev/s2-docs/pages/s2/ActionButton.mdx
index 67d396871f7..93b904f174f 100644
--- a/packages/dev/s2-docs/pages/s2/ActionButton.mdx
+++ b/packages/dev/s2-docs/pages/s2/ActionButton.mdx
@@ -5,6 +5,7 @@ import {ActionButton} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = [];
+export const description = 'Allows a user to perform an action.';
 
 # ActionButton
 
diff --git a/packages/dev/s2-docs/pages/s2/ActionButtonGroup.mdx b/packages/dev/s2-docs/pages/s2/ActionButtonGroup.mdx
index 8ff16cf5942..d0fd10694ad 100644
--- a/packages/dev/s2-docs/pages/s2/ActionButtonGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/ActionButtonGroup.mdx
@@ -4,6 +4,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['group'];
+export const description = 'A grouping of related ActionButtons.';
 
 # ActionButtonGroup
 
diff --git a/packages/dev/s2-docs/pages/s2/ActionMenu.mdx b/packages/dev/s2-docs/pages/s2/ActionMenu.mdx
index 3a90c41eeef..5e5683571f5 100644
--- a/packages/dev/s2-docs/pages/s2/ActionMenu.mdx
+++ b/packages/dev/s2-docs/pages/s2/ActionMenu.mdx
@@ -4,6 +4,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['dropdown'];
+export const description = 'Combines an ActionButton with a Menu for simple "more actions" use cases.';
 
 # ActionMenu
 
diff --git a/packages/dev/s2-docs/pages/s2/Avatar.mdx b/packages/dev/s2-docs/pages/s2/Avatar.mdx
index 39e9a138afe..175164c3a86 100644
--- a/packages/dev/s2-docs/pages/s2/Avatar.mdx
+++ b/packages/dev/s2-docs/pages/s2/Avatar.mdx
@@ -5,6 +5,7 @@ import {Avatar} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['profile', 'user'];
+export const description = 'A thumbnail representation of an entity, such as a user or an organization.';
 
 # Avatar
 
diff --git a/packages/dev/s2-docs/pages/s2/AvatarGroup.mdx b/packages/dev/s2-docs/pages/s2/AvatarGroup.mdx
index abe911f1e0c..137493ff837 100644
--- a/packages/dev/s2-docs/pages/s2/AvatarGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/AvatarGroup.mdx
@@ -4,6 +4,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['profile', 'user'];
+export const description = 'A grouping of avatars that are related to each other.';
 
 # AvatarGroup
 
diff --git a/packages/dev/s2-docs/pages/s2/Badge.mdx b/packages/dev/s2-docs/pages/s2/Badge.mdx
index 63b0efc7b00..67d3b30eb01 100644
--- a/packages/dev/s2-docs/pages/s2/Badge.mdx
+++ b/packages/dev/s2-docs/pages/s2/Badge.mdx
@@ -5,6 +5,7 @@ import {Badge, Text} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['label', 'tag', 'chip'];
+export const description = 'Displays color-categorized metadata for an object.';
 
 # Badge
 
diff --git a/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx b/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx
index c8480681a01..f175194fc0a 100644
--- a/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx
+++ b/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx
@@ -5,6 +5,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['navigation'];
+export const description = 'Display a hierarchy of links to the current page or resource.';
 
 # Breadcrumbs
 
diff --git a/packages/dev/s2-docs/pages/s2/Button.mdx b/packages/dev/s2-docs/pages/s2/Button.mdx
index e6640c6946c..f1ace12b36c 100644
--- a/packages/dev/s2-docs/pages/s2/Button.mdx
+++ b/packages/dev/s2-docs/pages/s2/Button.mdx
@@ -5,6 +5,7 @@ import {Button} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['btn'];
+export const description = 'Allows a user to perform an action or to navigate to another page.';
 
 # Button
 
diff --git a/packages/dev/s2-docs/pages/s2/ButtonGroup.mdx b/packages/dev/s2-docs/pages/s2/ButtonGroup.mdx
index 3a37dacfd52..b7b641f10ca 100644
--- a/packages/dev/s2-docs/pages/s2/ButtonGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/ButtonGroup.mdx
@@ -5,6 +5,7 @@ import {ButtonGroup, Button} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = [];
+export const description = 'A grouping of buttons whose actions are related to each other.';
 
 # ButtonGroup
 
diff --git a/packages/dev/s2-docs/pages/s2/Calendar.mdx b/packages/dev/s2-docs/pages/s2/Calendar.mdx
index d06db8c2ffb..f34898958d8 100644
--- a/packages/dev/s2-docs/pages/s2/Calendar.mdx
+++ b/packages/dev/s2-docs/pages/s2/Calendar.mdx
@@ -5,6 +5,7 @@ import {Calendar} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['date'];
+export const description = 'Allows a user to select a single date from a date grid.';
 
 # Calendar
 
diff --git a/packages/dev/s2-docs/pages/s2/Card.mdx b/packages/dev/s2-docs/pages/s2/Card.mdx
index b663040d504..c260593edf9 100644
--- a/packages/dev/s2-docs/pages/s2/Card.mdx
+++ b/packages/dev/s2-docs/pages/s2/Card.mdx
@@ -4,6 +4,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['box'];
+export const description = 'Summarizes an object that a user can select or navigate to.';
 
 # Card
 
diff --git a/packages/dev/s2-docs/pages/s2/CardView.mdx b/packages/dev/s2-docs/pages/s2/CardView.mdx
index f641e28b8f9..8b1ac96edf6 100644
--- a/packages/dev/s2-docs/pages/s2/CardView.mdx
+++ b/packages/dev/s2-docs/pages/s2/CardView.mdx
@@ -4,6 +4,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['grid', 'gallery'];
+export const description = 'Displays a group of related objects, with support for selection and bulk actions.';
 
 # CardView
 
diff --git a/packages/dev/s2-docs/pages/s2/Checkbox.mdx b/packages/dev/s2-docs/pages/s2/Checkbox.mdx
index fb56f3f0bf6..8a10aa4c827 100644
--- a/packages/dev/s2-docs/pages/s2/Checkbox.mdx
+++ b/packages/dev/s2-docs/pages/s2/Checkbox.mdx
@@ -5,6 +5,7 @@ import {Checkbox} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = [];
+export const description = 'Allows a user to select an individual option.';
 
 # Checkbox
 
diff --git a/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx
index a680f8ce2ab..1b2ccd1d7a7 100644
--- a/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx
@@ -8,6 +8,7 @@ export const tags = [];
 export const relatedPages = [
   {title: 'Testing', url: './CheckboxGroup/testing.html'}
 ];
+export const description = 'Allows a user to select one or more items in a list of options.';
 
 # CheckboxGroup
 
diff --git a/packages/dev/s2-docs/pages/s2/ColorArea.mdx b/packages/dev/s2-docs/pages/s2/ColorArea.mdx
index c2f54f2a509..5e68b992f6f 100644
--- a/packages/dev/s2-docs/pages/s2/ColorArea.mdx
+++ b/packages/dev/s2-docs/pages/s2/ColorArea.mdx
@@ -6,6 +6,7 @@ import docs from 'docs:@react-spectrum/s2';
 import racDocs from 'docs:react-aria-components';
 
 export const tags = [];
+export const description = 'Allows users to adjust two channels of a color value.';
 
 # ColorArea
 
diff --git a/packages/dev/s2-docs/pages/s2/ColorField.mdx b/packages/dev/s2-docs/pages/s2/ColorField.mdx
index a876d7194cc..0258fd7fb8b 100644
--- a/packages/dev/s2-docs/pages/s2/ColorField.mdx
+++ b/packages/dev/s2-docs/pages/s2/ColorField.mdx
@@ -5,6 +5,7 @@ import {ColorField} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = [];
+export const description = 'Allows users to edit a hex color or individual color channel value.';
 
 # ColorField
 
diff --git a/packages/dev/s2-docs/pages/s2/ColorSlider.mdx b/packages/dev/s2-docs/pages/s2/ColorSlider.mdx
index ee7b72c0e1c..486f6914ce4 100644
--- a/packages/dev/s2-docs/pages/s2/ColorSlider.mdx
+++ b/packages/dev/s2-docs/pages/s2/ColorSlider.mdx
@@ -5,6 +5,7 @@ import {ColorSlider} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = [];
+export const description = 'Allows users to adjust an individual channel of a color value.';
 
 # ColorSlider
 
diff --git a/packages/dev/s2-docs/pages/s2/ColorSwatch.mdx b/packages/dev/s2-docs/pages/s2/ColorSwatch.mdx
index 8b99e7d45ae..6883615ff28 100644
--- a/packages/dev/s2-docs/pages/s2/ColorSwatch.mdx
+++ b/packages/dev/s2-docs/pages/s2/ColorSwatch.mdx
@@ -5,6 +5,7 @@ import {ColorSwatch} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = [];
+export const description = 'Displays a preview of a selected color.';
 
 # ColorSwatch
 
diff --git a/packages/dev/s2-docs/pages/s2/ColorSwatchPicker.mdx b/packages/dev/s2-docs/pages/s2/ColorSwatchPicker.mdx
index fbae353e8aa..8ac84a99ec7 100644
--- a/packages/dev/s2-docs/pages/s2/ColorSwatchPicker.mdx
+++ b/packages/dev/s2-docs/pages/s2/ColorSwatchPicker.mdx
@@ -5,6 +5,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = [];
+export const description = 'Displays a list of color swatches and allows a user to select one of them.';
 
 # ColorSwatchPicker
 
diff --git a/packages/dev/s2-docs/pages/s2/ColorWheel.mdx b/packages/dev/s2-docs/pages/s2/ColorWheel.mdx
index fd06582c1cd..78ea21d77e8 100644
--- a/packages/dev/s2-docs/pages/s2/ColorWheel.mdx
+++ b/packages/dev/s2-docs/pages/s2/ColorWheel.mdx
@@ -5,6 +5,7 @@ import {ColorWheel} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = [];
+export const description = 'Allows users to adjust the hue of a color value on a circular track.';
 
 # ColorWheel
 
diff --git a/packages/dev/s2-docs/pages/s2/ComboBox.mdx b/packages/dev/s2-docs/pages/s2/ComboBox.mdx
index 4dbfb7d3e30..ab6cfabed07 100644
--- a/packages/dev/s2-docs/pages/s2/ComboBox.mdx
+++ b/packages/dev/s2-docs/pages/s2/ComboBox.mdx
@@ -8,6 +8,7 @@ export const tags = ['autocomplete', 'search', 'typeahead'];
 export const relatedPages = [
   {title: 'Testing', url: './ComboBox/testing.html'}
 ];
+export const description = 'Combines a text input with a listbox, and allows a user to filter a list of options.';
 
 # ComboBox
 
diff --git a/packages/dev/s2-docs/pages/s2/ContextualHelp.mdx b/packages/dev/s2-docs/pages/s2/ContextualHelp.mdx
index 2f76b45567d..27b57980390 100644
--- a/packages/dev/s2-docs/pages/s2/ContextualHelp.mdx
+++ b/packages/dev/s2-docs/pages/s2/ContextualHelp.mdx
@@ -5,6 +5,7 @@ import {ContextualHelp, Heading, Content, Footer} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['help'];
+export const description = 'Shows extra information about an adjacent component.';
 
 # ContextualHelp
 
diff --git a/packages/dev/s2-docs/pages/s2/DateField.mdx b/packages/dev/s2-docs/pages/s2/DateField.mdx
index f20afb4c5b0..6ea11a47f77 100644
--- a/packages/dev/s2-docs/pages/s2/DateField.mdx
+++ b/packages/dev/s2-docs/pages/s2/DateField.mdx
@@ -5,6 +5,7 @@ import {DateField} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['calendar'];
+export const description = 'Allows a user to enter and edit date values using a keyboard.';
 
 # DateField
 
diff --git a/packages/dev/s2-docs/pages/s2/DatePicker.mdx b/packages/dev/s2-docs/pages/s2/DatePicker.mdx
index f0c83851e4f..dce61f145d2 100644
--- a/packages/dev/s2-docs/pages/s2/DatePicker.mdx
+++ b/packages/dev/s2-docs/pages/s2/DatePicker.mdx
@@ -5,6 +5,7 @@ import {DatePicker} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['calendar'];
+export const description = 'Combines a DateField and a Calendar popover.';
 
 # DatePicker
 
diff --git a/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx b/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx
index 7a8b8792244..38665aa6c77 100644
--- a/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx
+++ b/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx
@@ -5,6 +5,7 @@ import {DateRangePicker} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['calendar'];
+export const description = 'Combines two DateFields and a RangeCalendar popover.';
 
 # DateRangePicker
 
diff --git a/packages/dev/s2-docs/pages/s2/Dialog.mdx b/packages/dev/s2-docs/pages/s2/Dialog.mdx
index 6a3f3af9e92..d785787c318 100644
--- a/packages/dev/s2-docs/pages/s2/Dialog.mdx
+++ b/packages/dev/s2-docs/pages/s2/Dialog.mdx
@@ -8,6 +8,7 @@ export const tags = ['modal', 'popup', 'overlay'];
 export const relatedPages = [
   {title: 'Testing', url: './Dialog/testing.html'}
 ];
+export const description = 'An overlay shown above other content in an application.';
 
 # Dialog
 
diff --git a/packages/dev/s2-docs/pages/s2/Disclosure.mdx b/packages/dev/s2-docs/pages/s2/Disclosure.mdx
index 7aa0cf0b2cf..4cbad968113 100644
--- a/packages/dev/s2-docs/pages/s2/Disclosure.mdx
+++ b/packages/dev/s2-docs/pages/s2/Disclosure.mdx
@@ -5,6 +5,7 @@ import {Disclosure, DisclosureTitle, DisclosurePanel, DisclosureHeader, ActionBu
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['accordion', 'collapsible', 'expandable'];
+export const description = 'A collapsible section of content.';
 
 # Disclosure
 
diff --git a/packages/dev/s2-docs/pages/s2/Divider.mdx b/packages/dev/s2-docs/pages/s2/Divider.mdx
index 02dd3c132ce..d6314ba8cea 100644
--- a/packages/dev/s2-docs/pages/s2/Divider.mdx
+++ b/packages/dev/s2-docs/pages/s2/Divider.mdx
@@ -5,6 +5,7 @@ import {Divider} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['separator', 'hr', 'horizontal rule', 'line'];
+export const description = 'Brings clarity to a layout by grouping and dividing content in close proximity.';
 
 # Divider
 
diff --git a/packages/dev/s2-docs/pages/s2/DropZone.mdx b/packages/dev/s2-docs/pages/s2/DropZone.mdx
index c6b40508207..4e668184b04 100644
--- a/packages/dev/s2-docs/pages/s2/DropZone.mdx
+++ b/packages/dev/s2-docs/pages/s2/DropZone.mdx
@@ -4,6 +4,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['file', 'drag', 'upload'];
+export const description = 'An area into which one or multiple objects can be dragged and dropped.';
 
 # DropZone
 
diff --git a/packages/dev/s2-docs/pages/s2/Form.mdx b/packages/dev/s2-docs/pages/s2/Form.mdx
index d8c64df8097..19ecbe45d14 100644
--- a/packages/dev/s2-docs/pages/s2/Form.mdx
+++ b/packages/dev/s2-docs/pages/s2/Form.mdx
@@ -5,6 +5,7 @@ import {Form, TextField, Checkbox, Button, RadioGroup, Radio, InlineAlert, Headi
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['input', 'field'];
+export const description = 'Provides layout and alignment for a grouping of fields.';
 
 # Form
 
diff --git a/packages/dev/s2-docs/pages/s2/IllustratedMessage.mdx b/packages/dev/s2-docs/pages/s2/IllustratedMessage.mdx
index 565cf212191..6a385421cb2 100644
--- a/packages/dev/s2-docs/pages/s2/IllustratedMessage.mdx
+++ b/packages/dev/s2-docs/pages/s2/IllustratedMessage.mdx
@@ -5,6 +5,7 @@ import {IllustratedMessage, Heading, Content, Button} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['empty', 'placeholder', 'error'];
+export const description = 'Displays an illustration and a message, usually for an empty state or an error page.';
 
 # IllustratedMessage
 
diff --git a/packages/dev/s2-docs/pages/s2/Illustrations.mdx b/packages/dev/s2-docs/pages/s2/Illustrations.mdx
index 7ca25b39d6b..52f502bd93c 100644
--- a/packages/dev/s2-docs/pages/s2/Illustrations.mdx
+++ b/packages/dev/s2-docs/pages/s2/Illustrations.mdx
@@ -8,6 +8,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['svg', 'gradient', 'linear', 'symbol'];
+export const description = 'A collection of illustrations that can be imported from @react-spectrum/s2/illustrations.';
 
 # Illustrations
 
diff --git a/packages/dev/s2-docs/pages/s2/Image.mdx b/packages/dev/s2-docs/pages/s2/Image.mdx
index cee1784e3d8..6d9200dd9e3 100644
--- a/packages/dev/s2-docs/pages/s2/Image.mdx
+++ b/packages/dev/s2-docs/pages/s2/Image.mdx
@@ -5,6 +5,7 @@ import {Image} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['img', 'picture', 'photo'];
+export const description = 'Displays an image with support for skeleton loading and custom error states.';
 
 # Image
 
diff --git a/packages/dev/s2-docs/pages/s2/InlineAlert.mdx b/packages/dev/s2-docs/pages/s2/InlineAlert.mdx
index 73c74d94060..6567542668e 100644
--- a/packages/dev/s2-docs/pages/s2/InlineAlert.mdx
+++ b/packages/dev/s2-docs/pages/s2/InlineAlert.mdx
@@ -5,6 +5,7 @@ import {InlineAlert} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['alert', 'notification', 'banner', 'message'];
+export const description = 'Displays a non-modal message associated with objects in a view.';
 
 # InlineAlert
 
diff --git a/packages/dev/s2-docs/pages/s2/Link.mdx b/packages/dev/s2-docs/pages/s2/Link.mdx
index 844832dc262..fde2ccc3a92 100644
--- a/packages/dev/s2-docs/pages/s2/Link.mdx
+++ b/packages/dev/s2-docs/pages/s2/Link.mdx
@@ -5,6 +5,7 @@ import {Link, Text} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['anchor', 'hyperlink', 'href'];
+export const description = 'Allows a user to navigate to another page.';
 
 # Link
 
diff --git a/packages/dev/s2-docs/pages/s2/LinkButton.mdx b/packages/dev/s2-docs/pages/s2/LinkButton.mdx
index 2c1853cc3ac..3c8b2f641f2 100644
--- a/packages/dev/s2-docs/pages/s2/LinkButton.mdx
+++ b/packages/dev/s2-docs/pages/s2/LinkButton.mdx
@@ -5,6 +5,7 @@ import {LinkButton, Text} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['button'];
+export const description = 'Combines the functionality of a link with the appearance of a button.';
 
 # LinkButton
 
diff --git a/packages/dev/s2-docs/pages/s2/Menu.mdx b/packages/dev/s2-docs/pages/s2/Menu.mdx
index 8b2fd90c560..bbde6d3a089 100644
--- a/packages/dev/s2-docs/pages/s2/Menu.mdx
+++ b/packages/dev/s2-docs/pages/s2/Menu.mdx
@@ -8,6 +8,7 @@ export const tags = ['dropdown'];
 export const relatedPages = [
   {title: 'Testing', url: './Menu/testing.html'}
 ];
+export const description = 'Displays a list of actions or options that a user can choose.';
 
 # Menu
 
diff --git a/packages/dev/s2-docs/pages/s2/Meter.mdx b/packages/dev/s2-docs/pages/s2/Meter.mdx
index 60c35b2c4d1..4b55fcc6820 100644
--- a/packages/dev/s2-docs/pages/s2/Meter.mdx
+++ b/packages/dev/s2-docs/pages/s2/Meter.mdx
@@ -5,6 +5,7 @@ import {Meter} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['gauge', 'progress', 'level'];
+export const description = 'Represents a quantity within a known range, or a fractional value.';
 
 # Meter
 
diff --git a/packages/dev/s2-docs/pages/s2/NumberField.mdx b/packages/dev/s2-docs/pages/s2/NumberField.mdx
index 0b2d777374c..44c3a868d3e 100644
--- a/packages/dev/s2-docs/pages/s2/NumberField.mdx
+++ b/packages/dev/s2-docs/pages/s2/NumberField.mdx
@@ -5,6 +5,7 @@ import {NumberField} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['input'];
+export const description = 'Allows a user to enter, increment, or decrement a numeric value.';
 
 # NumberField
 
diff --git a/packages/dev/s2-docs/pages/s2/Picker.mdx b/packages/dev/s2-docs/pages/s2/Picker.mdx
index 3bebfcd8881..f68551b5ef8 100644
--- a/packages/dev/s2-docs/pages/s2/Picker.mdx
+++ b/packages/dev/s2-docs/pages/s2/Picker.mdx
@@ -8,6 +8,7 @@ export const tags = ['select', 'dropdown'];
 export const relatedPages = [
   {title: 'Testing', url: './Picker/testing.html'}
 ];
+export const description = 'Displays a collapsible list of options, and allows a user to select one of them.';
 
 # Picker
 
diff --git a/packages/dev/s2-docs/pages/s2/Popover.mdx b/packages/dev/s2-docs/pages/s2/Popover.mdx
index e0bf9ee4944..d142cb5a2ad 100644
--- a/packages/dev/s2-docs/pages/s2/Popover.mdx
+++ b/packages/dev/s2-docs/pages/s2/Popover.mdx
@@ -4,6 +4,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['popup', 'overlay'];
+export const description = 'Displays interactive content in context with a trigger element.';
 
 # Popover
 
diff --git a/packages/dev/s2-docs/pages/s2/ProgressBar.mdx b/packages/dev/s2-docs/pages/s2/ProgressBar.mdx
index 6175ec944e0..615d05facb9 100644
--- a/packages/dev/s2-docs/pages/s2/ProgressBar.mdx
+++ b/packages/dev/s2-docs/pages/s2/ProgressBar.mdx
@@ -5,6 +5,7 @@ import {ProgressBar} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['loading', 'progress'];
+export const description = 'Shows progress of an operation over time with a linear representation.';
 
 # ProgressBar
 
diff --git a/packages/dev/s2-docs/pages/s2/ProgressCircle.mdx b/packages/dev/s2-docs/pages/s2/ProgressCircle.mdx
index 026c69f62ea..f02bbae35f1 100644
--- a/packages/dev/s2-docs/pages/s2/ProgressCircle.mdx
+++ b/packages/dev/s2-docs/pages/s2/ProgressCircle.mdx
@@ -5,6 +5,7 @@ import {ProgressCircle} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['spinner', 'circular', 'loading'];
+export const description = 'Shows progress of an operation over time with a circular representation.';
 
 # ProgressCircle
 
diff --git a/packages/dev/s2-docs/pages/s2/Provider.mdx b/packages/dev/s2-docs/pages/s2/Provider.mdx
index ecf2a093b6e..36cd2fc6843 100644
--- a/packages/dev/s2-docs/pages/s2/Provider.mdx
+++ b/packages/dev/s2-docs/pages/s2/Provider.mdx
@@ -7,6 +7,8 @@ import {Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/s2';
 export const section = 'Components';
 import docs from 'docs:@react-spectrum/s2';
 
+export const description = 'The container for all React Spectrum components.';
+
 # Provider
 
 <PageDescription>{docs.exports.Provider.description}</PageDescription>
diff --git a/packages/dev/s2-docs/pages/s2/RadioGroup.mdx b/packages/dev/s2-docs/pages/s2/RadioGroup.mdx
index dc86d41a0bc..cff76d42d75 100644
--- a/packages/dev/s2-docs/pages/s2/RadioGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/RadioGroup.mdx
@@ -8,6 +8,7 @@ export const tags = ['input'];
 export const relatedPages = [
   {title: 'Testing', url: './RadioGroup/testing.html'}
 ];
+export const description = 'Allows a user to select a single item from a list of options.';
 
 # RadioGroup
 
diff --git a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx
index a9df14504c0..c3df01d926f 100644
--- a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx
+++ b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx
@@ -5,6 +5,7 @@ import {RangeCalendar} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['calendar'];
+export const description = 'Allows a user to select a contiguous range of dates.';
 
 # RangeCalendar
 
diff --git a/packages/dev/s2-docs/pages/s2/RangeSlider.mdx b/packages/dev/s2-docs/pages/s2/RangeSlider.mdx
index d236c22eb3b..4122a5dba18 100644
--- a/packages/dev/s2-docs/pages/s2/RangeSlider.mdx
+++ b/packages/dev/s2-docs/pages/s2/RangeSlider.mdx
@@ -5,6 +5,7 @@ import {RangeSlider} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['slider'];
+export const description = 'Allows a user to select a range of values within a larger range.';
 
 # RangeSlider
 
diff --git a/packages/dev/s2-docs/pages/s2/SearchField.mdx b/packages/dev/s2-docs/pages/s2/SearchField.mdx
index 93edb280ce1..247cf7efd45 100644
--- a/packages/dev/s2-docs/pages/s2/SearchField.mdx
+++ b/packages/dev/s2-docs/pages/s2/SearchField.mdx
@@ -5,6 +5,7 @@ import {SearchField} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['input'];
+export const description = 'Allows a user to enter and clear a search query.';
 
 # SearchField
 
diff --git a/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx b/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx
index c38da282644..f2d9fbdae53 100644
--- a/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx
+++ b/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx
@@ -5,6 +5,7 @@ import {SegmentedControl, SegmentedControlItem, Text} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['toggle group', 'tabs'];
+export const description = 'A mutually exclusive group of buttons used for view switching.';
 
 # SegmentedControl
 
diff --git a/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx b/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx
index 49dd45914c4..42493a86a5c 100644
--- a/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx
@@ -6,6 +6,7 @@ import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['box'];
 export const version = 'alpha';
+export const description = 'Allows users to select one or more options from a list.';
 
 # SelectBoxGroup
 
diff --git a/packages/dev/s2-docs/pages/s2/Skeleton.mdx b/packages/dev/s2-docs/pages/s2/Skeleton.mdx
index e82018cb1af..48c974388a8 100644
--- a/packages/dev/s2-docs/pages/s2/Skeleton.mdx
+++ b/packages/dev/s2-docs/pages/s2/Skeleton.mdx
@@ -4,6 +4,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['loading', 'placeholder', 'shimmer', 'ghost'];
+export const description = 'Wraps around content to render it as a placeholder.';
 
 # Skeleton
 
diff --git a/packages/dev/s2-docs/pages/s2/Slider.mdx b/packages/dev/s2-docs/pages/s2/Slider.mdx
index 60fee9a47c2..c7b67b3bdce 100644
--- a/packages/dev/s2-docs/pages/s2/Slider.mdx
+++ b/packages/dev/s2-docs/pages/s2/Slider.mdx
@@ -5,6 +5,7 @@ import {Slider} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['range input', 'track', 'scrubber'];
+export const description = 'Allows a user to select a numeric value within a range.';
 
 # Slider
 
diff --git a/packages/dev/s2-docs/pages/s2/StatusLight.mdx b/packages/dev/s2-docs/pages/s2/StatusLight.mdx
index 4accd00bd9a..3b93f6ea269 100644
--- a/packages/dev/s2-docs/pages/s2/StatusLight.mdx
+++ b/packages/dev/s2-docs/pages/s2/StatusLight.mdx
@@ -5,6 +5,7 @@ import {StatusLight} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['indicator', 'dot', 'badge'];
+export const description = 'Displays the status or category of an entity.';
 
 # StatusLight
 
diff --git a/packages/dev/s2-docs/pages/s2/Switch.mdx b/packages/dev/s2-docs/pages/s2/Switch.mdx
index c6335487386..7832c828c15 100644
--- a/packages/dev/s2-docs/pages/s2/Switch.mdx
+++ b/packages/dev/s2-docs/pages/s2/Switch.mdx
@@ -5,6 +5,7 @@ import {Switch} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['toggle', 'input'];
+export const description = 'Allows a user to turn a setting on or off.';
 
 # Switch
 
diff --git a/packages/dev/s2-docs/pages/s2/TableView.mdx b/packages/dev/s2-docs/pages/s2/TableView.mdx
index 2ebbaa14257..0cce1a7274f 100644
--- a/packages/dev/s2-docs/pages/s2/TableView.mdx
+++ b/packages/dev/s2-docs/pages/s2/TableView.mdx
@@ -8,6 +8,7 @@ export const tags = ['table', 'data', 'grid'];
 export const relatedPages = [
   {title: 'Testing', url: './TableView/testing.html'}
 ];
+export const description = 'Displays data in rows and columns, with row selection and sorting.';
 
 # TableView
 
diff --git a/packages/dev/s2-docs/pages/s2/Tabs.mdx b/packages/dev/s2-docs/pages/s2/Tabs.mdx
index 04bcd1031b3..cec7f9a7680 100644
--- a/packages/dev/s2-docs/pages/s2/Tabs.mdx
+++ b/packages/dev/s2-docs/pages/s2/Tabs.mdx
@@ -7,6 +7,7 @@ export const tags = ['navigation'];
 export const relatedPages = [
   {title: 'Testing', url: './Tabs/testing.html'}
 ];
+export const description = 'Organize content into multiple sections, and allow a user to view one at a time.';
 
 # Tabs
 
diff --git a/packages/dev/s2-docs/pages/s2/TagGroup.mdx b/packages/dev/s2-docs/pages/s2/TagGroup.mdx
index 1226f2a49d1..a8ed2a7c272 100644
--- a/packages/dev/s2-docs/pages/s2/TagGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/TagGroup.mdx
@@ -4,6 +4,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['chips', 'pills'];
+export const description = 'Displays a list of items, with support for keyboard navigation and removal.';
 
 # TagGroup
 
diff --git a/packages/dev/s2-docs/pages/s2/TextArea.mdx b/packages/dev/s2-docs/pages/s2/TextArea.mdx
index 02e71c1522d..a80e5683b57 100644
--- a/packages/dev/s2-docs/pages/s2/TextArea.mdx
+++ b/packages/dev/s2-docs/pages/s2/TextArea.mdx
@@ -5,6 +5,7 @@ import {TextArea} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['multiline', 'input'];
+export const description = 'Allows a user to enter a multi-line text value with a keyboard.';
 
 # TextArea
 
diff --git a/packages/dev/s2-docs/pages/s2/TextField.mdx b/packages/dev/s2-docs/pages/s2/TextField.mdx
index 35fcb4217cc..57b48983963 100644
--- a/packages/dev/s2-docs/pages/s2/TextField.mdx
+++ b/packages/dev/s2-docs/pages/s2/TextField.mdx
@@ -5,6 +5,7 @@ import {TextField} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['input'];
+export const description = 'Allows a user to enter a plain text value with a keyboard.';
 
 # TextField
 
diff --git a/packages/dev/s2-docs/pages/s2/TimeField.mdx b/packages/dev/s2-docs/pages/s2/TimeField.mdx
index 1f86da27d77..83813395249 100644
--- a/packages/dev/s2-docs/pages/s2/TimeField.mdx
+++ b/packages/dev/s2-docs/pages/s2/TimeField.mdx
@@ -5,6 +5,7 @@ import {TimeField} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['date', 'input'];
+export const description = 'Allows a user to enter and edit time values using a keyboard.';
 
 # TimeField
 
diff --git a/packages/dev/s2-docs/pages/s2/Toast.mdx b/packages/dev/s2-docs/pages/s2/Toast.mdx
index c240cbc4750..203d5610b9a 100644
--- a/packages/dev/s2-docs/pages/s2/Toast.mdx
+++ b/packages/dev/s2-docs/pages/s2/Toast.mdx
@@ -8,6 +8,7 @@ import {VersionBadge} from '../../src/VersionBadge';
 
 export const tags = ['snackbar', 'notification', 'alert'];
 export const version = 'alpha';
+export const description = 'Displays a temporary notification of an action, error, or other event.';
 
 # Toast
 
diff --git a/packages/dev/s2-docs/pages/s2/ToggleButton.mdx b/packages/dev/s2-docs/pages/s2/ToggleButton.mdx
index 0363494bbd6..f1b59a43e87 100644
--- a/packages/dev/s2-docs/pages/s2/ToggleButton.mdx
+++ b/packages/dev/s2-docs/pages/s2/ToggleButton.mdx
@@ -5,6 +5,7 @@ import {ToggleButton, Text} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['button', 'btn'];
+export const description = 'Allows a user to toggle between two states.';
 
 # ToggleButton
 
diff --git a/packages/dev/s2-docs/pages/s2/ToggleButtonGroup.mdx b/packages/dev/s2-docs/pages/s2/ToggleButtonGroup.mdx
index dbec0acb6ed..d274e8393d3 100644
--- a/packages/dev/s2-docs/pages/s2/ToggleButtonGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/ToggleButtonGroup.mdx
@@ -5,6 +5,7 @@ import {ToggleButtonGroup, ToggleButton, Text} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['toggle', 'btn'];
+export const description = 'Allows a user to toggle multiple options, with single or multiple selection.';
 
 # ToggleButtonGroup
 
diff --git a/packages/dev/s2-docs/pages/s2/Tooltip.mdx b/packages/dev/s2-docs/pages/s2/Tooltip.mdx
index 914cda306a5..a2447def2b5 100644
--- a/packages/dev/s2-docs/pages/s2/Tooltip.mdx
+++ b/packages/dev/s2-docs/pages/s2/Tooltip.mdx
@@ -5,6 +5,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['hint', 'popup', 'info'];
+export const description = 'Displays a description of an element on hover or focus.';
 
 # Tooltip
 
diff --git a/packages/dev/s2-docs/pages/s2/TreeView.mdx b/packages/dev/s2-docs/pages/s2/TreeView.mdx
index 6185e931f4a..8947c8b7b9e 100644
--- a/packages/dev/s2-docs/pages/s2/TreeView.mdx
+++ b/packages/dev/s2-docs/pages/s2/TreeView.mdx
@@ -8,6 +8,7 @@ export const tags = ['hierarchy', 'data', 'nested'];
 export const relatedPages = [
   {title: 'Testing', url: './TreeView/testing.html'}
 ];
+export const description = 'Displays hierarchical data with selection and collapsing.';
 
 # TreeView
 
diff --git a/packages/dev/s2-docs/pages/s2/icons.mdx b/packages/dev/s2-docs/pages/s2/icons.mdx
index b0728970116..0b90bf84a08 100644
--- a/packages/dev/s2-docs/pages/s2/icons.mdx
+++ b/packages/dev/s2-docs/pages/s2/icons.mdx
@@ -10,6 +10,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['svg', 'workflow', 'symbol'];
+export const description = 'A collection of workflow icons that can be imported from @react-spectrum/s2/icons.';
 
 # Icons
 
diff --git a/packages/dev/s2-docs/pages/s2/index.mdx b/packages/dev/s2-docs/pages/s2/index.mdx
index 3d78809d26b..9d22d32ef54 100644
--- a/packages/dev/s2-docs/pages/s2/index.mdx
+++ b/packages/dev/s2-docs/pages/s2/index.mdx
@@ -6,6 +6,7 @@ import {ComponentCardView} from '../../src/ComponentCardView';
 
 export const section = 'Overview';
 export const title = 'Home';
+export const description = 'A React implementation of Spectrum, Adobe\'s design system.';
 export const omitFromNav = true;
 export const hideFromSearch = true;
 
@@ -16,75 +17,75 @@ export const hideFromSearch = true;
 [Getting started](getting-started.html) • [GitHub](https://github.com/adobe/react-spectrum)
 
 <ComponentCardView items={[
-  {id: 'Getting Started', name: 'Getting Started', href: 'getting-started.html'},
-  {id: 'Styling', name: 'Styling', href: 'styling.html'},
-  {id: 'Migrating', name: 'Migrating', href: 'migrating.html'},
-  {id: 'Accordion', name: 'Accordion', href: 'Accordion.html'},
-  {id: 'ActionBar', name: 'ActionBar', href: 'ActionBar.html'},
-  {id: 'ActionButton', name: 'ActionButton', href: 'ActionButton.html'},
-  {id: 'ActionButtonGroup', name: 'ActionButtonGroup', href: 'ActionButtonGroup.html'},
-  {id: 'ActionMenu', name: 'ActionMenu', href: 'ActionMenu.html'},
-  {id: 'Avatar', name: 'Avatar', href: 'Avatar.html'},
-  {id: 'AvatarGroup', name: 'AvatarGroup', href: 'AvatarGroup.html'},
-  {id: 'Badge', name: 'Badge', href: 'Badge.html'},
-  {id: 'Breadcrumbs', name: 'Breadcrumbs', href: 'Breadcrumbs.html'},
-  {id: 'Button', name: 'Button', href: 'Button.html'},
-  {id: 'ButtonGroup', name: 'ButtonGroup', href: 'ButtonGroup.html'},
-  {id: 'Calendar', name: 'Calendar', href: 'Calendar.html'},
-  {id: 'Card', name: 'Card', href: 'Card.html'},
-  {id: 'CardView', name: 'CardView', href: 'CardView.html'},
-  {id: 'Checkbox', name: 'Checkbox', href: 'Checkbox.html'},
-  {id: 'CheckboxGroup', name: 'CheckboxGroup', href: 'CheckboxGroup.html'},
-  {id: 'ColorArea', name: 'ColorArea', href: 'ColorArea.html'},
-  {id: 'ColorField', name: 'ColorField', href: 'ColorField.html'},
-  {id: 'ColorSlider', name: 'ColorSlider', href: 'ColorSlider.html'},
-  {id: 'ColorSwatch', name: 'ColorSwatch', href: 'ColorSwatch.html'},
-  {id: 'ColorSwatchPicker', name: 'ColorSwatchPicker', href: 'ColorSwatchPicker.html'},
-  {id: 'ColorWheel', name: 'ColorWheel', href: 'ColorWheel.html'},
-  {id: 'ComboBox', name: 'ComboBox', href: 'ComboBox.html'},
-  {id: 'ContextualHelp', name: 'ContextualHelp', href: 'ContextualHelp.html'},
-  {id: 'DateField', name: 'DateField', href: 'DateField.html'},
-  {id: 'DatePicker', name: 'DatePicker', href: 'DatePicker.html'},
-  {id: 'DateRangePicker', name: 'DateRangePicker', href: 'DateRangePicker.html'},
-  {id: 'Dialog', name: 'Dialog', href: 'Dialog.html'},
-  {id: 'Disclosure', name: 'Disclosure', href: 'Disclosure.html'},
-  {id: 'Divider', name: 'Divider', href: 'Divider.html'},
-  {id: 'DropZone', name: 'DropZone', href: 'DropZone.html'},
-  {id: 'Form', name: 'Form', href: 'Form.html'},
-  {id: 'Icons', name: 'Icons', href: 'icons.html'},
-  {id: 'IllustratedMessage', name: 'IllustratedMessage', href: 'IllustratedMessage.html'},
-  {id: 'Illustrations', name: 'Illustrations', href: 'Illustrations.html'},
-  {id: 'Image', name: 'Image', href: 'Image.html'},
-  {id: 'InlineAlert', name: 'InlineAlert', href: 'InlineAlert.html'},
-  {id: 'Link', name: 'Link', href: 'Link.html'},
-  {id: 'LinkButton', name: 'LinkButton', href: 'LinkButton.html'},
-  {id: 'Menu', name: 'Menu', href: 'Menu.html'},
-  {id: 'Meter', name: 'Meter', href: 'Meter.html'},
-  {id: 'NumberField', name: 'NumberField', href: 'NumberField.html'},
-  {id: 'Picker', name: 'Picker', href: 'Picker.html'},
-  {id: 'Popover', name: 'Popover', href: 'Popover.html'},
-  {id: 'ProgressBar', name: 'ProgressBar', href: 'ProgressBar.html'},
-  {id: 'ProgressCircle', name: 'ProgressCircle', href: 'ProgressCircle.html'},
-  {id: 'RadioGroup', name: 'RadioGroup', href: 'RadioGroup.html'},
-  {id: 'RangeCalendar', name: 'RangeCalendar', href: 'RangeCalendar.html'},
-  {id: 'RangeSlider', name: 'RangeSlider', href: 'RangeSlider.html'},
-  {id: 'SearchField', name: 'SearchField', href: 'SearchField.html'},
-  {id: 'SegmentedControl', name: 'SegmentedControl', href: 'SegmentedControl.html'},
-  {id: 'SelectBoxGroup', name: 'SelectBoxGroup', href: 'SelectBoxGroup.html'},
-  {id: 'Skeleton', name: 'Skeleton', href: 'Skeleton.html'},
-  {id: 'Slider', name: 'Slider', href: 'Slider.html'},
-  {id: 'StatusLight', name: 'StatusLight', href: 'StatusLight.html'},
-  {id: 'Switch', name: 'Switch', href: 'Switch.html'},
-  {id: 'TableView', name: 'TableView', href: 'TableView.html'},
-  {id: 'Tabs', name: 'Tabs', href: 'Tabs.html'},
-  {id: 'TagGroup', name: 'TagGroup', href: 'TagGroup.html'},
-  {id: 'TextArea', name: 'TextArea', href: 'TextArea.html'},
-  {id: 'TextField', name: 'TextField', href: 'TextField.html'},
-  {id: 'TimeField', name: 'TimeField', href: 'TimeField.html'},
-  {id: 'Toast', name: 'Toast', href: 'Toast.html'},
-  {id: 'ToggleButton', name: 'ToggleButton', href: 'ToggleButton.html'},
-  {id: 'ToggleButtonGroup', name: 'ToggleButtonGroup', href: 'ToggleButtonGroup.html'},
-  {id: 'Tooltip', name: 'Tooltip', href: 'Tooltip.html'},
-  {id: 'TreeView', name: 'TreeView', href: 'TreeView.html'},
-  {id: 'Release Notes', name: 'Release Notes', href: 'releases/index.html'}
+  {id: 'Getting Started', name: 'Getting Started', href: 'getting-started.html', description: 'Get started with React Spectrum S2.'},
+  {id: 'Styling', name: 'Styling', href: 'styling.html', description: 'Learn how to style React Spectrum components.'},
+  {id: 'Migrating', name: 'Migrating', href: 'migrating.html', description: 'Learn how to migrate from React Spectrum v3 to S2.'},
+  {id: 'Accordion', name: 'Accordion', href: 'Accordion.html', description: 'An accordion is a grouping of related disclosures.'},
+  {id: 'ActionBar', name: 'ActionBar', href: 'ActionBar.html', description: 'Used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time.'},
+  {id: 'ActionButton', name: 'ActionButton', href: 'ActionButton.html', description: 'An action button allows a user to perform an action.'},
+  {id: 'ActionButtonGroup', name: 'ActionButtonGroup', href: 'ActionButtonGroup.html', description: 'A grouping of related ActionButtons.'},
+  {id: 'ActionMenu', name: 'ActionMenu', href: 'ActionMenu.html', description: 'Combines an ActionButton with a Menu for simple "more actions" use cases.'},
+  {id: 'Avatar', name: 'Avatar', href: 'Avatar.html', description: 'A thumbnail representation of an entity, such as a user or an organization.'},
+  {id: 'AvatarGroup', name: 'AvatarGroup', href: 'AvatarGroup.html', description: 'A grouping of avatars that are related to each other.'},
+  {id: 'Badge', name: 'Badge', href: 'Badge.html', description: 'A badge displays color-categorized metadata for an object.'},
+  {id: 'Breadcrumbs', name: 'Breadcrumbs', href: 'Breadcrumbs.html', description: 'Breadcrumbs display a hierarchy of links to the current page or resource.'},
+  {id: 'Button', name: 'Button', href: 'Button.html', description: 'A button allows a user to perform an action or to navigate to another page.'},
+  {id: 'ButtonGroup', name: 'ButtonGroup', href: 'ButtonGroup.html', description: 'A button group is a grouping of buttons whose actions are related to each other.'},
+  {id: 'Calendar', name: 'Calendar', href: 'Calendar.html', description: 'A calendar allows a user to select a single date from a date grid.'},
+  {id: 'Card', name: 'Card', href: 'Card.html', description: 'Summarizes an object that a user can select or navigate to.'},
+  {id: 'CardView', name: 'CardView', href: 'CardView.html', description: 'Displays a group of related objects, with support for selection and bulk actions.'},
+  {id: 'Checkbox', name: 'Checkbox', href: 'Checkbox.html', description: 'A checkbox allows a user to select an individual option.'},
+  {id: 'CheckboxGroup', name: 'CheckboxGroup', href: 'CheckboxGroup.html', description: 'A checkbox group allows a user to select one or more items in a list of options.'},
+  {id: 'ColorArea', name: 'ColorArea', href: 'ColorArea.html', description: 'A color area allows users to adjust two channels of a color value.'},
+  {id: 'ColorField', name: 'ColorField', href: 'ColorField.html', description: 'A color field allows users to edit a hex color or individual color channel value.'},
+  {id: 'ColorSlider', name: 'ColorSlider', href: 'ColorSlider.html', description: 'A color slider allows users to adjust an individual channel of a color value.'},
+  {id: 'ColorSwatch', name: 'ColorSwatch', href: 'ColorSwatch.html', description: 'A color swatch displays a preview of a selected color.'},
+  {id: 'ColorSwatchPicker', name: 'ColorSwatchPicker', href: 'ColorSwatchPicker.html', description: 'A color swatch picker displays a list of color swatches and allows a user to select one of them.'},
+  {id: 'ColorWheel', name: 'ColorWheel', href: 'ColorWheel.html', description: 'A color wheel allows users to adjust the hue of a color value on a circular track.'},
+  {id: 'ComboBox', name: 'ComboBox', href: 'ComboBox.html', description: 'A combobox combines a text input with a listbox, and allows a user to filter a list of options.'},
+  {id: 'ContextualHelp', name: 'ContextualHelp', href: 'ContextualHelp.html', description: 'Contextual help shows extra information about an adjacent component.'},
+  {id: 'DateField', name: 'DateField', href: 'DateField.html', description: 'A date field allows a user to enter and edit date values using a keyboard.'},
+  {id: 'DatePicker', name: 'DatePicker', href: 'DatePicker.html', description: 'A date picker combines a DateField and a Calendar popover.'},
+  {id: 'DateRangePicker', name: 'DateRangePicker', href: 'DateRangePicker.html', description: 'A date range picker combines two DateFields and a RangeCalendar popover.'},
+  {id: 'Dialog', name: 'Dialog', href: 'Dialog.html', description: 'A dialog is an overlay shown above other content in an application.'},
+  {id: 'Disclosure', name: 'Disclosure', href: 'Disclosure.html', description: 'A disclosure is a collapsible section of content.'},
+  {id: 'Divider', name: 'Divider', href: 'Divider.html', description: 'Brings clarity to a layout by grouping and dividing content in close proximity.'},
+  {id: 'DropZone', name: 'DropZone', href: 'DropZone.html', description: 'A drop zone is an area into which one or multiple objects can be dragged and dropped.'},
+  {id: 'Form', name: 'Form', href: 'Form.html', description: 'A form provides layout and alignment for a grouping of fields.'},
+  {id: 'Icons', name: 'Icons', href: 'icons.html', description: 'A collection of workflow icons that can be imported from @react-spectrum/s2/icons.'},
+  {id: 'IllustratedMessage', name: 'IllustratedMessage', href: 'IllustratedMessage.html', description: 'Displays an illustration and a message, usually for an empty state or an error page.'},
+  {id: 'Illustrations', name: 'Illustrations', href: 'Illustrations.html', description: 'A collection of illustrations that can be imported from @react-spectrum/s2/illustrations.'},
+  {id: 'Image', name: 'Image', href: 'Image.html', description: 'An image with support for skeleton loading and custom error states.'},
+  {id: 'InlineAlert', name: 'InlineAlert', href: 'InlineAlert.html', description: 'Displays a non-modal message associated with objects in a view.'},
+  {id: 'Link', name: 'Link', href: 'Link.html', description: 'A link allows a user to navigate to another page.'},
+  {id: 'LinkButton', name: 'LinkButton', href: 'LinkButton.html', description: 'Combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.'},
+  {id: 'Menu', name: 'Menu', href: 'Menu.html', description: 'A menu displays a list of actions or options that a user can choose.'},
+  {id: 'Meter', name: 'Meter', href: 'Meter.html', description: 'A meter represents a quantity within a known range, or a fractional value.'},
+  {id: 'NumberField', name: 'NumberField', href: 'NumberField.html', description: 'A number field allows a user to enter, increment, or decrement a numeric value.'},
+  {id: 'Picker', name: 'Picker', href: 'Picker.html', description: 'A picker displays a collapsible list of options, and allows a user to select one of them.'},
+  {id: 'Popover', name: 'Popover', href: 'Popover.html', description: 'A popover displays interactive content in context with a trigger element.'},
+  {id: 'ProgressBar', name: 'ProgressBar', href: 'ProgressBar.html', description: 'A progress bar shows progress of an operation over time with a linear representation.'},
+  {id: 'ProgressCircle', name: 'ProgressCircle', href: 'ProgressCircle.html', description: 'A progress circle shows progress of an operation over time with a circular representation.'},
+  {id: 'RadioGroup', name: 'RadioGroup', href: 'RadioGroup.html', description: 'A radio group allows a user to select a single item from a list of options.'},
+  {id: 'RangeCalendar', name: 'RangeCalendar', href: 'RangeCalendar.html', description: 'A range calendar allows a user to select a contiguous range of dates.'},
+  {id: 'RangeSlider', name: 'RangeSlider', href: 'RangeSlider.html', description: 'A range slider allows a user to select a range of values within a larger range.'},
+  {id: 'SearchField', name: 'SearchField', href: 'SearchField.html', description: 'A search field allows a user to enter and clear a search query.'},
+  {id: 'SegmentedControl', name: 'SegmentedControl', href: 'SegmentedControl.html', description: 'A mutually exclusive group of buttons used for view switching.'},
+  {id: 'SelectBoxGroup', name: 'SelectBoxGroup', href: 'SelectBoxGroup.html', description: 'Allows users to select one or more options from a list.'},
+  {id: 'Skeleton', name: 'Skeleton', href: 'Skeleton.html', description: 'Wraps around content to render it as a placeholder.'},
+  {id: 'Slider', name: 'Slider', href: 'Slider.html', description: 'A slider allows a user to select a numeric value within a range.'},
+  {id: 'StatusLight', name: 'StatusLight', href: 'StatusLight.html', description: 'A status light displays the status or category of an entity.'},
+  {id: 'Switch', name: 'Switch', href: 'Switch.html', description: 'A switch allows a user to turn a setting on or off.'},
+  {id: 'TableView', name: 'TableView', href: 'TableView.html', description: 'A table view displays data in rows and columns, with row selection and sorting.'},
+  {id: 'Tabs', name: 'Tabs', href: 'Tabs.html', description: 'Tabs organize content into multiple sections, and allow a user to view one at a time.'},
+  {id: 'TagGroup', name: 'TagGroup', href: 'TagGroup.html', description: 'A tag group displays a list of items, with support for keyboard navigation and removal.'},
+  {id: 'TextArea', name: 'TextArea', href: 'TextArea.html', description: 'A text area allows a user to enter a multi-line text value with a keyboard.'},
+  {id: 'TextField', name: 'TextField', href: 'TextField.html', description: 'A text field allows a user to enter a plain text value with a keyboard.'},
+  {id: 'TimeField', name: 'TimeField', href: 'TimeField.html', description: 'A time field allows a user to enter and edit time values using a keyboard.'},
+  {id: 'Toast', name: 'Toast', href: 'Toast.html', description: 'A toast displays a temporary notification of an action, error, or other event.'},
+  {id: 'ToggleButton', name: 'ToggleButton', href: 'ToggleButton.html', description: 'A toggle button allows a user to toggle between two states.'},
+  {id: 'ToggleButtonGroup', name: 'ToggleButtonGroup', href: 'ToggleButtonGroup.html', description: 'A toggle button group allows a user to toggle multiple options, with single or multiple selection.'},
+  {id: 'Tooltip', name: 'Tooltip', href: 'Tooltip.html', description: 'A tooltip displays a description of an element on hover or focus.'},
+  {id: 'TreeView', name: 'TreeView', href: 'TreeView.html', description: 'A tree view displays hierarchical data with selection and collapsing.'},
+  {id: 'Release Notes', name: 'Release Notes', href: 'releases/index.html', description: 'Release notes for React Spectrum.'}
 ]}/>
diff --git a/packages/dev/s2-docs/pages/s2/releases/index.mdx b/packages/dev/s2-docs/pages/s2/releases/index.mdx
index 873bffb49a0..63bf7862e5e 100644
--- a/packages/dev/s2-docs/pages/s2/releases/index.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/index.mdx
@@ -13,6 +13,7 @@ export default Layout;
 
 export const hideNav = true;
 export const section = 'Releases';
+export const description = 'Release notes for React Spectrum.';
 export const tags = ['changelog', 'versions', 'updates'];
 export const title = 'Releases';
 export const hideFromSearch = true;
diff --git a/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs b/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs
index 3279cdddfdc..423ffe0df3f 100644
--- a/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs
+++ b/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs
@@ -44,6 +44,34 @@ function cleanTypeText(t) {
   return cleaned;
 }
 
+/**
+ * Transform relative URLs to use .md extension instead of .html or no extension.
+ * Preserves query params and hash fragments.
+ */
+function transformRelativeUrl(href) {
+  if (!href || href.startsWith('http://') || href.startsWith('https://') || href.startsWith('mailto:') || href.startsWith('#')) {
+    return href;
+  }
+  
+  // Split href into path and query/hash parts
+  const match = href.match(/^([^?#]*)(\?[^#]*)?(#.*)?$/);
+  if (!match) {
+    return href;
+  }
+  
+  let [, pathPart, queryPart = '', hashPart = ''] = match;
+  
+  if (pathPart.endsWith('.html')) {
+    // Replace .html with .md
+    pathPart = pathPart.slice(0, -5) + '.md';
+  } else if (pathPart && !pathPart.match(/\.[a-zA-Z0-9]+$/)) {
+    // Add .md to paths without an extension
+    pathPart = pathPart + '.md';
+  }
+  
+  return pathPart + queryPart + hashPart;
+}
+
 function getIconNames() {
   if (iconNamesCache) {
     return iconNamesCache;
@@ -1149,6 +1177,9 @@ function remarkDocsComponentsToMarkdown() {
         const childrenText = extractText(node.children);
         const linkText = ariaLabel || childrenText || href;
 
+        // Transform relative links to use .md extension
+        href = transformRelativeUrl(href);
+
         if (href) {
           const linkNode = {
             type: 'link',
@@ -1548,6 +1579,11 @@ function remarkDocsComponentsToMarkdown() {
         .join('\n');
     });
 
+    // Transform relative links to use .md extension.
+    visit(tree, 'link', (node) => {
+      node.url = transformRelativeUrl(node.url);
+    });
+
     // Append "Related Types" section if we collected any.
     if (relatedTypes.size > 0) {
       const newNodes = [
diff --git a/packages/dev/s2-docs/scripts/generateOGImages.mjs b/packages/dev/s2-docs/scripts/generateOGImages.mjs
index aac8b044589..b24ab2f3dd8 100644
--- a/packages/dev/s2-docs/scripts/generateOGImages.mjs
+++ b/packages/dev/s2-docs/scripts/generateOGImages.mjs
@@ -251,6 +251,7 @@ for (let file of files) {
           alignItems: 'center',
           width: '100%',
           height: '100%',
+          padding: '60px',
           backgroundColor: '#ffffff',
           fontFamily: 'adobe-clean',
           color: '#000000'
@@ -261,19 +262,32 @@ for (let file of files) {
             style: {
               display: 'flex',
               alignItems: 'center',
-              gap: 44
+              gap: 44,
+              maxWidth: '100%'
             },
             children: [
               // Library logo
-              getLibraryLogo(subtitle),
+              {
+                type: 'div',
+                props: {
+                  style: {
+                    display: 'flex',
+                    flexShrink: 0
+                  },
+                  children: getLibraryLogo(subtitle)
+                }
+              },
               // Library name
               {
                 type: 'div',
                 props: {
                   style: {
+                    display: 'flex',
                     fontSize: 84,
                     fontWeight: 700,
-                    lineHeight: 1.1
+                    lineHeight: 1.1,
+                    flexShrink: 1,
+                    minWidth: 0
                   },
                   children: subtitle
                 }
@@ -294,6 +308,7 @@ for (let file of files) {
           alignItems: 'center',
           width: '100%',
           height: '100%',
+          padding: '60px',
           backgroundColor: '#ffffff',
           fontFamily: 'adobe-clean',
           color: '#000000'
@@ -304,11 +319,21 @@ for (let file of files) {
             style: {
               display: 'flex',
               alignItems: 'center',
-              gap: 44
+              gap: 44,
+              maxWidth: '100%'
             },
             children: [
               // Library logo
-              getLibraryLogo(subtitle),
+              {
+                type: 'div',
+                props: {
+                  style: {
+                    display: 'flex',
+                    flexShrink: 0
+                  },
+                  children: getLibraryLogo(subtitle)
+                }
+              },
               // Text content
               {
                 type: 'div',
@@ -316,13 +341,16 @@ for (let file of files) {
                   style: {
                     display: 'flex',
                     flexDirection: 'column',
-                    gap: 0
+                    gap: 0,
+                    flexShrink: 1,
+                    minWidth: 0
                   },
                   children: [
                     {
                       type: 'div',
                       props: {
                         style: {
+                          display: 'flex',
                           fontSize: 84,
                           fontWeight: 700,
                           lineHeight: 1.1
@@ -334,6 +362,7 @@ for (let file of files) {
                       type: 'div',
                       props: {
                         style: {
+                          display: 'flex',
                           fontSize: 56,
                           fontWeight: 400,
                           color: '#464646'
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index ac3f9b69bfa..c05376f8bc7 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -429,6 +429,10 @@ function SubpageHeader({currentPage, parentPage, isLongForm, parentHref}: Subpag
   );
 }
 
+function isExternalUrl(url: string): boolean {
+  return url.startsWith('http://') || url.startsWith('https://');
+}
+
 function MobileRelatedPages({pages}: {pages: Array<{title: string, url: string}>}) {
   return (
     <div
@@ -438,15 +442,21 @@ function MobileRelatedPages({pages}: {pages: Array<{title: string, url: string}>
           lg: 'none'
         }
       })}>
-      <H2>Related pages</H2>
-      <ul>
-        {pages.map((page, i) => (
-          <li key={i} className={li({isLongForm: false})}>
-            <Link href={page.url}>
-              {page.title}
-            </Link>
-          </li>
-        ))}
+      <H2 id="related-pages">Related pages</H2>
+      <ul className={style({listStyleType: 'none'})}>
+        {pages.map((page, i) => {
+          let isExternal = isExternalUrl(page.url);
+          return (
+            <li key={i} className={li({isLongForm: false})}>
+              <Link
+                href={page.url}
+                target={isExternal ? '_blank' : undefined}
+                rel={isExternal ? 'noopener noreferrer' : undefined}>
+                {page.title}
+              </Link>
+            </li>
+          );
+        })}
       </ul>
     </div>
   );
diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
index b75a023acd1..10496d2ced9 100644
--- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx
+++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
@@ -1,30 +1,21 @@
 'use client';
 
-import {Autocomplete, Key, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps, Tab as RACTab, TabList as RACTabList, TabPanel as RACTabPanel, TabPanelProps as RACTabPanelProps, TabProps as RACTabProps, Tabs as RACTabs, SelectionIndicator, TabRenderProps} from 'react-aria-components';
+import {Autocomplete, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps, Tab as RACTab, TabList as RACTabList, TabPanel as RACTabPanel, TabPanelProps as RACTabPanelProps, TabProps as RACTabProps, Tabs as RACTabs, SelectionIndicator, TabRenderProps} from 'react-aria-components';
 import {baseColor, focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {CloseButton, SearchField, TextContext} from '@react-spectrum/s2';
-import {ComponentCardItem, ComponentCardView} from './ComponentCardView';
+import {ComponentCardView} from './ComponentCardView';
 import {
-  filterAndSortSearchItems,
-  getOrderedLibraries,
-  getPageTitle,
   getResourceTags,
-  getSearchSection,
+  LazyIconSearchView,
   SearchEmptyState,
-  type Section,
-  sortItemsForDisplay,
-  useFilteredIcons,
-  useSearchTagSelection,
-  useSectionTagsForDisplay
+  useSearchMenuState
 } from './searchUtils';
-import {getLibraryFromPage} from './library';
 import {IconSearchSkeleton, useIconFilter} from './IconSearchView';
 // @ts-ignore
 import {type Library} from './constants';
 import {Page} from '@parcel/rsc';
-import React, {lazy, ReactNode, Suspense, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {ReactNode, Suspense, useContext, useEffect, useRef, useState} from 'react';
 import {SearchTagGroups} from './SearchTagGroups';
-import {stripMarkdown} from './SearchMenu';
 import {useId} from '@react-aria/utils';
 
 
@@ -141,8 +132,6 @@ const mobileTabPanel = style({
   outlineStyle: 'none'
 });
 
-const IconSearchView = lazy(() => import('./IconSearchView').then(({IconSearchView}) => ({default: IconSearchView})));
-
 const stickySearchContainer = style({
   width: 'full',
   display: 'flex',
@@ -228,24 +217,28 @@ const MobileCustomDialog = function MobileCustomDialog(props: MobileDialogProps)
 function MobileNav({pages, currentPage, initialTag}: {pages: Page[], currentPage: Page, initialTag?: string}) {
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
   let [searchFocused, setSearchFocused] = useState(false);
-  let [searchValue, setSearchValue] = useState('');
   let scrollContainerRef = useRef<HTMLDivElement>(null);
-  let [selectedLibrary, setSelectedLibrary] = useState<Library>(getLibraryFromPage(currentPage));
-
-  let getSectionsForLibrary = useCallback((libraryId: string) => {
-    let sectionsMap = new Map();
-    let filteredPages = pages.filter(page => getLibraryFromPage(page) === libraryId && !page.exports?.hideFromSearch);
-    for (let page of filteredPages) {
-      let section = getSearchSection(page);
-      let sectionPages = sectionsMap.get(section) ?? [];
-      sectionPages.push(page);
-      sectionsMap.set(section, sectionPages);
-    }
-    return sectionsMap;
-  }, [pages]);
-
+  const iconFilter = useIconFilter();
 
-  let libraries = useMemo(() => getOrderedLibraries(currentPage), [currentPage]);
+  const {
+    selectedLibrary,
+    setSelectedLibrary,
+    orderedLibraries: libraries,
+    searchValue,
+    setSearchValue,
+    sectionTagsForDisplay: sectionTags,
+    selectedTagId: selectedSection,
+    setSelectedTagId: setSelectedSection,
+    handleTagSelectionChange,
+    filteredIcons,
+    isIconsSelected,
+    selectedItems,
+    getPlaceholderText
+  } = useSearchMenuState({
+    pages,
+    currentPage,
+    initialTag
+  });
 
   let handleSearchFocus = () => {
     setSearchFocused(true);
@@ -264,147 +257,8 @@ function MobileNav({pages, currentPage, initialTag}: {pages: Page[], currentPage
     }
   };
 
-  let filterPages = (pages: Page[], searchValue: string) => {
-    return filterAndSortSearchItems(pages, searchValue, {
-      getName: (page: Page) => getPageTitle(page),
-      getTags: (page: Page) => page.exports?.tags || [],
-      getDate: (page: Page) => page.exports?.date,
-      shouldUseDateSort: (page: Page) => {
-        const section = getSearchSection(page);
-        return section === 'Blog' || section === 'Releases';
-      }
-    });
-  };
-
-  let getSectionContent = (sectionName: string, libraryId: string, searchValue: string = ''): ComponentCardItem[] => {
-    let librarySections = getSectionsForLibrary(libraryId);
-    let pages = librarySections.get(sectionName) ?? [];
-
-    let filteredPages = filterPages(pages, searchValue);
-
-    let items = filteredPages.map(page => ({
-      id: page.url.replace(/^\//, ''),
-      name: getPageTitle(page),
-      href: page.url,
-      description: stripMarkdown(page.exports?.description),
-      date: page.exports?.date
-    }));
-
-    return sortItemsForDisplay(items, searchValue);
-  };
-
-  let getAllContent = (libraryId: string, searchValue: string = ''): ComponentCardItem[] => {
-    let librarySections = getSectionsForLibrary(libraryId);
-    let allPages = Array.from(librarySections.values()).flat();
-    let filteredPages = filterPages(allPages, searchValue);
-    
-    let items = filteredPages.map(page => ({
-      id: page.url.replace(/^\//, ''),
-      name: getPageTitle(page),
-      href: page.url,
-      description: stripMarkdown(page.exports?.description),
-      date: page.exports?.date
-    }));
-
-    return sortItemsForDisplay(items, searchValue);
-  };
-
-  let getItemsForSelection = (section: string | undefined, libraryId: string, searchValue: string = ''): ComponentCardItem[] => {
-    if (!section) {
-      return [];
-    }
-    let items: ComponentCardItem[] = [];
-    if (section === 'all') {
-      items = getAllContent(libraryId, searchValue);
-    } else {
-      // Check if this is a resource tag (e.g., icons)
-      const libraryResourceTags = getResourceTags(libraryId as Library);
-      const libraryResourceTagIds = libraryResourceTags.map(t => t.id);
-      if (libraryResourceTagIds.includes(section)) {
-        // Resources are handled separately, return empty for now
-        return [];
-      }
-      // Convert lowercase ID back to section name for getSectionContent
-      const librarySections = getSectionNamesForLibrary(libraryId);
-      const sectionName = librarySections.find(s => s.toLowerCase() === section) || section;
-      items = getSectionContent(sectionName, libraryId, searchValue);
-    }
-
-    items = sortItemsForDisplay(items, searchValue);
-
-    return items;
-  };
-
-  let getSectionNamesForLibrary = (libraryId: string) => {
-    let librarySections = getSectionsForLibrary(libraryId);
-    let sectionArray = [...librarySections.keys()];
-
-    // Show 'Components' first
-    sectionArray.sort((a, b) => {
-      if (a === 'Components') {
-        return -1;
-      }
-      if (b === 'Components') {
-        return 1;
-      }
-      return a.localeCompare(b);
-    });
-
-    return sectionArray;
-  };
-
-  let currentLibrarySections = getSectionNamesForLibrary(selectedLibrary);
-
-  const sectionsForDisplay: Section[] = useMemo(() => {
-    return currentLibrarySections.map(name => ({
-      id: name.toLowerCase(),
-      name,
-      children: []
-    }));
-  }, [currentLibrarySections]);
-
-  const initialSelectedSection = useMemo(() => {
-    const section = getSearchSection(currentPage);
-    const firstSection = currentLibrarySections[0]?.toLowerCase() || 'components';
-    return initialTag || (section ? section.toLowerCase() : firstSection);
-  }, [initialTag, currentPage, currentLibrarySections]);
-
-  const resourceTags = useMemo(() => getResourceTags(selectedLibrary), [selectedLibrary]);
-
-  const [selectedSection, setSelectedSection] = useSearchTagSelection(
-    searchValue,
-    sectionsForDisplay.map(s => ({id: s.id, name: s.name})),
-    resourceTags,
-    initialSelectedSection
-  );
-
-  const sectionTags = useSectionTagsForDisplay(
-    sectionsForDisplay,
-    searchValue,
-    selectedSection,
-    resourceTags.map(t => t.id)
-  );
-
-  const filteredIcons = useFilteredIcons(searchValue);
-  const iconFilter = useIconFilter();
-
-  let handleSectionSelectionChange = useCallback((keys: Iterable<Key>) => {
-    const firstKey = Array.from(keys)[0] as string;
-    if (firstKey) {
-      setSelectedSection(firstKey);
-    }
-  }, [setSelectedSection]);
-
-  let handleResourceSelectionChange = useCallback((keys: Iterable<Key>) => {
-    const firstKey = Array.from(keys)[0] as string;
-    if (firstKey) {
-      setSelectedSection(firstKey);
-    }
-  }, [setSelectedSection]);
-
   useEffect(() => {
     if (scrollContainerRef.current) {
-      // Ensure newly selected section starts at the top of the vertical scroll area
       scrollContainerRef.current.scrollTo({top: 0, behavior: 'auto'});
     }
   }, [selectedSection, selectedLibrary, searchValue]);
@@ -420,10 +274,7 @@ function MobileNav({pages, currentPage, initialTag}: {pages: Page[], currentPage
             let newLib = key as Library;
             setSelectedLibrary(newLib);
             if (!searchFocused) {
-              let nextSections = getSectionNamesForLibrary(newLib);
-              if (nextSections.length > 0) {
-                setSelectedSection(nextSections[0].toLowerCase());
-              }
+              setSelectedSection('components');
             }
           }}>
           <div className={mobileTabListContainer}>
@@ -439,15 +290,12 @@ function MobileNav({pages, currentPage, initialTag}: {pages: Page[], currentPage
             </MobileTabList>
           </div>
           {libraries.map(library => {
-            const isIconsSelected = selectedSection === 'icons' && library.id === 'react-spectrum';
             const libraryResourceTags = getResourceTags(library.id);
-            const selectedResourceTag = libraryResourceTags.find(tag => tag.id === selectedSection);
-            const placeholderText = selectedResourceTag 
-              ? `Search ${selectedResourceTag.name}` 
-              : `Search ${library.label}`;
+            const placeholderText = getPlaceholderText(library.label);
+            const showIcons = isIconsSelected && library.id === 'react-spectrum';
             return (
               <MobileTabPanel key={library.id} id={library.id}>
-                <Autocomplete filter={isIconsSelected ? iconFilter : undefined}>
+                <Autocomplete filter={showIcons ? iconFilter : undefined}>
                   <div className={stickySearchContainer}>
                     <SearchField
                       aria-label="Search"
@@ -460,19 +308,19 @@ function MobileNav({pages, currentPage, initialTag}: {pages: Page[], currentPage
                     <div className={style({overflow: 'auto', paddingX: 8, paddingBottom: 8})}>
                       <SearchTagGroups
                         sectionTags={sectionTags}
-                        resourceTags={resourceTags}
+                        resourceTags={libraryResourceTags}
                         selectedTagId={selectedSection}
-                        onSectionSelectionChange={handleSectionSelectionChange}
-                        onResourceSelectionChange={handleResourceSelectionChange}
+                        onSectionSelectionChange={handleTagSelectionChange}
+                        onResourceSelectionChange={handleTagSelectionChange}
                         isMobile
                         wrapperClassName={style({paddingTop: 0})}
                         contentClassName={style({display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, marginX: 0})} />
                     </div>
                   </div>
                   <div ref={scrollContainerRef} className={style({paddingX: 12, flexGrow: 1, overflow: 'auto', display: 'flex', flexDirection: 'column'})}>
-                    {isIconsSelected ? (
+                    {showIcons ? (
                       <Suspense fallback={<IconSearchSkeleton />}>
-                        <IconSearchView 
+                        <LazyIconSearchView 
                           filteredItems={filteredIcons} 
                           listBoxClassName={style({flexGrow: 1, overflow: 'auto', width: '100%', scrollPaddingY: 4})} />
                       </Suspense>
@@ -483,7 +331,7 @@ function MobileNav({pages, currentPage, initialTag}: {pages: Page[], currentPage
                           setSearchValue('');
                           overlayTriggerState?.close();
                         }}
-                        items={getItemsForSelection(selectedSection, library.id, searchValue)}
+                        items={library.id === selectedLibrary ? selectedItems : []}
                         ariaLabel="Pages"
                         size="S"
                         renderEmptyState={() => <SearchEmptyState searchValue={searchValue} libraryLabel={library.label} />} />
diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
index 25f8857318f..1d3d38ff1de 100644
--- a/packages/dev/s2-docs/src/Nav.tsx
+++ b/packages/dev/s2-docs/src/Nav.tsx
@@ -5,6 +5,7 @@ import {focusRing, size, space, style} from '@react-spectrum/s2/style' with {typ
 import {getLibraryFromPage} from './library';
 import {getPageFromPathname, getSnapshot, subscribe} from './NavigationSuspense';
 import {Link} from 'react-aria-components';
+import LinkOutIcon from '../../../@react-spectrum/s2/ui-icons/LinkOut';
 import type {Page, PageProps} from '@parcel/rsc';
 import React, {createContext, useContext, useEffect, useRef, useState, useSyncExternalStore} from 'react';
 
@@ -271,12 +272,14 @@ export function SideNavItem(props) {
 export function SideNavLink(props) {
   let linkRef = useRef(null);
   let selected = useContext(SideNavContext);
-  let {...linkProps} = props;
-
+  let {isExternal, ...linkProps} = props;
+  
   return (
     <Link
       {...linkProps}
       ref={linkRef}
+      target={isExternal ? '_blank' : undefined}
+      rel={isExternal ? 'noopener noreferrer' : undefined}
       aria-current={props.isSelected || selected === props.href ? 'page' : undefined}
       style={pressScale(linkRef)}
       className={style({
@@ -311,6 +314,11 @@ export function SideNavLink(props) {
             }
           })(renderProps)} />
         {props.children}
+        {isExternal && (
+          <LinkOutIcon
+            aria-label="(opens in a new tab)"
+            className={style({color: 'neutral', marginStart: 'auto', flexShrink: 0, paddingX: 8})} />
+        )}
       </>)}
     </Link>
   );
diff --git a/packages/dev/s2-docs/src/OptimisticToc.tsx b/packages/dev/s2-docs/src/OptimisticToc.tsx
index 812611a1f95..c1c9c9b090b 100644
--- a/packages/dev/s2-docs/src/OptimisticToc.tsx
+++ b/packages/dev/s2-docs/src/OptimisticToc.tsx
@@ -64,6 +64,10 @@ export function OptimisticToc({currentPage, pages}: {currentPage: Page, pages: P
   );
 }
 
+function isExternalUrl(url: string): boolean {
+  return url.startsWith('http://') || url.startsWith('https://');
+}
+
 function RelatedPages({pages}: {pages: Array<{title: string, url: string}>}) {
   return (
     <div className={style({paddingTop: 24})}>
@@ -72,7 +76,7 @@ function RelatedPages({pages}: {pages: Array<{title: string, url: string}>}) {
         <SideNav>
           {pages.map((page, i) => (
             <SideNavItem key={i}>
-              <SideNavLink href={page.url}>{page.title}</SideNavLink>
+              <SideNavLink href={page.url} isExternal={isExternalUrl(page.url)}>{page.title}</SideNavLink>
             </SideNavItem>
           ))}
         </SideNav>
diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx
index 3572af7856b..4530271d21f 100644
--- a/packages/dev/s2-docs/src/SearchMenu.tsx
+++ b/packages/dev/s2-docs/src/SearchMenu.tsx
@@ -5,35 +5,21 @@ import {Autocomplete, Dialog, Key, OverlayTriggerStateContext, Provider} from 'r
 import Close from '@react-spectrum/s2/icons/Close';
 import {ComponentCardView} from './ComponentCardView';
 import {
-  type ComponentItem,
-  createSearchOptions,
-  filterAndSortSearchItems,
-  getOrderedLibraries,
-  getPageTitle,
   getResourceTags,
-  getSearchSection,
+  LazyIconSearchView,
   SearchEmptyState,
-  sortItemsForDisplay,
-  sortSearchItems,
-  useFilteredIcons,
-  useSearchTagSelection,
-  useSectionTagsForDisplay
+  useSearchMenuState
 } from './searchUtils';
-import {getLibraryFromPage, getLibraryFromUrl} from './library';
 import {IconSearchSkeleton, useIconFilter} from './IconSearchView';
 import {type Library, TAB_DEFS} from './constants';
 // @ts-ignore
 import {Page} from '@parcel/rsc';
-import React, {CSSProperties, lazy, Suspense, useEffect, useMemo, useRef, useState} from 'react';
+import React, {CSSProperties, Suspense, useCallback, useEffect, useRef} from 'react';
 import {SearchTagGroups} from './SearchTagGroups';
 import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
 import {Tab, TabList, TabPanel, Tabs} from './Tabs';
 import {TextFieldRef} from '@react-types/textfield';
 
-export function stripMarkdown(description: string | undefined) {
-  return (description || '').replace(/\[(.*?)\]\(.*?\)/g, '$1');
-}
-
 export const divider = style({
   marginY: 8,
   marginStart: -8,
@@ -50,7 +36,6 @@ export const divider = style({
   width: '[3px]'
 });
 
-const IconSearchView = lazy(() => import('./IconSearchView').then(({IconSearchView}) => ({default: IconSearchView})));
 
 interface SearchMenuProps {
   pages: Page[],
@@ -77,16 +62,31 @@ function CloseButton({onClose}: {onClose: () => void}) {
 export function SearchMenu(props: SearchMenuProps) {
   let {pages, currentPage, onClose, overlayId, isSearchOpen} = props;
 
-  const currentLibrary = getLibraryFromPage(currentPage);
-  let [selectedLibrary, setSelectedLibrary] = useState<Library>(currentLibrary);
-  let [searchValue, setSearchValue] = useState(props.initialSearchValue);
-
-  const orderedTabs = useMemo(() => getOrderedLibraries(currentPage), [currentPage]);
-
   const searchRef = useRef<TextFieldRef<HTMLInputElement> | null>(null);
+  const iconFilter = useIconFilter();
+
+  const {
+    selectedLibrary,
+    setSelectedLibrary,
+    orderedLibraries: orderedTabs,
+    searchValue,
+    setSearchValue,
+    sectionTagsForDisplay,
+    selectedTagId,
+    handleTagSelectionChange,
+    filteredIcons,
+    isIconsSelected,
+    selectedItems,
+    selectedSectionName,
+    getPlaceholderText
+  } = useSearchMenuState({
+    pages,
+    currentPage,
+    initialSearchValue: props.initialSearchValue,
+    initialTag: props.initialTag
+  });
 
   // Auto-focus search field when menu opens
-  // We don't put autoFocus on the SearchField because it will cause a flicker when switching tabs
   useEffect(() => {
     const timer = setTimeout(() => {
       searchRef.current?.focus();
@@ -94,102 +94,8 @@ export function SearchMenu(props: SearchMenuProps) {
     return () => clearTimeout(timer);
   }, []);
 
-  // Transform pages data into component data structure
-  const transformedComponents = useMemo(() => {
-    if (!pages || !Array.isArray(pages)) {
-      return [];
-    }
-
-    const components = pages
-      .filter(page => page.url && page.url.endsWith('.html') && getLibraryFromUrl(page.url) === selectedLibrary && !page.exports?.hideFromSearch)
-      .map(page => {
-        const name = page.url.replace(/^\//, '').replace(/\.html$/, '');
-        const title = getPageTitle(page);
-        const section: string = getSearchSection(page);
-        const tags: string[] = (page.exports?.tags || page.exports?.keywords as string[]) || [];
-        const description: string = stripMarkdown(page.exports?.description);
-        const date: string | undefined = page.exports?.date;
-        return {
-          id: name,
-          name: title,
-          href: page.url,
-          section,
-          tags,
-          description,
-          date
-        };
-      });
-
-    return components;
-  }, [pages, selectedLibrary]);
-
-  // Build sections for the selected library
-  const sections = useMemo(() => {
-    const sectionNames = Array.from(new Set(transformedComponents.map(c => c.section || 'Components')));
-    return sectionNames.map(sectionName => ({
-      id: sectionName.toLowerCase(),
-      name: sectionName,
-      children: transformedComponents.filter(c => (c.section || 'Components') === sectionName)
-    })).sort((a, b) => {
-      if (a.id === 'components') {
-        return -1;
-      }
-      if (b.id === 'components') {
-        return 1;
-      }
-      return 0;
-    });
-  }, [transformedComponents]);
-
-  const sectionTags = useMemo(() => sections.map(s => ({id: s.id, name: s.name})), [sections]);
-  const resourceTags = useMemo(() => getResourceTags(selectedLibrary), [selectedLibrary]);
-
-  const [selectedTagId, setSelectedTagId] = useSearchTagSelection(
-    searchValue,
-    sectionTags,
-    resourceTags,
-    props.initialTag || currentPage.exports?.section?.toLowerCase() || 'components'
-  );
-
-  const filteredIcons = useFilteredIcons(searchValue);
-  const iconFilter = useIconFilter();
-
-  let filteredComponents = useMemo(() => {
-    if (!searchValue) {
-      return sections;
-    }
-
-    const allItems = sections.flatMap(section => section.children);
-
-    const sortedItems = filterAndSortSearchItems(allItems, searchValue, createSearchOptions<ComponentItem>());
-
-    const resultsBySection = new Map<string, typeof transformedComponents>();
-
-    sortedItems.forEach(item => {
-      const section = item.section || 'Components';
-      if (!resultsBySection.has(section)) {
-        resultsBySection.set(section, []);
-      }
-      resultsBySection.get(section)!.push(item);
-    });
-
-    return sections
-      .map(section => ({
-        ...section,
-        children: resultsBySection.get(section.name) || []
-      }))
-      .filter(section => section.children.length > 0);
-  }, [sections, searchValue]);
-
-  const sectionTagsForDisplay = useSectionTagsForDisplay(
-    sections,
-    searchValue,
-    selectedTagId,
-    resourceTags.map(t => t.id)
-  );
-
-  const handleTabSelectionChange = React.useCallback((key: Key) => {
-    setSelectedLibrary(key as typeof selectedLibrary);
+  const handleTabSelectionChange = useCallback((key: Key) => {
+    setSelectedLibrary(key as Library);
     // Focus main search field of the newly selected tab
     setTimeout(() => {
       const lib = key as Library;
@@ -198,47 +104,7 @@ export function SearchMenu(props: SearchMenuProps) {
         searchRef.current.focus();
       }
     }, 10);
-  }, []);
-
-  const handleSectionSelectionChange = React.useCallback((keys: Iterable<Key>) => {
-    const firstKey = Array.from(keys)[0] as string;
-    if (firstKey) {
-      setSelectedTagId(firstKey);
-    }
-  }, [setSelectedTagId]);
-
-  const handleIconSelectionChange = React.useCallback((keys: Iterable<Key>) => {
-    const firstKey = Array.from(keys)[0] as string;
-    if (firstKey) {
-      setSelectedTagId(firstKey);
-    }
-  }, [setSelectedTagId]);
-
-  const selectedItems = useMemo(() => {
-    let items: typeof transformedComponents = [];
-    if (selectedTagId === 'all') {
-      items = filteredComponents.flatMap(s => s.children) || [];
-      if (searchValue.trim().length > 0) {
-        items = sortSearchItems(items, searchValue, createSearchOptions<ComponentItem>());
-      } else {
-        items = sortItemsForDisplay(items, searchValue);
-      }
-    } else {
-      items = (filteredComponents.find(s => s.id === selectedTagId)?.children) || [];
-      items = sortItemsForDisplay(items, searchValue);
-    }
-
-    return items;
-  }, [filteredComponents, selectedTagId, searchValue]);
-
-  const selectedSectionName = useMemo(() => {
-    if (selectedTagId === 'all') {
-      return 'All';
-    }
-    return (filteredComponents.find(s => s.id === selectedTagId)?.name)
-      || (sections.find(s => s.id === selectedTagId)?.name)
-      || 'Items';
-  }, [filteredComponents, sections, selectedTagId]);
+  }, [setSelectedLibrary]);
 
   useEffect(() => {
     const handleNavigationStart = () => {
@@ -278,13 +144,10 @@ export function SearchMenu(props: SearchMenuProps) {
         </TabList>
         {orderedTabs.map((tab, i) => {
           const tabResourceTags = getResourceTags(tab.id);
-          const selectedResourceTag = tabResourceTags.find(tag => tag.id === selectedTagId);
-          const placeholderText = selectedResourceTag 
-            ? `Search ${selectedResourceTag.name}` 
-            : `Search ${tab.label}`;
+          const placeholderText = getPlaceholderText(tab.label);
           return (
             <TabPanel key={tab.id} id={tab.id}>
-              <Autocomplete filter={selectedTagId === 'icons' ? iconFilter : undefined}>
+              <Autocomplete filter={isIconsSelected ? iconFilter : undefined}>
                 <div className={style({display: 'flex', flexDirection: 'column', height: 'full'})}>
                   <div className={style({flexShrink: 0, marginStart: 16, marginEnd: 64})}>
                     <SearchField
@@ -304,12 +167,12 @@ export function SearchMenu(props: SearchMenuProps) {
                     sectionTags={sectionTagsForDisplay}
                     resourceTags={tabResourceTags}
                     selectedTagId={selectedTagId}
-                    onSectionSelectionChange={handleSectionSelectionChange}
-                    onResourceSelectionChange={handleIconSelectionChange} />
-                  {selectedTagId === 'icons' ? (
+                    onSectionSelectionChange={handleTagSelectionChange}
+                    onResourceSelectionChange={handleTagSelectionChange} />
+                  {isIconsSelected ? (
                     <div className={style({flexGrow: 1, overflow: 'auto', display: 'flex', flexDirection: 'column'})}>
                       <Suspense fallback={<IconSearchSkeleton />}>
-                        <IconSearchView 
+                        <LazyIconSearchView 
                           filteredItems={filteredIcons} 
                           listBoxClassName={style({flexGrow: 1, overflow: 'auto', width: '100%', scrollPaddingY: 4})} />
                       </Suspense>
diff --git a/packages/dev/s2-docs/src/searchUtils.tsx b/packages/dev/s2-docs/src/searchUtils.tsx
index d7ba0ae707f..23710ff51ae 100644
--- a/packages/dev/s2-docs/src/searchUtils.tsx
+++ b/packages/dev/s2-docs/src/searchUtils.tsx
@@ -1,15 +1,16 @@
 'use client';
 
 import {Content, Heading, IllustratedMessage} from '@react-spectrum/s2';
-import {getLibraryFromPage} from './library';
+import {getLibraryFromPage, getLibraryFromUrl} from './library';
 // @ts-ignore
 import {iconList, useIconFilter} from './IconSearchView';
+import {Key} from 'react-aria-components';
 import {type Library, TAB_DEFS} from './constants';
 // eslint-disable-next-line monorepo/no-internal-import
 import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults';
 // @ts-ignore
 import {Page} from '@parcel/rsc';
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 export interface SearchableItem {
@@ -39,6 +40,161 @@ export interface Tag {
   name: string
 }
 
+/**
+ * Strips markdown link syntax from a string, keeping only the link text.
+ */
+export function stripMarkdown(description: string | undefined): string {
+  return (description || '').replace(/\[(.*?)\]\(.*?\)/g, '$1');
+}
+
+/**
+ * Transforms a page into a ComponentItem for search/display.
+ */
+export function transformPageToComponentItem(page: Page): ComponentItem {
+  const name = page.url.replace(/^\//, '').replace(/\.html$/, '');
+  const title = getPageTitle(page);
+  const section: string = getSearchSection(page);
+  const tags: string[] = (page.exports?.tags || page.exports?.keywords as string[]) || [];
+  const description: string = stripMarkdown(page.exports?.description);
+  const date: string | undefined = page.exports?.date;
+  return {
+    id: name,
+    name: title,
+    href: page.url,
+    section,
+    tags,
+    description,
+    date
+  };
+}
+
+/**
+ * Builds sections from pages for a given library.
+ * Sorts sections with 'Components' first.
+ */
+export function buildSectionsFromPages(pages: Page[], library: Library): Section[] {
+  const filteredPages = pages.filter(page => 
+    page.url && 
+    page.url.endsWith('.html') && 
+    getLibraryFromUrl(page.url) === library && 
+    !page.exports?.hideFromSearch
+  );
+
+  const components = filteredPages.map(transformPageToComponentItem);
+
+  const sectionNames = Array.from(new Set(components.map(c => c.section || 'Components')));
+  
+  return sectionNames
+    .map(sectionName => ({
+      id: sectionName.toLowerCase(),
+      name: sectionName,
+      children: components.filter(c => (c.section || 'Components') === sectionName)
+    }))
+    .sort((a, b) => {
+      if (a.id === 'components') {
+        return -1;
+      }
+      if (b.id === 'components') {
+        return 1;
+      }
+      return 0;
+    });
+}
+
+/**
+ * Gets items for a given section selection (handles 'all' and specific sections).
+ */
+export function getItemsForSection(
+  sections: Section[],
+  sectionId: string,
+  searchValue: string,
+  resourceTagIds: string[] = []
+): ComponentItem[] {
+  // Check if this is a resource tag (e.g., icons) - return empty, handled separately
+  if (resourceTagIds.includes(sectionId)) {
+    return [];
+  }
+
+  let items: ComponentItem[];
+  if (sectionId === 'all') {
+    items = sections.flatMap(s => s.children);
+    if (searchValue.trim().length > 0) {
+      items = sortSearchItems(items, searchValue, createSearchOptions<ComponentItem>());
+    } else {
+      items = sortItemsForDisplay(items, searchValue);
+    }
+  } else {
+    items = sections.find(s => s.id === sectionId)?.children || [];
+    items = sortItemsForDisplay(items, searchValue);
+  }
+
+  return items;
+}
+
+/**
+ * Filters sections based on search value.
+ */
+export function filterSections(sections: Section[], searchValue: string): Section[] {
+  if (!searchValue) {
+    return sections;
+  }
+
+  const allItems = sections.flatMap(section => section.children);
+  const sortedItems = filterAndSortSearchItems(allItems, searchValue, createSearchOptions<ComponentItem>());
+
+  const resultsBySection = new Map<string, ComponentItem[]>();
+  sortedItems.forEach(item => {
+    const section = item.section || 'Components';
+    if (!resultsBySection.has(section)) {
+      resultsBySection.set(section, []);
+    }
+    resultsBySection.get(section)!.push(item);
+  });
+
+  return sections
+    .map(section => ({
+      ...section,
+      children: resultsBySection.get(section.name) || []
+    }))
+    .filter(section => section.children.length > 0);
+}
+
+/**
+ * Hook to build and manage sections for a library with search filtering.
+ */
+export function useLibrarySections(pages: Page[], library: Library, searchValue: string) {
+  const sections = useMemo(
+    () => buildSectionsFromPages(pages, library),
+    [pages, library]
+  );
+
+  const filteredSections = useMemo(
+    () => filterSections(sections, searchValue),
+    [sections, searchValue]
+  );
+
+  const getSectionNames = useCallback(() => {
+    return sections.map(s => s.name);
+  }, [sections]);
+
+  return {sections, filteredSections, getSectionNames};
+}
+
+/**
+ * Creates search options for filtering/sorting Page objects directly.
+ */
+export function createSearchOptionsForPages(): SearchOptions<Page> {
+  return {
+    getName: (page: Page) => getPageTitle(page),
+    getTags: (page: Page) => page.exports?.tags || [],
+    getDate: (page: Page) => page.exports?.date,
+    shouldUseDateSort: (page: Page) => {
+      const section = getSearchSection(page);
+      return section === 'Blog' || section === 'Releases';
+    }
+  };
+}
+
 export interface SearchOptions<T> {
   /**
    * Function to extract the name from an item.
@@ -341,3 +497,174 @@ export function SearchEmptyState({searchValue, libraryLabel}: {searchValue: stri
     </IllustratedMessage>
   );
 }
+
+export const LazyIconSearchView = React.lazy(() => 
+  import('./IconSearchView').then(({IconSearchView}) => ({default: IconSearchView}))
+);
+
+export interface SearchMenuStateOptions {
+  pages: Page[],
+  currentPage: Page,
+  initialSearchValue?: string,
+  initialTag?: string
+}
+
+export interface SearchMenuState {
+  // Library state
+  selectedLibrary: Library,
+  setSelectedLibrary: (library: Library) => void,
+  orderedLibraries: ReturnType<typeof getOrderedLibraries>,
+  
+  // Search state
+  searchValue: string,
+  setSearchValue: (value: string) => void,
+  
+  // Section state
+  sections: Section[],
+  filteredSections: Section[],
+  sectionTags: Tag[],
+  sectionTagsForDisplay: Tag[],
+  
+  // Resource tags (icons, etc.)
+  resourceTags: Tag[],
+  resourceTagIds: string[],
+  
+  // Tag selection
+  selectedTagId: string,
+  setSelectedTagId: (id: string) => void,
+  handleTagSelectionChange: (keys: Iterable<Key>) => void,
+  
+  // Icons
+  filteredIcons: typeof iconList,
+  iconFilter: ReturnType<typeof useIconFilter>,
+  isIconsSelected: boolean,
+  
+  // Computed items
+  selectedItems: ComponentItem[],
+  selectedSectionName: string,
+  
+  // Helpers
+  getPlaceholderText: (libraryLabel: string) => string
+}
+
+export function useSearchMenuState(options: SearchMenuStateOptions): SearchMenuState {
+  const {pages, currentPage, initialSearchValue = '', initialTag} = options;
+  
+  // Library state
+  const currentLibrary = getLibraryFromPage(currentPage);
+  const [selectedLibrary, setSelectedLibrary] = useState<Library>(currentLibrary);
+  const orderedLibraries = useMemo(() => getOrderedLibraries(currentPage), [currentPage]);
+  
+  // Search state
+  const [searchValue, setSearchValue] = useState(initialSearchValue);
+  
+  // Build sections for the selected library
+  const {sections, filteredSections} = useLibrarySections(
+    pages || [],
+    selectedLibrary,
+    searchValue
+  );
+  
+  // Section and resource tags
+  const sectionTags = useMemo(() => sections.map(s => ({id: s.id, name: s.name})), [sections]);
+  const resourceTags = useMemo(() => getResourceTags(selectedLibrary), [selectedLibrary]);
+  const resourceTagIds = useMemo(() => resourceTags.map(t => t.id), [resourceTags]);
+  
+  // Compute initial selected section
+  const initialSelectedSection = useMemo(() => {
+    const currentSection = sections.find(s => 
+      s.children.some(c => c.href === currentPage.url)
+    );
+    return initialTag || currentSection?.id || currentPage.exports?.section?.toLowerCase() || 'components';
+  }, [initialTag, currentPage, sections]);
+  
+  // Tag selection
+  const [selectedTagId, setSelectedTagId] = useSearchTagSelection(
+    searchValue,
+    sectionTags,
+    resourceTags,
+    initialSelectedSection
+  );
+  
+  // Section tags for display (includes "All" when searching)
+  const sectionTagsForDisplay = useSectionTagsForDisplay(
+    sections,
+    searchValue,
+    selectedTagId,
+    resourceTagIds
+  );
+  
+  // Icons
+  const filteredIcons = useFilteredIcons(searchValue);
+  const iconFilter = useIconFilter();
+  const isIconsSelected = selectedTagId === 'icons';
+  
+  // Handler for tag selection change (works with TagGroup's onSelectionChange)
+  const handleTagSelectionChange = useCallback((keys: Iterable<Key>) => {
+    const firstKey = Array.from(keys)[0] as string;
+    if (firstKey) {
+      setSelectedTagId(firstKey);
+    }
+  }, [setSelectedTagId]);
+  
+  // Computed selected items
+  const selectedItems = useMemo(() => {
+    return getItemsForSection(filteredSections, selectedTagId, searchValue, resourceTagIds);
+  }, [filteredSections, selectedTagId, searchValue, resourceTagIds]);
+  
+  // Computed section name for aria-label
+  const selectedSectionName = useMemo(() => {
+    if (selectedTagId === 'all') {
+      return 'All';
+    }
+    return (filteredSections.find(s => s.id === selectedTagId)?.name)
+      || (sections.find(s => s.id === selectedTagId)?.name)
+      || 'Items';
+  }, [filteredSections, sections, selectedTagId]);
+  
+  // Helper to get placeholder text based on selected resource tag
+  const getPlaceholderText = useCallback((libraryLabel: string) => {
+    const selectedResourceTag = resourceTags.find(tag => tag.id === selectedTagId);
+    return selectedResourceTag 
+      ? `Search ${selectedResourceTag.name}` 
+      : `Search ${libraryLabel}`;
+  }, [resourceTags, selectedTagId]);
+  
+  return {
+    // Library state
+    selectedLibrary,
+    setSelectedLibrary,
+    orderedLibraries,
+    
+    // Search state
+    searchValue,
+    setSearchValue,
+    
+    // Section state
+    sections,
+    filteredSections,
+    sectionTags,
+    sectionTagsForDisplay,
+    
+    // Resource tags
+    resourceTags,
+    resourceTagIds,
+    
+    // Tag selection
+    selectedTagId,
+    setSelectedTagId,
+    handleTagSelectionChange,
+    
+    // Icons
+    filteredIcons,
+    iconFilter,
+    isIconsSelected,
+    
+    // Computed items
+    selectedItems,
+    selectedSectionName,
+    
+    // Helpers
+    getPlaceholderText
+  };
+}