Expandable Surface
WebA continuous trigger-to-panel surface your agent can add exactly where you want it in your product and fill with your own content.
One surface carries the interaction from closed to open:
- One continuous transition: the same surface expands from its trigger size into a panel and returns with matching close motion.
- Your content and dimensions: your product owns the labels, content, state, closed size, and optional expanded width and alignment.
- Complete interaction: includes close controls, Escape and backdrop dismissal, focus management, upward-drag closing, responsive bounds, and reduced-motion support.
Get started
How to use
-
Connect Orchard
Connect Orchard MCP to your coding agent once.
-
Ask your agent
"Add Expandable Surface to this button."
"Set this Expandable Surface to open at 380 pixels wide."
"Put this existing form inside Expandable Surface and keep its current behavior."
-
Done
Your agent keeps your content and behavior in the project while preserving the surface's close, focus, drag, responsive, and reduced-motion behavior.
Design pricing
Design is free on every plan and does not count toward metered usage.