diff --git a/change/@fluentui-react-accordion-9eba94d3-2e19-47a3-a9d0-cc48ad2df206.json b/change/@fluentui-react-accordion-9eba94d3-2e19-47a3-a9d0-cc48ad2df206.json
new file mode 100644
index 0000000000000..b6e184bd06059
--- /dev/null
+++ b/change/@fluentui-react-accordion-9eba94d3-2e19-47a3-a9d0-cc48ad2df206.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Accordion",
+  "packageName": "@fluentui/react-accordion",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-avatar-4f7f2b0d-54d5-4113-9bbe-7c20d691635a.json b/change/@fluentui-react-avatar-4f7f2b0d-54d5-4113-9bbe-7c20d691635a.json
new file mode 100644
index 0000000000000..67fddcef9ebc4
--- /dev/null
+++ b/change/@fluentui-react-avatar-4f7f2b0d-54d5-4113-9bbe-7c20d691635a.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Avatar",
+  "packageName": "@fluentui/react-avatar",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-badge-d574f954-9c31-46a6-a984-29254808686c.json b/change/@fluentui-react-badge-d574f954-9c31-46a6-a984-29254808686c.json
new file mode 100644
index 0000000000000..7516c29b48ea1
--- /dev/null
+++ b/change/@fluentui-react-badge-d574f954-9c31-46a6-a984-29254808686c.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Badge",
+  "packageName": "@fluentui/react-badge",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-button-bbd1cee3-fa3c-400f-b0e3-977c6a434c3b.json b/change/@fluentui-react-button-bbd1cee3-fa3c-400f-b0e3-977c6a434c3b.json
new file mode 100644
index 0000000000000..e0a30098da7d7
--- /dev/null
+++ b/change/@fluentui-react-button-bbd1cee3-fa3c-400f-b0e3-977c6a434c3b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add deprecation messages to react-button",
+  "packageName": "@fluentui/react-button",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-card-a253608a-236c-41ab-b648-305d862787a2.json b/change/@fluentui-react-card-a253608a-236c-41ab-b648-305d862787a2.json
new file mode 100644
index 0000000000000..7f4e720f71de0
--- /dev/null
+++ b/change/@fluentui-react-card-a253608a-236c-41ab-b648-305d862787a2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Card",
+  "packageName": "@fluentui/react-card",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-checkbox-02b38384-f210-4273-b2a0-fca78ef978dc.json b/change/@fluentui-react-checkbox-02b38384-f210-4273-b2a0-fca78ef978dc.json
new file mode 100644
index 0000000000000..03d0ddd66055e
--- /dev/null
+++ b/change/@fluentui-react-checkbox-02b38384-f210-4273-b2a0-fca78ef978dc.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Checkbox",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-components-c2085470-8edc-4804-8d9c-46f09f1e2899.json b/change/@fluentui-react-components-c2085470-8edc-4804-8d9c-46f09f1e2899.json
new file mode 100644
index 0000000000000..9b0b85c08ee67
--- /dev/null
+++ b/change/@fluentui-react-components-c2085470-8edc-4804-8d9c-46f09f1e2899.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update classNames exports from react-components.",
+  "packageName": "@fluentui/react-components",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-conformance-66c9b26c-88fa-452b-bd76-eba7eebe6afc.json b/change/@fluentui-react-conformance-66c9b26c-88fa-452b-bd76-eba7eebe6afc.json
new file mode 100644
index 0000000000000..c15bbd214fcae
--- /dev/null
+++ b/change/@fluentui-react-conformance-66c9b26c-88fa-452b-bd76-eba7eebe6afc.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add conformance tests for static classnames",
+  "packageName": "@fluentui/react-conformance",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-divider-eccb2dbe-991b-47fb-b2cf-376db2c0da5f.json b/change/@fluentui-react-divider-eccb2dbe-991b-47fb-b2cf-376db2c0da5f.json
new file mode 100644
index 0000000000000..73d619c67775a
--- /dev/null
+++ b/change/@fluentui-react-divider-eccb2dbe-991b-47fb-b2cf-376db2c0da5f.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Divider",
+  "packageName": "@fluentui/react-divider",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-image-256e5bb5-ef03-4116-8a92-02679ac5b37e.json b/change/@fluentui-react-image-256e5bb5-ef03-4116-8a92-02679ac5b37e.json
new file mode 100644
index 0000000000000..75bf047da2a47
--- /dev/null
+++ b/change/@fluentui-react-image-256e5bb5-ef03-4116-8a92-02679ac5b37e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Image",
+  "packageName": "@fluentui/react-image",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-input-ea64372f-cd30-4337-9336-2473988791d7.json b/change/@fluentui-react-input-ea64372f-cd30-4337-9336-2473988791d7.json
new file mode 100644
index 0000000000000..17cf95c45d183
--- /dev/null
+++ b/change/@fluentui-react-input-ea64372f-cd30-4337-9336-2473988791d7.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Input",
+  "packageName": "@fluentui/react-input",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-label-8f1d205c-9fce-47f7-952c-c39936568d0e.json b/change/@fluentui-react-label-8f1d205c-9fce-47f7-952c-c39936568d0e.json
new file mode 100644
index 0000000000000..327f451b86d7f
--- /dev/null
+++ b/change/@fluentui-react-label-8f1d205c-9fce-47f7-952c-c39936568d0e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Label",
+  "packageName": "@fluentui/react-label",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-link-8b2eb91d-7d9b-4c81-b0d4-d8ad66102883.json b/change/@fluentui-react-link-8b2eb91d-7d9b-4c81-b0d4-d8ad66102883.json
new file mode 100644
index 0000000000000..4aa056f0a8b41
--- /dev/null
+++ b/change/@fluentui-react-link-8b2eb91d-7d9b-4c81-b0d4-d8ad66102883.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Link",
+  "packageName": "@fluentui/react-link",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-menu-5f561de3-9f08-4af9-847f-b71f8ced5738.json b/change/@fluentui-react-menu-5f561de3-9f08-4af9-847f-b71f8ced5738.json
new file mode 100644
index 0000000000000..eabd9c5802703
--- /dev/null
+++ b/change/@fluentui-react-menu-5f561de3-9f08-4af9-847f-b71f8ced5738.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Menu",
+  "packageName": "@fluentui/react-menu",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-popover-67f4956b-5fad-4541-ba4e-8d57fe2572da.json b/change/@fluentui-react-popover-67f4956b-5fad-4541-ba4e-8d57fe2572da.json
new file mode 100644
index 0000000000000..e89a77c0df3e7
--- /dev/null
+++ b/change/@fluentui-react-popover-67f4956b-5fad-4541-ba4e-8d57fe2572da.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Popover",
+  "packageName": "@fluentui/react-popover",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-provider-15e2a87f-2928-4b21-b62c-6afe53852826.json b/change/@fluentui-react-provider-15e2a87f-2928-4b21-b62c-6afe53852826.json
new file mode 100644
index 0000000000000..4cb89972d4767
--- /dev/null
+++ b/change/@fluentui-react-provider-15e2a87f-2928-4b21-b62c-6afe53852826.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Provider",
+  "packageName": "@fluentui/react-provider",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-radio-1d586bed-3d00-4981-b9e8-fa39860c705e.json b/change/@fluentui-react-radio-1d586bed-3d00-4981-b9e8-fa39860c705e.json
new file mode 100644
index 0000000000000..9bbdbfbd0cf8f
--- /dev/null
+++ b/change/@fluentui-react-radio-1d586bed-3d00-4981-b9e8-fa39860c705e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Deprecate static classname string for Radio.",
+  "packageName": "@fluentui/react-radio",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-switch-099a7ba8-9fef-494c-8383-ffac254f3526.json b/change/@fluentui-react-switch-099a7ba8-9fef-494c-8383-ffac254f3526.json
new file mode 100644
index 0000000000000..d7468fa8b6b58
--- /dev/null
+++ b/change/@fluentui-react-switch-099a7ba8-9fef-494c-8383-ffac254f3526.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add deprecation messages to react-switch",
+  "packageName": "@fluentui/react-switch",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tabs-62a61da8-8630-4c2b-86db-c3ff6636b233.json b/change/@fluentui-react-tabs-62a61da8-8630-4c2b-86db-c3ff6636b233.json
new file mode 100644
index 0000000000000..d21595b124791
--- /dev/null
+++ b/change/@fluentui-react-tabs-62a61da8-8630-4c2b-86db-c3ff6636b233.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Tabs",
+  "packageName": "@fluentui/react-tabs",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-text-02cf3104-9dfc-4525-b915-b59d9cba2629.json b/change/@fluentui-react-text-02cf3104-9dfc-4525-b915-b59d9cba2629.json
new file mode 100644
index 0000000000000..c136b7fc40656
--- /dev/null
+++ b/change/@fluentui-react-text-02cf3104-9dfc-4525-b915-b59d9cba2629.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Text",
+  "packageName": "@fluentui/react-text",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tooltip-d940930a-d83b-4d4e-ba79-173148b98f87.json b/change/@fluentui-react-tooltip-d940930a-d83b-4d4e-ba79-173148b98f87.json
new file mode 100644
index 0000000000000..1ad91de3a6fe0
--- /dev/null
+++ b/change/@fluentui-react-tooltip-d940930a-d83b-4d4e-ba79-173148b98f87.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Tooltip",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx b/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx
index 2b4c27477eef9..e1092c7dfbc7e 100644
--- a/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx
+++ b/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx
@@ -80,6 +80,7 @@ export function isConformant(
       'consistent-callback-args',
       // Disabled as v0 has different prefix
       'component-has-static-classname',
+      'component-has-static-classnames-object',
     ],
     helperComponents: [Ref, RefFindNode, FocusZone],
     extraTests: extraConformanceTests,
diff --git a/packages/react-accordion/etc/react-accordion.api.md b/packages/react-accordion/etc/react-accordion.api.md
index 84e6fa46b47e8..f8855c8045662 100644
--- a/packages/react-accordion/etc/react-accordion.api.md
+++ b/packages/react-accordion/etc/react-accordion.api.md
@@ -11,13 +11,17 @@ import type { Context } from '@fluentui/react-context-selector';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Accordion: ForwardRefComponent<AccordionProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const accordionClassName = "fui-Accordion";
 
+// @public (undocumented)
+export const accordionClassNames: SlotClassNames<AccordionSlots>;
+
 // @public (undocumented)
 export const AccordionContext: Context<AccordionContextValue>;
 
