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

# Get Started

> Installation and setup for the React SDK reference for Crossmint offramp

### Latest React SDK version - [![npm](https://img.shields.io/npm/v/@crossmint/client-sdk-react-ui)](https://www.npmjs.com/package/@crossmint/client-sdk-react-ui)

The Crossmint React SDK (`@crossmint/client-sdk-react-ui`) provides `CrossmintEmbeddedOfframp`, which renders the Crossmint offramp in an iframe, so your users can withdraw stablecoins from their wallet to their bank account. Create the session on your server with [Create Offramp Session](https://docs.crossmint.com/offramp/api-reference/create-offramp-session.md). To pay from a Crossmint wallet, use the wallet providers and hooks of the [Wallets React SDK](https://docs.crossmint.com/sdk-reference/wallets/react/get-started.md).

## Installation

<Snippet file="client-sdk-react-ui-installation-cmd.mdx" />

## Provider Setup

Wrap your application with the required providers:

```tsx theme={null}
import type { ReactNode } from "react";
import { CrossmintProvider, CrossmintWalletProvider } from "@crossmint/client-sdk-react-ui";

export function Providers({ children }: { children: ReactNode }) {
    return (
        <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">
            <CrossmintWalletProvider>{children}</CrossmintWalletProvider>
        </CrossmintProvider>
    );
}
```

> **Note:** Add `CrossmintWalletProvider` only to pay from a Crossmint wallet, and pass your auth provider's JWT to Crossmint with `setJwt`. The offramp session needs a wallet owned by `userId:<USER_ID>`, where `<USER_ID>` is the `sub` of your auth provider's JWT. See [Use Your Own Auth Provider](https://docs.crossmint.com/wallets/guides/bring-your-own-auth.md).

## Quick Example

Once providers are set up, render the offramp with the credentials of a session that your server created:

```tsx theme={null}
import { useEffect } from "react";
import {
    CrossmintEmbeddedOfframp,
    createCrossmintWalletSigner,
    useWallet,
    type EmbeddedOfframpCredentials,
} from "@crossmint/client-sdk-react-ui";

export function Withdraw({ credentials, onClose }: { credentials: EmbeddedOfframpCredentials; onClose: () => void }) {
    const { wallet, getWallet } = useWallet();

    useEffect(() => {
        // Load the wallet that the session pays from, on the chain the session uses.
        getWallet({ chain: "base-sepolia" }).catch(console.error);
    }, [getWallet]);

    if (wallet == null) {
        return null;
    }

    return (
        <CrossmintEmbeddedOfframp
            credentials={credentials}
            payer={createCrossmintWalletSigner(wallet)}
            onComplete={({ orderId, txId }) => console.log("Withdrawal sent:", orderId, txId)}
            onCancel={onClose}
            onError={({ reason, retriable, message }) => console.error("Offramp error:", reason, retriable, message)}
        />
    );
}
```

> **Note:** The user must be signed in, with your auth provider's JWT passed to `setJwt`, before `getWallet` can load the wallet. See [Use Your Own Auth Provider](https://docs.crossmint.com/wallets/guides/bring-your-own-auth.md). Create the session on your server with [Create Offramp Session](https://docs.crossmint.com/offramp/api-reference/create-offramp-session.md), because it needs your server-side API key. Pass the `sessionId` and `clientSecret` it returns as `credentials`.

## Next Steps

* [Providers](https://docs.crossmint.com/sdk-reference/offramp/react/providers.md) — Configure providers and their options
* [Components](https://docs.crossmint.com/sdk-reference/offramp/react/components.md) — Drop-in UI components
* [Types and Utilities](https://docs.crossmint.com/sdk-reference/offramp/react/types.md) — Functions, classes and types to use with the components