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

# Building UI

> Guides for building complete, real-world UI flows with the headless JavaScript SDK — you own the interface, the SDK does the work.

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

## 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](/docs/javascript/reference/client/create-dynamic-client) and [Initializing the Dynamic client](/docs/javascript/reference/client/initialize-dynamic-client).

## The pages

The guides follow the journey you actually build, from first sign-in through moving money.

### Authentication

Getting a user signed in — the entry point of every app.

* [Email & SMS OTP sign-in](/docs/javascript/building-ui/email-sms-otp-sign-in)
* [Social sign-in & OAuth redirect handling](/docs/javascript/building-ui/social-oauth-redirect-handling)
* [Passkey sign-in & registration](/docs/javascript/building-ui/passkey-sign-in-registration)

### Right after login

Bootstrapping the session once the user is authenticated.

* [Post-login user setup](/docs/javascript/building-ui/post-auth-user-setup)
* [Account conflict resolution](/docs/javascript/building-ui/account-conflict-resolution)
* [Account merging](/docs/javascript/building-ui/account-merging)

### Wallets

Connecting, displaying, and transacting with wallets — the core of a web3 app.

* [Connecting external wallets](/docs/javascript/building-ui/connecting-external-wallets)
* [Connected wallets management](/docs/javascript/building-ui/connected-wallets-management)
* [Token balances & display](/docs/javascript/building-ui/token-balances-display)
* [Transaction confirmation & simulation](/docs/javascript/building-ui/transaction-confirmation)
* [Network switching & validation](/docs/javascript/building-ui/network-switching)

### Embedded wallet lifecycle

Securing, backing up, and maintaining Dynamic embedded wallets.

* [Embedded wallet password & security](/docs/javascript/building-ui/embedded-wallet-security)
* [Wallet backup & recovery](/docs/javascript/building-ui/wallet-backup-recovery)
* [Embedded wallet delegated access](/docs/javascript/building-ui/embedded-wallet-delegated-access)
* [Upgrading legacy embedded wallets to Dynamic WaaS](/docs/javascript/building-ui/legacy-wallet-upgrade)

### Advanced auth & identity

Higher-assurance authentication and account management.

* [MFA enrollment & management](/docs/javascript/building-ui/mfa-enrollment-management)
* [Step-up authentication](/docs/javascript/building-ui/step-up-authentication)
* [Device registration](/docs/javascript/building-ui/device-registration)
* [User profile & settings](/docs/javascript/building-ui/user-profile-settings)
* [Handling blocked wallets](/docs/javascript/building-ui/blocked-wallet-screening)

### Money movement

Funding wallets and moving value.

* [Funding flows](/docs/javascript/building-ui/funding-flows)
* [Building a swap UI](/docs/javascript/building-ui/swap-ui)
* [Building for Flow (deposits & payments)](/docs/javascript/building-ui/building-for-flow)

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

## Where to go next

<CardGroup cols={2}>
  <Card title="React Hooks" icon="react" href="/docs/javascript/reference/react-hooks">
    How the React hooks wrap the client functions used throughout these guides.
  </Card>

  <Card title="React Hooks Catalog" icon="list" href="/docs/javascript/reference/react-hooks-catalog">
    Browse every available hook by category.
  </Card>

  <Card title="Creating a Dynamic client" icon="gear" href="/docs/javascript/reference/client/create-dynamic-client">
    Set up and initialize the client every guide assumes.
  </Card>

  <Card title="Dashboard configuration" icon="sliders" href="/docs/javascript/reference/quickstart">
    Enable the auth methods, wallets, and features these flows use.
  </Card>
</CardGroup>