# Use UI widgets in AppKit (https://docs-rbcpr9qys-ton-core-docs.vercel.app/llms/applications/appkit/get-started/using-ui-widgets/content.md)



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 [#before-you-begin]

Install the React packages, mount `AppKitProvider`, and import the default stylesheet. See [Install AppKit in a React app](https://docs-rbcpr9qys-ton-core-docs.vercel.app/llms/applications/appkit/get-started/installation/react-app/content.md).

## Pick a widget level [#pick-a-widget-level]

AppKit UI widgets come in three levels:

| Level                  | Use when                                                                             |
| ---------------------- | ------------------------------------------------------------------------------------ |
| Default component      | The app needs a ready-made flow with the package stylesheet.                         |
| Render-prop component  | The app needs AppKit to own the state machine, but the layout must be custom.        |
| Hooks and core actions | The flow no longer matches one widget, or state must be shared across a larger page. |

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 [#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.

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

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

## Move to a custom send flow [#move-to-a-custom-send-flow]

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

```tsx
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 [#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 [#code-example]

See a [working example](https://github.com/ton-connect/kit/tree/main/apps/appkit-minter) that integrates `<SwapWidget />` and `<StakingWidget />` — [try it live](https://appkit-minter.vercel.app/).

## Next steps [#next-steps]

* For a component-by-component walkthrough (Send, NFT, Swap, Staking, transaction progress), see [Use UI widgets](https://docs-rbcpr9qys-ton-core-docs.vercel.app/llms/applications/appkit/howto/use-ui-widgets/content.md).
* For task-level recipes, switch to [How-to guides](https://docs-rbcpr9qys-ton-core-docs.vercel.app/llms/applications/appkit/howto/howto/content.md).