diff --git a/packages/react/src/components/Story.tsx b/packages/react/src/components/Story.tsx
index a86574b..135f97e 100644
--- a/packages/react/src/components/Story.tsx
+++ b/packages/react/src/components/Story.tsx
@@ -6,23 +6,25 @@ const layoutClasses = {
   centered: "flex items-center justify-center",
 };
 
-export function Story({
-  layout = "default",
-  children,
-  className,
-}: {
-  layout?: keyof typeof layoutClasses;
-  children: React.ReactNode;
-  className?: string;
-}) {
+const Story = React.forwardRef<
+  HTMLDivElement,
+  {
+    layout?: keyof typeof layoutClasses;
+    children: React.ReactNode;
+    className?: string;
+  }
+>(({ layout = "default", children, className }, ref) => {
   return (
     <div
       className={twMerge(
         `bg-white dark:bg-black border border-neutral-300 dark:border-neutral-700 rounded-lg w-full p-4 min-h-48 h-auto mt-8 ${layoutClasses[layout]}`,
         className
       )}
+      ref={ref}
     >
       {children}
     </div>
   );
-}
+});
+
+export { Story };