Use UI widgets

Drop in ready-made React components when an AppKit flow needs to ship fast. This page shows the three component shapes and when to pick each one.

Before you begin

Install the React packages, mount AppKitProvider, and import the default stylesheet. See Install AppKit in a React app.

Pick a widget level

AppKit UI widgets come in three levels:

Default components such as <TonConnectButton /> and <SendTonButton /> cover the full user flow. Render-prop components keep the same behavior while letting the app render custom markup. Hooks and core actions are the lowest level and fit flows that need fully custom product logic.

Start with a ready-made component

<TonConnectButton /> is the smallest example. It opens the TON Connect modal, restores the session, and renders the selected wallet address.

import { TonConnectButton } from '@ton/appkit-react';

export function Header() {
  return <TonConnectButton />;
}

Move to a custom send flow

<SendTonButton /> keeps the AppKit transaction flow while exposing render props for custom UI.

import { SendTonButton } from '@ton/appkit-react';

<SendTonButton recipientAddress="EQ..." amount="0.05" comment="Test">
  {({ isLoading, onSubmit, disabled, text }) => (
    <button onClick={onSubmit} disabled={disabled}>
      {isLoading ? 'Sending…' : text}
    </button>
  )}
</SendTonButton>;

Tips

Pick the widget level by control needs. Use a ready-made component for the smallest integration, render props for custom layout, and hooks or core actions when the flow needs more control than one widget can provide.

Code example

See a working example that integrates <SwapWidget /> and <StakingWidget /> — try it live.

What to do next

• For a component-by-component walkthrough (Send, NFT, Swap, Staking, transaction progress), see Use UI widgets.
• For task-level recipes, switch to How to.