Skip to content

Openfort UI Usage

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 Kit Button, you will need to use the OpenfortButton component. This component will render a button that will open the Openfort login screen when clicked.

import { OpenfortButton } from '@openfort/react';
 
function App() {
  return (
    <div>
      <OpenfortButton />
    </div>
  );
};

This button will use the default configuration of the Openfort Kit, but you can customize the theme properties of the button.

There are other customization 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.