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

​
Prerequisites

Before proceeding with Remix 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: 
"use client";

import React, { useEffect, useState } from "react";
import type { WidgetConfigPartialProps } from "@gluex/widget";

const ClientSideWidget = ({ config }: { config: WidgetConfigPartialProps["config"] }) => {
  const [Widget, setWidget] = useState<React.ComponentType<{ config: any }> | null>(null);
  
  useEffect(() => {
    import("@gluex/widget").then(module => {
      setWidget(() => module.GlueXWidget);
    });
  }, []);

  if (!Widget) {
    return <div>Loading...</div>;
  }

  return <Widget config={config} />;
};

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

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

  return <ClientSideWidget config={config} />;
};
Usage in Your App You can now import and use the widget component anywhere in your Remix application:
app/routes/_index.tsx
import { Widget } from "../components/Widget";

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

​
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