> ## 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.
# Widget Pro
> Turn on the dashboard layout of @stakekit/widget: Earn by category, Borrow, Manage and Activity in one embedded app.
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
;
};
Widget Pro is the dashboard layout of the [yield widget](/guides/widgets-dashboard/yield-widget). It is the same `@stakekit/widget` package with one prop, `dashboardVariant`, turned on. Instead of the compact single-flow widget, users get a full app: yields grouped by category, a details pane, positions and activity, and Borrow when you enable it.
## Widget or Widget Pro
| | Yield widget | Widget Pro |
| - | - | - |
| Package | `@stakekit/widget` | `@stakekit/widget` with `dashboardVariant` |
| Layout | Compact, one flow at a time | Full dashboard with a tab bar and a details pane |
| Yields | One list | Grouped by category: Stake, DeFi and RWA |
| Positions and activity | Inside the flow | Manage and Activity tabs |
| Borrow | No | Yes, with `borrowEnabled` |
| Best for | A panel inside an existing page | A standalone Earn and Borrow page in your app |
## Turn it on
Install the widget as described in [Embed the yield widget](/guides/widgets-dashboard/yield-widget#install), then add `dashboardVariant`:
```tsx theme={null}
import "@stakekit/widget/style.css";
import { lightTheme, SKApp } from "@stakekit/widget";
export const WidgetPro = () => (
);
```
The demo uses this configuration. With the browser renderer, pass the same props to `renderSKWidget`.
## What the dashboard adds
* **Tab bar.** The Earn category tabs, then Borrow when it is enabled, then Manage and Activity.
* **Yields by category.** `dashboardVariant` sets `yieldGrouping` to `"category"`. Set `dashboardYieldCategoryOrder` to change the order, for example `["stake", "defi", "rwa"]`; categories you leave out follow in the default order. The `DashboardYieldCategory` export lists the valid values.
* **Details pane.** Selecting a yield, position or activity row opens its details beside the list. On narrow screens the panes collapse into one view.
* **Header.** Shows an account and chain selector. Hide it with `hideAccountAndChainSelector` when your app already shows the connected wallet.
* **Borrow.** Add `borrowEnabled` to show the Borrow tab and Borrow positions. See the [Borrow widget](/guides/borrow/widget) guide for the requirements.
## Common props
| Prop | Use |
| - | - |
| `dashboardVariant` | Turns on the dashboard layout. |
| `borrowEnabled` | Adds Borrow. Read at mount. |
| `institutionalWallets` | Offers institutional wallets instead of the regular wallet list. Read at mount. |
| `validatorsConfig` | Limits validators per network, for example `{ "*": { preferredOnly: true } }` to show only preferred validators everywhere. |
| `dashboardYieldCategoryOrder` | Sets the order of the category tabs. |
| `theme` | Your brand tokens. See [Theming](/guides/widgets-dashboard/yield-widget#theming). |
| `tracking` | Forwards events and page views to your analytics. |
`validatorsConfig` takes a network id, or `"*"` for every network without its own entry:
```ts theme={null}
validatorsConfig?: {
[network: string]: {
allowed?: string[]; // show only these validator addresses
blocked?: string[]; // hide these, even when allowed
preferred?: string[]; // mark these as preferred
mergePreferredWithDefault?: boolean; // also keep the API's preferred validators (default true)
preferredOnly?: boolean; // show only preferred validators (default false)
};
};
```
Every other prop works as it does in the classic layout; see the [configuration reference](/guides/widgets-dashboard/yield-widget#configuration-reference).
## Theme and analytics
To change a few tokens of a built-in theme, merge your overrides onto it:
```ts theme={null}
import { darkTheme, lightTheme } from "@stakekit/widget";
import merge from "lodash.merge";
export const brandLightTheme = merge(structuredClone(lightTheme), {
space: { buttonMinHeight: "40px" },
borderRadius: { baseContract: { primaryButton: "8px" } },
color: {
backgroundMuted: "#f5f5f6",
stakeSectionBackground: "#f5f5f6",
primaryButtonBackground: "#4A60FF",
primaryButtonColor: "#FFFFFF",
},
});
export const brandDarkTheme = merge(structuredClone(darkTheme), {
color: { primaryButtonBackground: "#4A60FF" },
});
```
Pass `brandLightTheme` or `brandDarkTheme` to `theme` based on your app's color mode.
To send the widget's events to your analytics, pass a `tracking` object:
```ts theme={null}
import type { SKAppProps } from "@stakekit/widget";
import mixpanel from "mixpanel-browser";
export const tracking: SKAppProps["tracking"] = {
trackEvent: (event, properties) => mixpanel.track(event, properties),
trackPageView: (page, properties) => mixpanel.track_pageview({ page, ...properties }),
};
```
## Help links
`HelpModal` opens the widget's own help dialogs from any element you choose. Render it as a child of `SKApp`, so it shares the widget's runtime and tracking:
```tsx theme={null}
import { HelpModal, SKApp } from "@stakekit/widget";
What is Yield.xyz?} />
Need help or have questions?} />
;
```
## Verify
Open your page and check that:
* The category tabs show your project's yields, matching `GET /v1/yields` for the same API key.
* Connecting a wallet fills Manage with its positions.
* Activity lists past actions.
* With `borrowEnabled`, the Borrow tab lists markets on a Borrow network.
## Next steps
Install, wallets, theming and every prop.
Requirements and the wallet adapter for Borrow.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.