Integration

What every framework needs, and which guide to follow

The widget is a React component, so integrating it is mostly your framework's normal way of doing three things. The pages in this section are the concrete version of that for each framework; this page is what they have in common.

What every setup needs

React 19. react and react-dom >=19 are the only peer dependencies. If your framework still pins React 18 — Next 14, Gatsby — upgrade it first.

The stylesheet, loaded before your own. Its rules are scoped to the widget and can't reach your markup, but the theme variables it declares are global, and some of those names are ones your own Tailwind theme also uses. Load the widget's first and yours win. How you express "first" is the part that differs per framework.

A browser. The widget reads browser APIs while it sets up, so it must not render on the server. Every framework here has a way to say that; picking the wrong one is the most common integration failure, and it shows up as a hydration error or a blank space where the widget should be.

Nothing else is required. No provider to mount, no config to write:

import { Widget } from "@superbridge/widget";

<Widget />

Which page you want

Anything else running React 19 works too — take the closest page and apply your framework's equivalents of "load this CSS first" and "render this on the client only".

Then what

Once it renders, the rest is orthogonal to your framework:

• Embedding — how much room it needs, and where its modals open.
• Wallets — let it handle connection, or hand it your existing wallet stack.
• Theming — CSS variables, fonts, motion.
• Local development — the dev API key, and what the common breakages look like.