GlueX Widget is fully compatible with React applications and requires minimal configuration for smooth integration
For a complete working example, check out our full React example repository

​
Prerequisites

Before proceeding with React specific integration, ensure you have completed the general installation steps outlined in the General Installation

​
Integration

Create a Widget.tsx file in your components directory to encapsulate the GlueX widget 
import React from "react";
import { type WidgetConfigPartialProps } from "@gluex/widget";
import { GlueXWidget, WidgetSkeleton } from "@gluex/widget";

export const Widget = () => {
  const config: WidgetConfigPartialProps["config"] = React.useMemo(() => {
    return {
      integrator: "",
      apiKey: "",

      // ... rest of the widget configuration
      // Example:
      // appearance: 'dark',
      // theme: {
      //   container: {
      //     boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
      //     borderRadius: '16px',
      //   },
      // },
    };
  }, []);

  return (
    <ClientSideRender fallback={<WidgetSkeleton config={config} />}>
      <GlueXWidget config={config} />
    </ClientSideRender>
  );
};
Usage in your App You can now import and use the widget component anywhere in your React application
App.tsx
import { Widget } from "./components/Widget";

function App() {
  return (
    <div>
      <h1>My DeFi Application</h1>
      <Widget />
    </div>
  );
}

export default App;

​
Configuration

The widget is highly configurable through its config prop. This allows you to tailor its behavior, default settings and connected services to match your application’s requirements. For a complete list of all available configuration options and their detailed descriptions, please refer to the widget configuration section

​
Customization

Beyond basic configuration, the widget offers extensive customization capabilities to ensure it seamlessly integrates with your application’s branding and design system. You can customize nearly every visual aspect of the widget. For a complete list of all available configuration, theme options, appearance and their detailed descriptions, please refer to the widget customization section
Check out GlueX’s Widget Studio to customize and generate your custom widget configuration. It provides an interactive interface to adjust settings and see real time previews, then generates the corresponding config code snippet for you