> ## Documentation Index
> Fetch the complete documentation index at: https://www.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Flow UI

> The ways to give users a Fireblocks Flow interface: Dynamic's hosted pages, prebuilt React components, or screens you build on an SDK or the API.

Every Flow connection and payment needs an interface on the user's side, where they connect a wallet or choose how to pay. You can send users to a page Dynamic hosts, drop prebuilt React components into your own app, or build every screen yourself.

## The options

| Option | What you build | Where the user is | Covers |
| - | - | - | - |
| [Hosted connect page](https://www.dynamic.xyz/docs/connections/overview.md) | A link to the page and a redirect handler | On a Dynamic page | Wallet connection |
| [Hosted payment page](https://www.dynamic.xyz/docs/flow/payment-links.md) | A payment link | On a Dynamic page | Payments |
| [Prebuilt React components](#prebuilt-react-components) | A React web app that renders the components | In your app | Wallet connection and payments |
| [Your own screens](#your-own-screens) | Every screen, on an SDK or the API | In your app | Wallet connection and payments |

The hosted pages need the least work, and the user leaves your app to use them. The prebuilt components keep the user in your app with little UI work, and you can restyle them to match it. Your own screens give you full control over every step.

## Prebuilt React components

The `@dynamic-labs-sdk/react-ui` package provides ready-made widgets for React web apps that use the JavaScript SDK:

* **Connect wallet widget.** The user chooses a wallet from a searchable list and connects it, including chain choice, QR pairing for mobile wallets, and error recovery. Your app receives the connected wallet and decides whether to verify it.
* **Flow payment widget.** Given the ID of a flow your server created, the widget runs the whole payment: the payer chooses to pay from a wallet, through an exchange, or to a deposit address, and the widget shows the progress and the outcome. Single-method versions are available for pages that offer only one way to pay.

The widgets read the flow's state, so a payer who reloads the page returns to where they were. They report the outcome to your page, while your server still decides fulfillment from [webhooks](https://www.dynamic.xyz/docs/flow/webhooks.md). You can change their text and styles, and they ship with a light theme only.

The components run on the web only, not in React Native. For the details, see [React UI components](https://www.dynamic.xyz/docs/javascript/building-ui/react-ui/overview.md), the [connect wallet widget](https://www.dynamic.xyz/docs/javascript/building-ui/react-ui/connect-wallet-widget.md), and the [Flow payment widget](https://www.dynamic.xyz/docs/javascript/building-ui/react-ui/flow-widget.md).

## Your own screens

When you need screens the components do not provide, such as a cancel control or amount entry in `deposit` mode, build the interface on an SDK or the API. The SDK gives you the same steps the widgets use: attach a source, get a quote, send the payment, and read the flow until it finishes.

> [card] [JavaScript SDK](https://www.dynamic.xyz/docs/javascript/reference/flow-ui-guide.md)
>
> Build a custom payment UI for the web or React Native.

> [card] [Flutter SDK](https://www.dynamic.xyz/docs/flow/flutter.md)
>
> Complete a Flow payment from a Flutter app.

> [card] [API guide](https://www.dynamic.xyz/docs/flow/api.md)
>
> The HTTP requests behind each step.

> [card] [Payment lifecycle and states](https://www.dynamic.xyz/docs/flow/lifecycle-walkthrough.md)
>
> What each state means and which screen to show.


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