@@ -37,9 +41,12 @@ export type AccordionContextValues = {
 // @public
 export const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const accordionHeaderClassName = "fui-AccordionHeader";
 
+// @public (undocumented)
+export const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots>;
+
 // @public (undocumented)
 export type AccordionHeaderContextValue = {
     disabled: boolean;
@@ -81,9 +88,12 @@ export type AccordionIndex = number | number[];
 // @public
 export const AccordionItem: ForwardRefComponent<AccordionItemProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const accordionItemClassName = "fui-AccordionItem";
 
+// @public (undocumented)
+export const accordionItemClassNames: SlotClassNames<AccordionItemSlots>;
+
 // @public (undocumented)
 export const AccordionItemContext: React_2.Context<AccordionItemContextValue>;
 
@@ -117,9 +127,12 @@ export type AccordionItemValue = unknown;
 // @public
 export const AccordionPanel: ForwardRefComponent<AccordionPanelProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const accordionPanelClassName = "fui-AccordionPanel";
 
+// @public (undocumented)
+export const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots>;
+
 // @public (undocumented)
 export type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
 
diff --git a/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts b/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
index 10bb30b4281c9..9bdb7be9aa8f3 100644
--- a/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
+++ b/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
@@ -1,10 +1,17 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
-import type { AccordionState } from './Accordion.types';
+import type { AccordionSlots, AccordionState } from './Accordion.types';
 
+/**
+ * @deprecated Use `accordionClassNames.root` instead.
+ */
 export const accordionClassName = 'fui-Accordion';
+export const accordionClassNames: SlotClassNames<AccordionSlots> = {
+  root: 'fui-Accordion',
+};
 
 export const useAccordionStyles_unstable = (state: AccordionState) => {
-  state.root.className = mergeClasses(accordionClassName, state.root.className);
+  state.root.className = mergeClasses(accordionClassNames.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx b/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
index e9eec27b560fc..92d682c8d2eb8 100644
--- a/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
+++ b/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
@@ -14,6 +14,15 @@ describe('AccordionHeader', () => {
     Component: AccordionHeader,
     displayName: 'AccordionHeader',
     helperComponents: [AccordionHeaderContext.Provider],
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+          },
+        },
+      ],
+    },
   });
 
   afterEach(() => {
diff --git a/packages/react-accordion/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap b/packages/react-accordion/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
index 8b902553c5215..d7d67797c40dd 100644
--- a/packages/react-accordion/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
+++ b/packages/react-accordion/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
@@ -6,13 +6,13 @@ exports[`AccordionHeader renders a default state 1`] = `
 >
   <button
     aria-expanded={false}
-    className=""
+    className="fui-AccordionHeader__button"
     disabled={false}
     onClick={[Function]}
   >
     <span
       aria-hidden={true}
-      className=""
+      className="fui-AccordionHeader__expandIcon"
     >
       <svg
         aria-hidden={true}
diff --git a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
index acce4b16678bb..674deae116841 100644
--- a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
+++ b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
@@ -1,9 +1,19 @@
 import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-import type { AccordionHeaderState } from './AccordionHeader.types';
+import type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHeader.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `accordionHeaderClassNames.root` instead.
+ */
 export const accordionHeaderClassName = 'fui-AccordionHeader';
+export const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots> = {
+  root: 'fui-AccordionHeader',
+  button: 'fui-AccordionHeader__button',
+  expandIcon: 'fui-AccordionHeader__expandIcon',
+  icon: 'fui-AccordionHeader__icon',
+};
 
 const useStyles = makeStyles({
   // TODO: this should be extracted to another package
@@ -88,7 +98,7 @@ const useStyles = makeStyles({
 export const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    accordionHeaderClassName,
+    accordionHeaderClassNames.root,
     styles.root,
     state.inline && styles.rootInline,
     state.disabled && styles.rootDisabled,
@@ -96,6 +106,7 @@ export const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) =
   );
 
   state.button.className = mergeClasses(
+    accordionHeaderClassNames.button,
     styles.resetButton,
     styles.button,
     styles.focusIndicator,
@@ -108,6 +119,7 @@ export const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) =
 
   if (state.expandIcon) {
     state.expandIcon.className = mergeClasses(
+      accordionHeaderClassNames.expandIcon,
       styles.expandIcon,
       state.expandIconPosition === 'start' && styles.expandIconStart,
       state.expandIconPosition === 'end' && styles.expandIconEnd,
@@ -116,6 +128,7 @@ export const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) =
   }
   if (state.icon) {
     state.icon.className = mergeClasses(
+      accordionHeaderClassNames.icon,
       styles.icon,
       state.expandIconPosition === 'end' && styles.iconExpandIconEnd,
       state.icon.className,
diff --git a/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts b/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
index 450679e3c32de..def29824f8710 100644
--- a/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
+++ b/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
@@ -1,10 +1,17 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
-import type { AccordionItemState } from './AccordionItem.types';
+import type { AccordionItemSlots, AccordionItemState } from './AccordionItem.types';
 
+/**
+ * @deprecated Use `accordionItemClassNames.root` instead.
+ */
 export const accordionItemClassName = 'fui-AccordionItem';
+export const accordionItemClassNames: SlotClassNames<AccordionItemSlots> = {
+  root: 'fui-AccordionItem',
+};
 
 export const useAccordionItemStyles_unstable = (state: AccordionItemState) => {
-  state.root.className = mergeClasses(accordionItemClassName, state.root.className);
+  state.root.className = mergeClasses(accordionItemClassNames.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts b/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
index 74fe24da2cb23..b7e1d98bb25f9 100644
--- a/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
+++ b/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
@@ -1,7 +1,14 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { AccordionPanelState } from './AccordionPanel.types';
+import type { AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';
 
+/**
+ * @deprecated Use `accordionPanelClassNames.root` instead.
+ */
 export const accordionPanelClassName = 'fui-AccordionPanel';
+export const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots> = {
+  root: 'fui-AccordionPanel',
+};
 
 /**
  * Styles for the root slot
@@ -16,7 +23,7 @@ const useStyles = makeStyles({
 /** Applies style classnames to slots */
 export const useAccordionPanelStyles_unstable = (state: AccordionPanelState) => {
   const styles = useStyles();
-  state.root.className = mergeClasses(accordionPanelClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(accordionPanelClassNames.root, styles.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-avatar/etc/react-avatar.api.md b/packages/react-avatar/etc/react-avatar.api.md
index cecc69d994564..9a5f6c26e1b5a 100644
--- a/packages/react-avatar/etc/react-avatar.api.md
+++ b/packages/react-avatar/etc/react-avatar.api.md
@@ -10,13 +10,17 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { PresenceBadge } from '@fluentui/react-badge';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public (undocumented)
 export const Avatar: ForwardRefComponent<AvatarProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const avatarClassName = "fui-Avatar";
 
+// @public (undocumented)
+export const avatarClassNames: SlotClassNames<AvatarSlots>;
+
 // @public
 export type AvatarNamedColor = 'darkRed' | 'cranberry' | 'red' | 'pumpkin' | 'peach' | 'marigold' | 'gold' | 'brass' | 'brown' | 'forest' | 'seafoam' | 'darkGreen' | 'lightTeal' | 'teal' | 'steel' | 'blue' | 'royalBlue' | 'cornflower' | 'navy' | 'lavender' | 'purple' | 'grape' | 'lilac' | 'pink' | 'magenta' | 'plum' | 'beige' | 'mink' | 'platinum' | 'anchor';
 
diff --git a/packages/react-avatar/src/components/Avatar/Avatar.test.tsx b/packages/react-avatar/src/components/Avatar/Avatar.test.tsx
index 4fce4c49e8db3..9103ef996579e 100644
--- a/packages/react-avatar/src/components/Avatar/Avatar.test.tsx
+++ b/packages/react-avatar/src/components/Avatar/Avatar.test.tsx
@@ -2,11 +2,42 @@ import * as React from 'react';
 import { isConformant } from '../../common/isConformant';
 import { Avatar } from './Avatar';
 import { render, screen } from '@testing-library/react';
+import { avatarClassNames } from './useAvatarStyles';
 
 describe('Avatar', () => {
   isConformant({
     Component: Avatar,
     displayName: 'Avatar',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            image: { src: 'avatar.png', alt: 'test-image' },
+            initials: 'Test Initials',
+            badge: 'Test Badge',
+          },
+          expectedClassNames: {
+            root: avatarClassNames.root,
+            image: avatarClassNames.image,
+            initials: avatarClassNames.initials,
+            badge: avatarClassNames.badge,
+          },
+        },
+        {
+          props: {
+            image: { src: 'avatar.png', alt: 'test-image' },
+            icon: 'Test Icon',
+            badge: 'Test Badge',
+          },
+          expectedClassNames: {
+            root: avatarClassNames.root,
+            image: avatarClassNames.image,
+            icon: avatarClassNames.icon,
+            badge: avatarClassNames.badge,
+          },
+        },
+      ],
+    },
   });
 
   /**
diff --git a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
index bbc5281c70244..d7cc536570037 100644
--- a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
+++ b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
@@ -1,8 +1,19 @@
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { AvatarState } from './Avatar.types';
+import type { AvatarSlots, AvatarState } from './Avatar.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `avatarClassNames.root` instead.
+ */
 export const avatarClassName = 'fui-Avatar';
+export const avatarClassNames: SlotClassNames<AvatarSlots> = {
+  root: 'fui-Avatar',
+  image: 'fui-Avatar__image',
+  initials: 'fui-Avatar__initials',
+  icon: 'fui-Avatar__icon',
+  badge: 'fui-Avatar__badge',
+};
 
 //
 // TODO: All animation constants should go to theme or globals?
@@ -419,18 +430,23 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {
     }
   }
 
-  state.root.className = mergeClasses(avatarClassName, ...rootClasses, state.root.className);
+  state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);
 
   if (state.badge) {
-    state.badge.className = mergeClasses(styles.badge, size >= 64 && styles.badgeLarge, state.badge.className);
+    state.badge.className = mergeClasses(
+      avatarClassNames.badge,
+      styles.badge,
+      size >= 64 && styles.badgeLarge,
+      state.badge.className,
+    );
   }
 
   if (state.image) {
-    state.image.className = mergeClasses(styles.image, state.image.className);
+    state.image.className = mergeClasses(avatarClassNames.image, styles.image, state.image.className);
   }
 
   if (state.initials) {
-    state.initials.className = mergeClasses(styles.iconInitials, state.initials.className);
+    state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, state.initials.className);
   }
 
   if (state.icon) {
@@ -449,7 +465,12 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {
       iconSizeClass = styles.icon48;
     }
 
-    state.icon.className = mergeClasses(styles.iconInitials, iconSizeClass, state.icon.className);
+    state.icon.className = mergeClasses(
+      avatarClassNames.icon,
+      styles.iconInitials,
+      iconSizeClass,
+      state.icon.className,
+    );
   }
 
   return state;
diff --git a/packages/react-badge/etc/react-badge.api.md b/packages/react-badge/etc/react-badge.api.md
index ba1ab8ae07cd0..476ad1d8eb24b 100644
--- a/packages/react-badge/etc/react-badge.api.md
+++ b/packages/react-badge/etc/react-badge.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Badge: ForwardRefComponent<BadgeProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const badgeClassName = "fui-Badge";
 
+// @public (undocumented)
+export const badgeClassNames: SlotClassNames<BadgeSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "BadgeCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -33,9 +37,12 @@ export type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;
 // @public
 export const CounterBadge: ForwardRefComponent<CounterBadgeProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const counterBadgeClassName = "fui-CounterBadge";
 
+// @public (undocumented)
+export const counterBadgeClassNames: SlotClassNames<BadgeSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "CounterBadgeCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -47,9 +54,12 @@ export type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape' | 'color
 // @public
 export const PresenceBadge: ForwardRefComponent<PresenceBadgeProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const presenceBadgeClassName = "fui-PresenceBadge";
 
+// @public (undocumented)
+export const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "PresenceBadgeCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
diff --git a/packages/react-badge/src/components/Badge/Badge.test.tsx b/packages/react-badge/src/components/Badge/Badge.test.tsx
index db081cf3cee42..e5195b010141f 100644
--- a/packages/react-badge/src/components/Badge/Badge.test.tsx
+++ b/packages/react-badge/src/components/Badge/Badge.test.tsx
@@ -8,6 +8,13 @@ describe('Badge', () => {
   isConformant({
     Component: Badge,
     displayName: 'Badge',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: { icon: 'Test Icon' },
+        },
+      ],
+    },
   });
 
   let wrapper: ReactWrapper | undefined;
diff --git a/packages/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
index a7ed187cf4020..c27f6ff76e2dd 100644
--- a/packages/react-badge/src/components/Badge/useBadgeStyles.ts
+++ b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
@@ -1,8 +1,16 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { BadgeState } from './Badge.types';
+import type { BadgeSlots, BadgeState } from './Badge.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `badgeClassNames.root` instead.
+ */
 export const badgeClassName = 'fui-Badge';
+export const badgeClassNames: SlotClassNames<BadgeSlots> = {
+  root: 'fui-Badge',
+  icon: 'fui-Badge__icon',
+};
 
 const useRootStyles = makeStyles({
   base: {
@@ -261,7 +269,7 @@ export const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {
   const rootStyles = useRootStyles();
 
   state.root.className = mergeClasses(
-    badgeClassName,
+    badgeClassNames.root,
     rootStyles.base,
     rootStyles[state.size],
     rootStyles[state.shape],
@@ -275,7 +283,12 @@ export const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {
 
   const iconStyles = useIconStyles();
   if (state.icon) {
-    state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);
+    state.icon.className = mergeClasses(
+      badgeClassNames.icon,
+      iconStyles.base,
+      iconStyles[state.size],
+      state.icon.className,
+    );
   }
 
   return state;
diff --git a/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx b/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
index ca023e85028b3..b5dfdcfdae22f 100644
--- a/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
+++ b/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
@@ -8,6 +8,13 @@ describe('CounterBadge', () => {
   isConformant({
     Component: CounterBadge,
     displayName: 'CounterBadge',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: { icon: 'Test Icon' },
+        },
+      ],
+    },
   });
 
   let wrapper: ReactWrapper | undefined;
diff --git a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
index 2eebfc42b0eab..c53c714cb421f 100644
--- a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
+++ b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
@@ -1,8 +1,17 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { BadgeSlots } from '../Badge/Badge.types';
 import type { CounterBadgeState } from './CounterBadge.types';
 
+/**
+ * @deprecated Use `counterBadgeClassNames.root` instead.
+ */
 export const counterBadgeClassName = 'fui-CounterBadge';
+export const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {
+  root: 'fui-CounterBadge',
+  icon: 'fui-CounterBadge__icon',
+};
 
 const useStyles = makeStyles({
   dot: {
@@ -22,10 +31,15 @@ const useStyles = makeStyles({
 export const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    counterBadgeClassName,
+    counterBadgeClassNames.root,
     state.dot && styles.dot,
     !state.showZero && state.count === 0 && !state.dot && styles.hide,
     state.root.className,
   );
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);
+  }
+
   return useBadgeStyles_unstable(state) as CounterBadgeState;
 };
diff --git a/packages/react-badge/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap b/packages/react-badge/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap
index b78f582b95e28..259f4e749489a 100644
--- a/packages/react-badge/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap
+++ b/packages/react-badge/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap
@@ -5,7 +5,9 @@ exports[`PresenceBadge renders a default state 1`] = `
   aria-hidden={true}
   className="fui-PresenceBadge"
 >
-  <span>
+  <span
+    className="fui-PresenceBadge__icon"
+  >
     <svg
       aria-hidden={true}
       className=""
diff --git a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
index 644dc0f337eb0..21a592fe83802 100644
--- a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
+++ b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
@@ -1,8 +1,17 @@
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { BadgeSlots } from '../Badge/Badge.types';
 import type { PresenceBadgeState } from './PresenceBadge.types';
 
+/**
+ * @deprecated Use `presenceBadgeClassNames.root` instead.
+ */
 export const presenceBadgeClassName = 'fui-PresenceBadge';
+export const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {
+  root: 'fui-PresenceBadge',
+  icon: 'fui-PresenceBadge__icon',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -81,7 +90,7 @@ const useStyles = makeStyles({
 export const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    presenceBadgeClassName,
+    presenceBadgeClassNames.root,
     styles.root,
     ['busy', 'doNotDisturb', 'unknown'].includes(state.status) && styles.statusBusy,
     state.status === 'away' && styles.statusAway,
@@ -100,5 +109,9 @@ export const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): Pres
     state.root.className,
   );
 
+  if (state.icon) {
+    state.icon.className = mergeClasses(presenceBadgeClassNames.icon, state.icon.className);
+  }
+
   return state;
 };
diff --git a/packages/react-button/etc/react-button.api.md b/packages/react-button/etc/react-button.api.md
index 4de468a00f3ec..39a9a0b032c6e 100644
--- a/packages/react-button/etc/react-button.api.md
+++ b/packages/react-button/etc/react-button.api.md
@@ -15,7 +15,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Button: ForwardRefComponent<ButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const buttonClassName: string;
 
 // @public (undocumented)
@@ -40,7 +40,7 @@ export type ButtonState = ComponentState<ButtonSlots> & ButtonCommons & {
 // @public
 export const CompoundButton: ForwardRefComponent<CompoundButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const compoundButtonClassName: string;
 
 // @public (undocumented)
@@ -61,7 +61,7 @@ export type CompoundButtonState = ComponentState<CompoundButtonSlots> & Omit<But
 // @public
 export const MenuButton: ForwardRefComponent<MenuButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuButtonClassName: string;
 
 // @public (undocumented)
@@ -95,7 +95,7 @@ export const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Elemen
 // @public
 export const SplitButton: ForwardRefComponent<SplitButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const splitButtonClassName: string;
 
 // @public (undocumented)
@@ -117,7 +117,7 @@ export type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<ButtonSta
 // @public
 export const ToggleButton: ForwardRefComponent<ToggleButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const toggleButtonClassName: string;
 
 // @public (undocumented)
diff --git a/packages/react-button/src/components/Button/Button.test.tsx b/packages/react-button/src/components/Button/Button.test.tsx
index 813f314ef3336..f5c6db9a5c44e 100644
--- a/packages/react-button/src/components/Button/Button.test.tsx
+++ b/packages/react-button/src/components/Button/Button.test.tsx
@@ -10,6 +10,15 @@ describe('Button', () => {
   isConformant({
     Component: Button as React.FunctionComponent<ButtonProps>,
     displayName: 'Button',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+          },
+        },
+      ],
+    },
   });
 
   describe('meets accessibility requirements', () => {
diff --git a/packages/react-button/src/components/Button/index.ts b/packages/react-button/src/components/Button/index.ts
index 65bdfd3b13998..2055cfbd68b48 100644
--- a/packages/react-button/src/components/Button/index.ts
+++ b/packages/react-button/src/components/Button/index.ts
@@ -3,4 +3,9 @@ export * from './Button';
 export type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';
 export * from './renderButton';
 export * from './useButton';
-export { buttonClassName, buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';
+export {
+  /* eslint-disable-next-line deprecation/deprecation */
+  buttonClassName,
+  buttonClassNames,
+  useButtonStyles_unstable,
+} from './useButtonStyles';
diff --git a/packages/react-button/src/components/Button/useButtonStyles.ts b/packages/react-button/src/components/Button/useButtonStyles.ts
index a99ec843b1491..ea00b3eaba6c7 100644
--- a/packages/react-button/src/components/Button/useButtonStyles.ts
+++ b/packages/react-button/src/components/Button/useButtonStyles.ts
@@ -8,8 +8,9 @@ export const buttonClassNames: SlotClassNames<ButtonSlots> = {
   root: 'fui-Button',
   icon: 'fui-Button__icon',
 };
-
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `buttonClassNames.root` instead.
+ */
 export const buttonClassName = buttonClassNames.root;
 
 const useRootStyles = makeStyles({
diff --git a/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx b/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx
index d115f69f551f2..16995ef1d6aad 100644
--- a/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx
+++ b/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx
@@ -9,6 +9,17 @@ describe('CompoundButton', () => {
   isConformant({
     Component: CompoundButton as React.FunctionComponent<CompoundButtonProps>,
     displayName: 'CompoundButton',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            children: 'Test Children',
+            secondaryContent: 'Test Secondary Content',
+          },
+        },
+      ],
+    },
   });
 
   describe('when rendered as a button', () => {
diff --git a/packages/react-button/src/components/CompoundButton/index.ts b/packages/react-button/src/components/CompoundButton/index.ts
index fd0e57899db43..9482a3b93c198 100644
--- a/packages/react-button/src/components/CompoundButton/index.ts
+++ b/packages/react-button/src/components/CompoundButton/index.ts
@@ -3,6 +3,7 @@ export * from './CompoundButton.types';
 export * from './renderCompoundButton';
 export * from './useCompoundButton';
 export {
+  /* eslint-disable-next-line deprecation/deprecation */
   compoundButtonClassName,
   compoundButtonClassNames,
   useCompoundButtonStyles_unstable,
diff --git a/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts b/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
index 53b6d18ee4afa..e0611b3df5432 100644
--- a/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
+++ b/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
@@ -11,7 +11,9 @@ export const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {
   secondaryContent: 'fui-CompoundButton__secondaryContent',
 };
 
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `compoundButtonClassName.root` instead.
+ */
 export const compoundButtonClassName = compoundButtonClassNames.root;
 
 const useRootStyles = makeStyles({
diff --git a/packages/react-button/src/components/MenuButton/MenuButton.test.tsx b/packages/react-button/src/components/MenuButton/MenuButton.test.tsx
index 316a0ca81b0cb..4868d5ba482f3 100644
--- a/packages/react-button/src/components/MenuButton/MenuButton.test.tsx
+++ b/packages/react-button/src/components/MenuButton/MenuButton.test.tsx
@@ -4,11 +4,35 @@ import userEvent from '@testing-library/user-event';
 import { isConformant } from '../../common/isConformant';
 import { MenuButton } from './MenuButton';
 import { MenuButtonProps } from './MenuButton.types';
+import { menuButtonClassNames } from './useMenuButtonStyles';
 
 describe('MenuButton', () => {
   isConformant({
     Component: MenuButton as React.FunctionComponent<MenuButtonProps>,
     displayName: 'MenuButton',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            menuIcon: 'Test MenuIcon',
+          },
+          expectedClassNames: {
+            root: menuButtonClassNames.root,
+            icon: menuButtonClassNames.icon,
+          },
+        },
+        {
+          props: {
+            menuIcon: 'Test MenuIcon',
+          },
+          expectedClassNames: {
+            root: menuButtonClassNames.root,
+            menuIcon: menuButtonClassNames.menuIcon,
+          },
+        },
+      ],
+    },
   });
 
   describe('when rendered as a button', () => {
diff --git a/packages/react-button/src/components/MenuButton/index.ts b/packages/react-button/src/components/MenuButton/index.ts
index 7ec4cfc5d9d3c..c24584a6715c0 100644
--- a/packages/react-button/src/components/MenuButton/index.ts
+++ b/packages/react-button/src/components/MenuButton/index.ts
@@ -2,4 +2,9 @@ export * from './MenuButton.types';
 export * from './MenuButton';
 export * from './renderMenuButton';
 export * from './useMenuButton';
-export { menuButtonClassName, menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
+export {
+  /* eslint-disable-next-line deprecation/deprecation */
+  menuButtonClassName,
+  menuButtonClassNames,
+  useMenuButtonStyles_unstable,
+} from './useMenuButtonStyles';
diff --git a/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts b/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
index 4210ca3df4b52..8818af088920e 100644
--- a/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
+++ b/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
@@ -10,7 +10,9 @@ export const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {
   menuIcon: 'fui-MenuButton__menuIcon',
 };
 
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `menuButtonClassName.root` instead.
+ */
 export const menuButtonClassName = menuButtonClassNames.root;
 
 const useMenuIconStyles = makeStyles({
@@ -42,7 +44,11 @@ export const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButton
   }
 
   if (state.menuIcon) {
-    state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);
+    state.menuIcon.className = mergeClasses(
+      menuButtonClassNames.menuIcon,
+      menuIconStyles[state.size],
+      state.menuIcon.className,
+    );
   }
 
   useButtonStyles_unstable(state as ButtonState);
diff --git a/packages/react-button/src/components/SplitButton/SplitButton.test.tsx b/packages/react-button/src/components/SplitButton/SplitButton.test.tsx
index 4950aadb8e90f..e8fb53269a723 100644
--- a/packages/react-button/src/components/SplitButton/SplitButton.test.tsx
+++ b/packages/react-button/src/components/SplitButton/SplitButton.test.tsx
@@ -9,6 +9,16 @@ describe('SplitButton', () => {
   isConformant({
     Component: SplitButton as React.FunctionComponent<SplitButtonProps>,
     displayName: 'SplitButton',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            menuIcon: 'Test MenuIcon',
+          },
+        },
+      ],
+    },
   });
 
   it('renders correctly', () => {
diff --git a/packages/react-button/src/components/SplitButton/index.ts b/packages/react-button/src/components/SplitButton/index.ts
index 04ee7588a3d39..aacb3025669cd 100644
--- a/packages/react-button/src/components/SplitButton/index.ts
+++ b/packages/react-button/src/components/SplitButton/index.ts
@@ -2,4 +2,9 @@ export * from './SplitButton';
 export * from './SplitButton.types';
 export * from './renderSplitButton';
 export * from './useSplitButton';
-export { splitButtonClassName, splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
+export {
+  /* eslint-disable-next-line deprecation/deprecation */
+  splitButtonClassName,
+  splitButtonClassNames,
+  useSplitButtonStyles_unstable,
+} from './useSplitButtonStyles';
diff --git a/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts b/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts
index 48476cad3633a..e240bc8a6da41 100644
--- a/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts
+++ b/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts
@@ -10,7 +10,9 @@ export const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {
   primaryActionButton: 'fui-SplitButton__primaryActionButton',
 };
 
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `splitButtonClassName.root` instead.
+ */
 export const splitButtonClassName = splitButtonClassNames.root;
 
 const useFocusStyles = makeStyles({
diff --git a/packages/react-button/src/components/ToggleButton/ToggleButton.test.tsx b/packages/react-button/src/components/ToggleButton/ToggleButton.test.tsx
index c771f53e9b472..30e69ac356b48 100644
--- a/packages/react-button/src/components/ToggleButton/ToggleButton.test.tsx
+++ b/packages/react-button/src/components/ToggleButton/ToggleButton.test.tsx
@@ -15,6 +15,15 @@ describe('ToggleButton', () => {
   isConformant({
     Component: ToggleButton as React.FunctionComponent<ToggleButtonProps>,
     displayName: 'ToggleButton',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+          },
+        },
+      ],
+    },
   });
 
   xdescribe('AccesibilityButtonBehavior', () => {
diff --git a/packages/react-button/src/components/ToggleButton/index.ts b/packages/react-button/src/components/ToggleButton/index.ts
index 659aefa2b4080..d6d157426c7c3 100644
--- a/packages/react-button/src/components/ToggleButton/index.ts
+++ b/packages/react-button/src/components/ToggleButton/index.ts
@@ -2,4 +2,9 @@ export * from './ToggleButton';
 export * from './ToggleButton.types';
 export * from './renderToggleButton';
 export * from './useToggleButton';
-export { toggleButtonClassName, toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
+export {
+  /* eslint-disable-next-line deprecation/deprecation */
+  toggleButtonClassName,
+  toggleButtonClassNames,
+  useToggleButtonStyles_unstable,
+} from './useToggleButtonStyles';
diff --git a/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts b/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
index be2c9536d80a9..b3450b3353893 100644
--- a/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
+++ b/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
@@ -10,7 +10,9 @@ export const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {
   icon: 'fui-ToggleButton__icon',
 };
 
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `toggleButtonClassName.root` instead.
+ */
 export const toggleButtonClassName = toggleButtonClassNames.root;
 
 const useCheckedStyles = makeStyles({
diff --git a/packages/react-card/etc/react-card.api.md b/packages/react-card/etc/react-card.api.md
index 9a3b2e74b4bfe..54f5eb9606854 100644
--- a/packages/react-card/etc/react-card.api.md
+++ b/packages/react-card/etc/react-card.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Card: ForwardRefComponent<CardProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const cardClassName = "fui-Card";
 
+// @public (undocumented)
+export const cardClassNames: SlotClassNames<CardSlots>;
+
 // @public (undocumented)
 export type CardCommons = {
     appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
@@ -24,9 +28,12 @@ export type CardCommons = {
 // @public
 export const CardFooter: ForwardRefComponent<CardFooterProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const cardFooterClassName = "fui-CardFooter";
 
+// @public (undocumented)
+export const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
+
 // @public
 export type CardFooterProps = ComponentProps<CardFooterSlots>;
 
@@ -42,9 +49,12 @@ export type CardFooterState = ComponentState<CardFooterSlots>;
 // @public
 export const CardHeader: ForwardRefComponent<CardHeaderProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const cardHeaderClassName = "fui-CardHeader";
 
+// @public (undocumented)
+export const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
+
 // @public
 export type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;
 
@@ -64,9 +74,12 @@ export type CardHeaderState = ComponentState<CardHeaderSlots>;
 // @public
 export const CardPreview: ForwardRefComponent<CardPreviewProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const cardPreviewClassName = "fui-CardPreview";
 
+// @public (undocumented)
+export const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
+
 // @public
 export type CardPreviewProps = ComponentProps<CardPreviewSlots>;
 
diff --git a/packages/react-card/src/components/Card/useCardStyles.ts b/packages/react-card/src/components/Card/useCardStyles.ts
index 2c16bc278882b..94aafea32906f 100644
--- a/packages/react-card/src/components/Card/useCardStyles.ts
+++ b/packages/react-card/src/components/Card/useCardStyles.ts
@@ -1,9 +1,16 @@
 import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { cardPreviewClassName } from '../CardPreview/index';
-import type { CardState } from './Card.types';
+import { cardPreviewClassNames } from '../CardPreview/index';
+import type { CardSlots, CardState } from './Card.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `cardClassNames.root` instead.
+ */
 export const cardClassName = 'fui-Card';
+export const cardClassNames: SlotClassNames<CardSlots> = {
+  root: 'fui-Card',
+};
 
 /**
  * Styles for the root slot
@@ -20,7 +27,7 @@ const useStyles = makeStyles({
     // Size: medium
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
 
-    [`> *:not(.${cardPreviewClassName})`]: {
+    [`> *:not(.${cardPreviewClassNames.root})`]: {
       // Size: medium
       ...shorthands.margin('12px'),
     },
@@ -124,7 +131,7 @@ export const useCardStyles_unstable = (state: CardState): CardState => {
     state.root.onTouchEnd;
 
   state.root.className = mergeClasses(
-    cardClassName,
+    cardClassNames.root,
     styles.root,
     state.appearance === 'filled' && styles.filled,
     state.appearance === 'filled-alternative' && styles.filledAlternative,
diff --git a/packages/react-card/src/components/CardFooter/CardFooter.test.tsx b/packages/react-card/src/components/CardFooter/CardFooter.test.tsx
index 1ff6eedc45952..faf4af2bb6342 100644
--- a/packages/react-card/src/components/CardFooter/CardFooter.test.tsx
+++ b/packages/react-card/src/components/CardFooter/CardFooter.test.tsx
@@ -7,6 +7,15 @@ describe('CardFooter', () => {
   isConformant({
     Component: CardFooter,
     displayName: 'CardFooter',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            action: 'Test Action',
+          },
+        },
+      ],
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap b/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap
index e549ccc76536b..11d4ba5e2fc2c 100644
--- a/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap
+++ b/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`CardFooter renders a default state 1`] = `
   >
     Default CardFooter
     <div
-      class=""
+      class="fui-CardFooter__action"
     >
       Action slot
     </div>
diff --git a/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts b/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
index a83069ff8aa11..312647b728503 100644
--- a/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
+++ b/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
@@ -1,7 +1,15 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { CardFooterState } from './CardFooter.types';
+import type { CardFooterSlots, CardFooterState } from './CardFooter.types';
 
+/**
+ * @deprecated Use `cardFooterClassNames.root` instead.
+ */
 export const cardFooterClassName = 'fui-CardFooter';
+export const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {
+  root: 'fui-CardFooter',
+  action: 'fui-CardFooter__action',
+};
 
 /**
  * Styles for the root slot
@@ -22,10 +30,10 @@ const useStyles = makeStyles({
  */
 export const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(cardFooterClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
 
   if (state.action) {
-    state.action.className = mergeClasses(styles.action, state.action.className);
+    state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);
   }
 
   return state;
diff --git a/packages/react-card/src/components/CardHeader/CardHeader.test.tsx b/packages/react-card/src/components/CardHeader/CardHeader.test.tsx
index 9dc742cf7ec20..ed14bdd020135 100644
--- a/packages/react-card/src/components/CardHeader/CardHeader.test.tsx
+++ b/packages/react-card/src/components/CardHeader/CardHeader.test.tsx
@@ -7,6 +7,13 @@ describe('CardHeader', () => {
   isConformant({
     Component: CardHeader,
     displayName: 'CardHeader',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: { header: 'Header Test', action: 'Action Test' },
+        },
+      ],
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap b/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap
index 2232557b8bfba..de76808005741 100644
--- a/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap
+++ b/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap
@@ -6,17 +6,27 @@ exports[`CardHeader renders a default state 1`] = `
     class="fui-CardHeader"
   >
     <div
-      class=""
+      class="fui-CardHeader__image"
     >
       Image slot
     </div>
     <div
-      class=""
+      class="fui-CardHeader__content"
     >
-      Title slot
-      Description slot
+      <span
+        class="fui-CardHeader__header"
+      >
+        Title slot
+      </span>
+      <span
+        class="fui-CardHeader__description"
+      >
+        Description slot
+      </span>
     </div>
-    <div>
+    <div
+      class="fui-CardHeader__action"
+    >
       Action slot
     </div>
   </div>
diff --git a/packages/react-card/src/components/CardHeader/useCardHeader.ts b/packages/react-card/src/components/CardHeader/useCardHeader.ts
index a83235fddf6e1..5cd8a55087401 100644
--- a/packages/react-card/src/components/CardHeader/useCardHeader.ts
+++ b/packages/react-card/src/components/CardHeader/useCardHeader.ts
@@ -19,8 +19,8 @@ export const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HT
       root: 'div',
       image: 'div',
       content: 'div',
-      header: React.Fragment,
-      description: React.Fragment,
+      header: 'span',
+      description: 'span',
       action: 'div',
     },
 
diff --git a/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts b/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
index 9ace96d870eed..384c1a3e386a2 100644
--- a/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
+++ b/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
@@ -1,7 +1,19 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { CardHeaderState } from './CardHeader.types';
+import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
 
+/**
+ * @deprecated Use `cardHeaderClassNames.root` instead.
+ */
 export const cardHeaderClassName = 'fui-CardHeader';
+export const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {
+  root: 'fui-CardHeader',
+  image: 'fui-CardHeader__image',
+  content: 'fui-CardHeader__content',
+  header: 'fui-CardHeader__header',
+  description: 'fui-CardHeader__description',
+  action: 'fui-CardHeader__action',
+};
 
 /**
  * Styles for the root slot
@@ -48,14 +60,26 @@ const useStyles = makeStyles({
  */
 export const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(cardHeaderClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);
 
   if (state.image) {
-    state.image.className = mergeClasses(styles.image, state.image.className);
+    state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);
   }
 
   if (state.content) {
-    state.content.className = mergeClasses(styles.textContainer, state.content.className);
+    state.content.className = mergeClasses(cardHeaderClassNames.content, styles.textContainer, state.content.className);
+  }
+
+  if (state.header) {
+    state.header.className = mergeClasses(cardHeaderClassNames.header, state.header.className);
+  }
+
+  if (state.description) {
+    state.description.className = mergeClasses(cardHeaderClassNames.description, state.description.className);
+  }
+
+  if (state.action) {
+    state.action.className = mergeClasses(cardHeaderClassNames.action, state.action.className);
   }
 
   return state;
diff --git a/packages/react-card/src/components/CardPreview/CardPreview.test.tsx b/packages/react-card/src/components/CardPreview/CardPreview.test.tsx
index 2df6f9360e939..4aa45bb0642c3 100644
--- a/packages/react-card/src/components/CardPreview/CardPreview.test.tsx
+++ b/packages/react-card/src/components/CardPreview/CardPreview.test.tsx
@@ -7,6 +7,13 @@ describe('CardPreview', () => {
   isConformant({
     Component: CardPreview,
     displayName: 'CardPreview',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: { logo: 'Test Logo' },
+        },
+      ],
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap b/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
index b734ccb54fb5f..f7009bc0f9790 100644
--- a/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
+++ b/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`CardPreview renders a default state 1`] = `
   >
     Default CardPreview
     <div
-      class=""
+      class="fui-CardPreview__logo"
     >
       Logo slot
     </div>
diff --git a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
index c57fe3e7ceb63..319336067983b 100644
--- a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
+++ b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
@@ -1,7 +1,15 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { CardPreviewState } from './CardPreview.types';
+import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
 
+/**
+ * @deprecated Use `cardPreviewClassNames.root` instead.
+ */
 export const cardPreviewClassName = 'fui-CardPreview';
+export const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {
+  root: 'fui-CardPreview',
+  logo: 'fui-CardPreview__logo',
+};
 
 /**
  * Styles for the root slot
@@ -30,10 +38,10 @@ const useStyles = makeStyles({
  */
 export const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(cardPreviewClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
 
   if (state.logo) {
-    state.logo.className = mergeClasses(styles.logo, state.logo.className);
+    state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);
   }
 
   return state;
diff --git a/packages/react-checkbox/etc/react-checkbox.api.md b/packages/react-checkbox/etc/react-checkbox.api.md
index a850a7734cfa1..962b58c98f6bf 100644
--- a/packages/react-checkbox/etc/react-checkbox.api.md
+++ b/packages/react-checkbox/etc/react-checkbox.api.md
@@ -10,13 +10,17 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
 import { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Checkbox: ForwardRefComponent<CheckboxProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const checkboxClassName = "fui-Checkbox";
 
+// @public (undocumented)
+export const checkboxClassNames: SlotClassNames<CheckboxSlots>;
+
 // @public
 export interface CheckboxOnChangeData {
     // (undocumented)
diff --git a/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx b/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
index 29e17472cc0f8..23312cc623134 100644
--- a/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
+++ b/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
@@ -16,6 +16,13 @@ describe('Checkbox', () => {
     Component: Checkbox,
     displayName: 'Checkbox',
     primarySlot: 'input',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: { label: 'Test Label' },
+        },
+      ],
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index c4870e1c6044f..47a3285c0a7f4 100644
--- a/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Checkbox renders a custom indicator 1`] = `
     class="fui-Checkbox"
   >
     <input
-      class=""
+      class="fui-Checkbox__input"
       id="checkbox-1"
       type="checkbox"
     />
@@ -34,7 +34,7 @@ exports[`Checkbox renders a default state 1`] = `
     class="fui-Checkbox"
   >
     <input
-      class=""
+      class="fui-Checkbox__input"
       id="checkbox-1"
       type="checkbox"
     />
@@ -67,7 +67,7 @@ exports[`Checkbox renders checked 1`] = `
   >
     <input
       checked=""
-      class=""
+      class="fui-Checkbox__input"
       id="checkbox-1"
       type="checkbox"
     />
@@ -105,7 +105,7 @@ exports[`Checkbox renders mixed 1`] = `
     class="fui-Checkbox"
   >
     <input
-      class=""
+      class="fui-Checkbox__input"
       id="checkbox-1"
       type="checkbox"
     />
@@ -143,7 +143,7 @@ exports[`Checkbox renders with a label 1`] = `
     class="fui-Checkbox"
   >
     <input
-      class=""
+      class="fui-Checkbox__input"
       id="checkbox-1"
       type="checkbox"
     />
diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
index 52253bbd22d8e..6d9125bee3416 100644
--- a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
+++ b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
@@ -1,11 +1,19 @@
 import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-import { CheckboxState } from './Checkbox.types';
+import { CheckboxSlots, CheckboxState } from './Checkbox.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `checkboxClassNames.root` instead.
+ */
 export const checkboxClassName = 'fui-Checkbox';
-const indicatorClassName = 'fui-Checkbox__indicator';
-const labelClassName = 'fui-Checkbox__label';
+export const checkboxClassNames: SlotClassNames<CheckboxSlots> = {
+  root: 'fui-Checkbox',
+  label: 'fui-Checkbox__label',
+  input: 'fui-Checkbox__input',
+  indicator: 'fui-Checkbox__indicator',
+};
 
 // TODO replace these spacing constants with theme values once they're on the theme
 const spacingHorizontalS = '8px';
@@ -38,33 +46,33 @@ const useInputStyles = makeStyles({
     cursor: 'pointer',
 
     // When unchecked, hide the the checkmark icon (child of the indicator slot)
-    [`:not(:checked):not(:indeterminate) ~ .${indicatorClassName} > *`]: {
+    [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {
       opacity: 0,
     },
 
     // Colors for the unchecked state
     ':enabled:not(:checked):not(:indeterminate)': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${checkboxClassNames.label}`]: {
         color: tokens.colorNeutralForeground3,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${checkboxClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),
       },
 
       ':hover': {
-        [`& ~ .${labelClassName}`]: {
+        [`& ~ .${checkboxClassNames.label}`]: {
           color: tokens.colorNeutralForeground2,
         },
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),
         },
       },
 
       ':active:hover': {
-        [`& ~ .${labelClassName}`]: {
+        [`& ~ .${checkboxClassNames.label}`]: {
           color: tokens.colorNeutralForeground1,
         },
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),
         },
       },
@@ -72,24 +80,24 @@ const useInputStyles = makeStyles({
 
     // Colors for the checked state
     ':enabled:checked:not(:indeterminate)': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${checkboxClassNames.label}`]: {
         color: tokens.colorNeutralForeground1,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${checkboxClassNames.indicator}`]: {
         backgroundColor: tokens.colorCompoundBrandBackground,
         color: tokens.colorNeutralForegroundOnBrand,
         ...shorthands.borderColor(tokens.colorCompoundBrandBackground),
       },
 
       ':hover': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           backgroundColor: tokens.colorCompoundBrandBackgroundHover,
           ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),
         },
       },
 
       ':active:hover': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           backgroundColor: tokens.colorCompoundBrandBackgroundPressed,
           ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),
         },
@@ -98,23 +106,23 @@ const useInputStyles = makeStyles({
 
     // Colors for the mixed state
     ':enabled:indeterminate': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${checkboxClassNames.label}`]: {
         color: tokens.colorNeutralForeground1,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${checkboxClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorCompoundBrandStroke),
         color: tokens.colorCompoundBrandForeground1,
       },
 
       ':hover': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),
           color: tokens.colorCompoundBrandForeground1Hover,
         },
       },
 
       ':active:hover': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),
           color: tokens.colorCompoundBrandForeground1Pressed,
         },
@@ -124,10 +132,10 @@ const useInputStyles = makeStyles({
     ':disabled': {
       cursor: 'default',
 
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${checkboxClassNames.label}`]: {
         color: tokens.colorNeutralForegroundDisabled,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${checkboxClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
         color: tokens.colorNeutralForegroundDisabled,
       },
@@ -192,15 +200,15 @@ const useLabelStyles = makeStyles({
  */
 export const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {
   const rootStyles = useRootStyles();
-  state.root.className = mergeClasses(checkboxClassName, rootStyles.base, state.root.className);
+  state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);
 
   const inputStyles = useInputStyles();
-  state.input.className = mergeClasses(inputStyles.base, state.input.className);
+  state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, state.input.className);
 
   const indicatorStyles = useIndicatorStyles();
   if (state.indicator) {
     state.indicator.className = mergeClasses(
-      indicatorClassName,
+      checkboxClassNames.indicator,
       indicatorStyles.base,
       indicatorStyles[state.size],
       state.shape === 'circular' && indicatorStyles.circular,
@@ -211,7 +219,7 @@ export const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState
   const labelStyles = useLabelStyles();
   if (state.label) {
     state.label.className = mergeClasses(
-      labelClassName,
+      checkboxClassNames.label,
       labelStyles.base,
       labelStyles[state.size],
       state.label.className,
diff --git a/packages/react-checkbox/src/index.ts b/packages/react-checkbox/src/index.ts
index e789cb0fb7acc..ccff4e2208938 100644
--- a/packages/react-checkbox/src/index.ts
+++ b/packages/react-checkbox/src/index.ts
@@ -1,6 +1,8 @@
 export {
   Checkbox,
+  // eslint-disable-next-line deprecation/deprecation
   checkboxClassName,
+  checkboxClassNames,
   renderCheckbox_unstable,
   useCheckboxStyles_unstable,
   useCheckbox_unstable,
diff --git a/packages/react-combobox/etc/react-combobox.api.md b/packages/react-combobox/etc/react-combobox.api.md
index 7599c05342ca6..a813af1f6d3a3 100644
--- a/packages/react-combobox/etc/react-combobox.api.md
+++ b/packages/react-combobox/etc/react-combobox.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Combobox: ForwardRefComponent<ComboboxProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const comboboxClassName = "fui-Combobox";
 
+// @public (undocumented)
+export const comboboxClassNames: SlotClassNames<ComboboxSlots>;
+
 // @public (undocumented)
 export type ComboboxCommons = {};
 
@@ -33,9 +37,12 @@ export type ComboboxState = ComponentState<ComboboxSlots> & ComboboxCommons;
 // @public
 export const ComboButton: ForwardRefComponent<ComboButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const comboButtonClassName = "fui-ComboButton";
 
+// @public (undocumented)
+export const comboButtonClassNames: SlotClassNames<ComboButtonSlots>;
+
 // @public (undocumented)
 export type ComboButtonCommons = {};
 
@@ -53,9 +60,12 @@ export type ComboButtonState = ComponentState<ComboButtonSlots> & ComboButtonCom
 // @public
 export const Listbox: ForwardRefComponent<ListboxProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const listboxClassName = "fui-Listbox";
 
+// @public (undocumented)
+export const listboxClassNames: SlotClassNames<ListboxSlots>;
+
 // @public (undocumented)
 export type ListboxCommons = {};
 
@@ -74,18 +84,24 @@ export type ListboxState = ComponentState<ListboxSlots> & ListboxCommons;
 const Option_2: ForwardRefComponent<OptionProps>;
 export { Option_2 as Option }
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const optionClassName = "fui-Option";
 
+// @public (undocumented)
+export const optionClassNames: SlotClassNames<OptionSlots>;
+
 // @public (undocumented)
 export type OptionCommons = {};
 
 // @public
 export const OptionGroup: ForwardRefComponent<OptionGroupProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const optionGroupClassName = "fui-OptionGroup";
 
+// @public (undocumented)
+export const optionGroupClassNames: SlotClassNames<OptionGroupSlots>;
+
 // @public (undocumented)
 export type OptionGroupCommons = {};
 
diff --git a/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts b/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
index c849610242e43..53a51150e9fe2 100644
--- a/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
+++ b/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ComboButtonState } from './ComboButton.types';
+import type { ComboButtonSlots, ComboButtonState } from './ComboButton.types';
 
+/**
+ * @deprecated Use `comboButtonClassNames.root` instead.
+ */
 export const comboButtonClassName = 'fui-ComboButton';
+export const comboButtonClassNames: SlotClassNames<ComboButtonSlots> = {
+  root: 'fui-ComboButton',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useComboButtonStyles_unstable = (state: ComboButtonState): ComboButtonState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(comboButtonClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(comboButtonClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts b/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts
index 85ff6e09aeea4..65ebd997522e5 100644
--- a/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts
+++ b/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ComboboxState } from './Combobox.types';
+import type { ComboboxSlots, ComboboxState } from './Combobox.types';
 
+/**
+ * @deprecated Use `comboboxClassNames.root` instead.
+ */
 export const comboboxClassName = 'fui-Combobox';
+export const comboboxClassNames: SlotClassNames<ComboboxSlots> = {
+  root: 'fui-Combobox',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(comboboxClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(comboboxClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-combobox/src/components/Listbox/useListboxStyles.ts b/packages/react-combobox/src/components/Listbox/useListboxStyles.ts
index b6c39eeeeb057..9785f9666cb4b 100644
--- a/packages/react-combobox/src/components/Listbox/useListboxStyles.ts
+++ b/packages/react-combobox/src/components/Listbox/useListboxStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ListboxState } from './Listbox.types';
+import type { ListboxSlots, ListboxState } from './Listbox.types';
 
+/**
+ * @deprecated Use `listboxClassNames.root` instead.
+ */
 export const listboxClassName = 'fui-Listbox';
+export const listboxClassNames: SlotClassNames<ListboxSlots> = {
+  root: 'fui-Listbox',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useListboxStyles_unstable = (state: ListboxState): ListboxState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(listboxClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-combobox/src/components/Option/useOptionStyles.ts b/packages/react-combobox/src/components/Option/useOptionStyles.ts
index daa80af18d8f8..aaa8e4ce754d2 100644
--- a/packages/react-combobox/src/components/Option/useOptionStyles.ts
+++ b/packages/react-combobox/src/components/Option/useOptionStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { OptionState } from './Option.types';
+import type { OptionSlots, OptionState } from './Option.types';
 
+/**
+ * @deprecated Use `optionClassNames.root` instead.
+ */
 export const optionClassName = 'fui-Option';
+export const optionClassNames: SlotClassNames<OptionSlots> = {
+  root: 'fui-Option',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useOptionStyles_unstable = (state: OptionState): OptionState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(optionClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(optionClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts b/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts
index 992c0d8459a24..2d89b7a66344b 100644
--- a/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts
+++ b/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { OptionGroupState } from './OptionGroup.types';
+import type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';
 
+/**
+ * @deprecated Use `optionGroupClassNames.root` instead.
+ */
 export const optionGroupClassName = 'fui-OptionGroup';
+export const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {
+  root: 'fui-OptionGroup',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useOptionGroupStyles_unstable = (state: OptionGroupState): OptionGroupState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(optionGroupClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-components/etc/react-components.api.md b/packages/react-components/etc/react-components.api.md
index 6964f09b1a240..ff7655dc937d5 100644
--- a/packages/react-components/etc/react-components.api.md
+++ b/packages/react-components/etc/react-components.api.md
@@ -7,11 +7,13 @@
 import { __styles } from '@griffel/react';
 import { Accordion } from '@fluentui/react-accordion';
 import { accordionClassName } from '@fluentui/react-accordion';
+import { accordionClassNames } from '@fluentui/react-accordion';
 import { AccordionContext } from '@fluentui/react-accordion';
 import { AccordionContextValue } from '@fluentui/react-accordion';
 import { AccordionContextValues } from '@fluentui/react-accordion';
 import { AccordionHeader } from '@fluentui/react-accordion';
 import { accordionHeaderClassName } from '@fluentui/react-accordion';
+import { accordionHeaderClassNames } from '@fluentui/react-accordion';
 import { AccordionHeaderContextValue } from '@fluentui/react-accordion';
 import { AccordionHeaderContextValues } from '@fluentui/react-accordion';
 import { AccordionHeaderExpandIconPosition } from '@fluentui/react-accordion';
@@ -22,6 +24,7 @@ import { AccordionHeaderState } from '@fluentui/react-accordion';
 import { AccordionIndex } from '@fluentui/react-accordion';
 import { AccordionItem } from '@fluentui/react-accordion';
 import { accordionItemClassName } from '@fluentui/react-accordion';
+import { accordionItemClassNames } from '@fluentui/react-accordion';
 import { AccordionItemContext } from '@fluentui/react-accordion';
 import { AccordionItemContextValue } from '@fluentui/react-accordion';
 import { AccordionItemContextValues } from '@fluentui/react-accordion';
@@ -31,6 +34,7 @@ import { AccordionItemState } from '@fluentui/react-accordion';
 import { AccordionItemValue } from '@fluentui/react-accordion';
 import { AccordionPanel } from '@fluentui/react-accordion';
 import { accordionPanelClassName } from '@fluentui/react-accordion';
+import { accordionPanelClassNames } from '@fluentui/react-accordion';
 import { AccordionPanelProps } from '@fluentui/react-accordion';
 import { AccordionPanelSlots } from '@fluentui/react-accordion';
 import { AccordionPanelState } from '@fluentui/react-accordion';
@@ -43,35 +47,42 @@ import { AccordionToggleEventHandler } from '@fluentui/react-accordion';
 import { arrowHeights } from '@fluentui/react-popover';
 import { Avatar } from '@fluentui/react-avatar';
 import { avatarClassName } from '@fluentui/react-avatar';
+import { avatarClassNames } from '@fluentui/react-avatar';
 import { AvatarNamedColor } from '@fluentui/react-avatar';
 import { AvatarProps } from '@fluentui/react-avatar';
 import { AvatarSlots } from '@fluentui/react-avatar';
 import { AvatarState } from '@fluentui/react-avatar';
 import { Badge } from '@fluentui/react-badge';
 import { badgeClassName } from '@fluentui/react-badge';
+import { badgeClassNames } from '@fluentui/react-badge';
 import { BadgeProps } from '@fluentui/react-badge';
 import { BadgeSlots } from '@fluentui/react-badge';
 import { BadgeState } from '@fluentui/react-badge';
 import { Body as Body_2 } from '@fluentui/react-text';
 import { bodyClassName } from '@fluentui/react-text';
+import { bodyClassNames } from '@fluentui/react-text';
 import { BorderRadiusTokens } from '@fluentui/react-theme';
 import { BrandVariants } from '@fluentui/react-theme';
 import { Button } from '@fluentui/react-button';
 import { buttonClassName } from '@fluentui/react-button';
+import { buttonClassNames } from '@fluentui/react-button';
 import { ButtonProps } from '@fluentui/react-button';
 import { ButtonSlots } from '@fluentui/react-button';
 import { ButtonState } from '@fluentui/react-button';
 import { Caption } from '@fluentui/react-text';
 import { captionClassName } from '@fluentui/react-text';
+import { captionClassNames } from '@fluentui/react-text';
 import { ColorPaletteTokens } from '@fluentui/react-theme';
 import { ColorTokens } from '@fluentui/react-theme';
 import { CompoundButton } from '@fluentui/react-button';
 import { compoundButtonClassName } from '@fluentui/react-button';
+import { compoundButtonClassNames } from '@fluentui/react-button';
 import { CompoundButtonProps } from '@fluentui/react-button';
 import { CompoundButtonSlots } from '@fluentui/react-button';
 import { CompoundButtonState } from '@fluentui/react-button';
 import { CounterBadge } from '@fluentui/react-badge';
 import { counterBadgeClassName } from '@fluentui/react-badge';
+import { counterBadgeClassNames } from '@fluentui/react-badge';
 import { CounterBadgeProps } from '@fluentui/react-badge';
 import { CounterBadgeState } from '@fluentui/react-badge';
 import { createDarkTheme } from '@fluentui/react-theme';
@@ -81,14 +92,17 @@ import { createLightTheme } from '@fluentui/react-theme';
 import { createTeamsDarkTheme } from '@fluentui/react-theme';
 import { Display } from '@fluentui/react-text';
 import { displayClassName } from '@fluentui/react-text';
+import { displayClassNames } from '@fluentui/react-text';
 import { Divider } from '@fluentui/react-divider';
 import { dividerClassName } from '@fluentui/react-divider';
+import { dividerClassNames } from '@fluentui/react-divider';
 import { DividerProps } from '@fluentui/react-divider';
 import { DividerSlots } from '@fluentui/react-divider';
 import { DividerState } from '@fluentui/react-divider';
 import { elementContains } from '@fluentui/react-portal';
 import { FluentProvider } from '@fluentui/react-provider';
 import { fluentProviderClassName } from '@fluentui/react-provider';
+import { fluentProviderClassNames } from '@fluentui/react-provider';
 import { FluentProviderContextValues } from '@fluentui/react-provider';
 import { FluentProviderProps } from '@fluentui/react-provider';
 import { FluentProviderSlots } from '@fluentui/react-provider';
@@ -98,16 +112,20 @@ import { FontSizeTokens } from '@fluentui/react-theme';
 import { FontWeightTokens } from '@fluentui/react-theme';
 import { Headline } from '@fluentui/react-text';
 import { headlineClassName } from '@fluentui/react-text';
+import { headlineClassNames } from '@fluentui/react-text';
 import { Image as Image_2 } from '@fluentui/react-image';
 import { imageClassName } from '@fluentui/react-image';
+import { imageClassNames } from '@fluentui/react-image';
 import { ImageProps } from '@fluentui/react-image';
 import { ImageSlots } from '@fluentui/react-image';
 import { ImageState } from '@fluentui/react-image';
 import { LargeTitle } from '@fluentui/react-text';
 import { largeTitleClassName } from '@fluentui/react-text';
+import { largeTitleClassNames } from '@fluentui/react-text';
 import { LineHeightTokens } from '@fluentui/react-theme';
 import { Link } from '@fluentui/react-link';
 import { linkClassName } from '@fluentui/react-link';
+import { linkClassNames } from '@fluentui/react-link';
 import { LinkProps } from '@fluentui/react-link';
 import { LinkSlots } from '@fluentui/react-link';
 import { LinkState } from '@fluentui/react-link';
@@ -116,6 +134,7 @@ import { makeStyles } from '@griffel/react';
 import { Menu } from '@fluentui/react-menu';
 import { MenuButton } from '@fluentui/react-button';
 import { menuButtonClassName } from '@fluentui/react-button';
+import { menuButtonClassNames } from '@fluentui/react-button';
 import { MenuButtonProps } from '@fluentui/react-button';
 import { MenuButtonSlots } from '@fluentui/react-button';
 import { MenuButtonState } from '@fluentui/react-button';
@@ -126,16 +145,19 @@ import { MenuContextValue } from '@fluentui/react-menu';
 import { MenuContextValues } from '@fluentui/react-menu';
 import { MenuDivider } from '@fluentui/react-menu';
 import { menuDividerClassName } from '@fluentui/react-menu';
+import { menuDividerClassNames } from '@fluentui/react-menu';
 import { MenuDividerProps } from '@fluentui/react-menu';
 import { MenuDividerSlots } from '@fluentui/react-menu';
 import { MenuDividerState } from '@fluentui/react-menu';
 import { MenuGroup } from '@fluentui/react-menu';
 import { menuGroupClassName } from '@fluentui/react-menu';
+import { menuGroupClassNames } from '@fluentui/react-menu';
 import { MenuGroupContextProvider } from '@fluentui/react-menu';
 import { MenuGroupContextValue } from '@fluentui/react-menu';
 import { MenuGroupContextValues } from '@fluentui/react-menu';
 import { MenuGroupHeader } from '@fluentui/react-menu';
 import { menuGroupHeaderClassName } from '@fluentui/react-menu';
+import { menuGroupHeaderClassNames } from '@fluentui/react-menu';
 import { MenuGroupHeaderProps } from '@fluentui/react-menu';
 import { MenuGroupHeaderSlots } from '@fluentui/react-menu';
 import { MenuGroupHeaderState } from '@fluentui/react-menu';
@@ -145,12 +167,15 @@ import { MenuGroupState } from '@fluentui/react-menu';
 import { MenuItem } from '@fluentui/react-menu';
 import { MenuItemCheckbox } from '@fluentui/react-menu';
 import { menuItemCheckboxClassName } from '@fluentui/react-menu';
+import { menuItemCheckboxClassNames } from '@fluentui/react-menu';
 import { MenuItemCheckboxProps } from '@fluentui/react-menu';
 import { MenuItemCheckboxState } from '@fluentui/react-menu';
 import { menuItemClassName } from '@fluentui/react-menu';
+import { menuItemClassNames } from '@fluentui/react-menu';
 import { MenuItemProps } from '@fluentui/react-menu';
 import { MenuItemRadio } from '@fluentui/react-menu';
 import { menuItemRadioClassName } from '@fluentui/react-menu';
+import { menuItemRadioClassNames } from '@fluentui/react-menu';
 import { MenuItemRadioProps } from '@fluentui/react-menu';
 import { MenuItemRadioState } from '@fluentui/react-menu';
 import { MenuItemSelectableProps } from '@fluentui/react-menu';
@@ -159,6 +184,7 @@ import { MenuItemSlots } from '@fluentui/react-menu';
 import { MenuItemState } from '@fluentui/react-menu';
 import { MenuList } from '@fluentui/react-menu';
 import { menuListClassName } from '@fluentui/react-menu';
+import { menuListClassNames } from '@fluentui/react-menu';
 import { MenuListContext } from '@fluentui/react-menu';
 import { MenuListContextValue } from '@fluentui/react-menu';
 import { MenuListContextValues } from '@fluentui/react-menu';
@@ -170,6 +196,7 @@ import { MenuOpenChangeData } from '@fluentui/react-menu';
 import { MenuOpenEvents } from '@fluentui/react-menu';
 import { MenuPopover } from '@fluentui/react-menu';
 import { menuPopoverClassName } from '@fluentui/react-menu';
+import { menuPopoverClassNames } from '@fluentui/react-menu';
 import { MenuPopoverProps } from '@fluentui/react-menu';
 import { MenuPopoverSlots } from '@fluentui/react-menu';
 import { MenuPopoverState } from '@fluentui/react-menu';
@@ -178,6 +205,7 @@ import { MenuProvider } from '@fluentui/react-menu';
 import { MenuSlots } from '@fluentui/react-menu';
 import { MenuSplitGroup } from '@fluentui/react-menu';
 import { menuSplitGroupClassName } from '@fluentui/react-menu';
+import { menuSplitGroupClassNames } from '@fluentui/react-menu';
 import { MenuSplitGroupProps } from '@fluentui/react-menu';
 import { MenuSplitGroupSlots } from '@fluentui/react-menu';
 import { MenuSplitGroupState } from '@fluentui/react-menu';
@@ -200,6 +228,7 @@ import { PopoverSize } from '@fluentui/react-popover';
 import { PopoverState } from '@fluentui/react-popover';
 import { PopoverSurface } from '@fluentui/react-popover';
 import { popoverSurfaceClassName } from '@fluentui/react-popover';
+import { popoverSurfaceClassNames } from '@fluentui/react-popover';
 import { PopoverSurfaceProps } from '@fluentui/react-popover';
 import { PopoverSurfaceSlots } from '@fluentui/react-popover';
 import { PopoverSurfaceState } from '@fluentui/react-popover';
@@ -211,6 +240,7 @@ import { PortalProps } from '@fluentui/react-portal';
 import { PortalState } from '@fluentui/react-portal';
 import { PresenceBadge } from '@fluentui/react-badge';
 import { presenceBadgeClassName } from '@fluentui/react-badge';
+import { presenceBadgeClassNames } from '@fluentui/react-badge';
 import { PresenceBadgeProps } from '@fluentui/react-badge';
 import { PresenceBadgeState } from '@fluentui/react-badge';
 import { PresenceBadgeStatus } from '@fluentui/react-badge';
@@ -255,6 +285,7 @@ import { ShadowTokens } from '@fluentui/react-theme';
 import { shorthands } from '@griffel/react';
 import { SplitButton } from '@fluentui/react-button';
 import { splitButtonClassName } from '@fluentui/react-button';
+import { splitButtonClassNames } from '@fluentui/react-button';
 import { SplitButtonProps } from '@fluentui/react-button';
 import { SplitButtonSlots } from '@fluentui/react-button';
 import { SplitButtonState } from '@fluentui/react-button';
@@ -262,11 +293,13 @@ import { SSRProvider } from '@fluentui/react-utilities';
 import { StrokeWidthTokens } from '@fluentui/react-theme';
 import { Subheadline } from '@fluentui/react-text';
 import { subheadlineClassName } from '@fluentui/react-text';
+import { subheadlineClassNames } from '@fluentui/react-text';
 import { teamsDarkTheme } from '@fluentui/react-theme';
 import { teamsHighContrastTheme } from '@fluentui/react-theme';
 import { teamsLightTheme } from '@fluentui/react-theme';
 import { Text as Text_2 } from '@fluentui/react-text';
 import { textClassName } from '@fluentui/react-text';
+import { textClassNames } from '@fluentui/react-text';
 import { TextProps } from '@fluentui/react-text';
 import { TextSlots } from '@fluentui/react-text';
 import { TextState } from '@fluentui/react-text';
@@ -274,17 +307,22 @@ import { Theme } from '@fluentui/react-theme';
 import { themeToTokensObject } from '@fluentui/react-theme';
 import { Title1 } from '@fluentui/react-text';
 import { title1ClassName } from '@fluentui/react-text';
+import { title1ClassNames } from '@fluentui/react-text';
 import { Title2 } from '@fluentui/react-text';
 import { title2ClassName } from '@fluentui/react-text';
+import { title2ClassNames } from '@fluentui/react-text';
 import { Title3 } from '@fluentui/react-text';
 import { title3ClassName } from '@fluentui/react-text';
+import { title3ClassNames } from '@fluentui/react-text';
 import { ToggleButton } from '@fluentui/react-button';
 import { toggleButtonClassName } from '@fluentui/react-button';
+import { toggleButtonClassNames } from '@fluentui/react-button';
 import { ToggleButtonProps } from '@fluentui/react-button';
 import { ToggleButtonState } from '@fluentui/react-button';
 import { tokens } from '@fluentui/react-theme';
 import { Tooltip } from '@fluentui/react-tooltip';
 import { tooltipClassName } from '@fluentui/react-tooltip';
+import { tooltipClassNames } from '@fluentui/react-tooltip';
 import { TooltipProps } from '@fluentui/react-tooltip';
 import { TooltipSlots } from '@fluentui/react-tooltip';
 import { TooltipState } from '@fluentui/react-tooltip';
@@ -378,6 +416,8 @@ export { Accordion }
 
 export { accordionClassName }
 
+export { accordionClassNames }
+
 export { AccordionContext }
 
 export { AccordionContextValue }
@@ -388,6 +428,8 @@ export { AccordionHeader }
 
 export { accordionHeaderClassName }
 
+export { accordionHeaderClassNames }
+
 export { AccordionHeaderContextValue }
 
 export { AccordionHeaderContextValues }
@@ -408,6 +450,8 @@ export { AccordionItem }
 
 export { accordionItemClassName }
 
+export { accordionItemClassNames }
+
 export { AccordionItemContext }
 
 export { AccordionItemContextValue }
@@ -426,6 +470,8 @@ export { AccordionPanel }
 
 export { accordionPanelClassName }
 
+export { accordionPanelClassNames }
+
 export { AccordionPanelProps }
 
 export { AccordionPanelSlots }
@@ -450,6 +496,8 @@ export { Avatar }
 
 export { avatarClassName }
 
+export { avatarClassNames }
+
 export { AvatarNamedColor }
 
 export { AvatarProps }
@@ -462,6 +510,8 @@ export { Badge }
 
 export { badgeClassName }
 
+export { badgeClassNames }
+
 export { BadgeProps }
 
 export { BadgeSlots }
@@ -472,6 +522,8 @@ export { Body_2 as Body }
 
 export { bodyClassName }
 
+export { bodyClassNames }
+
 export { BorderRadiusTokens }
 
 export { BrandVariants }
@@ -480,6 +532,8 @@ export { Button }
 
 export { buttonClassName }
 
+export { buttonClassNames }
+
 export { ButtonProps }
 
 export { ButtonSlots }
@@ -490,6 +544,8 @@ export { Caption }
 
 export { captionClassName }
 
+export { captionClassNames }
+
 export { ColorPaletteTokens }
 
 export { ColorTokens }
@@ -498,6 +554,8 @@ export { CompoundButton }
 
 export { compoundButtonClassName }
 
+export { compoundButtonClassNames }
+
 export { CompoundButtonProps }
 
 export { CompoundButtonSlots }
@@ -508,6 +566,8 @@ export { CounterBadge }
 
 export { counterBadgeClassName }
 
+export { counterBadgeClassNames }
+
 export { CounterBadgeProps }
 
 export { CounterBadgeState }
@@ -526,10 +586,14 @@ export { Display }
 
 export { displayClassName }
 
+export { displayClassNames }
+
 export { Divider }
 
 export { dividerClassName }
 
+export { dividerClassNames }
+
 export { DividerProps }
 
 export { DividerSlots }
@@ -542,6 +606,8 @@ export { FluentProvider }
 
 export { fluentProviderClassName }
 
+export { fluentProviderClassNames }
+
 export { FluentProviderContextValues }
 
 export { FluentProviderProps }
@@ -560,10 +626,14 @@ export { Headline }
 
 export { headlineClassName }
 
+export { headlineClassNames }
+
 export { Image_2 as Image }
 
 export { imageClassName }
 
+export { imageClassNames }
+
 export { ImageProps }
 
 export { ImageSlots }
@@ -574,12 +644,16 @@ export { LargeTitle }
 
 export { largeTitleClassName }
 
+export { largeTitleClassNames }
+
 export { LineHeightTokens }
 
 export { Link }
 
 export { linkClassName }
 
+export { linkClassNames }
+
 export { LinkProps }
 
 export { LinkSlots }
@@ -596,6 +670,8 @@ export { MenuButton }
 
 export { menuButtonClassName }
 
+export { menuButtonClassNames }
+
 export { MenuButtonProps }
 
 export { MenuButtonSlots }
@@ -616,6 +692,8 @@ export { MenuDivider }
 
 export { menuDividerClassName }
 
+export { menuDividerClassNames }
+
 export { MenuDividerProps }
 
 export { MenuDividerSlots }
@@ -626,6 +704,8 @@ export { MenuGroup }
 
 export { menuGroupClassName }
 
+export { menuGroupClassNames }
+
 export { MenuGroupContextProvider }
 
 export { MenuGroupContextValue }
@@ -636,6 +716,8 @@ export { MenuGroupHeader }
 
 export { menuGroupHeaderClassName }
 
+export { menuGroupHeaderClassNames }
+
 export { MenuGroupHeaderProps }
 
 export { MenuGroupHeaderSlots }
@@ -654,18 +736,24 @@ export { MenuItemCheckbox }
 
 export { menuItemCheckboxClassName }
 
+export { menuItemCheckboxClassNames }
+
 export { MenuItemCheckboxProps }
 
 export { MenuItemCheckboxState }
 
 export { menuItemClassName }
 
+export { menuItemClassNames }
+
 export { MenuItemProps }
 
 export { MenuItemRadio }
 
 export { menuItemRadioClassName }
 
+export { menuItemRadioClassNames }
+
 export { MenuItemRadioProps }
 
 export { MenuItemRadioState }
@@ -682,6 +770,8 @@ export { MenuList }
 
 export { menuListClassName }
 
+export { menuListClassNames }
+
 export { MenuListContext }
 
 export { MenuListContextValue }
@@ -704,6 +794,8 @@ export { MenuPopover }
 
 export { menuPopoverClassName }
 
+export { menuPopoverClassNames }
+
 export { MenuPopoverProps }
 
 export { MenuPopoverSlots }
@@ -720,6 +812,8 @@ export { MenuSplitGroup }
 
 export { menuSplitGroupClassName }
 
+export { menuSplitGroupClassNames }
+
 export { MenuSplitGroupProps }
 
 export { MenuSplitGroupSlots }
@@ -764,6 +858,8 @@ export { PopoverSurface }
 
 export { popoverSurfaceClassName }
 
+export { popoverSurfaceClassNames }
+
 export { PopoverSurfaceProps }
 
 export { PopoverSurfaceSlots }
@@ -786,6 +882,8 @@ export { PresenceBadge }
 
 export { presenceBadgeClassName }
 
+export { presenceBadgeClassNames }
+
 export { PresenceBadgeProps }
 
 export { PresenceBadgeState }
@@ -874,6 +972,8 @@ export { SplitButton }
 
 export { splitButtonClassName }
 
+export { splitButtonClassNames }
+
 export { SplitButtonProps }
 
 export { SplitButtonSlots }
@@ -888,6 +988,8 @@ export { Subheadline }
 
 export { subheadlineClassName }
 
+export { subheadlineClassNames }
+
 export { teamsDarkTheme }
 
 export { teamsHighContrastTheme }
@@ -898,6 +1000,8 @@ export { Text_2 as Text }
 
 export { textClassName }
 
+export { textClassNames }
+
 export { TextProps }
 
 export { TextSlots }
@@ -912,18 +1016,26 @@ export { Title1 }
 
 export { title1ClassName }
 
+export { title1ClassNames }
+
 export { Title2 }
 
 export { title2ClassName }
 
+export { title2ClassNames }
+
 export { Title3 }
 
 export { title3ClassName }
 
+export { title3ClassNames }
+
 export { ToggleButton }
 
 export { toggleButtonClassName }
 
+export { toggleButtonClassNames }
+
 export { ToggleButtonProps }
 
 export { ToggleButtonState }
@@ -934,6 +1046,8 @@ export { Tooltip }
 
 export { tooltipClassName }
 
+export { tooltipClassNames }
+
 export { TooltipProps }
 
 export { TooltipSlots }
diff --git a/packages/react-components/src/index.ts b/packages/react-components/src/index.ts
index 0362bbf78c8f9..8bcf94e411b0c 100644
--- a/packages/react-components/src/index.ts
+++ b/packages/react-components/src/index.ts
@@ -11,7 +11,9 @@ export {
 } from '@griffel/react';
 export {
   FluentProvider,
+  /* eslint-disable-next-line deprecation/deprecation */
   fluentProviderClassName,
+  fluentProviderClassNames,
   renderFluentProvider_unstable,
   useFluent,
   useFluentProvider_unstable,
@@ -63,10 +65,18 @@ export {
   AccordionItem,
   AccordionItemContext,
   AccordionPanel,
+  /* eslint-disable-next-line deprecation/deprecation */
   accordionClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   accordionHeaderClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   accordionItemClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   accordionPanelClassName,
+  accordionClassNames,
+  accordionHeaderClassNames,
+  accordionItemClassNames,
+  accordionPanelClassNames,
   renderAccordion_unstable,
   renderAccordionHeader_unstable,
   renderAccordionItem_unstable,
@@ -113,7 +123,9 @@ export type {
 } from '@fluentui/react-accordion';
 export {
   Avatar,
+  /* eslint-disable-next-line deprecation/deprecation */
   avatarClassName,
+  avatarClassNames,
   renderAvatar_unstable,
   useAvatar_unstable,
   useAvatarStyles_unstable,
@@ -123,9 +135,15 @@ export {
   Badge,
   CounterBadge,
   PresenceBadge,
+  /* eslint-disable-next-line deprecation/deprecation */
   badgeClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   counterBadgeClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   presenceBadgeClassName,
+  badgeClassNames,
+  counterBadgeClassNames,
+  presenceBadgeClassNames,
   renderBadge_unstable,
   useBadge_unstable,
   useBadgeStyles_unstable,
@@ -149,16 +167,26 @@ export {
   MenuButton,
   SplitButton,
   ToggleButton,
+  /* eslint-disable-next-line deprecation/deprecation */
   buttonClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   compoundButtonClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuButtonClassName,
+  buttonClassNames,
+  compoundButtonClassNames,
+  menuButtonClassNames,
   renderButton_unstable,
   renderCompoundButton_unstable,
   renderMenuButton_unstable,
   renderSplitButton_unstable,
   renderToggleButton_unstable,
+  /* eslint-disable-next-line deprecation/deprecation */
   splitButtonClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   toggleButtonClassName,
+  splitButtonClassNames,
+  toggleButtonClassNames,
   useButton_unstable,
   useButtonStyles_unstable,
   useCompoundButton_unstable,
@@ -188,7 +216,9 @@ export type {
 } from '@fluentui/react-button';
 export {
   Divider,
+  /* eslint-disable-next-line deprecation/deprecation */
   dividerClassName,
+  dividerClassNames,
   renderDivider_unstable,
   useDivider_unstable,
   useDividerStyles_unstable,
@@ -196,7 +226,9 @@ export {
 export type { DividerProps, DividerSlots, DividerState } from '@fluentui/react-divider';
 export {
   Image,
+  /* eslint-disable-next-line deprecation/deprecation */
   imageClassName,
+  imageClassNames,
   renderImage_unstable,
   useImage_unstable,
   useImageStyles_unstable,
@@ -204,7 +236,9 @@ export {
 export type { ImageProps, ImageSlots, ImageState } from '@fluentui/react-image';
 export {
   Link,
+  /* eslint-disable-next-line deprecation/deprecation */
   linkClassName,
+  linkClassNames,
   renderLink_unstable,
   useLink_unstable,
   useLinkState_unstable,
@@ -229,15 +263,33 @@ export {
   MenuSplitGroup,
   MenuTrigger,
   MenuTriggerContextProvider,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuDividerClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuGroupClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuGroupHeaderClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuItemCheckboxClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuItemClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuItemRadioClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuListClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuPopoverClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuSplitGroupClassName,
+  menuDividerClassNames,
+  menuGroupClassNames,
+  menuGroupHeaderClassNames,
+  menuItemCheckboxClassNames,
+  menuItemClassNames,
+  menuItemRadioClassNames,
+  menuListClassNames,
+  menuPopoverClassNames,
+  menuSplitGroupClassNames,
   renderMenu_unstable,
   renderMenuDivider_unstable,
   renderMenuGroup_unstable,
@@ -331,7 +383,9 @@ export {
   PopoverSurface,
   PopoverTrigger,
   arrowHeights,
+  /* eslint-disable-next-line deprecation/deprecation */
   popoverSurfaceClassName,
+  popoverSurfaceClassNames,
   renderPopover_unstable,
   renderPopoverSurface_unstable,
   renderPopoverTrigger_unstable,
@@ -373,17 +427,37 @@ export {
   Title1,
   Title2,
   Title3,
+  /* eslint-disable-next-line deprecation/deprecation */
   bodyClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   captionClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   displayClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   headlineClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   largeTitleClassName,
+  bodyClassNames,
+  captionClassNames,
+  displayClassNames,
+  headlineClassNames,
+  largeTitleClassNames,
   renderText_unstable,
+  /* eslint-disable-next-line deprecation/deprecation */
   subheadlineClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   textClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   title1ClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   title2ClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   title3ClassName,
+  subheadlineClassNames,
+  textClassNames,
+  title1ClassNames,
+  title2ClassNames,
+  title3ClassNames,
   useText_unstable,
   useTextStyles_unstable,
 } from '@fluentui/react-text';
@@ -391,7 +465,9 @@ export type { TextProps, TextSlots, TextState } from '@fluentui/react-text';
 export {
   Tooltip,
   renderTooltip_unstable,
+  /* eslint-disable-next-line deprecation/deprecation */
   tooltipClassName,
+  tooltipClassNames,
   useTooltip_unstable,
   useTooltipStyles_unstable,
 } from '@fluentui/react-tooltip';
diff --git a/packages/react-components/src/unstable/index.ts b/packages/react-components/src/unstable/index.ts
index 4f75b7214a5fa..7d5ac475137f4 100644
--- a/packages/react-components/src/unstable/index.ts
+++ b/packages/react-components/src/unstable/index.ts
@@ -5,10 +5,18 @@ export {
   CardFooter,
   CardHeader,
   CardPreview,
+  /* eslint-disable-next-line deprecation/deprecation */
   cardClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   cardFooterClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   cardHeaderClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   cardPreviewClassName,
+  cardClassNames,
+  cardFooterClassNames,
+  cardHeaderClassNames,
+  cardPreviewClassNames,
   renderCard_unstable,
   renderCardFooter_unstable,
   renderCardHeader_unstable,
@@ -39,7 +47,9 @@ export type {
 
 export {
   Checkbox,
+  /* eslint-disable-next-line deprecation/deprecation */
   checkboxClassName,
+  checkboxClassNames,
   renderCheckbox_unstable,
   useCheckbox_unstable,
   useCheckboxStyles_unstable,
@@ -48,7 +58,9 @@ export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState
 
 export {
   Input,
+  /* eslint-disable-next-line deprecation/deprecation */
   inputClassName,
+  inputClassNames,
   renderInput_unstable,
   useInput_unstable,
   useInputStyles_unstable,
@@ -57,7 +69,9 @@ export type { InputOnChangeData, InputProps, InputSlots, InputState } from '@flu
 
 export {
   Label,
+  /* eslint-disable-next-line deprecation/deprecation */
   labelClassName,
+  labelClassNames,
   renderLabel_unstable,
   useLabel_unstable,
   useLabelStyles_unstable,
@@ -66,9 +80,13 @@ export type { LabelProps, LabelSlots, LabelState } from '@fluentui/react-label';
 
 export {
   Radio,
+  /* eslint-disable-next-line deprecation/deprecation */
   radioClassName,
+  radioClassNames,
   RadioGroup,
+  /* eslint-disable-next-line deprecation/deprecation */
   radioGroupClassName,
+  radioGroupClassNames,
   renderRadio_unstable,
   renderRadioGroup_unstable,
   useRadio_unstable,
@@ -107,12 +125,16 @@ export type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from '
 
 export {
   Tab,
+  /* eslint-disable-next-line deprecation/deprecation */
   tabClassName,
+  tabClassNames,
   useTab_unstable,
   useTabStyles_unstable,
   renderTab_unstable,
   TabList,
+  /* eslint-disable-next-line deprecation/deprecation */
   tabListClassName,
+  tabListClassNames,
   useTabList_unstable,
   useTabListStyles_unstable,
   renderTabList_unstable,
diff --git a/packages/react-conformance/src/defaultErrorMessages.tsx b/packages/react-conformance/src/defaultErrorMessages.tsx
index eadfcf7f8c842..d0016f97ce221 100644
--- a/packages/react-conformance/src/defaultErrorMessages.tsx
+++ b/packages/react-conformance/src/defaultErrorMessages.tsx
@@ -510,7 +510,7 @@ export const defaultErrorMessages = {
         indexFile,
       )}.`,
       suggestions: [
-        `Make sure that your component's ${resolveInfo('index.ts')} file` +
+        `Make sure that your component's ${resolveInfo('index.ts')} file ` +
           `or a file with styles hook exports \`${resolveInfo(constantValue)}\``,
         `If the component is internal, consider enabling ${resolveInfo('isInternal')} in your isConformant test.`,
       ],
@@ -518,6 +518,100 @@ export const defaultErrorMessages = {
     });
   },
 
+  'component-has-static-classnames-object-exported': (
+    testInfo: IsConformantOptions,
+    error: Error,
+    componentClassName: string,
+    exportName: string,
+  ) => {
+    const { componentPath, displayName } = testInfo;
+    const { testErrorInfo, resolveInfo, testErrorPath } = errorMessageColors;
+    const indexFile = path.join(getPackagePath(componentPath), 'src', 'index.ts');
+
+    return getErrorMessage({
+      displayName,
+      overview: `static classNames object is not exported (${testErrorInfo(exportName)}) in: ${EOL}${testErrorPath(
+        indexFile,
+      )}.`,
+      suggestions: [
+        `Make sure that your component's ${resolveInfo('index.ts')} file ` +
+          `or a file with styles hook exports an object of type SlotClassNames<Slots>.`,
+        `If the component is internal, consider enabling ${resolveInfo('isInternal')} in your isConformant test.`,
+      ],
+      error,
+    });
+  },
+
+  'component-has-static-classnames-in-correct-format': (
+    testInfo: IsConformantOptions,
+    error: Error,
+    componentClassName: string,
+    exportName: string,
+  ) => {
+    const { componentPath, displayName } = testInfo;
+    const { testErrorInfo, resolveInfo, testErrorPath } = errorMessageColors;
+    const indexFile = path.join(getPackagePath(componentPath), 'src', 'index.ts');
+
+    return getErrorMessage({
+      displayName,
+      overview: `static classNames object is not formatted correctly (${testErrorInfo(
+        exportName,
+      )}) in: ${EOL}${testErrorPath(indexFile)}.`,
+      suggestions: [
+        `Make sure all classNames are for the form "fui-<ComponentName>__<SlotName>" ` +
+          `or "fui-<ComponentName>" for the root slot`,
+        `If the component is internal, consider enabling ${resolveInfo('isInternal')} in your isConformant test.`,
+      ],
+      error,
+    });
+  },
+
+  'component-has-static-classnames': (
+    testInfo: IsConformantOptions,
+    error: Error,
+    componentName: string,
+    missingClassNames: string,
+  ) => {
+    const { displayName } = testInfo;
+    const { testErrorInfo, failedError } = errorMessageColors;
+
+    return getErrorMessage({
+      displayName,
+      overview: `missing one or more static classNames on component (${testErrorInfo(componentName)}).`,
+      details: [`Missing the following classes after render:`, `    ${failedError(missingClassNames)}`],
+      suggestions: [`Ensure that each slot of the component has its corresponding static className.`],
+      error,
+    });
+  },
+
+  'as-renders-html': (testInfo: IsConformantOptions, error: Error) => {
+    const { displayName } = testInfo;
+    const { resolveInfo } = errorMessageColors;
+
+    // Message Description: Receives an error when attempting to render as a functional component
+    // or pass as to the next component.
+    //
+    // It appears that "displayName" "as" prop doesn't properly handle HTML tags.
+    // Possible solutions:
+    // - If your component doesn't have an "as" prop, enable isConformant's skipAsPropTests option.
+    // - Make sure that your component can correctly render as HTML tags.
+    // - Check if you are missing any requiredProps within the isConformant in your test file.
+    // - Make sure that your component's implementation contains a valid return statement.
+    // - Check to see if your component works as expected with Enzyme's mount().
+    return getErrorMessage({
+      displayName,
+      overview: `"as" prop doesn't properly handle HTML tags.`,
+      suggestions: [
+        `If your component doesn't have an "as" prop, enable isConformant's ${resolveInfo('skipAsPropTests')} option.`,
+        `Make sure that your component can correctly render as ${resolveInfo('HTML tags')}.`,
+        `Check if you are missing any ${resolveInfo('requiredProps')} within the isConformant in your test file.`,
+        `Make sure that your component's implementation contains a valid return statement.`,
+        `Check to see if your component works as expected with Enzyme's ${resolveInfo('mount()')}.`,
+      ],
+      error,
+    });
+  },
+
   'primary-slot-gets-native-props': (testInfo: IsConformantOptions, error: Error) => {
     const { displayName } = testInfo;
     const { resolveInfo } = errorMessageColors;
diff --git a/packages/react-conformance/src/defaultTests.tsx b/packages/react-conformance/src/defaultTests.tsx
index 890942500123a..9715fbe8e3912 100644
--- a/packages/react-conformance/src/defaultTests.tsx
+++ b/packages/react-conformance/src/defaultTests.tsx
@@ -302,6 +302,115 @@ export const defaultTests: TestObject = {
     });
   },
 
+  'component-has-static-classnames-object': (componentInfo: ComponentDoc, testInfo: IsConformantOptions) => {
+    const {
+      componentPath,
+      Component,
+      wrapperComponent,
+      helperComponents = [],
+      requiredProps,
+      customMount = mount,
+    } = testInfo;
+
+    const componentName = componentInfo.displayName;
+    const componentClassName = `fui-${componentName}`;
+    const exportName = `${componentName[0].toLowerCase()}${componentName.slice(1)}ClassNames`;
+    const indexPath = path.join(getPackagePath(componentPath), 'src', 'index');
+    let handledClassNamesObjectExport = false;
+
+    it('has static classnames exported at top-level (component-has-static-classnames-object)', () => {
+      if (testInfo.isInternal) {
+        return;
+      }
+
+      try {
+        const indexFile = require(indexPath);
+        const classNamesFromFile = indexFile[exportName];
+        expect(classNamesFromFile).toBeTruthy();
+        handledClassNamesObjectExport = true;
+      } catch (e) {
+        throw new Error(
+          defaultErrorMessages['component-has-static-classnames-object-exported'](
+            testInfo,
+            e,
+            componentClassName,
+            exportName,
+          ),
+        );
+      }
+    });
+
+    it('has static classnames in correct format (component-has-static-classnames-object)', () => {
+      if (!handledClassNamesObjectExport) {
+        return;
+      }
+
+      const indexFile = require(indexPath);
+      const classNamesFromFile = indexFile[exportName];
+
+      const expectedClassNames = Object.keys(classNamesFromFile).reduce(
+        (obj: { [key: string]: string }, key: string) => {
+          obj[key] = key === 'root' ? componentClassName : `${componentClassName}__${key}`;
+          return obj;
+        },
+        {},
+      );
+
+      try {
+        expect(classNamesFromFile).toEqual(expectedClassNames);
+      } catch (e) {
+        throw new Error(
+          defaultErrorMessages['component-has-static-classnames-in-correct-format'](
+            testInfo,
+            e,
+            componentClassName,
+            exportName,
+          ),
+        );
+      }
+    });
+
+    it(`has static classnames in rendered component (component-has-static-classnames-object)`, () => {
+      if (!handledClassNamesObjectExport) {
+        return;
+      }
+
+      const { testOptions = {} } = testInfo;
+      const staticClassNameVariants = testOptions['has-static-classnames'] ?? [{ props: {} }];
+
+      for (const staticClassNames of staticClassNameVariants) {
+        const mergedProps = {
+          ...requiredProps,
+          ...staticClassNames.props,
+        };
+        const defaultEl = customMount(<Component {...mergedProps} />);
+        const defaultComponent = getComponent(defaultEl, helperComponents, wrapperComponent);
+
+        const indexFile = require(indexPath);
+        const classNamesFromFile = indexFile[exportName];
+
+        const expectedClassNames: { [key: string]: string } = staticClassNames.expectedClassNames ?? classNamesFromFile;
+        const missingClassNames = Object.values(expectedClassNames).reduce((acc, className) => {
+          if (defaultComponent.find(`.${className}`).length < 1) {
+            (acc as string[]).push(className);
+          }
+          return acc;
+        }, []);
+
+        if (missingClassNames.length > 0) {
+          throw new Error(
+            defaultErrorMessages['component-has-static-classnames'](
+              testInfo,
+              new Error(),
+              componentName,
+              missingClassNames.join(', '),
+            ),
+          );
+        }
+      }
+    });
+  },
+
   /** Constructor/component name matches filename */
   'name-matches-filename': (componentInfo: ComponentDoc, testInfo: IsConformantOptions) => {
     it(`Component/constructor name matches filename (name-matches-filename)`, () => {
diff --git a/packages/react-conformance/src/types.ts b/packages/react-conformance/src/types.ts
index 31eba78daa349..eb65c180fae0c 100644
--- a/packages/react-conformance/src/types.ts
+++ b/packages/react-conformance/src/types.ts
@@ -14,6 +14,14 @@ export interface TestOptions {
   'consistent-callback-args'?: {
     ignoreProps?: string[];
   };
+  'has-static-classnames'?: {
+    props: {
+      [key: string]: string | {};
+    };
+    expectedClassNames?: {
+      [key: string]: string;
+    };
+  }[];
 }
 
 export interface IsConformantOptions<TProps = {}> {
diff --git a/packages/react-dialog/etc/react-dialog.api.md b/packages/react-dialog/etc/react-dialog.api.md
index 6a9aeb0eb6888..fb882803f117d 100644
--- a/packages/react-dialog/etc/react-dialog.api.md
+++ b/packages/react-dialog/etc/react-dialog.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Dialog: ForwardRefComponent<DialogProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const dialogClassName = "fui-Dialog";
 
+// @public (undocumented)
+export const dialogClassNames: SlotClassNames<DialogSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "DialogCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
diff --git a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
index 9b305459c3a79..ae69ee89849f4 100644
--- a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
+++ b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
@@ -1,8 +1,14 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { DialogState } from './Dialog.types';
+import type { DialogSlots, DialogState } from './Dialog.types';
 
+/**
+ * @deprecated Use `dialogClassNames.root` instead.
+ */
 export const dialogClassName = 'fui-Dialog';
-
+export const dialogClassNames: SlotClassNames<DialogSlots> = {
+  root: 'fui-Dialog',
+};
 /**
  * Styles for the root slot
  */
@@ -19,7 +25,7 @@ const useStyles = makeStyles({
  */
 export const useDialogStyles_unstable = (state: DialogState): DialogState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(dialogClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(dialogClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-divider/etc/react-divider.api.md b/packages/react-divider/etc/react-divider.api.md
index 1aa8cfb274176..00a1a104248aa 100644
--- a/packages/react-divider/etc/react-divider.api.md
+++ b/packages/react-divider/etc/react-divider.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Divider: ForwardRefComponent<DividerProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const dividerClassName = "fui-Divider";
 
+// @public (undocumented)
+export const dividerClassNames: SlotClassNames<DividerSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "DividerCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
diff --git a/packages/react-divider/src/components/Divider/Divider.test.tsx b/packages/react-divider/src/components/Divider/Divider.test.tsx
index 2835303292749..cff1ab61fab56 100644
--- a/packages/react-divider/src/components/Divider/Divider.test.tsx
+++ b/packages/react-divider/src/components/Divider/Divider.test.tsx
@@ -12,6 +12,13 @@ describe('Divider', () => {
   isConformant({
     Component: Divider,
     displayName: 'Divider',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: { children: 'Test Children' },
+        },
+      ],
+    },
   });
 
   it('renders a default divider', () => {
diff --git a/packages/react-divider/src/components/Divider/__snapshots__/Divider.test.tsx.snap b/packages/react-divider/src/components/Divider/__snapshots__/Divider.test.tsx.snap
index 706427042ce31..56918ea5d0a39 100644
--- a/packages/react-divider/src/components/Divider/__snapshots__/Divider.test.tsx.snap
+++ b/packages/react-divider/src/components/Divider/__snapshots__/Divider.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`Divider renders a brand appearance 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Brand
@@ -39,6 +40,7 @@ exports[`Divider renders a divider with content 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Default Divider
@@ -54,6 +56,7 @@ exports[`Divider renders a divider with inset 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Inset
@@ -74,6 +77,7 @@ exports[`Divider renders a horizontal divider with a fixed width 1`] = `
   }
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     fixed 100px width
@@ -89,6 +93,7 @@ exports[`Divider renders a strong appearance 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Strong
@@ -104,6 +109,7 @@ exports[`Divider renders a subtle appearance 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Subtle
@@ -132,6 +138,7 @@ exports[`Divider renders a vertical divider with a fixed height 1`] = `
   }
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     fixed 100px height
@@ -147,6 +154,7 @@ exports[`Divider renders a vertical divider with content 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Vertical
@@ -162,6 +170,7 @@ exports[`Divider renders content center aligned 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Center
@@ -177,6 +186,7 @@ exports[`Divider renders content end aligned 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     End
@@ -192,6 +202,7 @@ exports[`Divider renders content start aligned 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Start
diff --git a/packages/react-divider/src/components/Divider/useDividerStyles.ts b/packages/react-divider/src/components/Divider/useDividerStyles.ts
index 82d26e9952039..906e578cf9905 100644
--- a/packages/react-divider/src/components/Divider/useDividerStyles.ts
+++ b/packages/react-divider/src/components/Divider/useDividerStyles.ts
@@ -1,8 +1,16 @@
 import { mergeClasses, shorthands, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { DividerState } from './Divider.types';
+import { DividerSlots, DividerState } from './Divider.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `dividerClassNames.root` instead.
+ */
 export const dividerClassName = 'fui-Divider';
+export const dividerClassNames: SlotClassNames<DividerSlots> = {
+  root: 'fui-Divider',
+  wrapper: 'fui-Divider__wrapper',
+};
 
 const contentSpacing = '12px';
 const insetSpacing = '12px';
@@ -233,7 +241,7 @@ export const useDividerStyles_unstable = (state: DividerState): DividerState =>
   const { alignContent, appearance, inset, vertical } = state;
 
   state.root.className = mergeClasses(
-    dividerClassName,
+    dividerClassNames.root,
 
     // Base styles
     baseStyles.base,
@@ -258,5 +266,9 @@ export const useDividerStyles_unstable = (state: DividerState): DividerState =>
     state.root.className,
   );
 
+  if (state.wrapper) {
+    state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);
+  }
+
   return state;
 };
diff --git a/packages/react-focus/src/components/FocusZone/FocusZone.test.tsx b/packages/react-focus/src/components/FocusZone/FocusZone.test.tsx
index a207761b024a2..51b21a4585d5a 100644
--- a/packages/react-focus/src/components/FocusZone/FocusZone.test.tsx
+++ b/packages/react-focus/src/components/FocusZone/FocusZone.test.tsx
@@ -86,6 +86,7 @@ describe('FocusZone', () => {
     disabledTests: [
       // There is no top level FocusZone.ts file.
       'has-top-level-file',
+      'component-has-static-classnames-object',
     ],
     elementRefName: 'elementRef',
     testOptions: {
diff --git a/packages/react-image/etc/react-image.api.md b/packages/react-image/etc/react-image.api.md
index 625c4e7e4d1ba..ad83a17aea4a6 100644
--- a/packages/react-image/etc/react-image.api.md
+++ b/packages/react-image/etc/react-image.api.md
@@ -9,14 +9,18 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 const Image_2: ForwardRefComponent<ImageProps>;
 export { Image_2 as Image }
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const imageClassName = "fui-Image";
 
+// @public (undocumented)
+export const imageClassNames: SlotClassNames<ImageSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "ImageCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
diff --git a/packages/react-image/src/components/Image/useImageStyles.ts b/packages/react-image/src/components/Image/useImageStyles.ts
index f99fd7163a312..5a328d2149f67 100644
--- a/packages/react-image/src/components/Image/useImageStyles.ts
+++ b/packages/react-image/src/components/Image/useImageStyles.ts
@@ -1,8 +1,15 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { ImageState } from './Image.types';
+import type { ImageSlots, ImageState } from './Image.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `imageClassNames.root` instead.
+ */
 export const imageClassName = 'fui-Image';
+export const imageClassNames: SlotClassNames<ImageSlots> = {
+  root: 'fui-Image',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -57,7 +64,7 @@ const useStyles = makeStyles({
 export const useImageStyles_unstable = (state: ImageState) => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    imageClassName,
+    imageClassNames.root,
     styles.root,
     state.bordered && styles.rootBordered,
     state.shape === 'circular' && styles.rootCircular,
diff --git a/packages/react-input/etc/react-input.api.md b/packages/react-input/etc/react-input.api.md
index fa82ff7fd1542..925e40983a24b 100644
--- a/packages/react-input/etc/react-input.api.md
+++ b/packages/react-input/etc/react-input.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Input: ForwardRefComponent<InputProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const inputClassName = "fui-Input";
 
+// @public (undocumented)
+export const inputClassNames: SlotClassNames<InputSlots>;
+
 // @public
 export type InputOnChangeData = {
     value: string;
diff --git a/packages/react-input/src/components/Input/Input.test.tsx b/packages/react-input/src/components/Input/Input.test.tsx
index b4781fae64727..bcbc681f988cf 100644
--- a/packages/react-input/src/components/Input/Input.test.tsx
+++ b/packages/react-input/src/components/Input/Input.test.tsx
@@ -21,6 +21,16 @@ describe('Input', () => {
     Component: Input,
     displayName: 'Input',
     primarySlot: 'input',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            contentBefore: 'Test Content Before',
+            contentAfter: 'Test Content After',
+          },
+        },
+      ],
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-input/src/components/Input/__snapshots__/Input.test.tsx.snap b/packages/react-input/src/components/Input/__snapshots__/Input.test.tsx.snap
index 401b8c5349454..e78852255e0d9 100644
--- a/packages/react-input/src/components/Input/__snapshots__/Input.test.tsx.snap
+++ b/packages/react-input/src/components/Input/__snapshots__/Input.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Input renders a default state 1`] = `
     class="fui-Input"
   >
     <input
-      class=""
+      class="fui-Input__input"
       type="text"
       value=""
     />
diff --git a/packages/react-input/src/components/Input/useInputStyles.ts b/packages/react-input/src/components/Input/useInputStyles.ts
index aa6ff72ca2f92..15a1a891a861f 100644
--- a/packages/react-input/src/components/Input/useInputStyles.ts
+++ b/packages/react-input/src/components/Input/useInputStyles.ts
@@ -1,8 +1,18 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { InputState } from './Input.types';
+import type { InputSlots, InputState } from './Input.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `inputClassNames.root` instead.
+ */
 export const inputClassName = 'fui-Input';
+export const inputClassNames: SlotClassNames<InputSlots> = {
+  root: 'fui-Input',
+  input: 'fui-Input__input',
+  contentBefore: 'fui-Input__contentBefore',
+  contentAfter: 'fui-Input__contentAfter',
+};
 
 // TODO(sharing) use theme values once available
 const horizontalSpacing = {
@@ -246,7 +256,7 @@ export const useInputStyles_unstable = (state: InputState): InputState => {
   const contentStyles = useContentStyles();
 
   state.root.className = mergeClasses(
-    inputClassName,
+    inputClassNames.root,
     rootStyles.base,
     rootStyles[size],
     rootStyles[appearance],
@@ -261,6 +271,7 @@ export const useInputStyles_unstable = (state: InputState): InputState => {
   );
 
   state.input.className = mergeClasses(
+    inputClassNames.input,
     inputStyles.base,
     inputStyles[size],
     disabled && inputStyles.disabled,
@@ -269,10 +280,18 @@ export const useInputStyles_unstable = (state: InputState): InputState => {
 
   const contentClasses = [contentStyles.base, disabled && contentStyles.disabled];
   if (state.contentBefore) {
-    state.contentBefore.className = mergeClasses(...contentClasses, state.contentBefore.className);
+    state.contentBefore.className = mergeClasses(
+      inputClassNames.contentBefore,
+      ...contentClasses,
+      state.contentBefore.className,
+    );
   }
   if (state.contentAfter) {
-    state.contentAfter.className = mergeClasses(...contentClasses, state.contentAfter.className);
+    state.contentAfter.className = mergeClasses(
+      inputClassNames.contentAfter,
+      ...contentClasses,
+      state.contentAfter.className,
+    );
   }
 
   return state;
diff --git a/packages/react-label/etc/react-label.api.md b/packages/react-label/etc/react-label.api.md
index 49bb53dd54958..bd17206717193 100644
--- a/packages/react-label/etc/react-label.api.md
+++ b/packages/react-label/etc/react-label.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Label: ForwardRefComponent<LabelProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const labelClassName = "fui-Label";
 
+// @public (undocumented)
+export const labelClassNames: SlotClassNames<LabelSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "LabelCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
diff --git a/packages/react-label/src/components/Label/Label.test.tsx b/packages/react-label/src/components/Label/Label.test.tsx
index 52960fc4071b3..b5fd527ebb717 100644
--- a/packages/react-label/src/components/Label/Label.test.tsx
+++ b/packages/react-label/src/components/Label/Label.test.tsx
@@ -8,6 +8,13 @@ describe('Label', () => {
     Component: Label,
     displayName: 'Label',
     requiredProps: { children: "I'm a label." },
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: { required: 'Required Test' },
+        },
+      ],
+    },
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
diff --git a/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap b/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap
index a2bd95cdf0c52..ecc930d1af9e4 100644
--- a/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap
+++ b/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Label renders a custom asterisk 1`] = `
       I'm a label
       <span
         aria-hidden="true"
-        class=""
+        class="fui-Label__required"
       >
         foo
       </span>
diff --git a/packages/react-label/src/components/Label/useLabelStyles.ts b/packages/react-label/src/components/Label/useLabelStyles.ts
index 4787b4040b944..7726557e96494 100644
--- a/packages/react-label/src/components/Label/useLabelStyles.ts
+++ b/packages/react-label/src/components/Label/useLabelStyles.ts
@@ -1,8 +1,16 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { LabelState } from './Label.types';
+import type { LabelSlots, LabelState } from './Label.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `labelClassNames.root` instead.
+ */
 export const labelClassName = 'fui-Label';
+export const labelClassNames: SlotClassNames<LabelSlots> = {
+  root: 'fui-Label',
+  required: 'fui-Label__required',
+};
 
 /**
  * Styles for the label
@@ -49,7 +57,7 @@ const useStyles = makeStyles({
 export const useLabelStyles_unstable = (state: LabelState): LabelState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    labelClassName,
+    labelClassNames.root,
     styles.root,
     state.disabled && styles.disabled,
     styles[state.size],
@@ -58,7 +66,7 @@ export const useLabelStyles_unstable = (state: LabelState): LabelState => {
   );
 
   if (state.required) {
-    state.required.className = mergeClasses(styles.required, state.required.className);
+    state.required.className = mergeClasses(labelClassNames.required, styles.required, state.required.className);
   }
 
   return state;
diff --git a/packages/react-link/etc/react-link.api.md b/packages/react-link/etc/react-link.api.md
index 29ccf669e3567..6d5689c1c0292 100644
--- a/packages/react-link/etc/react-link.api.md
+++ b/packages/react-link/etc/react-link.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Link: ForwardRefComponent<LinkProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const linkClassName = "fui-Link";
 
+// @public (undocumented)
+export const linkClassNames: SlotClassNames<LinkSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "LinkCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
diff --git a/packages/react-link/src/components/Link/useLinkStyles.ts b/packages/react-link/src/components/Link/useLinkStyles.ts
index eb901e24f4139..fd3387be95507 100644
--- a/packages/react-link/src/components/Link/useLinkStyles.ts
+++ b/packages/react-link/src/components/Link/useLinkStyles.ts
@@ -1,9 +1,16 @@
 import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-import type { LinkState } from './Link.types';
+import type { LinkSlots, LinkState } from './Link.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `linkClassNames.root` instead.
+ */
 export const linkClassName = 'fui-Link';
+export const linkClassNames: SlotClassNames<LinkSlots> = {
+  root: 'fui-Link',
+};
 
 const useStyles = makeStyles({
   focusIndicator: createCustomFocusIndicatorStyle({
@@ -91,7 +98,7 @@ const useStyles = makeStyles({
 export const useLinkStyles_unstable = (state: LinkState): LinkState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    linkClassName,
+    linkClassNames.root,
     styles.root,
     styles.focusIndicator,
     state.root.as === 'a' && state.root.href && styles.href,
diff --git a/packages/react-menu/etc/react-menu.api.md b/packages/react-menu/etc/react-menu.api.md
index e0fb73d89b7d5..bff67a63d7bc0 100644
--- a/packages/react-menu/etc/react-menu.api.md
+++ b/packages/react-menu/etc/react-menu.api.md
@@ -13,6 +13,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { usePopperMouseTarget } from '@fluentui/react-positioning';
 
 // @public
@@ -44,9 +45,12 @@ export type MenuContextValues = {
 // @public
 export const MenuDivider: ForwardRefComponent<MenuDividerProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuDividerClassName = "fui-MenuDivider";
 
+// @public (undocumented)
+export const menuDividerClassNames: SlotClassNames<MenuDividerSlots>;
+
 // @public (undocumented)
 export type MenuDividerProps = ComponentProps<MenuDividerSlots>;
 
@@ -61,9 +65,12 @@ export type MenuDividerState = ComponentState<MenuDividerSlots>;
 // @public
 export const MenuGroup: ForwardRefComponent<MenuGroupProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuGroupClassName = "fui-MenuGroup";
 
+// @public (undocumented)
+export const menuGroupClassNames: SlotClassNames<MenuGroupSlots>;
+
 // @public (undocumented)
 export const MenuGroupContextProvider: React_2.Provider<MenuGroupContextValue>;
 
@@ -80,9 +87,12 @@ export type MenuGroupContextValues = {
 // @public
 export const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuGroupHeaderClassName = "fui-MenuGroupHeader";
 
+// @public (undocumented)
+export const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots>;
+
 // @public (undocumented)
 export type MenuGroupHeaderProps = ComponentProps<MenuGroupHeaderSlots>;
 
@@ -113,18 +123,24 @@ export const MenuItem: ForwardRefComponent<MenuItemProps>;
 // @public
 export const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuItemCheckboxClassName = "fui-MenuItemCheckbox";
 
+// @public (undocumented)
+export const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
+
 // @public (undocumented)
 export type MenuItemCheckboxProps = MenuItemProps & MenuItemSelectableProps;
 
 // @public (undocumented)
 export type MenuItemCheckboxState = MenuItemState & MenuItemSelectableState;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuItemClassName = "fui-MenuItem";
 
+// @public (undocumented)
+export const menuItemClassNames: SlotClassNames<MenuItemSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "MenuItemCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -133,9 +149,12 @@ export type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & MenuItemCom
 // @public
 export const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuItemRadioClassName = "fui-MenuItemRadio";
 
+// @public (undocumented)
+export const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
+
 // @public (undocumented)
 export type MenuItemRadioProps = MenuItemProps & MenuItemSelectableProps;
 
@@ -171,9 +190,12 @@ export type MenuItemState = ComponentState<MenuItemSlots> & MenuItemCommons;
 // @public
 export const MenuList: ForwardRefComponent<MenuListProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuListClassName = "fui-MenuList";
 
+// @public (undocumented)
+export const menuListClassNames: SlotClassNames<MenuListSlots>;
+
 // @public (undocumented)
 export const MenuListContext: Context<MenuListContextValue>;
 
@@ -222,9 +244,12 @@ export type MenuOpenEvents = MouseEvent | TouchEvent | React_2.MouseEvent<HTMLEl
 // @public
 export const MenuPopover: ForwardRefComponent<MenuPopoverProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuPopoverClassName = "fui-MenuPopover";
 
+// @public (undocumented)
+export const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots>;
+
 // @public
 export type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;
 
@@ -255,9 +280,12 @@ export type MenuSlots = {};
 // @public
 export const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuSplitGroupClassName = "fui-MenuSplitGroup";
 
+// @public (undocumented)
+export const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "MenuSplitGroupCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
diff --git a/packages/react-menu/src/components/Menu/Menu.test.tsx b/packages/react-menu/src/components/Menu/Menu.test.tsx
index eb4b1b5c357b3..84e830aacafc0 100644
--- a/packages/react-menu/src/components/Menu/Menu.test.tsx
+++ b/packages/react-menu/src/components/Menu/Menu.test.tsx
@@ -19,6 +19,7 @@ describe('Menu', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classname',
+      'component-has-static-classnames-object',
       // Menu does not have own styles
       'make-styles-overrides-win',
     ],
diff --git a/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts b/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
index 3cc37f959face..374e5a1a9a61f 100644
--- a/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
+++ b/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
@@ -1,8 +1,15 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { MenuDividerState } from './MenuDivider.types';
+import type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `menuDividerClassNames.root` instead.
+ */
 export const menuDividerClassName = 'fui-MenuDivider';
+export const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {
+  root: 'fui-MenuDivider',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -15,7 +22,7 @@ const useStyles = makeStyles({
 
 export const useMenuDividerStyles_unstable = (state: MenuDividerState) => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuDividerClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts b/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
index b6caed3aeed71..ef2460760d836 100644
--- a/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
+++ b/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
@@ -1,10 +1,17 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
-import type { MenuGroupState } from './MenuGroup.types';
+import type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';
 
+/**
+ * @deprecated Use `menuGroupClassNames.root` instead.
+ */
 export const menuGroupClassName = 'fui-MenuGroup';
+export const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {
+  root: 'fui-MenuGroup',
+};
 
 export const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {
-  state.root.className = mergeClasses(menuGroupClassName, state.root.className);
+  state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
index 2f488841632a9..2f5140653bc5d 100644
--- a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
+++ b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
@@ -1,8 +1,15 @@
 import { mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { MenuGroupHeaderState } from './MenuGroupHeader.types';
+import type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `menuGroupHeaderClassNames.root` instead.
+ */
 export const menuGroupHeaderClassName = 'fui-MenuGroupHeader';
+export const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {
+  root: 'fui-MenuGroupHeader',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
 
 export const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState) => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuGroupHeaderClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx b/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
index 9c92e3e5cb9a4..ed5ce32d66375 100644
--- a/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
+++ b/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
@@ -14,6 +14,19 @@ describe('MenuItem', () => {
   isConformant({
     Component: MenuItem,
     displayName: 'MenuItem',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            checkmark: 'Test Checkmark',
+            submenuIndicator: 'Test Submenu Indicator',
+            content: 'Test Content',
+            secondaryContent: 'Test Secondary Content',
+          },
+        },
+      ],
+    },
   });
 
   /**
diff --git a/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap b/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
index bcac075597838..cdc34029f58a0 100644
--- a/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
+++ b/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`MenuItem renders a default state 1`] = `
   tabIndex={0}
 >
   <span
-    className=""
+    className="fui-MenuItem__content"
   >
     Default MenuItem
   </span>
diff --git a/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts b/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
index 2dad905bfc433..1f75b25816b46 100644
--- a/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
+++ b/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
@@ -3,9 +3,21 @@ import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
 import { MenuItemCheckboxState } from '../MenuItemCheckbox/index';
-import type { MenuItemState } from './MenuItem.types';
+import type { MenuItemSlots, MenuItemState } from './MenuItem.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `menuItemClassNames.root` instead.
+ */
 export const menuItemClassName = 'fui-MenuItem';
+export const menuItemClassNames: SlotClassNames<MenuItemSlots> = {
+  root: 'fui-MenuItem',
+  icon: 'fui-MenuItem__icon',
+  checkmark: 'fui-MenuItem__checkmark',
+  submenuIndicator: 'fui-MenuItem__submenuIndicator',
+  content: 'fui-MenuItem__content',
+  secondaryContent: 'fui-MenuItem__secondaryContent',
+};
 
 const useStyles = makeStyles({
   focusIndicator: createFocusOutlineStyle(),
@@ -81,7 +93,7 @@ const useStyles = makeStyles({
 export const useMenuItemStyles_unstable = (state: MenuItemState) => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    menuItemClassName,
+    menuItemClassNames.root,
     styles.root,
     styles.focusIndicator,
     state.disabled && styles.disabled,
@@ -89,22 +101,31 @@ export const useMenuItemStyles_unstable = (state: MenuItemState) => {
   );
 
   if (state.content) {
-    state.content.className = mergeClasses(styles.content, state.content.className);
+    state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);
+  }
+
+  if (state.checkmark) {
+    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);
   }
 
   if (state.secondaryContent) {
     state.secondaryContent.className = mergeClasses(
+      menuItemClassNames.secondaryContent,
       !state.disabled && styles.secondaryContent,
       state.secondaryContent.className,
     );
   }
 
   if (state.icon) {
-    state.icon.className = mergeClasses(styles.icon, state.icon.className);
+    state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);
   }
 
   if (state.submenuIndicator) {
-    state.submenuIndicator.className = mergeClasses(styles.submenuIndicator, state.submenuIndicator.className);
+    state.submenuIndicator.className = mergeClasses(
+      menuItemClassNames.submenuIndicator,
+      styles.submenuIndicator,
+      state.submenuIndicator.className,
+    );
   }
   useCheckmarkStyles_unstable(state as MenuItemCheckboxState);
 };
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx b/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
index 9b7c59b8e81c1..bf02772003f98 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
+++ b/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
@@ -18,6 +18,19 @@ describe('MenuItemCheckbox conformance', () => {
       value: '1',
     },
     displayName: 'MenuItemCheckbox',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            checkmark: 'Test Checkmark',
+            submenuIndicator: 'Test Submenu Indicator',
+            content: 'Test Content',
+            secondaryContent: 'Test Secondary Content',
+          },
+        },
+      ],
+    },
   });
 
   /**
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap b/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
index 5a747d5a9f9bd..33d516b81afb3 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
+++ b/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`MenuItemCheckbox conformance renders a default state 1`] = `
   tabIndex={0}
 >
   <span
-    className=""
+    className="fui-MenuItem__checkmark fui-MenuItemCheckbox__checkmark"
   >
     <svg
       aria-hidden={true}
@@ -29,7 +29,7 @@ exports[`MenuItemCheckbox conformance renders a default state 1`] = `
     </svg>
   </span>
   <span
-    className=""
+    className="fui-MenuItem__content fui-MenuItemCheckbox__content"
   >
     Default MenuItemCheckbox
   </span>
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
index 2e19eb3f1e2a3..5674c6fd9bfda 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
+++ b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
@@ -1,12 +1,43 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
+import { MenuItemSlots } from '../index';
 import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
 import type { MenuItemCheckboxState } from './MenuItemCheckbox.types';
 
+/**
+ * @deprecated Use `menuItemCheckboxClassNames.root` instead.
+ */
 export const menuItemCheckboxClassName = 'fui-MenuItemCheckbox';
+export const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {
+  root: 'fui-MenuItemCheckbox',
+  icon: 'fui-MenuItemCheckbox__icon',
+  checkmark: 'fui-MenuItemCheckbox__checkmark',
+  content: 'fui-MenuItemCheckbox__content',
+  secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',
+};
 
 export const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState) => {
-  state.root.className = mergeClasses(menuItemCheckboxClassName, state.root.className);
+  state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);
+
+  if (state.content) {
+    state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);
+  }
+
+  if (state.secondaryContent) {
+    state.secondaryContent.className = mergeClasses(
+      menuItemCheckboxClassNames.secondaryContent,
+      state.secondaryContent.className,
+    );
+  }
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);
+  }
+
+  if (state.checkmark) {
+    state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);
+  }
 
   useMenuItemStyles_unstable(state);
   useCheckmarkStyles_unstable(state);
diff --git a/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx b/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
index fe5273d1122e4..accb416c5a2e0 100644
--- a/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
+++ b/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
@@ -15,6 +15,19 @@ describe('MenuItemRadio', () => {
       value: '1',
     },
     displayName: 'MenuItemRadio',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            checkmark: 'Test Checkmark',
+            submenuIndicator: 'Test Submenu Indicator',
+            content: 'Test Content',
+            secondaryContent: 'Test Secondary Content',
+          },
+        },
+      ],
+    },
   });
 
   /**
diff --git a/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap b/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
index a2a2b21a4af78..4ca31d1740f0b 100644
--- a/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
+++ b/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`MenuItemRadio renders a default state 1`] = `
   tabIndex={0}
 >
   <span
-    className=""
+    className="fui-MenuItem__checkmark fui-MenuItemRadio__checkmark"
   >
     <svg
       aria-hidden={true}
@@ -29,7 +29,7 @@ exports[`MenuItemRadio renders a default state 1`] = `
     </svg>
   </span>
   <span
-    className=""
+    className="fui-MenuItem__content fui-MenuItemRadio__content"
   >
     Default MenuItemRadio
   </span>
diff --git a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
index c786cdb7b1a67..926650e72e771 100644
--- a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
+++ b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
@@ -1,12 +1,43 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
+import { MenuItemSlots } from '../index';
 import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
 import type { MenuItemRadioState } from './MenuItemRadio.types';
 
+/**
+ * @deprecated Use `menuItemRadioClassNames.root` instead.
+ */
 export const menuItemRadioClassName = 'fui-MenuItemRadio';
+export const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {
+  root: 'fui-MenuItemRadio',
+  icon: 'fui-MenuItemRadio__icon',
+  checkmark: 'fui-MenuItemRadio__checkmark',
+  content: 'fui-MenuItemRadio__content',
+  secondaryContent: 'fui-MenuItemRadio__secondaryContent',
+};
 
 export const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {
-  state.root.className = mergeClasses(menuItemRadioClassName, state.root.className);
+  state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);
+
+  if (state.content) {
+    state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);
+  }
+
+  if (state.secondaryContent) {
+    state.secondaryContent.className = mergeClasses(
+      menuItemRadioClassNames.secondaryContent,
+      state.secondaryContent.className,
+    );
+  }
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);
+  }
+
+  if (state.checkmark) {
+    state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);
+  }
 
   useMenuItemStyles_unstable(state);
   useCheckmarkStyles_unstable(state);
diff --git a/packages/react-menu/src/components/MenuList/useMenuListStyles.ts b/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
index 6dcbaf1ca1fd9..20fe6074c1c65 100644
--- a/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
+++ b/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
@@ -1,7 +1,14 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
-import type { MenuListState } from './MenuList.types';
+import type { MenuListSlots, MenuListState } from './MenuList.types';
 
+/**
+ * @deprecated Use `menuListClassNames.root` instead.
+ */
 export const menuListClassName = 'fui-MenuList';
+export const menuListClassNames: SlotClassNames<MenuListSlots> = {
+  root: 'fui-MenuList',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -16,6 +23,6 @@ const useStyles = makeStyles({
  */
 export const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuListClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts b/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
index 3ecedee5223d5..734c509bc1cd2 100644
--- a/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
+++ b/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
@@ -1,8 +1,15 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { MenuPopoverState } from './MenuPopover.types';
+import type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `menuPopoverClassNames.root` instead.
+ */
 export const menuPopoverClassName = 'fui-MenuPopover';
+export const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {
+  root: 'fui-MenuPopover',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -22,6 +29,6 @@ const useStyles = makeStyles({
  */
 export const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuPopoverClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts b/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
index da2975950700b..d99162a19e864 100644
--- a/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
+++ b/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
@@ -1,20 +1,26 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { menuItemClassName } from '../MenuItem/useMenuItemStyles';
-import type { MenuSplitGroupState } from './MenuSplitGroup.types';
+import { menuItemClassNames } from '../MenuItem/useMenuItemStyles';
+import type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `menuSplitGroupClassNames.root` instead.
+ */
 export const menuSplitGroupClassName = 'fui-MenuSplitGroup';
-
+export const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {
+  root: 'fui-MenuSplitGroup',
+};
 /**
  * Styles for the root slot
  */
 const useStyles = makeStyles({
   root: {
     display: 'flex',
-    [`& > .${menuItemClassName}:nth-child(1)`]: {
+    [`& > .${menuItemClassNames.root}:nth-child(1)`]: {
       width: '100%',
     },
-    [`& > .${menuItemClassName}:nth-child(2)`]: {
+    [`& > .${menuItemClassNames.root}:nth-child(2)`]: {
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0,
       paddingLeft: 0,
@@ -34,6 +40,6 @@ const useStyles = makeStyles({
  */
 export const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuSplitGroupClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx b/packages/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx
index 8f62569d42306..0deb6f7a764af 100644
--- a/packages/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx
+++ b/packages/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx
@@ -19,6 +19,7 @@ describe('MenuTrigger', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classname',
+      'component-has-static-classnames-object',
       // MenuTrigger does not have own styles
       'make-styles-overrides-win',
     ],
diff --git a/packages/react-popover/etc/react-popover.api.md b/packages/react-popover/etc/react-popover.api.md
index f0ee08f1534ca..a7081ed1a25d9 100644
--- a/packages/react-popover/etc/react-popover.api.md
+++ b/packages/react-popover/etc/react-popover.api.md
@@ -17,6 +17,7 @@ import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { usePopperMouseTarget } from '@fluentui/react-positioning';
 
 // @public (undocumented)
@@ -66,9 +67,12 @@ export type PopoverState = PopoverCommons & Pick<PopoverProps, 'children'> & {
 // @public
 export const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const popoverSurfaceClassName = "fui-PopoverSurface";
 
+// @public (undocumented)
+export const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
+
 // @public
 export type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;
 
diff --git a/packages/react-popover/src/components/Popover/Popover.test.tsx b/packages/react-popover/src/components/Popover/Popover.test.tsx
index 9588e7573e826..7eccbcc4079da 100644
--- a/packages/react-popover/src/components/Popover/Popover.test.tsx
+++ b/packages/react-popover/src/components/Popover/Popover.test.tsx
@@ -14,6 +14,7 @@ describe('Popover', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classname',
+      'component-has-static-classnames-object',
       // Popover does not have own styles
       'make-styles-overrides-win',
     ],
diff --git a/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts b/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
index 1521c67e920e1..fabed5309c279 100644
--- a/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
+++ b/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
@@ -2,9 +2,16 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';
 import { tokens } from '@fluentui/react-theme';
 import type { PopoverSize } from '../Popover/Popover.types';
-import type { PopoverSurfaceState } from './PopoverSurface.types';
+import type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `popoverSurfaceClassNames.root` instead.
+ */
 export const popoverSurfaceClassName = 'fui-PopoverSurface';
+export const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {
+  root: 'fui-PopoverSurface',
+};
 
 export const arrowHeights: Record<PopoverSize, number> = {
   small: 6,
@@ -58,7 +65,7 @@ const useStyles = makeStyles({
 export const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): PopoverSurfaceState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    popoverSurfaceClassName,
+    popoverSurfaceClassNames.root,
     styles.root,
     state.size === 'small' && styles.smallPadding,
     state.size === 'medium' && styles.mediumPadding,
diff --git a/packages/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx b/packages/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx
index 596b30adcbf82..161de0c7e67df 100644
--- a/packages/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx
+++ b/packages/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx
@@ -18,6 +18,7 @@ describe('PopoverTrigger', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classname',
+      'component-has-static-classnames-object',
       // PopoverTrigger does not have own styles
       'make-styles-overrides-win',
     ],
diff --git a/packages/react-provider/etc/react-provider.api.md b/packages/react-provider/etc/react-provider.api.md
index ea6ed20951b7a..bc7cc67cbbb6e 100644
--- a/packages/react-provider/etc/react-provider.api.md
+++ b/packages/react-provider/etc/react-provider.api.md
@@ -10,6 +10,7 @@ import type { PartialTheme } from '@fluentui/react-theme';
 import type { ProviderContextValue } from '@fluentui/react-shared-contexts';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 import type { Theme } from '@fluentui/react-theme';
 import type { ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
 import type { TooltipContextType } from '@fluentui/react-shared-contexts';
@@ -19,9 +20,12 @@ import { useTheme } from '@fluentui/react-shared-contexts';
 // @public (undocumented)
 export const FluentProvider: React_2.ForwardRefExoticComponent<FluentProviderProps & React_2.RefAttributes<HTMLElement>>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const fluentProviderClassName = "fui-FluentProvider";
 
+// @public (undocumented)
+export const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
+
 // @public (undocumented)
 export interface FluentProviderContextValues extends Pick<FluentProviderState, 'theme'> {
     // (undocumented)
diff --git a/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts b/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
index ad55f944d98f8..dc94f0c32d771 100644
--- a/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
+++ b/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
@@ -1,8 +1,15 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { FluentProviderState } from './FluentProvider.types';
+import type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `fluentProviderClassNames.root` instead.
+ */
 export const fluentProviderClassName = 'fui-FluentProvider';
+export const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {
+  root: 'fui-FluentProvider',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -18,7 +25,12 @@ const useStyles = makeStyles({
 export const useFluentProviderStyles_unstable = (state: FluentProviderState) => {
   const styles = useStyles();
 
-  state.root.className = mergeClasses(fluentProviderClassName, state.themeClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(
+    fluentProviderClassNames.root,
+    state.themeClassName,
+    styles.root,
+    state.root.className,
+  );
 
   return state;
 };
diff --git a/packages/react-provider/src/components/FluentProvider/useThemeStyleTag.ts b/packages/react-provider/src/components/FluentProvider/useThemeStyleTag.ts
index c3a7c49856172..ef865255f94ba 100644
--- a/packages/react-provider/src/components/FluentProvider/useThemeStyleTag.ts
+++ b/packages/react-provider/src/components/FluentProvider/useThemeStyleTag.ts
@@ -1,7 +1,7 @@
 import { useId, usePrevious } from '@fluentui/react-utilities';
 import * as React from 'react';
 import type { FluentProviderState } from './FluentProvider.types';
-import { fluentProviderClassName } from './useFluentProviderStyles';
+import { fluentProviderClassNames } from './useFluentProviderStyles';
 
 /**
  * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
@@ -11,7 +11,7 @@ import { fluentProviderClassName } from './useFluentProviderStyles';
 export const useThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {
   const { targetDocument, theme } = options;
 
-  const styleTagId = useId(fluentProviderClassName);
+  const styleTagId = useId(fluentProviderClassNames.root);
   const styleTag = React.useMemo(() => {
     if (!targetDocument) {
       return null;
diff --git a/packages/react-radio/etc/react-radio.api.md b/packages/react-radio/etc/react-radio.api.md
index 114d3b91bbecd..91b3083a0a02d 100644
--- a/packages/react-radio/etc/react-radio.api.md
+++ b/packages/react-radio/etc/react-radio.api.md
@@ -10,19 +10,26 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Radio: ForwardRefComponent<RadioProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const radioClassName = "fui-Radio";
 
+// @public (undocumented)
+export const radioClassNames: SlotClassNames<RadioSlots>;
+
 // @public
 export const RadioGroup: ForwardRefComponent<RadioGroupProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const radioGroupClassName = "fui-RadioGroup";
 
+// @public (undocumented)
+export const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
+
 // @public
 export const RadioGroupContext: React_2.Context<RadioGroupContextValue>;
 
diff --git a/packages/react-radio/src/components/Radio/Radio.test.tsx b/packages/react-radio/src/components/Radio/Radio.test.tsx
index 04e375b5352fa..37747ee2f1ba3 100644
--- a/packages/react-radio/src/components/Radio/Radio.test.tsx
+++ b/packages/react-radio/src/components/Radio/Radio.test.tsx
@@ -9,6 +9,15 @@ describe('Radio', () => {
     Component: Radio,
     displayName: 'Radio',
     primarySlot: 'input',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            label: 'Test Label',
+          },
+        },
+      ],
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-radio/src/components/Radio/useRadioStyles.ts b/packages/react-radio/src/components/Radio/useRadioStyles.ts
index 0895d266b901a..98744ffc32310 100644
--- a/packages/react-radio/src/components/Radio/useRadioStyles.ts
+++ b/packages/react-radio/src/components/Radio/useRadioStyles.ts
@@ -1,11 +1,19 @@
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { RadioState } from './Radio.types';
+import type { RadioSlots, RadioState } from './Radio.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `radioClassNames.root` instead.
+ */
 export const radioClassName = 'fui-Radio';
-const indicatorClassName = 'fui-Radio__indicator';
-const labelClassName = 'fui-Radio__label';
+export const radioClassNames: SlotClassNames<RadioSlots> = {
+  root: 'fui-Radio',
+  indicator: 'fui-Radio__indicator',
+  input: 'fui-Radio__input',
+  label: 'fui-Radio__label',
+};
 
 // TODO replace these spacing constants with theme values once they're on the theme
 const spacingHorizontalS = '8px';
@@ -50,33 +58,33 @@ const useInputStyles = makeStyles({
     },
 
     // When unchecked, hide the circle icon (child of the indicator)
-    [`:not(:checked) ~ .${indicatorClassName} > *`]: {
+    [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {
       opacity: '0',
     },
 
     // Colors for the unchecked state
     ':enabled:not(:checked)': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${radioClassNames.label}`]: {
         color: tokens.colorNeutralForeground3,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${radioClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),
       },
 
       ':hover': {
-        [`& ~ .${labelClassName}`]: {
+        [`& ~ .${radioClassNames.label}`]: {
           color: tokens.colorNeutralForeground2,
         },
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${radioClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),
         },
       },
 
       ':hover:active': {
-        [`& ~ .${labelClassName}`]: {
+        [`& ~ .${radioClassNames.label}`]: {
           color: tokens.colorNeutralForeground1,
         },
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${radioClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),
         },
       },
@@ -84,23 +92,23 @@ const useInputStyles = makeStyles({
 
     // Colors for the checked state
     ':enabled:checked': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${radioClassNames.label}`]: {
         color: tokens.colorNeutralForeground1,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${radioClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorCompoundBrandStroke),
         color: tokens.colorCompoundBrandForeground1,
       },
 
       ':hover': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${radioClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),
           color: tokens.colorCompoundBrandForeground1Hover,
         },
       },
 
       ':hover:active': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${radioClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),
           color: tokens.colorCompoundBrandForeground1Pressed,
         },
@@ -109,10 +117,10 @@ const useInputStyles = makeStyles({
 
     // Colors for the disabled state
     ':disabled': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${radioClassNames.label}`]: {
         color: tokens.colorNeutralForegroundDisabled,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${radioClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
         color: tokens.colorNeutralForegroundDisabled,
       },
@@ -161,7 +169,7 @@ const useLabelStyles = makeStyles({
 export const useRadioStyles_unstable = (state: RadioState) => {
   const rootStyles = useRootStyles();
   state.root.className = mergeClasses(
-    radioClassName,
+    radioClassNames.root,
     rootStyles.base,
     rootStyles.focusIndicator,
     state.labelPosition === 'below' && rootStyles.vertical,
@@ -169,15 +177,15 @@ export const useRadioStyles_unstable = (state: RadioState) => {
   );
 
   const inputStyles = useInputStyles();
-  state.input.className = mergeClasses(inputStyles.base, state.input.className);
+  state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);
 
   const indicatorStyles = useIndicatorStyles();
-  state.indicator.className = mergeClasses(indicatorClassName, indicatorStyles.base, state.indicator.className);
+  state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
 
   const labelStyles = useLabelStyles();
   if (state.label) {
     state.label.className = mergeClasses(
-      labelClassName,
+      radioClassNames.label,
       labelStyles.base,
       state.labelPosition === 'below' && labelStyles.below,
       state.label.className,
diff --git a/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts b/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
index eb21272f80138..fd197c004dce3 100644
--- a/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
+++ b/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
@@ -1,7 +1,14 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
-import { RadioGroupState } from './RadioGroup.types';
+import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `radioGroupClassNames.root` instead.
+ */
 export const radioGroupClassName = 'fui-RadioGroup';
+export const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {
+  root: 'fui-RadioGroup',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -20,7 +27,7 @@ const useStyles = makeStyles({
 export const useRadioGroupStyles_unstable = (state: RadioGroupState) => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    radioGroupClassName,
+    radioGroupClassNames.root,
     styles.root,
     state.layout === 'vertical' && styles.vertical,
     state.root.className,
diff --git a/packages/react-select/etc/react-select.api.md b/packages/react-select/etc/react-select.api.md
index b8e56c944522e..4954fbbf29791 100644
--- a/packages/react-select/etc/react-select.api.md
+++ b/packages/react-select/etc/react-select.api.md
@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const renderSelect_unstable: (state: SelectState) => JSX.Element;
@@ -16,9 +17,12 @@ export const renderSelect_unstable: (state: SelectState) => JSX.Element;
 // @public
 export const Select: ForwardRefComponent<SelectProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const selectClassName = "fui-Select";
 
+// @public (undocumented)
+export const selectClassNames: SlotClassNames<SelectSlots>;
+
 // @public (undocumented)
 export interface SelectCommons {
     appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
diff --git a/packages/react-select/src/components/Select/__snapshots__/Select.test.tsx.snap b/packages/react-select/src/components/Select/__snapshots__/Select.test.tsx.snap
index 8687c00d63b1d..e5b09ecd5fdb5 100644
--- a/packages/react-select/src/components/Select/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-select/src/components/Select/__snapshots__/Select.test.tsx.snap
@@ -6,9 +6,11 @@ exports[`Select renders the default state 1`] = `
     class="fui-Select"
   >
     <select
-      class=""
+      class="fui-Select__select"
+    />
+    <span
+      class="fui-Select__icon"
     />
-    <span />
   </span>
 </div>
 `;
diff --git a/packages/react-select/src/components/Select/useSelectStyles.ts b/packages/react-select/src/components/Select/useSelectStyles.ts
index 35c64a96f369b..39aad4e7f4955 100644
--- a/packages/react-select/src/components/Select/useSelectStyles.ts
+++ b/packages/react-select/src/components/Select/useSelectStyles.ts
@@ -1,7 +1,16 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { SelectState } from './Select.types';
+import type { SelectSlots, SelectState } from './Select.types';
 
+/**
+ * @deprecated Use `selectClassNames.root` instead.
+ */
 export const selectClassName = 'fui-Select';
+export const selectClassNames: SlotClassNames<SelectSlots> = {
+  root: 'fui-Select',
+  select: 'fui-Select__select',
+  icon: 'fui-Select__icon',
+};
 
 const useStyles = makeStyles({
   wrapper: {
@@ -22,13 +31,18 @@ export const useSelectStyles_unstable = (state: SelectState): SelectState => {
   const disabled = state.select.disabled;
   const selectStyles = useStyles();
 
-  state.root.className = mergeClasses(selectClassName, selectStyles.wrapper, state.root.className);
+  state.root.className = mergeClasses(selectClassNames.root, selectStyles.wrapper, state.root.className);
 
   state.select.className = mergeClasses(
+    selectClassNames.select,
     selectStyles.select,
     disabled && selectStyles.selectDisabled,
     state.select.className,
   );
 
+  if (state.icon) {
+    state.icon.className = mergeClasses(selectClassNames.icon, state.icon.className);
+  }
+
   return state;
 };
diff --git a/packages/react-spinbutton/etc/react-spinbutton.api.md b/packages/react-spinbutton/etc/react-spinbutton.api.md
index e894e07310770..933b6a3b88551 100644
--- a/packages/react-spinbutton/etc/react-spinbutton.api.md
+++ b/packages/react-spinbutton/etc/react-spinbutton.api.md
@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const renderSpinButton_unstable: (state: SpinButtonState) => JSX.Element;
@@ -21,9 +22,12 @@ export type SpinButtonChangeData = {
     value: number;
 };
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const spinButtonClassName = "fui-SpinButton";
 
+// @public (undocumented)
+export const spinButtonClassNames: SlotClassNames<SpinButtonSlots>;
+
 // @public (undocumented)
 export type SpinButtonCommons = {
     defaultValue: number;
diff --git a/packages/react-spinbutton/src/components/SpinButton/SpinButton.test.tsx b/packages/react-spinbutton/src/components/SpinButton/SpinButton.test.tsx
index 743d3ffcf7d53..5e86604ae1a01 100644
--- a/packages/react-spinbutton/src/components/SpinButton/SpinButton.test.tsx
+++ b/packages/react-spinbutton/src/components/SpinButton/SpinButton.test.tsx
@@ -7,6 +7,7 @@ describe('SpinButton', () => {
   isConformant({
     Component: SpinButton,
     displayName: 'SpinButton',
+    disabledTests: ['component-has-static-classnames-object'], // Will be enabled when component is implemented
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
diff --git a/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
index 876f202cdaa8d..08b79e0646db9 100644
--- a/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
+++ b/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
@@ -1,7 +1,17 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { SpinButtonState } from './SpinButton.types';
+import type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';
 
+/**
+ * @deprecated Use `spinButtonClassNames.root` instead.
+ */
 export const spinButtonClassName = 'fui-SpinButton';
+export const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {
+  root: 'fui-SpinButton',
+  input: 'fui-SpinButton__input',
+  incrementControl: 'fui-SpinButton__incrementControl',
+  decrementControl: 'fui-SpinButton__decrementControl',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +29,7 @@ const useStyles = makeStyles({
  */
 export const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(spinButtonClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(spinButtonClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-spinner/etc/react-spinner.api.md b/packages/react-spinner/etc/react-spinner.api.md
index bd1510cf09f74..3f75a72e264fe 100644
--- a/packages/react-spinner/etc/react-spinner.api.md
+++ b/packages/react-spinner/etc/react-spinner.api.md
@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;
@@ -16,9 +17,12 @@ export const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;
 // @public
 export const Spinner: ForwardRefComponent<SpinnerProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const spinnerClassName = "fui-Spinner";
 
+// @public (undocumented)
+export const spinnerClassNames: SlotClassNames<SpinnerSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "SpinnerCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
diff --git a/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts b/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts
index 8b8fd0c23709f..470ab188e041d 100644
--- a/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts
+++ b/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { SpinnerState } from './Spinner.types';
+import type { SpinnerSlots, SpinnerState } from './Spinner.types';
 
+/**
+ * @deprecated Use `spinnerClassNames.root` instead.
+ */
 export const spinnerClassName = 'fui-Spinner';
+export const spinnerClassNames: SlotClassNames<SpinnerSlots> = {
+  root: 'fui-Spinner',
+};
 /**
  * Styles for the root slot
  */
@@ -18,7 +25,7 @@ const useStyles = makeStyles({
  */
 export const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(spinnerClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(spinnerClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-switch/etc/react-switch.api.md b/packages/react-switch/etc/react-switch.api.md
index 072c1ee2d35e0..bda4f401e6744 100644
--- a/packages/react-switch/etc/react-switch.api.md
+++ b/packages/react-switch/etc/react-switch.api.md
@@ -18,7 +18,7 @@ export const renderSwitch_unstable: (state: SwitchState) => JSX.Element;
 // @public
 export const Switch: ForwardRefComponent<SwitchProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const switchClassName: string;
 
 // @public (undocumented)
diff --git a/packages/react-switch/src/components/Switch/Switch.test.tsx b/packages/react-switch/src/components/Switch/Switch.test.tsx
index 2787d9885474f..3f83e10a21074 100644
--- a/packages/react-switch/src/components/Switch/Switch.test.tsx
+++ b/packages/react-switch/src/components/Switch/Switch.test.tsx
@@ -10,6 +10,15 @@ describe('Switch', () => {
     Component: Switch,
     displayName: 'Switch',
     primarySlot: 'input',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            label: 'Test Label',
+          },
+        },
+      ],
+    },
   });
 
   describe('on component render', () => {
diff --git a/packages/react-switch/src/components/Switch/useSwitchStyles.ts b/packages/react-switch/src/components/Switch/useSwitchStyles.ts
index 1526cc79a942b..d7a2c65e9851c 100644
--- a/packages/react-switch/src/components/Switch/useSwitchStyles.ts
+++ b/packages/react-switch/src/components/Switch/useSwitchStyles.ts
@@ -11,7 +11,9 @@ export const switchClassNames: SlotClassNames<SwitchSlots> = {
   label: 'fui-Switch__label',
 };
 
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `switchClassNames.root` instead.
+ */
 export const switchClassName = switchClassNames.root;
 
 // TODO replace these spacing constants with theme values once they're on the theme.
diff --git a/packages/react-tabs/etc/react-tabs.api.md b/packages/react-tabs/etc/react-tabs.api.md
index b09e22d63d4d8..9f0f0aa714211 100644
--- a/packages/react-tabs/etc/react-tabs.api.md
+++ b/packages/react-tabs/etc/react-tabs.api.md
@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public (undocumented)
 export const indicatorLengthVar = "--selection-indicator-length";
@@ -45,9 +46,12 @@ export type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData)
 // @public
 export const Tab: ForwardRefComponent<TabProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const tabClassName = "fui-Tab";
 
+// @public (undocumented)
+export const tabClassNames: SlotClassNames<TabSlots>;
+
 // @public
 export type TabContentRect = {
     x: number;
@@ -59,9 +63,12 @@ export type TabContentRect = {
 // @public
 export const TabList: ForwardRefComponent<TabListProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const tabListClassName = "fui-TabList";
 
+// @public (undocumented)
+export const tabListClassNames: SlotClassNames<TabListSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "TabListCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -82,7 +89,7 @@ export type TabListProps = ComponentProps<TabListSlots> & TabListCommons & {
 };
 
 // @public (undocumented)
-export const tabListSelectionIndicatorName = "fui-TabList_SelectionIndicator";
+export const tabListSelectionIndicatorName = "fui-TabList__selectionIndicator";
 
 // @public (undocumented)
 export type TabListSlots = {
diff --git a/packages/react-tabs/src/components/Tab/Tab.test.tsx b/packages/react-tabs/src/components/Tab/Tab.test.tsx
index 6ac94c414c1c1..3f6bfb2acae70 100644
--- a/packages/react-tabs/src/components/Tab/Tab.test.tsx
+++ b/packages/react-tabs/src/components/Tab/Tab.test.tsx
@@ -10,6 +10,15 @@ describe('Tab', () => {
   isConformant({
     Component: Tab,
     displayName: 'Tab',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+          },
+        },
+      ],
+    },
   });
 
   const defaultContext: TabListContextValue = {
diff --git a/packages/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap b/packages/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap
index 8e96248628a18..857c21b0c9088 100644
--- a/packages/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap
+++ b/packages/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`Tab renders correctly 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
@@ -24,7 +24,7 @@ exports[`Tab renders default correctly with icon slotted 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__icon"
     >
       <svg
         aria-hidden="true"
@@ -41,7 +41,7 @@ exports[`Tab renders default correctly with icon slotted 1`] = `
       </svg>
     </span>
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
@@ -57,7 +57,7 @@ exports[`Tab renders small size and vertical correctly with icon slotted 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__icon"
     >
       <svg
         aria-hidden="true"
@@ -74,7 +74,7 @@ exports[`Tab renders small size and vertical correctly with icon slotted 1`] = `
       </svg>
     </span>
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
@@ -90,7 +90,7 @@ exports[`Tab renders small size correctly with icon slotted 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__icon"
     >
       <svg
         aria-hidden="true"
@@ -107,7 +107,7 @@ exports[`Tab renders small size correctly with icon slotted 1`] = `
       </svg>
     </span>
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
@@ -123,7 +123,7 @@ exports[`Tab renders subtle appearance correctly with icon slotted 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__icon"
     >
       <svg
         aria-hidden="true"
@@ -140,7 +140,7 @@ exports[`Tab renders subtle appearance correctly with icon slotted 1`] = `
       </svg>
     </span>
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
@@ -156,7 +156,7 @@ exports[`Tab renders vertical correctly with icon slotted 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__icon"
     >
       <svg
         aria-hidden="true"
@@ -173,7 +173,7 @@ exports[`Tab renders vertical correctly with icon slotted 1`] = `
       </svg>
     </span>
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
diff --git a/packages/react-tabs/src/components/Tab/useTabStyles.ts b/packages/react-tabs/src/components/Tab/useTabStyles.ts
index 354870957e1b9..b1c12c0b38e76 100644
--- a/packages/react-tabs/src/components/Tab/useTabStyles.ts
+++ b/packages/react-tabs/src/components/Tab/useTabStyles.ts
@@ -1,11 +1,20 @@
-import type { TabState } from './Tab.types';
+import type { TabSlots, TabState } from './Tab.types';
 
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { tabPendingDesignTokens } from '../../tab.constants';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `tabClassNames.root` instead.
+ */
 export const tabClassName = 'fui-Tab';
+export const tabClassNames: SlotClassNames<TabSlots> = {
+  root: 'fui-Tab',
+  icon: 'fui-Tab__icon',
+  content: 'fui-Tab__content',
+};
 
 /**
  * Styles for the root slot
@@ -175,7 +184,7 @@ export const useTabStyles_unstable = (state: TabState): TabState => {
   const contentStyles = useContentStyles();
 
   state.root.className = mergeClasses(
-    tabClassName,
+    tabClassNames.root,
     rootStyles.base,
     focusStyles.base,
     state.size === 'small' && rootStyles.small,
@@ -186,10 +195,16 @@ export const useTabStyles_unstable = (state: TabState): TabState => {
   );
 
   if (state.icon) {
-    state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);
+    state.icon.className = mergeClasses(
+      tabClassNames.icon,
+      iconStyles.base,
+      iconStyles[state.size],
+      state.icon.className,
+    );
   }
 
   state.content.className = mergeClasses(
+    tabClassNames.content,
     contentStyles.base,
     state.size === 'small' && contentStyles.small,
     state.content.className,
diff --git a/packages/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap b/packages/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap
index af0eca411aee9..6414fe5cba7cc 100644
--- a/packages/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap
+++ b/packages/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`TabList renders with tabs 1`] = `
       tabindex="0"
     >
       <span
-        class=""
+        class="fui-Tab__content"
       >
         First
       </span>
@@ -34,7 +34,7 @@ exports[`TabList renders with tabs 1`] = `
       tabindex="0"
     >
       <span
-        class=""
+        class="fui-Tab__content"
       >
         Second
       </span>
@@ -45,7 +45,7 @@ exports[`TabList renders with tabs 1`] = `
       tabindex="0"
     >
       <span
-        class=""
+        class="fui-Tab__content"
       >
         Third
       </span>
diff --git a/packages/react-tabs/src/components/TabList/useTabListStyles.ts b/packages/react-tabs/src/components/TabList/useTabListStyles.ts
index 94ab9f5376ef3..8bd0c4f9f626a 100644
--- a/packages/react-tabs/src/components/TabList/useTabListStyles.ts
+++ b/packages/react-tabs/src/components/TabList/useTabListStyles.ts
@@ -1,11 +1,17 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { TabListState } from './TabList.types';
+import type { TabListSlots, TabListState } from './TabList.types';
 import { tokens } from '@fluentui/react-theme';
-import { usePrevious } from '@fluentui/react-utilities';
+import { SlotClassNames, usePrevious } from '@fluentui/react-utilities';
 import { tabPendingDesignTokens } from '../../tab.constants';
 
+/**
+ * @deprecated Use `tabListClassNames.root` instead.
+ */
 export const tabListClassName = 'fui-TabList';
-export const tabListSelectionIndicatorName = 'fui-TabList_SelectionIndicator';
+export const tabListSelectionIndicatorName = 'fui-TabList__selectionIndicator';
+export const tabListClassNames: SlotClassNames<TabListSlots> = {
+  root: 'fui-TabList',
+};
 
 export const indicatorOffsetVar = '--selection-indicator-offset';
 export const indicatorLengthVar = '--selection-indicator-length';
@@ -103,7 +109,7 @@ export const useTabListStyles_unstable = (state: TabListState): TabListState =>
   const verticalIndicatorStyles = useVerticalIndicatorStyles();
 
   state.root.className = mergeClasses(
-    tabListClassName,
+    tabListClassNames.root,
     styles.root,
     vertical && styles.vertical,
     !!selectedValue && (vertical ? verticalIndicatorStyles.base : horizontalIndicatorStyles.base),
diff --git a/packages/react-text/etc/react-text.api.md b/packages/react-text/etc/react-text.api.md
index 20fdf0e3c8f07..f518b1856b461 100644
--- a/packages/react-text/etc/react-text.api.md
+++ b/packages/react-text/etc/react-text.api.md
@@ -10,6 +10,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { FunctionComponent } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // Warning: (ae-forgotten-export) The symbol "TextWrapperProps" needs to be exported by the entry point index.d.ts
 //
@@ -17,49 +18,70 @@ import type { Slot } from '@fluentui/react-utilities';
 const Body_2: FunctionComponent<TextWrapperProps>;
 export { Body_2 as Body }
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const bodyClassName = "fui-Body";
 
+// @public (undocumented)
+export const bodyClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const Caption: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const captionClassName = "fui-Caption";
 
+// @public (undocumented)
+export const captionClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const Display: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const displayClassName = "fui-Display";
 
+// @public (undocumented)
+export const displayClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const Headline: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const headlineClassName = "fui-Headline";
 
+// @public (undocumented)
+export const headlineClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const LargeTitle: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const largeTitleClassName = "fui-LargeTitle";
 
+// @public (undocumented)
+export const largeTitleClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const renderText_unstable: (state: TextState) => JSX.Element;
 
 // @public
 export const Subheadline: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const subheadlineClassName = "fui-Subheadline";
 
+// @public (undocumented)
+export const subheadlineClassNames: SlotClassNames<TextSlots>;
+
 // @public
 const Text_2: ForwardRefComponent<TextProps>;
 export { Text_2 as Text }
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const textClassName = "fui-Text";
 
+// @public (undocumented)
+export const textClassNames: SlotClassNames<TextSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "TextCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
@@ -76,21 +98,30 @@ export type TextState = ComponentState<TextSlots> & TextCommons;
 // @public
 export const Title1: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const title1ClassName = "fui-Title1";
 
+// @public (undocumented)
+export const title1ClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const Title2: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const title2ClassName = "fui-Title2";
 
+// @public (undocumented)
+export const title2ClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const Title3: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const title3ClassName = "fui-Title3";
 
+// @public (undocumented)
+export const title3ClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const useText_unstable: (props: TextProps, ref: React_2.Ref<HTMLElement>) => TextState;
 
diff --git a/packages/react-text/src/components/Body/Body.tsx b/packages/react-text/src/components/Body/Body.tsx
index e44bab0d6e361..defe6243fc829 100644
--- a/packages/react-text/src/components/Body/Body.tsx
+++ b/packages/react-text/src/components/Body/Body.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated Use `bodyClassNames.root` instead.
+ */
 export const bodyClassName = 'fui-Body';
+export const bodyClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Body',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Body: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: bodyClassName,
+  className: bodyClassNames.root,
   displayName: 'Body',
 });
diff --git a/packages/react-text/src/components/Caption/Caption.tsx b/packages/react-text/src/components/Caption/Caption.tsx
index 6271bb8f331f4..03e68cdea9215 100644
--- a/packages/react-text/src/components/Caption/Caption.tsx
+++ b/packages/react-text/src/components/Caption/Caption.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated Use `captionClassNames.root` instead.
+ */
 export const captionClassName = 'fui-Caption';
+export const captionClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Caption',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Caption: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: captionClassName,
+  className: captionClassNames.root,
   displayName: 'Caption',
 });
diff --git a/packages/react-text/src/components/Display/Display.tsx b/packages/react-text/src/components/Display/Display.tsx
index f195b715d7705..dc73db8bbcfd6 100644
--- a/packages/react-text/src/components/Display/Display.tsx
+++ b/packages/react-text/src/components/Display/Display.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated Use `displayClassNames.root` instead.
+ */
 export const displayClassName = 'fui-Display';
+export const displayClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Display',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Display: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: displayClassName,
+  className: displayClassNames.root,
   displayName: 'Display',
 });
diff --git a/packages/react-text/src/components/Headline/Headline.tsx b/packages/react-text/src/components/Headline/Headline.tsx
index 38be9f5cc3dee..65b9763bc80a8 100644
--- a/packages/react-text/src/components/Headline/Headline.tsx
+++ b/packages/react-text/src/components/Headline/Headline.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated Use `headlineClassNames.root` instead.
+ */
 export const headlineClassName = 'fui-Headline';
+export const headlineClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Headline',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Headline: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: headlineClassName,
+  className: headlineClassNames.root,
   displayName: 'Headline',
 });
diff --git a/packages/react-text/src/components/LargeTitle/LargeTitle.tsx b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
index ef24844a44442..de030e7e0f3ef 100644
--- a/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
+++ b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated Use `largeTitleClassNames.root` instead.
+ */
 export const largeTitleClassName = 'fui-LargeTitle';
+export const largeTitleClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-LargeTitle',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const LargeTitle: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: largeTitleClassName,
+  className: largeTitleClassNames.root,
   displayName: 'LargeTitle',
 });
diff --git a/packages/react-text/src/components/Subheadline/Subheadline.tsx b/packages/react-text/src/components/Subheadline/Subheadline.tsx
index 9cfbc07ee9125..c3fa279d571ac 100644
--- a/packages/react-text/src/components/Subheadline/Subheadline.tsx
+++ b/packages/react-text/src/components/Subheadline/Subheadline.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated Use `subheadlineClassNames.root` instead.
+ */
 export const subheadlineClassName = 'fui-Subheadline';
+export const subheadlineClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Subheadline',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Subheadline: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: subheadlineClassName,
+  className: subheadlineClassNames.root,
   displayName: 'Subheadline',
 });
diff --git a/packages/react-text/src/components/Text/useTextStyles.ts b/packages/react-text/src/components/Text/useTextStyles.ts
index 1f87bce818126..8b58e16d1741c 100644
--- a/packages/react-text/src/components/Text/useTextStyles.ts
+++ b/packages/react-text/src/components/Text/useTextStyles.ts
@@ -1,8 +1,15 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { TextState } from './Text.types';
+import type { TextSlots, TextState } from './Text.types';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `textClassNames.root` instead.
+ */
 export const textClassName = 'fui-Text';
+export const textClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Text',
+};
 
 /**
  * Styles for the root slot
@@ -107,7 +114,7 @@ export const useTextStyles_unstable = (state: TextState): TextState => {
   const styles = useStyles();
 
   state.root.className = mergeClasses(
-    textClassName,
+    textClassNames.root,
     styles.root,
     state.wrap === false && styles.nowrap,
     state.truncate && styles.truncate,
diff --git a/packages/react-text/src/components/Title1/Title1.tsx b/packages/react-text/src/components/Title1/Title1.tsx
index 10794c5386f63..0465faa4173e0 100644
--- a/packages/react-text/src/components/Title1/Title1.tsx
+++ b/packages/react-text/src/components/Title1/Title1.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated Use `title1ClassNames.root` instead.
+ */
 export const title1ClassName = 'fui-Title1';
+export const title1ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Title1',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Title1: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: title1ClassName,
+  className: title1ClassNames.root,
   displayName: 'Title1',
 });
diff --git a/packages/react-text/src/components/Title2/Title2.tsx b/packages/react-text/src/components/Title2/Title2.tsx
index aeaa8f5dd29bc..8c149fdcb0246 100644
--- a/packages/react-text/src/components/Title2/Title2.tsx
+++ b/packages/react-text/src/components/Title2/Title2.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated Use `title2ClassNames.root` instead.
+ */
 export const title2ClassName = 'fui-Title2';
+export const title2ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Title2',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Title2: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: title2ClassName,
+  className: title2ClassNames.root,
   displayName: 'Title2',
 });
diff --git a/packages/react-text/src/components/Title3/Title3.tsx b/packages/react-text/src/components/Title3/Title3.tsx
index 56265b5a855a4..5d1660098bfa7 100644
--- a/packages/react-text/src/components/Title3/Title3.tsx
+++ b/packages/react-text/src/components/Title3/Title3.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated Use `title3ClassNames.root` instead.
+ */
 export const title3ClassName = 'fui-Title3';
+export const title3ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Title3',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Title3: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: title3ClassName,
+  className: title3ClassNames.root,
   displayName: 'Title3',
 });
diff --git a/packages/react-toolbar/etc/react-toolbar.api.md b/packages/react-toolbar/etc/react-toolbar.api.md
index 5bdcd321ebc21..cd34c1cff0d1d 100644
--- a/packages/react-toolbar/etc/react-toolbar.api.md
+++ b/packages/react-toolbar/etc/react-toolbar.api.md
@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const renderToolbar_unstable: (state: ToolbarState) => JSX.Element;
@@ -26,7 +27,7 @@ export const Toolbar: ForwardRefComponent<ToolbarProps>;
 export const ToolbarButton: ForwardRefComponent<ToolbarButtonProps>;
 
 // @public (undocumented)
-export const toolbarButtonClassName = "fui-ToolbarButton";
+export const toolbarButtonClassNames: SlotClassNames<ToolbarButtonSlots>;
 
 // Warning: (ae-forgotten-export) The symbol "ToolbarButtonCommons" needs to be exported by the entry point index.d.ts
 //
@@ -42,13 +43,13 @@ export type ToolbarButtonSlots = {
 export type ToolbarButtonState = ComponentState<ToolbarButtonSlots> & ToolbarButtonCommons;
 
 // @public (undocumented)
-export const toolbarClassName = "fui-Toolbar";
+export const toolbarClassNames: SlotClassNames<ToolbarSlots>;
 
 // @public
 export const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps>;
 
 // @public (undocumented)
-export const toolbarDividerClassName = "fui-ToolbarDivider";
+export const toolbarDividerClassNames: SlotClassNames<ToolbarDividerSlots>;
 
 // Warning: (ae-forgotten-export) The symbol "ToolbarDividerCommons" needs to be exported by the entry point index.d.ts
 //
diff --git a/packages/react-toolbar/src/components/Toolbar/Toolbar.test.tsx b/packages/react-toolbar/src/components/Toolbar/Toolbar.test.tsx
index 31ce91371da55..49f94005155d1 100644
--- a/packages/react-toolbar/src/components/Toolbar/Toolbar.test.tsx
+++ b/packages/react-toolbar/src/components/Toolbar/Toolbar.test.tsx
@@ -7,6 +7,7 @@ describe('Toolbar', () => {
   isConformant({
     Component: Toolbar,
     displayName: 'Toolbar',
+    disabledTests: ['component-has-static-classname'],
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
diff --git a/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts b/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
index 2ca41e569a103..222690144b484 100644
--- a/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
+++ b/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
@@ -1,7 +1,11 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ToolbarState } from './Toolbar.types';
+import type { ToolbarSlots, ToolbarState } from './Toolbar.types';
+
+export const toolbarClassNames: SlotClassNames<ToolbarSlots> = {
+  root: 'fui-Toolbar',
+};
 
-export const toolbarClassName = 'fui-Toolbar';
 /**
  * Styles for the root slot
  */
@@ -18,7 +22,7 @@ const useStyles = makeStyles({
  */
 export const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(toolbarClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(toolbarClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-toolbar/src/components/ToolbarButton/ToolbarButton.test.tsx b/packages/react-toolbar/src/components/ToolbarButton/ToolbarButton.test.tsx
index 580921858fd40..b0453398bd876 100644
--- a/packages/react-toolbar/src/components/ToolbarButton/ToolbarButton.test.tsx
+++ b/packages/react-toolbar/src/components/ToolbarButton/ToolbarButton.test.tsx
@@ -7,6 +7,7 @@ describe('ToolbarButton', () => {
   isConformant({
     Component: ToolbarButton,
     displayName: 'ToolbarButton',
+    disabledTests: ['component-has-static-classname'],
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
diff --git a/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts b/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
index c2b750aa00943..9e23b5229bfec 100644
--- a/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
+++ b/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
@@ -1,7 +1,11 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ToolbarButtonState } from './ToolbarButton.types';
+import type { ToolbarButtonSlots, ToolbarButtonState } from './ToolbarButton.types';
+
+export const toolbarButtonClassNames: SlotClassNames<ToolbarButtonSlots> = {
+  root: 'fui-ToolbarButton',
+};
 
-export const toolbarButtonClassName = 'fui-ToolbarButton';
 /**
  * Styles for the root slot
  */
@@ -18,7 +22,7 @@ const useStyles = makeStyles({
  */
 export const useToolbarButtonStyles_unstable = (state: ToolbarButtonState): ToolbarButtonState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(toolbarButtonClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(toolbarButtonClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.test.tsx b/packages/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.test.tsx
index 2dd797d3d1ace..939e3ba07191c 100644
--- a/packages/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.test.tsx
+++ b/packages/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.test.tsx
@@ -7,6 +7,7 @@ describe('ToolbarDivider', () => {
   isConformant({
     Component: ToolbarDivider,
     displayName: 'ToolbarDivider',
+    disabledTests: ['component-has-static-classname'],
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
diff --git a/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts b/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
index c8f13396867a9..d0cf33589c03e 100644
--- a/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
+++ b/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
@@ -1,7 +1,11 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ToolbarDividerState } from './ToolbarDivider.types';
+import type { ToolbarDividerSlots, ToolbarDividerState } from './ToolbarDivider.types';
+
+export const toolbarDividerClassNames: SlotClassNames<ToolbarDividerSlots> = {
+  root: 'fui-ToolbarDivider',
+};
 
-export const toolbarDividerClassName = 'fui-ToolbarDivider';
 /**
  * Styles for the root slot
  */
@@ -18,7 +22,7 @@ const useStyles = makeStyles({
  */
 export const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(toolbarDividerClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(toolbarDividerClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-tooltip/etc/react-tooltip.api.md b/packages/react-tooltip/etc/react-tooltip.api.md
index 995458bdd82df..1ba194b8369a2 100644
--- a/packages/react-tooltip/etc/react-tooltip.api.md
+++ b/packages/react-tooltip/etc/react-tooltip.api.md
@@ -10,6 +10,7 @@ import type { FluentTriggerComponent } from '@fluentui/react-utilities';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export type OnVisibleChangeData = {
@@ -22,9 +23,12 @@ export const renderTooltip_unstable: (state: TooltipState) => JSX.Element;
 // @public
 export const Tooltip: React_2.FC<TooltipProps> & FluentTriggerComponent;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const tooltipClassName = "fui-Tooltip";
 
+// @public (undocumented)
+export const tooltipClassNames: SlotClassNames<TooltipSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "TooltipCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
diff --git a/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx b/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
index 320678bcc8c04..a2ae9db500f46 100644
--- a/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
+++ b/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
@@ -33,6 +33,10 @@ describe('Tooltip', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classname',
+      'component-has-static-classnames-object',
+      'as-renders-fc',
+      'as-passes-as-value',
+      'as-renders-html',
     ],
   });
 
diff --git a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
index cf31a43389b36..5e9fb1b7c4f4f 100644
--- a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
+++ b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
@@ -2,9 +2,16 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createArrowStyles } from '@fluentui/react-positioning';
 import { tokens } from '@fluentui/react-theme';
 import { arrowHeight } from './private/constants';
-import type { TooltipState } from './Tooltip.types';
+import type { TooltipSlots, TooltipState } from './Tooltip.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `tooltipClassNames.root` instead.
+ */
 export const tooltipClassName = 'fui-Tooltip';
+export const tooltipClassNames: SlotClassNames<TooltipSlots> = {
+  content: 'fui-Tooltip__content',
+};
 
 /**
  * Styles for the tooltip
@@ -50,7 +57,9 @@ export const useTooltipStyles_unstable = (state: TooltipState): TooltipState =>
   const styles = useStyles();
 
   state.content.className = mergeClasses(
+    /* eslint-disable-next-line deprecation/deprecation */
     tooltipClassName,
+    tooltipClassNames.content,
     styles.root,
     state.appearance === 'inverted' && styles.inverted,
     state.visible && styles.visible,
diff --git a/packages/react/src/common/isConformant.ts b/packages/react/src/common/isConformant.ts
index b498af16e5a0d..54d81ceacc108 100644
--- a/packages/react/src/common/isConformant.ts
+++ b/packages/react/src/common/isConformant.ts
@@ -12,6 +12,7 @@ export function isConformant<TProps = {}>(
       // Will enable with appropriate overrides separately
       'consistent-callback-names',
       'consistent-callback-args',
+      'component-has-static-classnames-object',
     ],
     componentPath: module!.parent!.filename.replace('.test', ''),
   };
diff --git a/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs b/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs
index d15a6c40364bc..6937d849e8eee 100644
--- a/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs
+++ b/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs
@@ -1,8 +1,15 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { {{componentName}}State } from './{{componentName}}.types';
+import type { {{componentName}}Slots, {{componentName}}State } from './{{componentName}}.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 
 export const {{componentNames.propertyName}}ClassName = 'fui-{{componentName}}'
+export const {{componentNames.propertyName}}ClassNames:SlotClassNames<{{componentName}}Slots> = {
+  root: 'fui-{{componentName}}'
+  // TODO: add class names for all slots on {{componentName}}Slots.
+  // Should be of the form `<slotName>: 'fui-{{componentName}}__<slotName>`
+};
+
 /**
  * Styles for the root slot
  */