diff --git a/change/@fluentui-react-headless-components-preview-f2171a9b-8a48-4ad5-84f2-0b897f173745.json b/change/@fluentui-react-headless-components-preview-f2171a9b-8a48-4ad5-84f2-0b897f173745.json
new file mode 100644
index 0000000000000..8e3e54fe553ed
--- /dev/null
+++ b/change/@fluentui-react-headless-components-preview-f2171a9b-8a48-4ad5-84f2-0b897f173745.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add Persona component",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js b/packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js
index e6052ed976c98..14b87aef5c243 100644
--- a/packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js
+++ b/packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js
@@ -14,6 +14,7 @@ import * as Input from '@fluentui/react-headless-components-preview/input';
 import * as Link from '@fluentui/react-headless-components-preview/link';
 import * as MessageBar from '@fluentui/react-headless-components-preview/message-bar';
 import * as ProgressBar from '@fluentui/react-headless-components-preview/progress-bar';
+import * as Persona from '@fluentui/react-headless-components-preview/persona';
 import * as Popover from '@fluentui/react-headless-components-preview/popover';
 import * as Provider from '@fluentui/react-headless-components-preview/provider';
 import * as RadioGroup from '@fluentui/react-headless-components-preview/radio-group';
@@ -48,8 +49,9 @@ console.log({
   Input,
   Link,
   MessageBar,
-  ProgressBar,
+  Persona,
   Popover,
+  ProgressBar,
   Provider,
   RadioGroup,
   RatingDisplay,
diff --git a/packages/react-components/react-headless-components-preview/library/etc/persona.api.md b/packages/react-components/react-headless-components-preview/library/etc/persona.api.md
new file mode 100644
index 0000000000000..d1b5428dd4e99
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/etc/persona.api.md
@@ -0,0 +1,40 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { AvatarBaseProps } from '@fluentui/react-avatar';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities/';
+import type { PersonaProps as PersonaProps_2 } from '@fluentui/react-persona';
+import type { PersonaSlots as PersonaSlots_2 } from '@fluentui/react-persona';
+import type { PersonaState as PersonaState_2 } from '@fluentui/react-persona';
+import type * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+
+// @public
+export const Persona: ForwardRefComponent<PersonaProps>;
+
+// @public
+export type PersonaProps = ComponentProps<PersonaSlots> & Pick<PersonaProps_2, 'name' | 'textPosition'>;
+
+// @public (undocumented)
+export type PersonaSlots = Omit<PersonaSlots_2, 'avatar' | 'presence'> & {
+    avatar?: Slot<typeof Avatar>;
+};
+
+// @public
+export type PersonaState = ComponentState<PersonaSlots> & Pick<PersonaState_2, 'textPosition' | 'numTextLines'>;
+
+// @public (undocumented)
+export const renderPersona: (state: PersonaState) => JSXElement;
+
+// @public
+export const usePersona: (props: PersonaProps, ref: React_2.Ref<HTMLDivElement>) => PersonaState;
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/packages/react-components/react-headless-components-preview/library/package.json b/packages/react-components/react-headless-components-preview/library/package.json
index 3575cae4292a4..a14d253f4f5b3 100644
--- a/packages/react-components/react-headless-components-preview/library/package.json
+++ b/packages/react-components/react-headless-components-preview/library/package.json
@@ -159,6 +159,12 @@
       "import": "./lib/message-bar.js",
       "require": "./lib-commonjs/message-bar.js"
     },
+    "./persona": {
+      "types": "./dist/persona.d.ts",
+      "node": "./lib-commonjs/persona.js",
+      "import": "./lib/persona.js",
+      "require": "./lib-commonjs/persona.js"
+    },
     "./popover": {
       "types": "./dist/popover.d.ts",
       "node": "./lib-commonjs/popover.js",
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Persona/Persona.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Persona/Persona.test.tsx
new file mode 100644
index 0000000000000..1157334274ca0
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Persona/Persona.test.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { isConformant } from '../../testing/isConformant';
+import { Persona } from './Persona';
+
+describe('Persona', () => {
+  isConformant({
+    Component: Persona,
+    displayName: 'Persona',
+  });
+
+  it('renders a default state', () => {
+    const { getByRole, getByText } = render(
+      <Persona name="John Doe" primaryText="John Doe" secondaryText="Software Engineer" />,
+    );
+
+    expect(getByRole('img', { name: 'John Doe' })).toBeInTheDocument();
+    expect(getByText('John Doe')).toBeInTheDocument();
+    expect(getByText('Software Engineer')).toBeInTheDocument();
+  });
+
+  it('renders the avatar after the text when textPosition is before', () => {
+    const { container, getByText, getByRole } = render(
+      <Persona name="John Doe" primaryText="John Doe" secondaryText="Software Engineer" textPosition="before" />,
+    );
+
+    const root = container.firstElementChild as HTMLElement;
+    const primaryText = getByText('John Doe');
+    const avatar = getByRole('img', { name: 'John Doe' });
+
+    expect(root.firstElementChild).toBe(primaryText);
+    expect(root.lastElementChild).toBe(avatar);
+  });
+});
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Persona/Persona.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Persona/Persona.tsx
new file mode 100644
index 0000000000000..d52df0507adea
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Persona/Persona.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { usePersona } from './usePersona';
+import { renderPersona } from './renderPersona';
+import type { PersonaProps } from './Persona.types';
+
+/**
+ * Represents a person or with an avatar, primary text, and optional secondary text.
+ */
+export const Persona: ForwardRefComponent<PersonaProps> = React.forwardRef((props, ref) => {
+  const state = usePersona(props, ref);
+
+  return renderPersona(state);
+});
+
+Persona.displayName = 'Persona';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Persona/Persona.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Persona/Persona.types.ts
new file mode 100644
index 0000000000000..0e2b786135191
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Persona/Persona.types.ts
@@ -0,0 +1,21 @@
+import type {
+  PersonaSlots as PersonaBaseSlots,
+  PersonaProps as PersonaBaseProps,
+  PersonaState as PersonaBaseState,
+} from '@fluentui/react-persona';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { Avatar } from '../Avatar';
+
+export type PersonaSlots = Omit<PersonaBaseSlots, 'avatar' | 'presence'> & {
+  avatar?: Slot<typeof Avatar>;
+};
+
+/**
+ * Persona Props
+ */
+export type PersonaProps = ComponentProps<PersonaSlots> & Pick<PersonaBaseProps, 'name' | 'textPosition'>;
+
+/**
+ * State used in rendering Persona
+ */
+export type PersonaState = ComponentState<PersonaSlots> & Pick<PersonaBaseState, 'textPosition' | 'numTextLines'>;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Persona/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Persona/index.ts
new file mode 100644
index 0000000000000..de25a0319397c
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Persona/index.ts
@@ -0,0 +1,4 @@
+export { Persona } from './Persona';
+export type { PersonaSlots, PersonaProps, PersonaState } from './Persona.types';
+export { renderPersona } from './renderPersona';
+export { usePersona } from './usePersona';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Persona/renderPersona.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Persona/renderPersona.tsx
new file mode 100644
index 0000000000000..29bcb44309215
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Persona/renderPersona.tsx
@@ -0,0 +1,6 @@
+import { renderPersona_unstable } from '@fluentui/react-persona';
+
+import type { PersonaState } from './Persona.types';
+import type { JSXElement } from '@fluentui/react-utilities/';
+
+export const renderPersona = renderPersona_unstable as (state: PersonaState) => JSXElement;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Persona/usePersona.ts b/packages/react-components/react-headless-components-preview/library/src/components/Persona/usePersona.ts
new file mode 100644
index 0000000000000..af4f72ec262ef
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Persona/usePersona.ts
@@ -0,0 +1,38 @@
+'use client';
+
+import type * as React from 'react';
+import { usePersonaBase_unstable } from '@fluentui/react-persona';
+import { slot } from '@fluentui/react-utilities';
+import type { PersonaProps, PersonaState } from './Persona.types';
+import { Avatar } from '../Avatar';
+
+/**
+ * Create the state required to render Persona.
+ *
+ * The returned state can be modified with hooks such as usePersonaStyles_unstable,
+ * before being passed to renderPersona_unstable.
+ *
+ * @param props - props from this instance of Persona
+ * @param ref - reference to root HTMLDivElement of Persona
+ */
+export const usePersona = (props: PersonaProps, ref: React.Ref<HTMLDivElement>): PersonaState => {
+  const { textPosition = 'after', ...baseProps } = props;
+  const baseState = usePersonaBase_unstable(baseProps, ref);
+
+  return {
+    ...baseState,
+    textPosition,
+    components: {
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
+      ...baseState.components,
+      avatar: Avatar,
+    },
+    avatar: slot.optional(props.avatar, {
+      renderByDefault: true,
+      defaultProps: {
+        name: props.name,
+      },
+      elementType: Avatar,
+    }),
+  };
+};
diff --git a/packages/react-components/react-headless-components-preview/library/src/persona.ts b/packages/react-components/react-headless-components-preview/library/src/persona.ts
new file mode 100644
index 0000000000000..f592ab528aac6
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/persona.ts
@@ -0,0 +1,2 @@
+export { Persona, renderPersona, usePersona } from './components/Persona';
+export type { PersonaSlots, PersonaProps, PersonaState } from './components/Persona';
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningCoverTarget.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningCoverTarget.stories.tsx
index 6ecac5e95d953..eb1d5b9bfb0af 100644
--- a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningCoverTarget.stories.tsx
+++ b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningCoverTarget.stories.tsx
@@ -2,48 +2,61 @@ import * as React from 'react';
 import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-headless-components-preview/popover';
 import type { PositioningProps } from '@fluentui/react-headless-components-preview/positioning';
 
-const classes = {
-  outer: 'w-full overflow-auto',
-  wrapper: 'grid grid-cols-[repeat(3,auto)] grid-rows-[repeat(5,auto)] gap-16 mx-32 my-16 w-max',
-  trigger:
-    'h-12 w-32 flex items-center justify-center px-3 rounded-md bg-blue-600 text-white text-xs font-medium hover:bg-blue-700 cursor-pointer border-none',
-  surface:
-    'bg-white/95 rounded-lg shadow-lg border border-gray-200 px-4 py-3 text-sm w-56 h-28 flex items-center justify-center',
-};
+import styles from './positioning.module.css';
 
-const cells: Array<{
+const options: Array<{
   label: string;
   position: NonNullable<PositioningProps['position']>;
   align: NonNullable<PositioningProps['align']>;
-  gridClass: string;
 }> = [
-  { label: 'above-start', position: 'above', align: 'start', gridClass: 'row-start-1 col-start-1' },
-  { label: 'above', position: 'above', align: 'center', gridClass: 'row-start-1 col-start-2' },
-  { label: 'above-end', position: 'above', align: 'end', gridClass: 'row-start-1 col-start-3' },
-  { label: 'before-top', position: 'before', align: 'start', gridClass: 'row-start-2 col-start-1' },
-  { label: 'before', position: 'before', align: 'center', gridClass: 'row-start-3 col-start-1' },
-  { label: 'before-bottom', position: 'before', align: 'end', gridClass: 'row-start-4 col-start-1' },
-  { label: 'after-top', position: 'after', align: 'start', gridClass: 'row-start-2 col-start-3' },
-  { label: 'after', position: 'after', align: 'center', gridClass: 'row-start-3 col-start-3' },
-  { label: 'after-bottom', position: 'after', align: 'end', gridClass: 'row-start-4 col-start-3' },
-  { label: 'below-start', position: 'below', align: 'start', gridClass: 'row-start-5 col-start-1' },
-  { label: 'below', position: 'below', align: 'center', gridClass: 'row-start-5 col-start-2' },
-  { label: 'below-end', position: 'below', align: 'end', gridClass: 'row-start-5 col-start-3' },
+  { label: 'above-start', position: 'above', align: 'start' },
+  { label: 'above', position: 'above', align: 'center' },
+  { label: 'above-end', position: 'above', align: 'end' },
+  { label: 'before-top', position: 'before', align: 'start' },
+  { label: 'before', position: 'before', align: 'center' },
+  { label: 'before-bottom', position: 'before', align: 'end' },
+  { label: 'after-top', position: 'after', align: 'start' },
+  { label: 'after', position: 'after', align: 'center' },
+  { label: 'after-bottom', position: 'after', align: 'end' },
+  { label: 'below-start', position: 'below', align: 'start' },
+  { label: 'below', position: 'below', align: 'center' },
+  { label: 'below-end', position: 'below', align: 'end' },
 ];
 
-export const CoverTarget = (): React.ReactNode => (
-  <div className={classes.outer}>
-    <div className={classes.wrapper}>
-      {cells.map(cell => (
-        <div key={cell.label} className={cell.gridClass}>
-          <Popover positioning={{ position: cell.position, align: cell.align, coverTarget: true }}>
+export const CoverTarget = (): React.ReactNode => {
+  const [selected, setSelected] = React.useState(options[1]);
+
+  return (
+    <div className={styles.outer}>
+      <div className={styles.layout}>
+        <label className={styles.controls}>
+          Position
+          <select
+            className={styles.select}
+            value={selected.label}
+            onChange={e => {
+              const next = options.find(o => o.label === e.target.value);
+              if (next) {
+                setSelected(next);
+              }
+            }}
+          >
+            {options.map(option => (
+              <option key={option.label} value={option.label}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <div className={styles.stage}>
+          <Popover open positioning={{ position: selected.position, align: selected.align, coverTarget: true }}>
             <PopoverTrigger>
-              <button className={classes.trigger}>{cell.label}</button>
+              <button className={`${styles.trigger} ${styles.triggerFixed}`}>{selected.label}</button>
             </PopoverTrigger>
-            <PopoverSurface className={classes.surface}>Container</PopoverSurface>
+            <PopoverSurface className={styles.surfaceCover}>Container</PopoverSurface>
           </Popover>
         </div>
-      ))}
+      </div>
     </div>
-  </div>
-);
+  );
+};
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningDefault.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningDefault.stories.tsx
index 39994731f5681..cf486690a55fd 100644
--- a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningDefault.stories.tsx
+++ b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningDefault.stories.tsx
@@ -2,18 +2,14 @@ import * as React from 'react';
 import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-headless-components-preview/popover';
 import type { PositioningProps } from '@fluentui/react-headless-components-preview/positioning';
 
-const classes = {
-  trigger:
-    'px-4 py-2 rounded-md bg-blue-600 text-white font-medium hover:bg-blue-700 data-[open]:bg-blue-700 focus-visible:outline-2 focus-visible:outline-blue-500 focus-visible:outline-offset-2 cursor-pointer border-none',
-  surface: 'bg-white rounded-lg shadow-lg border border-gray-200 p-4 min-w-[160px]',
-};
+import styles from './positioning.module.css';
 
 export const Default = (props: PositioningProps): React.ReactNode => (
   <Popover positioning={props}>
     <PopoverTrigger>
-      <button className={classes.trigger}>Click me</button>
+      <button className={styles.trigger}>Click me</button>
     </PopoverTrigger>
-    <PopoverSurface className={classes.surface}>Container</PopoverSurface>
+    <PopoverSurface className={styles.surfaceCallout}>Container</PopoverSurface>
   </Popover>
 );
 
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFallbackPositions.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFallbackPositions.stories.tsx
index be66959f6b0e8..7e2f9d43437d6 100644
--- a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFallbackPositions.stories.tsx
+++ b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFallbackPositions.stories.tsx
@@ -1,42 +1,26 @@
 import * as React from 'react';
-import { demoBoxClass, demoBoxStyle, flipDemoSurfaceCss } from './demoBox';
 import { InlineAnchored } from './InlineAnchored';
 
-const classes = {
-  page: 'flex flex-col gap-6 p-4',
-  sectionTitle: 'text-sm font-semibold text-gray-800 mb-1',
-  sectionNote: 'text-xs text-gray-500 max-w-xl mb-2',
-  grid: 'grid grid-cols-1 sm:grid-cols-2 gap-4',
-  trigger:
-    'px-3 py-1.5 rounded-md bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-blue-500 focus-visible:outline-offset-2 cursor-pointer border-none',
-  surface: 'flip-demo bg-white rounded-md shadow-md border border-gray-200 p-3 min-w-[200px] max-w-xs text-sm',
-};
+import styles from './positioning.module.css';
 
 export const FallbackPositions = (): React.ReactNode => (
-  <div className={classes.page}>
-    <style>{flipDemoSurfaceCss}</style>
-
-    <section>
-      <h3 className={classes.sectionTitle}>Basic fallback</h3>
-      <p className={classes.sectionNote}>
+  <div className={styles.pageRoomy}>
+    <section className={styles.section}>
+      <h3 className={styles.sectionTitle}>Basic fallback</h3>
+      <p className={styles.sectionNote}>
         Primary <code>above</code> overflows the box → first fallback <code>below-start</code> fits → surface renders
         there.
       </p>
-      <div className={demoBoxClass} style={demoBoxStyle}>
+      <div className={styles.demoBox}>
         <InlineAnchored
           positioning={{
             position: 'above',
             align: 'center',
             fallbackPositions: ['below-start', 'after'],
           }}
-          surfaceClassName={classes.surface}
+          surfaceClassName={`${styles.surfaceFallback} ${styles.flipReadout}`}
           trigger={
-            <button
-              className={classes.trigger}
-              style={{ position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)' }}
-            >
-              trigger near top
-            </button>
+            <button className={`${styles.trigger} ${styles.triggerSm} ${styles.pinTopCenter}`}>trigger near top</button>
           }
         >
           <strong>Requested:</strong> above · fallbacks: <code>below-start</code>, <code>after</code>
@@ -44,25 +28,23 @@ export const FallbackPositions = (): React.ReactNode => (
       </div>
     </section>
 
-    <section>
-      <h3 className={classes.sectionTitle}>Chain walking</h3>
-      <p className={classes.sectionNote}>
+    <section className={styles.section}>
+      <h3 className={styles.sectionTitle}>Chain walking</h3>
+      <p className={styles.sectionNote}>
         Trigger pinned to top-left. Primary <code>above</code> overflows, first fallback <code>before</code> also
         overflows (no room to the left), so the browser falls through to <code>below</code>. The live{' '}
         <strong>Actual</strong> readout should read <code>below</code>.
       </p>
-      <div className={demoBoxClass} style={demoBoxStyle}>
+      <div className={styles.demoBox}>
         <InlineAnchored
           positioning={{
             position: 'above',
             align: 'center',
             fallbackPositions: ['before', 'below'],
           }}
-          surfaceClassName={classes.surface}
+          surfaceClassName={`${styles.surfaceFallback} ${styles.flipReadout}`}
           trigger={
-            <button className={classes.trigger} style={{ position: 'absolute', top: 12, left: 12 }}>
-              top-left trigger
-            </button>
+            <button className={`${styles.trigger} ${styles.triggerSm} ${styles.pinTopLeft}`}>top-left trigger</button>
           }
         >
           <strong>Requested:</strong> above · fallbacks: <code>before</code>, <code>below</code>
@@ -70,43 +52,35 @@ export const FallbackPositions = (): React.ReactNode => (
       </div>
     </section>
 
-    <section>
-      <h3 className={classes.sectionTitle}>Custom chain replaces default flip</h3>
-      <p className={classes.sectionNote}>
+    <section className={styles.section}>
+      <h3 className={styles.sectionTitle}>Custom chain replaces default flip</h3>
+      <p className={styles.sectionNote}>
         Same overflow condition, different chains. Left popover has no <code>fallbackPositions</code> → default{' '}
         <code>flip-block, flip-inline</code> fires → surface ends up below. Right popover passes <code>['after']</code>{' '}
         → custom chain replaces defaults → surface goes to the right instead of flipping.
       </p>
-      <div className={classes.grid}>
-        <div className={demoBoxClass} style={demoBoxStyle}>
+      <div className={styles.grid}>
+        <div className={styles.demoBox}>
           <InlineAnchored
             positioning={{ position: 'above', align: 'center' }}
-            surfaceClassName={classes.surface}
+            surfaceClassName={`${styles.surfaceFallback} ${styles.flipReadout}`}
             trigger={
-              <button
-                className={classes.trigger}
-                style={{ position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)' }}
-              >
-                default (flip)
-              </button>
+              <button className={`${styles.trigger} ${styles.triggerSm} ${styles.pinTopCenter}`}>default (flip)</button>
             }
           >
             <strong>Requested:</strong> above · no custom fallbacks
           </InlineAnchored>
         </div>
-        <div className={demoBoxClass} style={demoBoxStyle}>
+        <div className={styles.demoBox}>
           <InlineAnchored
             positioning={{
               position: 'above',
               align: 'center',
               fallbackPositions: ['after', 'below'],
             }}
-            surfaceClassName={classes.surface}
+            surfaceClassName={`${styles.surfaceFallback} ${styles.flipReadout}`}
             trigger={
-              <button
-                className={classes.trigger}
-                style={{ position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)' }}
-              >
+              <button className={`${styles.trigger} ${styles.triggerSm} ${styles.pinTopCenter}`}>
                 custom ({`['after']`})
               </button>
             }
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFlippingBlock.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFlippingBlock.stories.tsx
index dd09c15be9abb..ff3b01731f256 100644
--- a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFlippingBlock.stories.tsx
+++ b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFlippingBlock.stories.tsx
@@ -1,48 +1,30 @@
 import * as React from 'react';
-import { demoBoxClass, demoBoxStyle, flipDemoSurfaceCss } from './demoBox';
 import { InlineAnchored } from './InlineAnchored';
 
 import descriptionMd from './PositioningFlippingBlockDescription.md';
-
-const classes = {
-  page: 'flex flex-col gap-4 p-4',
-  grid: 'grid grid-cols-1 sm:grid-cols-2 gap-4',
-  trigger:
-    'px-3 py-1.5 rounded-md bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-blue-500 focus-visible:outline-offset-2 cursor-pointer border-none',
-  surface: 'flip-demo bg-white rounded-md shadow-md border border-gray-200 p-2 w-[160px] text-xs',
-};
+import styles from './positioning.module.css';
 
 export const FlippingBlock = (): React.ReactNode => (
-  <div className={classes.page}>
-    <style>{flipDemoSurfaceCss}</style>
-
-    <div className={classes.grid}>
-      <div className={demoBoxClass} style={demoBoxStyle}>
+  <div className={styles.page}>
+    <div className={styles.grid}>
+      <div className={styles.demoBox}>
         <InlineAnchored
           positioning={{ position: 'above' }}
-          surfaceClassName={classes.surface}
+          surfaceClassName={`${styles.surfaceFlipNarrow} ${styles.flipReadout}`}
           trigger={
-            <button
-              className={classes.trigger}
-              style={{ position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)' }}
-            >
-              trigger near top
-            </button>
+            <button className={`${styles.trigger} ${styles.triggerSm} ${styles.pinTopCenter}`}>trigger near top</button>
           }
         >
           <strong>Requested:</strong> above → flips below
         </InlineAnchored>
       </div>
 
-      <div className={demoBoxClass} style={demoBoxStyle}>
+      <div className={styles.demoBox}>
         <InlineAnchored
           positioning={{ position: 'below' }}
-          surfaceClassName={classes.surface}
+          surfaceClassName={`${styles.surfaceFlipNarrow} ${styles.flipReadout}`}
           trigger={
-            <button
-              className={classes.trigger}
-              style={{ position: 'absolute', bottom: 12, left: '50%', transform: 'translateX(-50%)' }}
-            >
+            <button className={`${styles.trigger} ${styles.triggerSm} ${styles.pinBottomCenter}`}>
               trigger near bottom
             </button>
           }
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFlippingCorner.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFlippingCorner.stories.tsx
index 4325ed1db1cc1..d5f3f1061aaf5 100644
--- a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFlippingCorner.stories.tsx
+++ b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFlippingCorner.stories.tsx
@@ -1,28 +1,18 @@
 import * as React from 'react';
-import { demoBoxClass, demoBoxStyle, flipDemoSurfaceCss } from './demoBox';
 import { InlineAnchored } from './InlineAnchored';
 
 import descriptionMd from './PositioningFlippingCornerDescription.md';
-
-const classes = {
-  page: 'flex flex-col gap-4 p-4',
-  grid: 'grid grid-cols-1 sm:grid-cols-2 gap-4',
-  trigger:
-    'px-3 py-1.5 rounded-md bg-blue-600 text-white text-xs font-medium hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-blue-500 focus-visible:outline-offset-2 cursor-pointer border-none',
-  surface: 'flip-demo bg-white rounded-md shadow-md border border-gray-200 p-3 w-[320px] max-h-[140px] text-sm',
-};
+import styles from './positioning.module.css';
 
 export const FlippingCorner = (): React.ReactNode => (
-  <div className={classes.page}>
-    <style>{flipDemoSurfaceCss}</style>
-
-    <div className={classes.grid}>
-      <div className={demoBoxClass} style={demoBoxStyle}>
+  <div className={styles.page}>
+    <div className={styles.grid}>
+      <div className={styles.demoBox}>
         <InlineAnchored
           positioning={{ position: 'above', align: 'end' }}
-          surfaceClassName={classes.surface}
+          surfaceClassName={`${styles.surfaceFlipWide} ${styles.flipReadout}`}
           trigger={
-            <button className={classes.trigger} style={{ position: 'absolute', top: 12, left: 12 }}>
+            <button className={`${styles.trigger} ${styles.triggerSm} ${styles.pinTopLeft}`}>
               top-left · requested above-end
             </button>
           }
@@ -31,12 +21,12 @@ export const FlippingCorner = (): React.ReactNode => (
         </InlineAnchored>
       </div>
 
-      <div className={demoBoxClass} style={demoBoxStyle}>
+      <div className={styles.demoBox}>
         <InlineAnchored
           positioning={{ position: 'above', align: 'start' }}
-          surfaceClassName={classes.surface}
+          surfaceClassName={`${styles.surfaceFlipWide} ${styles.flipReadout}`}
           trigger={
-            <button className={classes.trigger} style={{ position: 'absolute', top: 12, right: 12 }}>
+            <button className={`${styles.trigger} ${styles.triggerSm} ${styles.pinTopRight}`}>
               top-right · requested above-start
             </button>
           }
@@ -45,12 +35,12 @@ export const FlippingCorner = (): React.ReactNode => (
         </InlineAnchored>
       </div>
 
-      <div className={demoBoxClass} style={demoBoxStyle}>
+      <div className={styles.demoBox}>
         <InlineAnchored
           positioning={{ position: 'below', align: 'end' }}
-          surfaceClassName={classes.surface}
+          surfaceClassName={`${styles.surfaceFlipWide} ${styles.flipReadout}`}
           trigger={
-            <button className={classes.trigger} style={{ position: 'absolute', bottom: 12, left: 12 }}>
+            <button className={`${styles.trigger} ${styles.triggerSm} ${styles.pinBottomLeft}`}>
               bottom-left · requested below-end
             </button>
           }
@@ -59,12 +49,12 @@ export const FlippingCorner = (): React.ReactNode => (
         </InlineAnchored>
       </div>
 
-      <div className={demoBoxClass} style={demoBoxStyle}>
+      <div className={styles.demoBox}>
         <InlineAnchored
           positioning={{ position: 'below', align: 'start' }}
-          surfaceClassName={classes.surface}
+          surfaceClassName={`${styles.surfaceFlipWide} ${styles.flipReadout}`}
           trigger={
-            <button className={classes.trigger} style={{ position: 'absolute', bottom: 12, right: 12 }}>
+            <button className={`${styles.trigger} ${styles.triggerSm} ${styles.pinBottomRight}`}>
               bottom-right · requested below-start
             </button>
           }
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFlippingInline.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFlippingInline.stories.tsx
index 97e24ff2b869b..9326fdf3f937c 100644
--- a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFlippingInline.stories.tsx
+++ b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningFlippingInline.stories.tsx
@@ -1,48 +1,30 @@
 import * as React from 'react';
-import { demoBoxClass, demoBoxStyle, flipDemoSurfaceCss } from './demoBox';
 import { InlineAnchored } from './InlineAnchored';
 
 import descriptionMd from './PositioningFlippingInlineDescription.md';
-
-const classes = {
-  page: 'flex flex-col gap-4 p-4',
-  grid: 'grid grid-cols-1 sm:grid-cols-2 gap-4',
-  trigger:
-    'px-3 py-1.5 rounded-md bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-blue-500 focus-visible:outline-offset-2 cursor-pointer border-none',
-  surface: 'flip-demo bg-white rounded-md shadow-md border border-gray-200 p-2 w-[160px] text-xs',
-};
+import styles from './positioning.module.css';
 
 export const FlippingInline = (): React.ReactNode => (
-  <div className={classes.page}>
-    <style>{flipDemoSurfaceCss}</style>
-
-    <div className={classes.grid}>
-      <div className={demoBoxClass} style={demoBoxStyle}>
+  <div className={styles.page}>
+    <div className={styles.grid}>
+      <div className={styles.demoBox}>
         <InlineAnchored
           positioning={{ position: 'before' }}
-          surfaceClassName={classes.surface}
+          surfaceClassName={`${styles.surfaceFlipNarrow} ${styles.flipReadout}`}
           trigger={
-            <button
-              className={classes.trigger}
-              style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)' }}
-            >
-              trigger on left
-            </button>
+            <button className={`${styles.trigger} ${styles.triggerSm} ${styles.pinLeftCenter}`}>trigger on left</button>
           }
         >
           <strong>Requested:</strong> before → flips after
         </InlineAnchored>
       </div>
 
-      <div className={demoBoxClass} style={demoBoxStyle}>
+      <div className={styles.demoBox}>
         <InlineAnchored
           positioning={{ position: 'after' }}
-          surfaceClassName={classes.surface}
+          surfaceClassName={`${styles.surfaceFlipNarrow} ${styles.flipReadout}`}
           trigger={
-            <button
-              className={classes.trigger}
-              style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)' }}
-            >
+            <button className={`${styles.trigger} ${styles.triggerSm} ${styles.pinRightCenter}`}>
               trigger on right
             </button>
           }
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningMatchTargetSize.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningMatchTargetSize.stories.tsx
index 337b98b8a2fb6..dfd2e812a2175 100644
--- a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningMatchTargetSize.stories.tsx
+++ b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningMatchTargetSize.stories.tsx
@@ -2,21 +2,17 @@ import * as React from 'react';
 import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-headless-components-preview/popover';
 
 import descriptionMd from './PositioningMatchTargetSizeDescription.md';
-
-const classes = {
-  wrapper: 'flex flex-col items-start gap-4 m-16',
-  trigger:
-    'w-[350px] px-4 py-2 rounded-md bg-blue-600 text-white font-medium hover:bg-blue-700 data-[open]:bg-blue-700 focus-visible:outline-2 focus-visible:outline-blue-500 focus-visible:outline-offset-2 cursor-pointer border-none',
-  surface: 'bg-white rounded-lg shadow-lg border border-gray-200 p-4 box-border',
-};
+import styles from './positioning.module.css';
 
 export const MatchTargetSize = (): React.ReactNode => (
-  <div className={classes.wrapper}>
+  <div className={styles.column}>
     <Popover open positioning={{ matchTargetSize: 'width' }}>
       <PopoverTrigger>
-        <button className={classes.trigger}>Click me</button>
+        <button className={`${styles.trigger} ${styles.triggerWide}`}>Click me</button>
       </PopoverTrigger>
-      <PopoverSurface className={classes.surface}>This popover has the same width as its target anchor</PopoverSurface>
+      <PopoverSurface className={styles.surfaceMatch}>
+        This popover has the same width as its target anchor
+      </PopoverSurface>
     </Popover>
   </div>
 );
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningOffset.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningOffset.stories.tsx
index 3d4c2afe951fe..996a8a0c8d672 100644
--- a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningOffset.stories.tsx
+++ b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningOffset.stories.tsx
@@ -1,61 +1,51 @@
 import * as React from 'react';
 import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-headless-components-preview/popover';
 
-const classes = {
-  outer: 'w-full overflow-auto',
-  wrapper: 'flex flex-col items-start gap-6 mx-32 my-16 w-max',
-  row: 'flex items-center gap-3 text-sm text-gray-700',
-  input: 'w-20 px-2 py-1 border border-gray-300 rounded',
-  trigger:
-    'inline-flex w-fit px-4 py-2 rounded-md bg-blue-600 text-white font-medium hover:bg-blue-700 data-[open]:bg-blue-700 focus-visible:outline-2 focus-visible:outline-blue-500 focus-visible:outline-offset-2 cursor-pointer border-none',
-  surface: 'bg-white rounded-lg shadow-lg border border-gray-200 px-3 py-2 text-sm w-40',
-  group: 'flex flex-col items-start gap-2',
-  label: 'text-xs font-semibold text-gray-500 uppercase tracking-wide',
-};
+import styles from './positioning.module.css';
 
 export const Offset = (): React.ReactNode => {
   const [mainAxis, setMainAxis] = React.useState(10);
   const [crossAxis, setCrossAxis] = React.useState(0);
 
   return (
-    <div className={classes.outer}>
-      <div className={classes.wrapper}>
-        <label className={classes.row}>
+    <div className={styles.outer}>
+      <div className={styles.column}>
+        <label className={styles.row}>
           <code>mainAxis</code>
           <input
             type="number"
-            className={classes.input}
+            className={styles.input}
             value={mainAxis}
             onChange={e => setMainAxis(parseInt(e.target.value, 10) || 0)}
           />
         </label>
-        <label className={classes.row}>
+        <label className={styles.row}>
           <code>crossAxis</code>
           <input
             type="number"
-            className={classes.input}
+            className={styles.input}
             value={crossAxis}
             onChange={e => setCrossAxis(parseInt(e.target.value, 10) || 0)}
           />
         </label>
 
-        <div className={classes.group}>
-          <span className={classes.label}>offset: number (mainAxis only)</span>
+        <div className={styles.group}>
+          <span className={styles.fieldLabel}>offset: number (mainAxis only)</span>
           <Popover positioning={{ position: 'after', offset: mainAxis }}>
             <PopoverTrigger>
-              <button className={classes.trigger}>Number offset</button>
+              <button className={styles.trigger}>Number offset</button>
             </PopoverTrigger>
-            <PopoverSurface className={classes.surface}>Container</PopoverSurface>
+            <PopoverSurface className={styles.surfaceCallout}>Container</PopoverSurface>
           </Popover>
         </div>
 
-        <div className={classes.group}>
-          <span className={classes.label}>offset: {'{ mainAxis, crossAxis }'}</span>
+        <div className={styles.group}>
+          <span className={styles.fieldLabel}>offset: {'{ mainAxis, crossAxis }'}</span>
           <Popover positioning={{ position: 'after', offset: { mainAxis, crossAxis } }}>
             <PopoverTrigger>
-              <button className={classes.trigger}>Object offset</button>
+              <button className={styles.trigger}>Object offset</button>
             </PopoverTrigger>
-            <PopoverSurface className={classes.surface}>Container</PopoverSurface>
+            <PopoverSurface className={styles.surfaceCallout}>Container</PopoverSurface>
           </Popover>
         </div>
       </div>
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningShorthandPositions.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningShorthandPositions.stories.tsx
index d2ff0921bb986..495df990a4695 100644
--- a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningShorthandPositions.stories.tsx
+++ b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/PositioningShorthandPositions.stories.tsx
@@ -2,48 +2,61 @@ import * as React from 'react';
 import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-headless-components-preview/popover';
 import type { PositioningProps } from '@fluentui/react-headless-components-preview/positioning';
 
-const classes = {
-  outer: 'w-full overflow-auto',
-  wrapper: 'grid grid-cols-[repeat(3,auto)] grid-rows-[repeat(5,auto)] gap-16 mx-32 my-16 w-max',
-  trigger:
-    'h-12 w-32 flex items-center justify-center px-3 rounded-md bg-blue-600 text-white text-xs font-medium hover:bg-blue-700 cursor-pointer border-none',
-  surface:
-    'bg-white rounded-lg shadow-lg border border-gray-200 px-4 py-3 text-sm w-40 h-20 flex items-center justify-center',
-};
+import styles from './positioning.module.css';
 
-const cells: Array<{
+const options: Array<{
   label: string;
   position: NonNullable<PositioningProps['position']>;
   align: NonNullable<PositioningProps['align']>;
-  gridClass: string;
 }> = [
-  { label: 'above-start', position: 'above', align: 'start', gridClass: 'row-start-1 col-start-1' },
-  { label: 'above', position: 'above', align: 'center', gridClass: 'row-start-1 col-start-2' },
-  { label: 'above-end', position: 'above', align: 'end', gridClass: 'row-start-1 col-start-3' },
-  { label: 'before-top', position: 'before', align: 'start', gridClass: 'row-start-2 col-start-1' },
-  { label: 'before', position: 'before', align: 'center', gridClass: 'row-start-3 col-start-1' },
-  { label: 'before-bottom', position: 'before', align: 'end', gridClass: 'row-start-4 col-start-1' },
-  { label: 'after-top', position: 'after', align: 'start', gridClass: 'row-start-2 col-start-3' },
-  { label: 'after', position: 'after', align: 'center', gridClass: 'row-start-3 col-start-3' },
-  { label: 'after-bottom', position: 'after', align: 'end', gridClass: 'row-start-4 col-start-3' },
-  { label: 'below-start', position: 'below', align: 'start', gridClass: 'row-start-5 col-start-1' },
-  { label: 'below', position: 'below', align: 'center', gridClass: 'row-start-5 col-start-2' },
-  { label: 'below-end', position: 'below', align: 'end', gridClass: 'row-start-5 col-start-3' },
+  { label: 'above-start', position: 'above', align: 'start' },
+  { label: 'above', position: 'above', align: 'center' },
+  { label: 'above-end', position: 'above', align: 'end' },
+  { label: 'before-top', position: 'before', align: 'start' },
+  { label: 'before', position: 'before', align: 'center' },
+  { label: 'before-bottom', position: 'before', align: 'end' },
+  { label: 'after-top', position: 'after', align: 'start' },
+  { label: 'after', position: 'after', align: 'center' },
+  { label: 'after-bottom', position: 'after', align: 'end' },
+  { label: 'below-start', position: 'below', align: 'start' },
+  { label: 'below', position: 'below', align: 'center' },
+  { label: 'below-end', position: 'below', align: 'end' },
 ];
 
-export const ShorthandPositions = (): React.ReactNode => (
-  <div className={classes.outer}>
-    <div className={classes.wrapper}>
-      {cells.map(cell => (
-        <div key={cell.label} className={cell.gridClass}>
-          <Popover positioning={{ position: cell.position, align: cell.align }}>
+export const ShorthandPositions = (): React.ReactNode => {
+  const [selected, setSelected] = React.useState(options[1]);
+
+  return (
+    <div className={styles.outer}>
+      <div className={styles.layout}>
+        <label className={styles.controls}>
+          Position
+          <select
+            className={styles.select}
+            value={selected.label}
+            onChange={e => {
+              const next = options.find(o => o.label === e.target.value);
+              if (next) {
+                setSelected(next);
+              }
+            }}
+          >
+            {options.map(option => (
+              <option key={option.label} value={option.label}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <div className={styles.stage}>
+          <Popover open positioning={{ position: selected.position, align: selected.align }}>
             <PopoverTrigger>
-              <button className={classes.trigger}>{cell.label}</button>
+              <button className={`${styles.trigger} ${styles.triggerFixed}`}>{selected.label}</button>
             </PopoverTrigger>
-            <PopoverSurface className={classes.surface}>Container</PopoverSurface>
+            <PopoverSurface className={styles.surfaceShorthand}>Container</PopoverSurface>
           </Popover>
         </div>
-      ))}
+      </div>
     </div>
-  </div>
-);
+  );
+};
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/demoBox.ts b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/demoBox.ts
deleted file mode 100644
index dbb331b9ae84a..0000000000000
--- a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/demoBox.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type * as React from 'react';
-
-export const demoBoxClass =
-  'relative w-full max-w-xl min-h-[260px] border border-dashed border-gray-300 rounded-lg bg-gray-50 p-4';
-
-export const demoBoxStyle: React.CSSProperties = {
-  contain: 'layout',
-};
-
-export const flipDemoSurfaceCss = `
-.flip-demo::after {
-  content: 'Actual: ' attr(data-placement);
-  display: block;
-  margin-top: 0.5rem;
-  padding-top: 0.5rem;
-  border-top: 1px dashed #d1d5db;
-  font-family: monospace;
-  font-size: 0.75rem;
-  color: #6b7280;
-}
-`;
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/positioning.module.css b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/positioning.module.css
new file mode 100644
index 0000000000000..f58e3bd8b437b
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/positioning.module.css
@@ -0,0 +1,340 @@
+.outer {
+  width: 100%;
+  overflow: auto;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-4);
+}
+
+.pageRoomy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  padding: var(--space-4);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-4);
+}
+
+@media (min-width: 640px) {
+  .grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-6);
+  padding: var(--space-16);
+  width: max-content;
+}
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-6);
+  padding: var(--space-6);
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+/* ===== Section text ===== */
+.sectionTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+}
+
+.sectionNote {
+  font-size: 12px;
+  color: var(--text-muted);
+  max-width: 36rem;
+  margin: 0 0 var(--space-1);
+}
+
+/* ===== Form controls ===== */
+.controls {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-size: 13px;
+  color: var(--text);
+}
+
+.select {
+  height: 32px;
+  padding: 0 var(--space-3);
+  border: var(--stroke-thin) solid var(--border-strong);
+  border-radius: var(--radius-md);
+  background: var(--bg);
+  color: var(--text);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.input {
+  width: 80px;
+  height: 28px;
+  padding: 0 var(--space-2);
+  border: var(--stroke-thin) solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--bg);
+  color: var(--text);
+  font-size: 13px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+}
+
+.fieldLabel {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-soft);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* ===== Demo containers ===== */
+.stage {
+  display: grid;
+  place-items: center;
+  min-width: 560px;
+  min-height: 320px;
+  border: var(--stroke-thin) dashed var(--border-strong);
+  border-radius: var(--radius-md);
+  background: var(--bg-soft);
+}
+
+.demoBox {
+  position: relative;
+  width: 100%;
+  max-width: 36rem;
+  min-height: 260px;
+  border: var(--stroke-thin) dashed var(--border-strong);
+  border-radius: var(--radius-md);
+  background: var(--bg-soft);
+  padding: var(--space-4);
+  contain: layout;
+}
+
+/* ===== Triggers ===== */
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  padding: 0 var(--space-4);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: var(--accent);
+  color: var(--accent-contrast);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.trigger:hover,
+.trigger[data-open] {
+  background: var(--accent-strong);
+}
+
+.trigger:focus-visible {
+  outline: var(--stroke-thick) solid var(--accent);
+  outline-offset: 2px;
+}
+
+.triggerFixed {
+  height: 48px;
+  width: 128px;
+  padding: 0 var(--space-3);
+  font-size: 12px;
+}
+
+.triggerWide {
+  width: 350px;
+}
+
+.triggerSm {
+  height: 30px;
+  padding: 0 var(--space-3);
+  font-size: 12px;
+}
+
+/* Trigger placement modifiers (used inside .demoBox) */
+.pinTopCenter {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.pinBottomCenter {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.pinTopLeft {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+}
+
+.pinTopRight {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+
+.pinBottomLeft {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+}
+
+.pinBottomRight {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+}
+
+.pinLeftCenter {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.pinRightCenter {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* ===== Surfaces ===== */
+.surfaceShorthand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 160px;
+  height: 80px;
+  background: var(--bg-elev);
+  border-radius: var(--radius-md);
+  border: var(--stroke-thin) solid var(--border);
+  box-shadow: var(--shadow-3);
+  padding: var(--space-3) var(--space-4);
+  font-size: 13px;
+}
+
+.surfaceCover {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 224px;
+  height: 112px;
+  background: var(--bg-elev);
+  border-radius: var(--radius-md);
+  border: var(--stroke-thin) solid var(--border);
+  box-shadow: var(--shadow-3);
+  padding: var(--space-3) var(--space-4);
+  font-size: 13px;
+  opacity: 0.7;
+}
+
+.surfaceCallout {
+  display: block;
+  min-width: 160px;
+  background: var(--bg-elev);
+  border-radius: var(--radius-md);
+  border: var(--stroke-thin) solid var(--border);
+  box-shadow: var(--shadow-3);
+  padding: var(--space-4);
+  font-size: 13px;
+}
+
+.surfaceMatch {
+  display: block;
+  background: var(--bg-elev);
+  border-radius: var(--radius-md);
+  border: var(--stroke-thin) solid var(--border);
+  box-shadow: var(--shadow-3);
+  padding: var(--space-4);
+  box-sizing: border-box;
+  font-size: 13px;
+}
+
+.surfaceFlipNarrow {
+  display: block;
+  width: 160px;
+  background: var(--bg-elev);
+  border-radius: var(--radius-md);
+  border: var(--stroke-thin) solid var(--border);
+  box-shadow: var(--shadow-2);
+  padding: var(--space-2);
+  font-size: 12px;
+}
+
+.surfaceFlipWide {
+  display: block;
+  width: 320px;
+  max-height: 140px;
+  background: var(--bg-elev);
+  border-radius: var(--radius-md);
+  border: var(--stroke-thin) solid var(--border);
+  box-shadow: var(--shadow-2);
+  padding: var(--space-3);
+  font-size: 13px;
+}
+
+.surfaceFallback {
+  display: block;
+  min-width: 200px;
+  max-width: 20rem;
+  background: var(--bg-elev);
+  border-radius: var(--radius-md);
+  border: var(--stroke-thin) solid var(--border);
+  box-shadow: var(--shadow-2);
+  padding: var(--space-3);
+  font-size: 13px;
+}
+
+/* Adds the "Actual: <data-placement>" readout under any surface */
+.flipReadout::after {
+  content: 'Actual: ' attr(data-placement);
+  display: block;
+  margin-top: var(--space-2);
+  padding-top: var(--space-2);
+  border-top: var(--stroke-thin) dashed var(--border-strong);
+  font-family: monospace;
+  font-size: 11px;
+  color: var(--text-muted);
+}
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/utils.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/utils.stories.tsx
index 626ff14279ff6..9e438478da05e 100644
--- a/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/utils.stories.tsx
+++ b/packages/react-components/react-headless-components-preview/stories/src/Concepts/Positioning/utils.stories.tsx
@@ -1,7 +1,25 @@
 import * as React from 'react';
 import type { PositioningProps } from '@fluentui/react-headless-components-preview/positioning';
 
+/**
+ * Subset of `PositioningProps` that the headless preview's `usePositioning` actually consumes.
+ * Props not destructured by the hook (e.g. `autoSize`, `flipBoundary`, `useTransform`) are excluded
+ * so Storybook's auto-generated args table only advertises what is supported.
+ */
+type SupportedPositioningProps = Omit<
+  PositioningProps,
+  | 'arrowPadding'
+  | 'autoSize'
+  | 'disableUpdateOnResize'
+  | 'flipBoundary'
+  | 'onPositioningEnd'
+  | 'overflowBoundary'
+  | 'overflowBoundaryPadding'
+  | 'shiftToCoverTarget'
+  | 'useTransform'
+>;
+
 /**
  * Helper component used by Storybook to auto-generate the positioning props args table.
  */
-export const Positioning: React.FC<PositioningProps> = () => <div />;
+export const Positioning: React.FC<SupportedPositioningProps> = () => <div />;
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Persona/PersonaDefault.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Persona/PersonaDefault.stories.tsx
new file mode 100644
index 0000000000000..44ce832b0a7ff
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/stories/src/Persona/PersonaDefault.stories.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Persona } from '@fluentui/react-headless-components-preview/persona';
+
+import styles from './persona.module.css';
+
+export const Default = (): React.ReactNode => (
+  <Persona
+    name="Kevin Sturgis"
+    className={styles.persona}
+    primaryText={{ className: styles.primaryText }}
+    secondaryText={{ className: styles.secondaryText, children: 'Software Engineer' }}
+    avatar={{
+      className: styles.avatar,
+      initials: { className: styles.avatarInitials },
+      image: {
+        className: styles.avatarImage,
+        src: 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-react-assets/persona-male.png',
+      },
+    }}
+  />
+);
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Persona/PersonaDescription.md b/packages/react-components/react-headless-components-preview/stories/src/Persona/PersonaDescription.md
new file mode 100644
index 0000000000000..7750162b201c3
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/stories/src/Persona/PersonaDescription.md
@@ -0,0 +1 @@
+A `Persona` is a visual representation of a person that showcases an avatar, primary text, and optional secondary text.
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Persona/index.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Persona/index.stories.tsx
new file mode 100644
index 0000000000000..fcca2f6fc350b
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/stories/src/Persona/index.stories.tsx
@@ -0,0 +1,19 @@
+import { Avatar } from '@fluentui/react-headless-components-preview/avatar';
+import { Persona } from '@fluentui/react-headless-components-preview/persona';
+
+import descriptionMd from './PersonaDescription.md';
+
+export { Default } from './PersonaDefault.stories';
+
+export default {
+  title: 'Headless Components/Persona',
+  component: Persona,
+  subcomponent: { Avatar },
+  parameters: {
+    docs: {
+      description: {
+        component: descriptionMd,
+      },
+    },
+  },
+};
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Persona/persona.module.css b/packages/react-components/react-headless-components-preview/stories/src/Persona/persona.module.css
new file mode 100644
index 0000000000000..9a9c7550b50fd
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/stories/src/Persona/persona.module.css
@@ -0,0 +1,65 @@
+.persona {
+  display: inline-grid;
+  grid-auto-rows: max-content;
+  grid-auto-flow: column;
+  justify-items: start;
+  grid-template-columns: max-content [middle] auto;
+  column-gap: var(--space-2);
+}
+
+/* Avatar - grid column spanning and positioning */
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--accent-contrast);
+  font-weight: 600;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+  user-select: none;
+  grid-row: span 2;
+  align-self: center;
+}
+
+/* Avatar initials */
+.avatarInitials {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* Avatar image */
+.avatarImage {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Primary text - body1 typography */
+.primaryText {
+  display: block;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--text);
+  font-weight: 400;
+}
+
+/* Secondary text - caption1 typography */
+.secondaryText {
+  display: block;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--text-muted);
+  font-weight: 400;
+}
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Popover/popover.module.css b/packages/react-components/react-headless-components-preview/stories/src/Popover/popover.module.css
index 30cf3d3123b18..4421499d29b36 100644
--- a/packages/react-components/react-headless-components-preview/stories/src/Popover/popover.module.css
+++ b/packages/react-components/react-headless-components-preview/stories/src/Popover/popover.module.css
@@ -5,8 +5,8 @@
   padding: 0 var(--space-4);
   border: 0;
   border-radius: var(--radius-md);
-  background: var(--text);
-  color: var(--text-on-accent);
+  background: var(--accent);
+  color: var(--accent-contrast);
   font-size: 13.5px;
   font-weight: 500;
   cursor: pointer;
@@ -14,7 +14,7 @@
 
 .trigger:hover,
 .trigger[data-open] {
-  background: var(--text-muted);
+  background: var(--accent-strong);
 }
 
 .trigger:focus-visible {
@@ -23,16 +23,13 @@
 }
 
 .triggerSecondary {
-  background: var(--accent);
+  background: var(--text);
+  color: var(--text-on-accent);
 }
 
 .triggerSecondary:hover,
 .triggerSecondary[data-open] {
-  background: var(--accent-strong);
-}
-
-.triggerSecondary:focus-visible {
-  outline-color: var(--accent);
+  background: var(--text-muted);
 }
 
 .triggerSmall {