diff --git a/packages/ui/src/components/VisuallyHidden/VisuallyHidden.tsx b/packages/ui/src/components/VisuallyHidden/VisuallyHidden.tsx
index cfc796ef9e..ea20d2f6cd 100644
--- a/packages/ui/src/components/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/ui/src/components/VisuallyHidden/VisuallyHidden.tsx
@@ -14,11 +14,9 @@
  * limitations under the License.
  */
 
-import { useStyles } from '../../hooks/useStyles';
+import { useDefinition } from '../../hooks/useDefinition';
 import { VisuallyHiddenDefinition } from './definition';
 import { VisuallyHiddenProps } from './types';
-import styles from './VisuallyHidden.module.css';
-import clsx from 'clsx';
 
 /**
  * Visually hides content while keeping it accessible to screen readers.
@@ -30,16 +28,11 @@ import clsx from 'clsx';
  * @public
  */
 export const VisuallyHidden = (props: VisuallyHiddenProps) => {
-  const { classNames, cleanedProps } = useStyles(
+  const { ownProps, restProps } = useDefinition(
     VisuallyHiddenDefinition,
     props,
   );
-  const { className, ...rest } = cleanedProps;
+  const { classes } = ownProps;
 
-  return (
-    <div
-      className={clsx(classNames.root, styles[classNames.root], className)}
-      {...rest}
-    />
-  );
+  return <div className={classes.root} {...restProps} />;
 };
diff --git a/packages/ui/src/components/VisuallyHidden/definition.ts b/packages/ui/src/components/VisuallyHidden/definition.ts
index 5be52f89ec..b7f5a3d767 100644
--- a/packages/ui/src/components/VisuallyHidden/definition.ts
+++ b/packages/ui/src/components/VisuallyHidden/definition.ts
@@ -14,14 +14,22 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { VisuallyHiddenOwnProps } from './types';
+import styles from './VisuallyHidden.module.css';
 
 /**
  * Component definition for VisuallyHidden
  * @public
  */
-export const VisuallyHiddenDefinition = {
-  classNames: {
-    root: 'bui-VisuallyHidden',
+export const VisuallyHiddenDefinition = defineComponent<VisuallyHiddenOwnProps>()(
+  {
+    styles,
+    classNames: {
+      root: 'bui-VisuallyHidden',
+    },
+    propDefs: {
+      className: {},
+    },
   },
-} as const satisfies ComponentDefinition;
+);
diff --git a/packages/ui/src/components/VisuallyHidden/index.ts b/packages/ui/src/components/VisuallyHidden/index.ts
index c3668df403..3f036c7c8c 100644
--- a/packages/ui/src/components/VisuallyHidden/index.ts
+++ b/packages/ui/src/components/VisuallyHidden/index.ts
@@ -15,5 +15,5 @@
  */
 
 export { VisuallyHidden } from './VisuallyHidden';
-export type { VisuallyHiddenProps } from './types';
+export type { VisuallyHiddenOwnProps, VisuallyHiddenProps } from './types';
 export { VisuallyHiddenDefinition } from './definition';
diff --git a/packages/ui/src/components/VisuallyHidden/types.ts b/packages/ui/src/components/VisuallyHidden/types.ts
index 88951d7ee2..d9c5700780 100644
--- a/packages/ui/src/components/VisuallyHidden/types.ts
+++ b/packages/ui/src/components/VisuallyHidden/types.ts
@@ -14,13 +14,18 @@
  * limitations under the License.
  */
 
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
+
+/** @public */
+export type VisuallyHiddenOwnProps = {
+  className?: string;
+};
 
 /**
  * Properties for {@link VisuallyHidden}
  *
  * @public
  */
-export interface VisuallyHiddenProps extends ComponentProps<'div'> {
-  children?: React.ReactNode;
-}
+export interface VisuallyHiddenProps
+  extends Omit<ComponentProps<'div'>, 'className'>,
+    VisuallyHiddenOwnProps {}