diff --git a/packages/components/src/components/frame/frame.stories.tsx b/packages/components/src/components/frame/frame.stories.tsx
index dedb84a9..a6c0121b 100644
--- a/packages/components/src/components/frame/frame.stories.tsx
+++ b/packages/components/src/components/frame/frame.stories.tsx
@@ -21,12 +21,12 @@ export const Basic: Story = {
   },
 };
 
-export const WithCaption: Story = {
+export const WithDescription: Story = {
   args: {
     style: { width: "400px", height: "200px" },
     className: "w-full",
-    description: "This is a frame caption",
-    children: <div className="p-4">Frame with caption</div>,
+    description: "This is a frame description",
+    children: <div className="p-4">Frame with description</div>,
   },
 };
 
diff --git a/packages/components/src/components/frame/frame.tsx b/packages/components/src/components/frame/frame.tsx
index 1d212838..e8ea3e41 100644
--- a/packages/components/src/components/frame/frame.tsx
+++ b/packages/components/src/components/frame/frame.tsx
@@ -11,12 +11,14 @@ type FrameProps = {
   children: ReactNode;
   title?: string;
   description?: string;
+  renderDescription?: (description: string) => ReactNode;
 };
 
 const Frame = ({
   as: Component = "div",
   title,
   description,
+  renderDescription = (text) => <p>{text}</p>,
   style,
   className,
   children,
@@ -68,7 +70,7 @@ const Frame = ({
             contentEditable={false}
             data-component-part="frame-description"
           >
-            <p>{description}</p>
+            {renderDescription(description)}
           </div>
         )}
         <div