Skip to main content
The playground runs the real @stakekit/widget 0.0.290 against live Yield.xyz data. Pick a design preset, choose the layout, sections and options, and copy the React code into your app. Every control maps to a widget prop, so the code you copy produces the widget you see. Each prop is described in the configuration reference.

​
What you can change

The preview has three widths. Desktop shows Widget Pro as a full dashboard; tablet and mobile show how the widget adapts to narrower screens.

​
Sections and your project

RWA, DeFi and Stake list the yields enabled for your project’s API key, so the sections your users see depend on your project, not on a prop. Switching a section off in the playground hides it in the preview and adds a note to the copied code. To remove a section for your users, block those yields for your project with yield blocking. The Borrow tab appears when borrowEnabled is set and Borrow is enabled for your project. See the Borrow widget guide for the requirements and, if your app manages the wallet, the two adapter methods Borrow needs.

​
Use the code

1

Install the widget

Add @stakekit/widget to your app. See Install.
2

Paste the React code

Copy the React code from the playground and replace YIELD_API_KEY with your project key. See API keys.
3

Load the preset font

If the preset or your settings use a font such as Inter or Space Mono, load that font in your app, for example from Google Fonts. The theme names the font; it does not load it.
4

Not on React?

Pass the same props to renderSKWidget. See Browser renderer.
The playground uses a public demo API key, so it shows the demo project’s yields. Your widget shows the yields enabled for your own project. An API key used in a browser is visible to anyone who loads the page; read the security notice before you go live.

​
Next steps

Embed the yield widget

Install, wallets, tracking, theming and every prop.

Widget Pro

The dashboard layout, with sections, Manage and Activity.

Borrow widget

Turn on Borrow and connect your own wallet.

Widgets & UI

Compare the widget, Widget Pro and the Perps apps.