Widget Pro

Widget Pro is the dashboard layout of the 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.

	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, then add dashboardVariant:

import "@stakekit/widget/style.css";
import { lightTheme, SKApp } from "@stakekit/widget";

export const WidgetPro = () => (
  <SKApp
    apiKey={YIELD_API_KEY}
    theme={lightTheme}
    dashboardVariant
    borrowEnabled
    institutionalWallets
  />
);

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 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.
`tracking`	Forwards events and page views to your analytics.

validatorsConfig takes a network id, or "*" for every network without its own entry:

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.

Theme and analytics

To change a few tokens of a built-in theme, merge your overrides onto it:

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:

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:

import { HelpModal, SKApp } from "@stakekit/widget";

<SKApp apiKey={YIELD_API_KEY} dashboardVariant>
  <HelpModal modal={{ type: "whatIsStakeKit" }} customTrigger={<a>What is Yield.xyz?</a>} />
  <HelpModal modal={{ type: "getInTouch" }} customTrigger={<a>Need help or have questions?</a>} />
</SKApp>;

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.

Get started

AI & Agents

Earn

Trade

Borrow

Widgets & UI

Dashboards

Integrations & signing

Enterprise

Legacy & migration

Widget or Widget Pro

Turn it on

What the dashboard adds

Common props

Theme and analytics

Help links

Verify

Next steps

Embed the yield widget

Borrow widget

​Widget or Widget Pro

​Turn it on

​What the dashboard adds

​Common props

​Theme and analytics

​Help links

​Verify

​Next steps

Embed the yield widget

Borrow widget

Widget or Widget Pro

Turn it on

What the dashboard adds

Common props

Theme and analytics

Help links

Verify

Next steps