diff --git a/packages/ui/src/components/Flex/Flex.stories.tsx b/packages/ui/src/components/Flex/Flex.stories.tsx
index 7812e47770..b392b6e731 100644
--- a/packages/ui/src/components/Flex/Flex.stories.tsx
+++ b/packages/ui/src/components/Flex/Flex.stories.tsx
@@ -286,7 +286,7 @@ export const FlexItems = meta.story({
     },
     basis: {
       control: 'radio',
-      options: [undefined, '0%', '25%', '50%', '100%', 'auto'],
+      options: [undefined, '0%', '25%', '50%', '100%', 100, '250px', 'auto'],
     },
   },
   render: ({ component: Component, ...args }) => {
diff --git a/packages/ui/src/utils/utilityClassMap.ts b/packages/ui/src/utils/utilityClassMap.ts
index 376b9fb40c..2b8106eef2 100644
--- a/packages/ui/src/utils/utilityClassMap.ts
+++ b/packages/ui/src/utils/utilityClassMap.ts
@@ -212,6 +212,7 @@ export const utilityClassMap = {
     class: 'bui-basis',
     cssVar: '--basis',
     values: [],
+    transform: input => (typeof input === 'number' ? `${input}px` : input),
   },
 } as const satisfies Record<
   string,