diff --git a/stories/basics/VList.stories.tsx b/stories/basics/VList.stories.tsx
index 60053a9e5..3961aecbd 100644
--- a/stories/basics/VList.stories.tsx
+++ b/stories/basics/VList.stories.tsx
@@ -160,6 +160,48 @@ export const Sticky: StoryObj = {
   },
 };
 
+export const Responsive: StoryObj = {
+  render: () => {
+    const itemClass = "item";
+    return (
+      <>
+        <VList style={{ height: "100vh" }}>
+          {Array.from({ length: 1000 }).map((_, i) => {
+            return (
+              <div
+                key={i}
+                className={itemClass}
+                style={{
+                  borderBottom: "solid 1px #ccc",
+                  background: "#fff",
+                }}
+              >
+                {i}
+              </div>
+            );
+          })}
+        </VList>
+        <style>{`
+          .${itemClass} {
+            @media (max-width: 1024px) {
+              height: 40px;
+            }
+            @media (max-width: 900px) {
+              height: 80px;
+            }
+            @media (max-width: 700px) {
+              height: 160px;
+            }
+            @media (max-width: 400px) {
+              height: 320px;
+            }
+          }
+        `}</style>
+      </>
+    );
+  },
+};
+
 export const ScrollTo: StoryObj = {
   render: () => {
     const LENGTH = 1000;