diff --git a/.changeset/seven-cycles-pick.md b/.changeset/seven-cycles-pick.md
new file mode 100644
index 0000000000..fbd1a3895f
--- /dev/null
+++ b/.changeset/seven-cycles-pick.md
@@ -0,0 +1,17 @@
+---
+'@backstage/ui': minor
+---
+
+**BREAKING**: Changed className prop behavior to augment default styles instead of being ignored or overriding them.
+
+Affected components:
+
+- Menu, MenuListBox, MenuAutocomplete, MenuAutocompleteListbox, MenuItem, MenuListBoxItem, MenuSection, MenuSeparator
+- Switch
+- Skeleton
+- FieldLabel
+- Header, HeaderToolbar
+- HeaderPage
+- Tabs, TabList, Tab, TabPanel
+
+If you were passing custom className values to any of these components that relied on the previous behavior, you may need to adjust your styles to account for the default classes now being applied alongside your custom classes.
diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index e0b8132f7f..4e762f431c 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -850,7 +850,8 @@ export const FieldLabel: ForwardRefExoticComponent<
 >;
 
 // @public (undocumented)
-export interface FieldLabelProps {
+export interface FieldLabelProps
+  extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {
   description?: string | null;
   htmlFor?: string;
   id?: string;
@@ -946,6 +947,8 @@ export interface HeaderPageProps {
   // (undocumented)
   breadcrumbs?: HeaderPageBreadcrumb[];
   // (undocumented)
+  className?: string;
+  // (undocumented)
   customActions?: React.ReactNode;
   // (undocumented)
   tabs?: HeaderTab[];
@@ -955,6 +958,8 @@ export interface HeaderPageProps {
 
 // @public
 export interface HeaderProps {
+  // (undocumented)
+  className?: string;
   // (undocumented)
   customActions?: React.ReactNode;
   // (undocumented)
@@ -1149,7 +1154,7 @@ export const RadioGroup: ForwardRefExoticComponent<
 // @public (undocumented)
 export interface RadioGroupProps
   extends Omit<RadioGroupProps_2, 'children'>,
-    Omit<FieldLabelProps, 'htmlFor' | 'id'> {
+    Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
   // (undocumented)
   children?: ReactNode;
 }
@@ -1171,7 +1176,7 @@ export const SearchField: ForwardRefExoticComponent<
 // @public (undocumented)
 export interface SearchFieldProps
   extends SearchFieldProps_2,
-    Omit<FieldLabelProps, 'htmlFor' | 'id'> {
+    Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
   icon?: ReactNode | false;
   placeholder?: string;
   size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
@@ -1189,7 +1194,7 @@ export interface SelectProps
       name: string;
       value: string;
     }>,
-    Omit<FieldLabelProps, 'htmlFor' | 'id'> {
+    Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
   icon?: ReactNode;
   options?: Array<{
     value: string;
@@ -1392,7 +1397,7 @@ export const TextField: ForwardRefExoticComponent<
 // @public (undocumented)
 export interface TextFieldProps
   extends TextFieldProps_2,
-    Omit<FieldLabelProps, 'htmlFor' | 'id'> {
+    Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
   icon?: ReactNode;
   placeholder?: string;
   size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
diff --git a/packages/ui/src/components/FieldLabel/FieldLabel.tsx b/packages/ui/src/components/FieldLabel/FieldLabel.tsx
index 475b053344..5b27dd876f 100644
--- a/packages/ui/src/components/FieldLabel/FieldLabel.tsx
+++ b/packages/ui/src/components/FieldLabel/FieldLabel.tsx
@@ -24,14 +24,21 @@ import clsx from 'clsx';
 export const FieldLabel = forwardRef<HTMLDivElement, FieldLabelProps>(
   (props: FieldLabelProps, ref) => {
     const { classNames, cleanedProps } = useStyles('FieldLabel', props);
-    const { label, secondaryLabel, description, htmlFor, id, ...rest } =
-      cleanedProps;
+    const {
+      className,
+      label,
+      secondaryLabel,
+      description,
+      htmlFor,
+      id,
+      ...rest
+    } = cleanedProps;
 
     if (!label) return null;
 
     return (
       <div
-        className={clsx(classNames.root, styles[classNames.root])}
+        className={clsx(classNames.root, styles[classNames.root], className)}
         {...rest}
         ref={ref}
       >
diff --git a/packages/ui/src/components/FieldLabel/types.ts b/packages/ui/src/components/FieldLabel/types.ts
index dc4e444133..7f1d8a24b1 100644
--- a/packages/ui/src/components/FieldLabel/types.ts
+++ b/packages/ui/src/components/FieldLabel/types.ts
@@ -15,7 +15,8 @@
  */
 
 /** @public */
-export interface FieldLabelProps {
+export interface FieldLabelProps
+  extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {
   /**
    * The label of the text field
    */
diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx
index ad5c704a3a..6f42820be4 100644
--- a/packages/ui/src/components/Header/Header.tsx
+++ b/packages/ui/src/components/Header/Header.tsx
@@ -35,8 +35,15 @@ declare module 'react-aria-components' {
  */
 export const Header = (props: HeaderProps) => {
   const { classNames, cleanedProps } = useStyles('Header', props);
-  const { tabs, icon, title, titleLink, customActions, onTabSelectionChange } =
-    cleanedProps;
+  const {
+    className,
+    tabs,
+    icon,
+    title,
+    titleLink,
+    customActions,
+    onTabSelectionChange,
+  } = cleanedProps;
 
   const hasTabs = tabs && tabs.length > 0;
 
@@ -54,6 +61,7 @@ export const Header = (props: HeaderProps) => {
           className={clsx(
             classNames.tabsWrapper,
             styles[classNames.tabsWrapper],
+            className,
           )}
         >
           <Tabs onSelectionChange={onTabSelectionChange}>
diff --git a/packages/ui/src/components/Header/HeaderToolbar.tsx b/packages/ui/src/components/Header/HeaderToolbar.tsx
index 343922ff02..a1754c61f4 100644
--- a/packages/ui/src/components/Header/HeaderToolbar.tsx
+++ b/packages/ui/src/components/Header/HeaderToolbar.tsx
@@ -31,7 +31,8 @@ import clsx from 'clsx';
  */
 export const HeaderToolbar = (props: HeaderToolbarProps) => {
   const { classNames, cleanedProps } = useStyles('Header', props);
-  const { icon, title, titleLink, customActions, hasTabs } = cleanedProps;
+  const { className, icon, title, titleLink, customActions, hasTabs } =
+    cleanedProps;
   let navigate = useNavigate();
 
   // Refs for collision detection
@@ -53,7 +54,11 @@ export const HeaderToolbar = (props: HeaderToolbarProps) => {
   return (
     <RouterProvider navigate={navigate} useHref={useHref}>
       <div
-        className={clsx(classNames.toolbar, styles[classNames.toolbar])}
+        className={clsx(
+          classNames.toolbar,
+          styles[classNames.toolbar],
+          className,
+        )}
         data-has-tabs={hasTabs}
       >
         <div
diff --git a/packages/ui/src/components/Header/types.ts b/packages/ui/src/components/Header/types.ts
index c7c602abfc..57dd1088f5 100644
--- a/packages/ui/src/components/Header/types.ts
+++ b/packages/ui/src/components/Header/types.ts
@@ -29,6 +29,7 @@ export interface HeaderProps {
   customActions?: React.ReactNode;
   tabs?: HeaderTab[];
   onTabSelectionChange?: TabsProps['onSelectionChange'];
+  className?: string;
 }
 
 /**
@@ -59,4 +60,5 @@ export interface HeaderToolbarProps {
   titleLink?: HeaderProps['titleLink'];
   customActions?: HeaderProps['customActions'];
   hasTabs?: boolean;
+  className?: string;
 }
diff --git a/packages/ui/src/components/HeaderPage/HeaderPage.tsx b/packages/ui/src/components/HeaderPage/HeaderPage.tsx
index 271f011a8f..6fcbbe258b 100644
--- a/packages/ui/src/components/HeaderPage/HeaderPage.tsx
+++ b/packages/ui/src/components/HeaderPage/HeaderPage.tsx
@@ -32,10 +32,12 @@ import clsx from 'clsx';
  */
 export const HeaderPage = (props: HeaderPageProps) => {
   const { classNames, cleanedProps } = useStyles('HeaderPage', props);
-  const { title, tabs, customActions, breadcrumbs } = cleanedProps;
+  const { className, title, tabs, customActions, breadcrumbs } = cleanedProps;
 
   return (
-    <Container className={clsx(classNames.root, styles[classNames.root])}>
+    <Container
+      className={clsx(classNames.root, styles[classNames.root], className)}
+    >
       <div className={clsx(classNames.content, styles[classNames.content])}>
         <div
           className={clsx(
diff --git a/packages/ui/src/components/HeaderPage/types.ts b/packages/ui/src/components/HeaderPage/types.ts
index 865eef1d73..1271461989 100644
--- a/packages/ui/src/components/HeaderPage/types.ts
+++ b/packages/ui/src/components/HeaderPage/types.ts
@@ -26,6 +26,7 @@ export interface HeaderPageProps {
   customActions?: React.ReactNode;
   tabs?: HeaderTab[];
   breadcrumbs?: HeaderPageBreadcrumb[];
+  className?: string;
 }
 
 /**
diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx
index 34eac8a128..6edbeaca20 100644
--- a/packages/ui/src/components/Menu/Menu.tsx
+++ b/packages/ui/src/components/Menu/Menu.tsx
@@ -86,6 +86,7 @@ export const SubmenuTrigger = (props: SubmenuTriggerProps) => {
 export const Menu = (props: MenuProps<object>) => {
   const { classNames, cleanedProps } = useStyles('Menu', props);
   const {
+    className,
     placement = 'bottom start',
     virtualized = false,
     maxWidth,
@@ -136,7 +137,11 @@ export const Menu = (props: MenuProps<object>) => {
   return (
     <RAPopover
       ref={popoverRef}
-      className={clsx(classNames.popover, styles[classNames.popover])}
+      className={clsx(
+        classNames.popover,
+        styles[classNames.popover],
+        className,
+      )}
       placement={placement}
       isNonModal={true}
       isKeyboardDismissDisabled={false}
@@ -163,6 +168,7 @@ export const Menu = (props: MenuProps<object>) => {
 export const MenuListBox = (props: MenuListBoxProps<object>) => {
   const { classNames, cleanedProps } = useStyles('Menu', props);
   const {
+    className,
     selectionMode = 'single',
     placement = 'bottom start',
     virtualized = false,
@@ -184,7 +190,11 @@ export const MenuListBox = (props: MenuListBoxProps<object>) => {
 
   return (
     <RAPopover
-      className={clsx(classNames.popover, styles[classNames.popover])}
+      className={clsx(
+        classNames.popover,
+        styles[classNames.popover],
+        className,
+      )}
       placement={placement}
     >
       {virtualized ? (
@@ -207,6 +217,7 @@ export const MenuListBox = (props: MenuListBoxProps<object>) => {
 export const MenuAutocomplete = (props: MenuAutocompleteProps<object>) => {
   const { classNames, cleanedProps } = useStyles('Menu', props);
   const {
+    className,
     placement = 'bottom start',
     virtualized = false,
     maxWidth,
@@ -229,7 +240,11 @@ export const MenuAutocomplete = (props: MenuAutocompleteProps<object>) => {
 
   return (
     <RAPopover
-      className={clsx(classNames.popover, styles[classNames.popover])}
+      className={clsx(
+        classNames.popover,
+        styles[classNames.popover],
+        className,
+      )}
       placement={placement}
     >
       <RouterProvider navigate={navigate} useHref={useHref}>
@@ -281,6 +296,7 @@ export const MenuAutocompleteListbox = (
 ) => {
   const { classNames, cleanedProps } = useStyles('Menu', props);
   const {
+    className,
     selectionMode = 'single',
     placement = 'bottom start',
     virtualized = false,
@@ -304,7 +320,11 @@ export const MenuAutocompleteListbox = (
 
   return (
     <RAPopover
-      className={clsx(classNames.popover, styles[classNames.popover])}
+      className={clsx(
+        classNames.popover,
+        styles[classNames.popover],
+        className,
+      )}
       placement={placement}
     >
       <RAAutocomplete filter={contains}>
@@ -352,6 +372,7 @@ export const MenuAutocompleteListbox = (
 export const MenuItem = (props: MenuItemProps) => {
   const { classNames, cleanedProps } = useStyles('Menu', props);
   const {
+    className,
     iconStart,
     color = 'primary',
     children,
@@ -365,7 +386,7 @@ export const MenuItem = (props: MenuItemProps) => {
   if (isLink && isExternal) {
     return (
       <RAMenuItem
-        className={clsx(classNames.item, styles[classNames.item])}
+        className={clsx(classNames.item, styles[classNames.item], className)}
         data-color={color}
         textValue={typeof children === 'string' ? children : undefined}
         onAction={() => window.open(href, '_blank', 'noopener,noreferrer')}
@@ -398,7 +419,7 @@ export const MenuItem = (props: MenuItemProps) => {
 
   return (
     <RAMenuItem
-      className={clsx(classNames.item, styles[classNames.item])}
+      className={clsx(classNames.item, styles[classNames.item], className)}
       data-color={color}
       href={href}
       textValue={typeof children === 'string' ? children : undefined}
@@ -429,14 +450,18 @@ export const MenuItem = (props: MenuItemProps) => {
 /** @public */
 export const MenuListBoxItem = (props: MenuListBoxItemProps) => {
   const { classNames, cleanedProps } = useStyles('Menu', props);
-  const { children, ...rest } = cleanedProps;
+  const { children, className, ...rest } = cleanedProps;
 
   return (
     <RAListBoxItem
       textValue={
         typeof props.children === 'string' ? props.children : undefined
       }
-      className={clsx(classNames.itemListBox, styles[classNames.itemListBox])}
+      className={clsx(
+        classNames.itemListBox,
+        styles[classNames.itemListBox],
+        className,
+      )}
       {...rest}
     >
       <div
@@ -466,11 +491,15 @@ export const MenuListBoxItem = (props: MenuListBoxItemProps) => {
 /** @public */
 export const MenuSection = (props: MenuSectionProps<object>) => {
   const { classNames, cleanedProps } = useStyles('Menu', props);
-  const { children, title, ...rest } = cleanedProps;
+  const { children, className, title, ...rest } = cleanedProps;
 
   return (
     <RAMenuSection
-      className={clsx(classNames.section, styles[classNames.section])}
+      className={clsx(
+        classNames.section,
+        styles[classNames.section],
+        className,
+      )}
       {...rest}
     >
       <RAMenuHeader
@@ -489,11 +518,16 @@ export const MenuSection = (props: MenuSectionProps<object>) => {
 /** @public */
 export const MenuSeparator = (props: MenuSeparatorProps) => {
   const { classNames, cleanedProps } = useStyles('Menu', props);
+  const { className, ...rest } = cleanedProps;
 
   return (
     <RAMenuSeparator
-      className={clsx(classNames.separator, styles[classNames.separator])}
-      {...cleanedProps}
+      className={clsx(
+        classNames.separator,
+        styles[classNames.separator],
+        className,
+      )}
+      {...rest}
     />
   );
 };
diff --git a/packages/ui/src/components/PasswordField/types.ts b/packages/ui/src/components/PasswordField/types.ts
index 8af9a6134c..6fade7496a 100644
--- a/packages/ui/src/components/PasswordField/types.ts
+++ b/packages/ui/src/components/PasswordField/types.ts
@@ -22,7 +22,7 @@ import type { FieldLabelProps } from '../FieldLabel/types';
 /** @public */
 export interface PasswordFieldProps
   extends AriaTextFieldProps,
-    Omit<FieldLabelProps, 'htmlFor' | 'id'> {
+    Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
   /**
    * An icon to render before the input
    */
diff --git a/packages/ui/src/components/RadioGroup/types.ts b/packages/ui/src/components/RadioGroup/types.ts
index 029ef4baf9..8e2148401f 100644
--- a/packages/ui/src/components/RadioGroup/types.ts
+++ b/packages/ui/src/components/RadioGroup/types.ts
@@ -24,7 +24,7 @@ import { ReactNode } from 'react';
 /** @public */
 export interface RadioGroupProps
   extends Omit<AriaRadioGroupProps, 'children'>,
-    Omit<FieldLabelProps, 'htmlFor' | 'id'> {
+    Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
   children?: ReactNode;
 }
 
diff --git a/packages/ui/src/components/SearchField/types.ts b/packages/ui/src/components/SearchField/types.ts
index 5fb6552c2e..15bc6bd208 100644
--- a/packages/ui/src/components/SearchField/types.ts
+++ b/packages/ui/src/components/SearchField/types.ts
@@ -22,7 +22,7 @@ import type { FieldLabelProps } from '../FieldLabel/types';
 /** @public */
 export interface SearchFieldProps
   extends AriaSearchFieldProps,
-    Omit<FieldLabelProps, 'htmlFor' | 'id'> {
+    Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
   /**
    * An icon to render before the input
    */
diff --git a/packages/ui/src/components/Select/types.ts b/packages/ui/src/components/Select/types.ts
index 6aea3452cc..6051a0e560 100644
--- a/packages/ui/src/components/Select/types.ts
+++ b/packages/ui/src/components/Select/types.ts
@@ -25,7 +25,7 @@ export interface SelectProps
       name: string;
       value: string;
     }>,
-    Omit<FieldLabelProps, 'htmlFor' | 'id'> {
+    Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
   /**
    * An icon to render before the input
    */
diff --git a/packages/ui/src/components/Skeleton/Skeleton.tsx b/packages/ui/src/components/Skeleton/Skeleton.tsx
index d776ad3d3a..ca2f4ae493 100644
--- a/packages/ui/src/components/Skeleton/Skeleton.tsx
+++ b/packages/ui/src/components/Skeleton/Skeleton.tsx
@@ -27,11 +27,11 @@ export const Skeleton = (props: SkeletonProps) => {
     rounded: false,
     ...props,
   });
-  const { width, height, rounded, style, ...rest } = cleanedProps;
+  const { className, width, height, rounded, style, ...rest } = cleanedProps;
 
   return (
     <div
-      className={clsx(classNames.root, styles[classNames.root])}
+      className={clsx(classNames.root, styles[classNames.root], className)}
       data-rounded={rounded}
       style={{
         width,
diff --git a/packages/ui/src/components/Switch/Switch.tsx b/packages/ui/src/components/Switch/Switch.tsx
index ae266d422e..ffc1fdef05 100644
--- a/packages/ui/src/components/Switch/Switch.tsx
+++ b/packages/ui/src/components/Switch/Switch.tsx
@@ -25,11 +25,11 @@ import clsx from 'clsx';
 export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
   (props, ref) => {
     const { classNames, cleanedProps } = useStyles('Switch', props);
-    const { label, ...rest } = cleanedProps;
+    const { className, label, ...rest } = cleanedProps;
 
     return (
       <AriaSwitch
-        className={clsx(classNames.root, styles[classNames.root])}
+        className={clsx(classNames.root, styles[classNames.root], className)}
         ref={ref}
         {...rest}
       >
diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx
index d5db6fed21..f627199b4b 100644
--- a/packages/ui/src/components/Tabs/Tabs.tsx
+++ b/packages/ui/src/components/Tabs/Tabs.tsx
@@ -85,7 +85,7 @@ const isTabActive = (
  */
 export const Tabs = (props: TabsProps) => {
   const { classNames, cleanedProps } = useStyles('Tabs', props);
-  const { children, ...rest } = cleanedProps;
+  const { className, children, ...rest } = cleanedProps;
   const tabsRef = useRef<HTMLDivElement>(null);
   const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());
   const [hoveredKey, setHoveredKey] = useState<string | null>(null);
@@ -149,7 +149,7 @@ export const Tabs = (props: TabsProps) => {
     <TabsContext.Provider value={contextValue}>
       <RouterProvider navigate={navigate} useHref={useHref}>
         <AriaTabs
-          className={clsx(classNames.tabs, styles[classNames.tabs])}
+          className={clsx(classNames.tabs, styles[classNames.tabs], className)}
           keyboardActivation="manual"
           selectedKey={computedSelectedKey}
           ref={tabsRef}
@@ -169,7 +169,7 @@ export const Tabs = (props: TabsProps) => {
  */
 export const TabList = (props: TabListProps) => {
   const { classNames, cleanedProps } = useStyles('Tabs', props);
-  const { children, ...rest } = cleanedProps;
+  const { className, children, ...rest } = cleanedProps;
   const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =
     useTabsContext();
 
@@ -193,6 +193,7 @@ export const TabList = (props: TabListProps) => {
       className={clsx(
         classNames.tabListWrapper,
         styles[classNames.tabListWrapper],
+        className,
       )}
     >
       <AriaTabList
@@ -220,6 +221,7 @@ export const TabList = (props: TabListProps) => {
 export const Tab = (props: TabProps) => {
   const { classNames, cleanedProps } = useStyles('Tabs', props);
   const {
+    className,
     href,
     children,
     id,
@@ -231,7 +233,7 @@ export const Tab = (props: TabProps) => {
   return (
     <AriaTab
       id={id}
-      className={clsx(classNames.tab, styles[classNames.tab])}
+      className={clsx(classNames.tab, styles[classNames.tab], className)}
       ref={el => setTabRef(id as string, el as HTMLDivElement)}
       href={href}
       {...rest}
@@ -248,11 +250,11 @@ export const Tab = (props: TabProps) => {
  */
 export const TabPanel = (props: TabPanelProps) => {
   const { classNames, cleanedProps } = useStyles('Tabs', props);
-  const { children, ...rest } = cleanedProps;
+  const { className, children, ...rest } = cleanedProps;
 
   return (
     <AriaTabPanel
-      className={clsx(classNames.panel, styles[classNames.panel])}
+      className={clsx(classNames.panel, styles[classNames.panel], className)}
       {...rest}
     >
       {children}
diff --git a/packages/ui/src/components/TextField/types.ts b/packages/ui/src/components/TextField/types.ts
index b971ef8d26..456d6964a0 100644
--- a/packages/ui/src/components/TextField/types.ts
+++ b/packages/ui/src/components/TextField/types.ts
@@ -22,7 +22,7 @@ import type { FieldLabelProps } from '../FieldLabel/types';
 /** @public */
 export interface TextFieldProps
   extends AriaTextFieldProps,
-    Omit<FieldLabelProps, 'htmlFor' | 'id'> {
+    Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
   /**
    * The HTML input type for the text field
    *