> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yield.xyz/llms.txt
> Use this file to discover all available pages before exploring further.
# Widgets & UI
> Ready-made interfaces on the Yield.xyz APIs: the yield widget, Widget Pro with Borrow, and the Perps widget and dashboard.
export const ExpandableDemo = ({src, title, desktopWidth = 1440, desktopHeight = 900, caption}) => {
const [open, setOpen] = useState(false);
const [scale, setScale] = useState(0.5);
const boxRef = useRef(null);
useEffect(() => {
const box = boxRef.current;
if (!box) return undefined;
const update = () => setScale(Math.min(1, box.clientWidth / desktopWidth));
update();
const observer = new ResizeObserver(update);
observer.observe(box);
return () => observer.disconnect();
}, [desktopWidth]);
const dialogRef = useRef(null);
const closeRef = useRef(null);
useEffect(() => {
const dialog = dialogRef.current;
if (!dialog) return undefined;
if (open && !dialog.open) {
dialog.showModal();
closeRef.current?.focus();
}
if (!open && dialog.open) dialog.close();
const previousOverflow = document.body.style.overflow;
if (open) document.body.style.overflow = "hidden";
return () => {
document.body.style.overflow = previousOverflow;
};
}, [open]);
return
{caption ? `${caption} ` : ""}
Open in a new tab
;
};
export const CompactDemo = ({src, title, width = 480, height = 720, caption}) => {
return
{caption ? `${caption} ` : ""}
Open the demo in a new tab
;
};
Yield.xyz provides ready-made interfaces built on the same APIs you integrate directly. Use one to launch Earn, Borrow or Perps without building the UI yourself, then keep it or replace it later. Each one calls the APIs with your project's API key, so it shows only what is enabled for your project. Users sign every transaction in their own wallet.
## Which one to use
| | What it is | Covers | How you add it |
| - | - | - | - |
| [Yield widget](/guides/widgets-dashboard/yield-widget) | A compact Earn interface | Yield discovery, wallet connection, enter, exit and manage | npm package `@stakekit/widget`, as a React component or a browser renderer |
| [Widget Pro](/guides/widgets-dashboard/yield-dashboard) | The dashboard layout of the same widget | Earn by category, Borrow, positions and activity | The same package with `dashboardVariant` |
| [Perps widget](/guides/widgets-dashboard/perps-widget) | A compact perpetual futures trading module | Long and short with leverage, orders, TP/SL, deposits and withdrawals | Hostable app from a public repository, embedded with an iframe |
| [Perps dashboard](/guides/widgets-dashboard/perps-dashboard) | A full desktop trading terminal | Markets, chart, order form, positions and orders | Hostable app from the same repository |
Borrow is a Widget Pro setting, not a separate widget. Turn it on with `borrowEnabled`. See the [Borrow widget](/guides/borrow/widget) guide.
## Try the demos
Wallet extensions connect more reliably in a full tab than inside an embedded demo, so open a demo in a new tab to try a full flow.
## Before you go live
* **API key exposure.** A widget runs in the browser, so its API key is readable by anyone who loads the page. Read the [security notice](/legal/security-notice) for the risks and how to limit them.
* **What users see.** The widgets show only the yields, markets and venues enabled for your project. Use [yield blocking](/documentation/advanced-setup/dashboard/yield-blocking) to remove specific yields.
* **Fees.** Fees configured for your project apply to actions taken through a widget, as they do through the API. See [Earn monetization](/documentation/earn/monetization).
* **Theming.** The yield widget and Widget Pro take a theme object with your colors, fonts and radii. To restyle the Perps apps, edit their source.
## Guides
Install, embed, wallets, theming and every prop.
The dashboard layout, with Borrow, Manage and Activity.
Run, deploy and embed the compact Perps module.
Run and deploy the full trading terminal.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.