> ## 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 playground

> Restyle the live Yield.xyz widget with design presets, choose its sections and options, and copy the React code.

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](/guides/widgets-dashboard/yield-widget#configuration-reference).

**Widget playground**
@stakekit/widget 0.0.290

Reset
Copy React code

Design presets

[Live widget preview](about:blank)

React
Props (editable)

Copy

## What you can change

| Control | What it sets | Read more |
| - | - | - |
| Design presets | A full `theme` object: surfaces, text, borders, buttons, corner radii, font and button weight | [Theming](/guides/widgets-dashboard/yield-widget#theming) |
| Layout | `dashboardVariant`, which switches the compact widget to the Widget Pro dashboard | [Widget Pro](/guides/widgets-dashboard/yield-dashboard) |
| Sections | `borrowEnabled` adds the Borrow tab. `dashboardYieldCategoryOrder` sets which Earn section opens first | [Borrow widget](/guides/borrow/widget) |
| Style | Primary color, button radius, widget radius and font, on top of the preset | [Theme tokens](/guides/widgets-dashboard/yield-widget#theming) |
| Options | `hideNetworkLogo`, `hideChainSelector` or `hideAccountAndChainSelector`, `validatorsConfig`, `institutionalWallets` and `language` | [Configuration reference](/guides/widgets-dashboard/yield-widget#configuration-reference) |

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](/documentation/advanced-setup/dashboard/yield-blocking).

The Borrow tab appears when `borrowEnabled` is set and Borrow is enabled for your project. See the [Borrow widget](/guides/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](/guides/widgets-dashboard/yield-widget#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](/documentation/get-started/onboarding#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](/guides/widgets-dashboard/yield-widget#browser-renderer).

> [!NOTE]
>
> 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](/legal/security-notice) before you go live.

## Next steps

> **[Embed the yield widget](/guides/widgets-dashboard/yield-widget)**
>
> Install, wallets, tracking, theming and every prop.

> **[Widget Pro](/guides/widgets-dashboard/yield-dashboard)**
>
> The dashboard layout, with sections, Manage and Activity.

> **[Borrow widget](/guides/borrow/widget)**
>
> Turn on Borrow and connect your own wallet.

> **[Widgets & UI](/documentation/advanced-setup/widgets)**
>
> Compare the widget, Widget Pro and the Perps apps.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.