diff --git a/packages/vibrant-core/src/lib/props/sizing/sizing.ts b/packages/vibrant-core/src/lib/props/sizing/sizing.ts
index 908bd148c..32efba289 100644
--- a/packages/vibrant-core/src/lib/props/sizing/sizing.ts
+++ b/packages/vibrant-core/src/lib/props/sizing/sizing.ts
@@ -30,7 +30,7 @@ const boxSizingProp = createSystemProp({
 
 const aspectRatioProp = createSystemProp({
   property: 'aspectRatio',
-  transform: (value: number) => ({
+  transform: (value: number | string) => ({
     aspectRatio: value ? value.toString() : value,
   }),
 });
diff --git a/packages/vibrant-core/src/lib/props/sizing/type.ts b/packages/vibrant-core/src/lib/props/sizing/type.ts
index dcdb7f0d2..1a1c59687 100644
--- a/packages/vibrant-core/src/lib/props/sizing/type.ts
+++ b/packages/vibrant-core/src/lib/props/sizing/type.ts
@@ -8,5 +8,5 @@ export type SizingSystemProps = {
   minHeight?: ResponsiveValue<number | string | 'auto' | 'fit-content' | 'max-content' | 'min-content'>;
   maxHeight?: ResponsiveValue<number | string | 'auto' | 'fit-content' | 'max-content' | 'min-content' | 'none'>;
   boxSizing?: 'border-box' | 'content-box';
-  aspectRatio?: ResponsiveValue<number>;
+  aspectRatio?: ResponsiveValue<number | string>;
 };