diff --git a/src/internal/base-component/component-metadata.ts b/src/internal/base-component/component-metadata.ts
index 70c69c6..fd70436 100644
--- a/src/internal/base-component/component-metadata.ts
+++ b/src/internal/base-component/component-metadata.ts
@@ -9,6 +9,7 @@ export const COMPONENT_METADATA_KEY = '__awsuiMetadata__';
 interface AwsUiMetadata {
   name: string;
   version: string;
+  theme?: string;
   analytics?: AnalyticsMetadata;
 }
 
@@ -16,9 +17,14 @@ interface HTMLMetadataElement extends HTMLElement {
   [COMPONENT_METADATA_KEY]: AwsUiMetadata;
 }
 
+export interface PackageMetadata {
+  packageVersion: string;
+  packageTheme?: string;
+}
+
 export function useComponentMetadata<T = any>(
   componentName: string,
-  packageVersion: string,
+  packageVersionOrMetadata: string | PackageMetadata, // after updating all packages using useComponentMetadata, we support only PackageMetadata format
   analyticsMetadata?: AnalyticsMetadata
 ) {
   const elementRef = useRef<T>(null);
@@ -26,11 +32,26 @@ export function useComponentMetadata<T = any>(
   useEffect(() => {
     if (elementRef.current) {
       const node = elementRef.current as unknown as HTMLMetadataElement;
+
+      // Handle both string and PackageMetadata formats
+      const packageVersion =
+        typeof packageVersionOrMetadata === 'string'
+          ? packageVersionOrMetadata
+          : packageVersionOrMetadata.packageVersion;
+
+      const packageTheme =
+        typeof packageVersionOrMetadata === 'string' ? undefined : packageVersionOrMetadata.packageTheme;
+
       const metadata: AwsUiMetadata = {
         name: componentName,
         version: packageVersion,
       };
 
+      // Add theme to metadata if provided
+      if (packageTheme !== undefined) {
+        metadata.theme = packageTheme;
+      }
+
       // Only add analytics property to metadata if analytics property is non-empty
       if (analyticsMetadata && Object.keys(analyticsMetadata).length > 0) {
         metadata.analytics = analyticsMetadata;