Skip to main content
Version: Next

Integrating Notifi React card

To see the source code, look at the Notifi SDK.

note

You will need a topic and card config to use the Notifi React Card, which can be created in the Admin Portal. Follow the guide here to create a card config.

Installation

npm

NPM Registry

npm install @notifi-network/notifi-react

yarn

yarn add @notifi-network/notifi-react

Import the following CSS file into your component to get baseline styling:

import '@notifi-network/notifi-react/dist/index.css';

Design Guidelines​

We provide design recommendations to help you present the UI effectively to your dApp users. Check them out here: Figma

Tips​

  • Embed the bell icon near the wallet login section for better visibility and user experience: here

     

  • There should be a state for the bell icon when connected/not connected: example of not connected state

  • Make sure that there is enough contrast between color selections.

  • Styling should be consistent with your current UI.

 

Notifi React Implementation Examples​

🔗 For a complete working example and best practices, check out our Example Integration Repository.