Learn how to customize the look and feel of the modals in your React app using the provided UI components.
"handle"
functions from the useTurnkey
hook, such as handleLogin
, handleSignMessage
, or handleImport
. These functions will open a modal with the appropriate UI for the action.
All styles are provided in the @turnkey/react-wallet-kit/styles.css
file. You must import this file in your main application file (e.g., app/layout.tsx
in Next.js) to ensure the styles are applied correctly.
ui
object in the TurnkeyProvider
’s config. This allows you to toggle light or dark mode, set custom colors, and more. You can see the full list of available options in the SDK Reference or by inspecting the TurnkeyProviderConfig
interface.
body
element of your application by default. That means that any fonts that are applied to the body
will also be applied to the modals. You can use any font you like, including custom fonts, by applying them to the body
element in your CSS.
TurnkeyProvider
by setting the renderModalInProvider
attribute to true
in the TurnkeyProvider
’s config. This is useful if you want to render the modals in a specific part of your application, such as a dedicated modal container. This may cause the modals to be distorted in certain cases, so use this option with caution.
useModal
hook to manually push and pop modals, close modals, or listen to the modal stack. This allows you to manually control the modal experience or create custom modals that fit your application’s design. Your modals can have multiple pages, and you can navigate between them using the pushPage
and popPage
functions.
TurnkeyProvider
. Transition effects and a title bar with controls (like close and back buttons) will also be automatically applied.
Here’s how it will look: