diff --git a/apps/webapp/app/routes/storybook.resizable/route.tsx b/apps/webapp/app/routes/storybook.resizable/route.tsx
new file mode 100644
index 000000000..f3f430f89
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.resizable/route.tsx
@@ -0,0 +1,23 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "~/components/primitives/Resizable";
+
+export default function Story() {
+  return (
+    <div className="h-full">
+      <ResizablePanelGroup>
+        <ResizablePanel id={"1-left"} className="bg-sky-500" />
+        <ResizableHandle id="1-split" />
+        <ResizablePanel
+          id={"1-right"}
+          // min="100px"
+          // max="250px"
+          default="100px"
+          className="bg-teal-500"
+        />
+      </ResizablePanelGroup>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook/route.tsx b/apps/webapp/app/routes/storybook/route.tsx
index ad8e61b0b..b6ac587ff 100644
--- a/apps/webapp/app/routes/storybook/route.tsx
+++ b/apps/webapp/app/routes/storybook/route.tsx
@@ -72,6 +72,10 @@ const stories: Story[] = [
     name: "Radio group",
     slug: "radio-group",
   },
+  {
+    name: "Resizable",
+    slug: "resizable",
+  },
   {
     name: "Segemented control",
     slug: "segmented-control",