> ## Documentation Index > Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt > Use this file to discover all available pages before exploring further. # Building UI Overview > Guides for building complete, real-world UI flows with the headless JavaScript SDK, plus prebuilt React components for wallet connection and Flow payments. ## What this section is The JavaScript SDK is headless: it gives you the logic for auth, wallets, and money movement, and you build the interface. **Building UI** is a set of end-to-end guides that show how to turn that logic into real flows — signing a user in, connecting a wallet, confirming a transaction, running a swap — with copy-and-adapt examples for both vanilla TypeScript and React. Each guide is task-focused: it states its prerequisites, walks the flow step by step with TypeScript and React tabs, and ends with an error table and related pages. In a React web app, you can skip building some screens. [React UI components](https://docs.dynamic.xyz/docs/javascript/building-ui/react-ui/overview.md) (`@dynamic-labs-sdk/react-ui`) provide prebuilt widgets for connecting a wallet and for running a Flow payment, and you can change their text and styles. ## How the SDK maps to UI Every guide reuses the same mental model, so once you've built one flow the rest feel familiar: * **Each action is a plain async function.** Call it from vanilla TypeScript, or use its matching React hook (`fn` ↔ `useFn`). Reads map to query hooks; actions map to mutation hooks. * **Auth and wallet state come from the SDK.** Read the signed-in user and their wallets from SDK state (and, in React, the corresponding hooks) rather than tracking it yourself. * **Every guide assumes a created, initialized client.** Set the client up once at startup — see [Creating a Dynamic client](https://docs.dynamic.xyz/docs/javascript/reference/client/create-dynamic-client.md) and [Initializing the Dynamic client](https://docs.dynamic.xyz/docs/javascript/reference/client/initialize-dynamic-client.md). ## The pages The guides follow the journey you actually build, from first sign-in through moving money. ### React UI Prebuilt React components for web apps. * [React UI components](https://docs.dynamic.xyz/docs/javascript/building-ui/react-ui/overview.md) * [Connect wallet widget](https://docs.dynamic.xyz/docs/javascript/building-ui/react-ui/connect-wallet-widget.md) * [Flow payment widget](https://docs.dynamic.xyz/docs/javascript/building-ui/react-ui/flow-widget.md) * [Text keys](https://docs.dynamic.xyz/docs/javascript/building-ui/react-ui/text-reference.md) ### Authentication Getting a user signed in — the entry point of every app. * [Email & SMS OTP sign-in](https://docs.dynamic.xyz/docs/javascript/building-ui/email-sms-otp-sign-in.md) * [Social sign-in & OAuth redirect handling](https://docs.dynamic.xyz/docs/javascript/building-ui/social-oauth-redirect-handling.md) * [Passkey sign-in & registration](https://docs.dynamic.xyz/docs/javascript/building-ui/passkey-sign-in-registration.md) ### Right after login Bootstrapping the session once the user is authenticated. * [Post-login user setup](https://docs.dynamic.xyz/docs/javascript/building-ui/post-auth-user-setup.md) * [Account conflict resolution](https://docs.dynamic.xyz/docs/javascript/building-ui/account-conflict-resolution.md) * [Account merging](https://docs.dynamic.xyz/docs/javascript/building-ui/account-merging.md) ### Wallets Connecting, displaying, and transacting with wallets — the core of a web3 app. * [Connecting external wallets](https://docs.dynamic.xyz/docs/javascript/building-ui/connecting-external-wallets.md) * [Connect wallet widget](https://docs.dynamic.xyz/docs/javascript/building-ui/react-ui/connect-wallet-widget.md) (prebuilt, React) * [Connected wallets management](https://docs.dynamic.xyz/docs/javascript/building-ui/connected-wallets-management.md) * [Token balances & display](https://docs.dynamic.xyz/docs/javascript/building-ui/token-balances-display.md) * [Transaction confirmation & simulation](https://docs.dynamic.xyz/docs/javascript/building-ui/transaction-confirmation.md) * [Network switching & validation](https://docs.dynamic.xyz/docs/javascript/building-ui/network-switching.md) ### Embedded wallet lifecycle Securing, backing up, and maintaining Dynamic embedded wallets. * [Embedded wallet password & security](https://docs.dynamic.xyz/docs/javascript/building-ui/embedded-wallet-security.md) * [Wallet backup & recovery](https://docs.dynamic.xyz/docs/javascript/building-ui/wallet-backup-recovery.md) * [Embedded wallet delegated access](https://docs.dynamic.xyz/docs/javascript/building-ui/embedded-wallet-delegated-access.md) * [Upgrading legacy embedded wallets to Dynamic WaaS](https://docs.dynamic.xyz/docs/javascript/building-ui/legacy-wallet-upgrade.md) ### Advanced auth & identity Higher-assurance authentication and account management. * [MFA enrollment & management](https://docs.dynamic.xyz/docs/javascript/building-ui/mfa-enrollment-management.md) * [Step-up authentication](https://docs.dynamic.xyz/docs/javascript/building-ui/step-up-authentication.md) * [Device registration](https://docs.dynamic.xyz/docs/javascript/building-ui/device-registration.md) * [User profile & settings](https://docs.dynamic.xyz/docs/javascript/building-ui/user-profile-settings.md) * [Handling blocked wallets](https://docs.dynamic.xyz/docs/javascript/building-ui/blocked-wallet-screening.md) ### Money movement Funding wallets and moving value. * [Funding flows](https://docs.dynamic.xyz/docs/javascript/building-ui/funding-flows.md) * [Building a swap UI](https://docs.dynamic.xyz/docs/javascript/building-ui/swap-ui.md) * [Build a custom Flow payment UI](https://docs.dynamic.xyz/docs/javascript/reference/flow-ui-guide.md) * [Flow payment widget](https://docs.dynamic.xyz/docs/javascript/building-ui/react-ui/flow-widget.md) (prebuilt, React) ## What to expect from the examples * **UI-agnostic.** Examples focus on the SDK logic and state, not styling — bring your own components and CSS. * **Both tabs, every page.** A TypeScript tab for any framework and a React tab using hooks. * **React UI pages are the exception.** They document prebuilt React components, so their examples are React only. ## Where to go next > [card] [React Hooks](https://docs.dynamic.xyz/docs/javascript/reference/react-hooks.md) > > How the React hooks wrap the client functions used throughout these guides. > [card] [React Hooks Catalog](https://docs.dynamic.xyz/docs/javascript/reference/react-hooks-catalog.md) > > Browse every available hook by category. > [card] [Creating a Dynamic client](https://docs.dynamic.xyz/docs/javascript/reference/client/create-dynamic-client.md) > > Set up and initialize the client every guide assumes. > [card] [Console configuration](https://docs.dynamic.xyz/docs/javascript/reference/quickstart.md) > > Enable the auth methods, wallets, and features these flows use. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.