diff --git a/components/popup.mdx b/components/popup.mdx
new file mode 100644
index 000000000..9438aabd5
--- /dev/null
+++ b/components/popup.mdx
@@ -0,0 +1,61 @@
+---
+title: "Popup"
+description: "Display contextual content in a floating overlay triggered by a click."
+keywords: ["popup", "popover", "overlay", "click", "floating content"]
+---
+
+Use popups to display additional content in a floating overlay when users click on a trigger element. Unlike [tooltips](/components/tooltips) that appear on hover, popups require a click to open and can contain interactive content.
+
+
+ Click to see more
+
+ This content appears in a popup overlay.
+
+ You can include **formatted text**, links, and other components.
+
+
+
+```mdx Popup example
+
+ Click to see more
+
+ This content appears in a popup overlay.
+
+ You can include **formatted text**, links, and other components.
+
+
+```
+
+## Structure
+
+A popup consists of three components that work together:
+
+- `` - The wrapper component that manages state
+- `` - The clickable element that opens the popup
+- `` - The content displayed in the floating overlay
+
+All three components are required and must be nested in this order.
+
+## Example with styled trigger
+
+You can style the trigger text to make it more prominent:
+
+
+
+ Learn more about our pricing
+
+
+ Our pricing is based on usage. Contact sales for enterprise pricing.
+
+
+
+```mdx Styled trigger example
+
+
+ Learn more about our pricing
+
+
+ Our pricing is based on usage. Contact sales for enterprise pricing.
+
+
+```
diff --git a/docs.json b/docs.json
index af6197bee..b11521796 100644
--- a/docs.json
+++ b/docs.json
@@ -107,6 +107,7 @@
"components/icons",
"components/mermaid-diagrams",
"components/panel",
+ "components/popup",
"components/prompt",
"components/responses",
"components/steps",