Openfort UI Customization

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.

To use the Openfort Button, you will need to use the OpenfortButton component. This component will render a button that will open the Openfort login screen when clicked.

Use your <Providers /> component from the Quickstart guide.

App.tsx

import { OpenfortButton } from '@openfort/react';
import { Providers } from "./Providers";
 
function Content() {
  const [clicked, setClicked] = useState(false);
 
  const label = clicked ? "Connected!" : "Connect Wallet";
 
  const handleClick = () => {
    setClicked(true);
  }
 
  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 will use the default configuration of the Openfort, but you can customize the theme properties of the button throught 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 a onClick callback that will be called when the user clicks the button.

If you want to configure the options of the button, you can use the configuration guide.

If you want to customize the button further, you can use the customization guide.