# Openfort UI

The Openfort UI delivers pre-built React components for common wallet actions and authentication flows. Use the UI hooks and modal system to:

* Authenticate users with plenty of authentication options
* Guide users through wallet setup and recovery
* Show profile and wallet info
* Switch networks and providers

Whether you want a full onboarding experience or just a wallet connect button, Openfort's UI is modular and easy to embed in your layout.

<OpenfortConfigDemo />

:::tip\[Try it]
This is the real `OpenfortButton` running on Base. Click it to log in (guest, email, or Google) and explore the wallet — then [configure](/docs/products/embedded-wallet/react/ui/configuration) what it does and [customize](/docs/products/embedded-wallet/react/ui/customization) how it looks.
:::

<DemoBox action="auth" />

To use the Openfort Button, use the `OpenfortButton` component. This component renders a button that opens the Openfort login screen when clicked.

Use your `<Providers />` component from the [Quickstart](/docs/products/embedded-wallet/react#set-up-providers) guide.

:::info
`OpenfortButton` works with both Ethereum and Solana and automatically adapts to your provider's chain type — connect, send, and add-funds screens all follow it, with no separate UI config. The switch is [`walletConfig.chainType`](/docs/products/embedded-wallet/react/wallet/solana): set it to `ChainTypeEnum.SVM` for Solana (it defaults to EVM). Setting the `solana` config block alone isn't enough — `chainType` is what selects the chain.
:::

```tsx [App.tsx]
import { OpenfortButton } from '@openfort/react';
import { useState } from 'react';
import { Providers } from "./Providers";

function Content() {
  const [clicked, setClicked] = useState(false);

  const label = clicked ? "Connected!" : "Connect Wallet";

  // A custom onClick replaces the default behavior — call open() to show the modal.
  const handleClick = (open: () => void) => {
    setClicked(true);
    open();
  }

  return (
    <div>
      <OpenfortButton
        showAvatar={true}   // Show the avatar of the user
        showBalance={true}  // Show the wallet balance
        label={label}
        onClick={handleClick}
      />
    </div>
  );
}

function App() {
  return (
    <Providers>
      {/* Your app content */}
      <Content />
    </Providers>
  );
}

export default App;
```

This button uses the default configuration of Openfort, but you can customize the theme properties of the button through the following properties:

* `showAvatar`: Show the avatar of the user
* `showBalance`: Show the balance of the user
* `label`: The label of the button when the user is not connected

The `OpenfortButton` component also provides an `onClick` callback that receives the `open` function as a parameter: `onClick?: (open: () => void) => void`.

If you want to configure the options of the button, you can use the [configuration](/docs/products/embedded-wallet/react/ui/configuration) guide.

### Custom rendering

For full control over the button's appearance, use `OpenfortButton.Custom` with a render prop:

```tsx
import { OpenfortButton } from '@openfort/react'

function App() {
  return (
    <OpenfortButton.Custom>
      {({ isConnected, isConnecting, show, hide, address, truncatedAddress, chainId, unsupported, ensName }) => (
        <button onClick={show} className="my-custom-button">
          {isConnecting ? 'Connecting...' : isConnected ? `${truncatedAddress}` : 'Get Started'}
        </button>
      )}
    </OpenfortButton.Custom>
  )
}
```

The render prop receives:

| Prop | Type | Description |
|------|------|-------------|
| `show` | `() => void` | Function to open the Openfort modal. |
| `hide` | `() => void` | Function to close the Openfort modal. |
| `isConnected` | `boolean` | Whether the user is authenticated and wallet is ready. |
| `isConnecting` | `boolean` | Whether a connection is in progress. |
| `unsupported` | `boolean` | Whether the current chain is unsupported. |
| `address` | `` `0x${string}` \| undefined `` | Connected wallet address. |
| `truncatedAddress` | `string \| undefined` | Shortened wallet address for display. |
| `ensName` | `string \| undefined` | ENS name if resolved. |
| `chainId` | `number \| undefined` | Current chain ID. |

If you want to customize the button further, you can use the [customization](/docs/products/embedded-wallet/react/ui/customization) guide. For the standalone [`Avatar` and `ChainIcon` components](/docs/products/embedded-wallet/react/ui/customization#components), see Customization.