diff --git a/utils/vara-ui/src/components/scroll-area/scroll-area.stories.ts b/utils/vara-ui/src/components/scroll-area/scroll-area.stories.ts
deleted file mode 100644
index 53db2f3813..0000000000
--- a/utils/vara-ui/src/components/scroll-area/scroll-area.stories.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { ScrollArea } from './scroll-area';
-
-type Type = typeof ScrollArea;
-type Story = StoryObj<Type>;
-
-const meta: Meta<Type> = {
-  title: 'ScrollArea',
-  component: ScrollArea,
-  args: {},
-};
-
-const Default: Story = {
-  args: {},
-};
-
-export default meta;
-export { Default };
diff --git a/utils/vara-ui/src/components/scroll-area/scroll-area.stories.tsx b/utils/vara-ui/src/components/scroll-area/scroll-area.stories.tsx
new file mode 100644
index 0000000000..f563b0d7c4
--- /dev/null
+++ b/utils/vara-ui/src/components/scroll-area/scroll-area.stories.tsx
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ScrollArea } from './scroll-area';
+
+type Type = typeof ScrollArea;
+type Story = StoryObj<Type>;
+
+const LONG_TEXT =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc ultricies ultricies. Nullam nec purus nec nunc ultricies ultricies. Nullam nec purus nec nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc ultricies ultricies. Nullam nec purus nec nunc ultricies ultricies. Nullam nec purus nec nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc ultricies ultricies. Nullam nec purus nec nunc ultricies ultricies. Nullam nec purus nec nunc. Loremipsumdolorsitamet.';
+
+const meta: Meta<Type> = {
+  title: 'ScrollArea',
+  component: () => <ScrollArea style={{ maxWidth: '512px', maxHeight: '128px' }}>{LONG_TEXT}</ScrollArea>,
+  args: {},
+};
+
+const Default: Story = {
+  args: {},
+};
+
+export default meta;
+export { Default };