diff --git a/packages/@react-spectrum/ai/exports/index.ts b/packages/@react-spectrum/ai/exports/index.ts
index 50bc70ba511..5e837d9bf92 100644
--- a/packages/@react-spectrum/ai/exports/index.ts
+++ b/packages/@react-spectrum/ai/exports/index.ts
@@ -1,5 +1,4 @@
 export {Attachment, AttachmentList} from '../src/AttachmentList';
-export {BasicHorizontalCard, CardPreview, HorizontalCard} from '../src/HorizontalCard';
 export {MessageFeedback} from '../src/MessageFeedback';
 export {MessageSource, SourceList, SourceListItem} from '../src/MessageSource';
 export {MessageSuggestion, MessageSuggestionList} from '../src/MessageSuggestion';
@@ -20,7 +19,6 @@ export {TokenSegmentList} from '../src/TokenSegmentList';
 export {UserMessage} from '../src/UserMessage';
 
 export type {AttachmentProps, AttachmentListProps} from '../src/AttachmentList';
-export type {HorizontalCardProps, BasicCardProps} from '../src/HorizontalCard';
 export type {
   PromptFieldProps,
   PromptFieldSubmitButtonProps,
diff --git a/packages/@react-spectrum/ai/stories/BasicHorizontalCard.stories.tsx b/packages/@react-spectrum/ai/stories/BasicHorizontalCard.stories.tsx
index 7c7f706ea2f..37290d5f691 100644
--- a/packages/@react-spectrum/ai/stories/BasicHorizontalCard.stories.tsx
+++ b/packages/@react-spectrum/ai/stories/BasicHorizontalCard.stories.tsx
@@ -12,7 +12,7 @@
 
 import {ActionButton} from '@react-spectrum/s2/ActionButton';
 import {ActionMenu} from '@react-spectrum/s2/ActionMenu';
-import {type BasicCardProps, BasicHorizontalCard} from '@react-spectrum/ai';
+import {type BasicCardProps, BasicHorizontalCard} from '../src/HorizontalCard';
 import {categorizeArgTypes, getActionArgs} from '../../s2/stories/utils';
 import ChevronRight from '@react-spectrum/s2/icons/ChevronRight';
 import {Content} from '@react-spectrum/s2/Content';
diff --git a/packages/@react-spectrum/ai/stories/HorizontalCard.stories.tsx b/packages/@react-spectrum/ai/stories/HorizontalCard.stories.tsx
index 24ce57a4d17..246f42c8188 100644
--- a/packages/@react-spectrum/ai/stories/HorizontalCard.stories.tsx
+++ b/packages/@react-spectrum/ai/stories/HorizontalCard.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {CardPreview, HorizontalCard, type HorizontalCardProps} from '@react-spectrum/ai';
+import {CardPreview, HorizontalCard, type HorizontalCardProps} from '../src/HorizontalCard';
 import {categorizeArgTypes, getActionArgs} from '../../s2/stories/utils';
 import {Content} from '@react-spectrum/s2/Content';
 import {Image} from '@react-spectrum/s2/Image';
diff --git a/packages/@react-spectrum/s2/exports/index.ts b/packages/@react-spectrum/s2/exports/index.ts
index 1d0a90f0685..d6ded1a4569 100644
--- a/packages/@react-spectrum/s2/exports/index.ts
+++ b/packages/@react-spectrum/s2/exports/index.ts
@@ -150,6 +150,8 @@ export {pressScale} from '../src/pressScale';
 
 export {mergeStyles} from '../style/runtime';
 
+export {CenterBaseline} from '../src/CenterBaseline';
+
 export {Autocomplete} from 'react-aria-components/Autocomplete';
 export {Collection} from 'react-aria/Collection';
 export {FileTrigger} from 'react-aria-components/FileTrigger';
diff --git a/packages/@react-spectrum/s2/src/CenterBaseline.tsx b/packages/@react-spectrum/s2/src/CenterBaseline.tsx
index 84d941ef610..ae76f2c617d 100644
--- a/packages/@react-spectrum/s2/src/CenterBaseline.tsx
+++ b/packages/@react-spectrum/s2/src/CenterBaseline.tsx
@@ -30,6 +30,23 @@ const styles = style({
   alignItems: 'center'
 });
 
+/**
+ * Vertically centers its children against the surrounding text baseline.
+ * Use this to align icons or other inline elements with adjacent text without
+ * breaking baseline alignment.
+ *
+ * @example
+ *   import {CenterBaseline} from '@react-spectrum/s2/CenterBaseline';
+ *   import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import CheckmarkIcon from '@react-spectrum/s2/icons/Checkmark';
+ *
+ *   <span className={style({display: 'flex', gap: 4, alignItems: 'baseline'})}>
+ *     <CenterBaseline>
+ *       <CheckmarkIcon />
+ *     </CenterBaseline>
+ *     <span>Done</span>
+ *   </span>;
+ */
 export function CenterBaseline(props: CenterBaselineProps): ReactNode {
   let domProps = filterDOMProps(props);
   return (
diff --git a/packages/dev/parcel-packager-docs/DocsPackager.js b/packages/dev/parcel-packager-docs/DocsPackager.js
index 4a8cffc49a3..5b426e75519 100644
--- a/packages/dev/parcel-packager-docs/DocsPackager.js
+++ b/packages/dev/parcel-packager-docs/DocsPackager.js
@@ -440,6 +440,7 @@ function visitChildren(obj, fn) {
         typeParameters: obj.typeParameters.map(i => fn(i, 'typeParameters')),
         ref: obj.ref ? fn(obj.ref, 'ref') : null,
         description: obj.description,
+        examples: obj.examples,
         access: obj.access
       };
     case 'conditional':
diff --git a/packages/dev/parcel-transformer-docs/DocsTransformer.js b/packages/dev/parcel-transformer-docs/DocsTransformer.js
index 857d88a691e..f5f53073445 100644
--- a/packages/dev/parcel-transformer-docs/DocsTransformer.js
+++ b/packages/dev/parcel-transformer-docs/DocsTransformer.js
@@ -298,7 +298,8 @@ module.exports = new Transformer({
               ref && ref.typeAnnotation
                 ? processExport(path.get('params.1.typeAnnotation.typeAnnotation'))
                 : null,
-            description: docs.description || null
+            description: docs.description || null,
+            examples: docs.examples || null
           });
         } else {
           let docs = getJSDocs(path);
diff --git a/packages/dev/parcel-transformer-docs/__tests__/__snapshots__/DocsTransformer.parceltest.tsx.snap b/packages/dev/parcel-transformer-docs/__tests__/__snapshots__/DocsTransformer.parceltest.tsx.snap
index d690ac0d41e..f0d47f088f5 100644
--- a/packages/dev/parcel-transformer-docs/__tests__/__snapshots__/DocsTransformer.parceltest.tsx.snap
+++ b/packages/dev/parcel-transformer-docs/__tests__/__snapshots__/DocsTransformer.parceltest.tsx.snap
@@ -49,6 +49,7 @@ exports[`DocsTransformer - API components writes export entry for React componen
   "exports": {
     "App1": {
       "description": null,
+      "examples": null,
       "id": "/test/src/index.tsx:App1",
       "name": "App1",
       "props": null,
@@ -66,6 +67,7 @@ exports[`DocsTransformer - API components writes export entry for localName Reac
   "exports": {
     "AppReal": {
       "description": null,
+      "examples": null,
       "id": "/test/src/index.tsx:App2",
       "name": "AppReal",
       "props": null,
diff --git a/packages/dev/s2-docs/pages/s2/style-macro.mdx b/packages/dev/s2-docs/pages/s2/style-macro.mdx
index 58c63b8b9b0..b343a7f88a4 100644
--- a/packages/dev/s2-docs/pages/s2/style-macro.mdx
+++ b/packages/dev/s2-docs/pages/s2/style-macro.mdx
@@ -1,6 +1,7 @@
 import {Layout} from '../../src/Layout';
 import {InlineAlert, Heading, Content, Link} from '@react-spectrum/s2';
 import {FunctionJSDoc} from '../../src/FunctionJSDoc';
+import {ComponentJSDoc} from '../../src/ComponentJSDoc';
 import {StyleMacroProperties} from '../../src/StyleMacroProperties';
 import docs from 'docs:@react-spectrum/s2';
 import styleDocs from 'docs:@react-spectrum/s2/style';
@@ -119,3 +120,7 @@ See the [Icons](icons#api) page for more information.
 ### setColorScheme
 
 <FunctionJSDoc function={styleDocs.exports.setColorScheme} />
+
+### CenterBaseline
+
+<ComponentJSDoc component={docs.exports.CenterBaseline} />
diff --git a/packages/dev/s2-docs/src/ComponentJSDoc.tsx b/packages/dev/s2-docs/src/ComponentJSDoc.tsx
new file mode 100644
index 00000000000..fbffb1c8900
--- /dev/null
+++ b/packages/dev/s2-docs/src/ComponentJSDoc.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Code} from './Code';
+import React from 'react';
+import {renderHTMLfromMarkdown} from './types';
+import {standaloneCode} from './CodeBlock';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+interface ComponentJSDocProps {
+  component: {
+    description?: string | null;
+    examples?: string[] | null;
+  };
+}
+
+export function ComponentJSDoc({component}: ComponentJSDocProps) {
+  let examples = Array.isArray(component.examples) ? component.examples.filter(Boolean) : [];
+
+  return (
+    <div className={style({marginBottom: 16})}>
+      <span className={style({font: 'body-lg'})}>
+        {renderHTMLfromMarkdown(component.description, {forceInline: false, forceBlock: true})}
+      </span>
+      {examples.map((example, index) => {
+        return (
+          <div key={index} className={style({marginTop: 12})}>
+            {examples.length > 1 && (
+              <strong className={style({font: 'title-sm'})}>Example {index + 1}:</strong>
+            )}
+            <pre className={standaloneCode}>
+              <Code lang="tsx">{example.trim()}</Code>
+            </pre>
+          </div>
+        );
+      })}
+    </div>
+  );
+}