The GlueX Widget offers comprehensive customization options to match the application’s design and functionality requirements. The widget’s layout stays consistent, but you can modify colors, fonts, styles, disable or hide parts of the UI and more
Check out GlueX’s Widget Studio to customize and integrate the widget
interface WidgetThemeConfiguration = {
  // customize individual components
  components: WidgetCustomComponents;

  // sets the appearance - ("light" | "dark" | "auto")
  appearance: Appearance;
  // tweak the theme objects such as palette, shape, typography, components, container, colors, fonts and border-radius
  theme: WidgetTheme;

  // disables parts of the widget
  disabled: DisabledUIType[];
  // hides parts of the widget
  hidden: HiddenUIType[];
  // makes parts of the widget as required
  required: RequiredUIType[];
}

​
UI Customization

​
Appearance

Controls the widget’s overall color scheme, so it can adapt to your app’s light or dark mode or follow the user’s system preference automatically. Use this to ensure visual consistency and reduce “mode flicker” when users switch themes.
PropertyDefaultAllowed ValuesNotes
appearance"auto"light, dark, autoauto will match the user’s OS setting
const config = {
  appearance: "dark",
};

​
Elements

Fine tune which parts of the interface your users see or interact with. Disable input fields to guide user flows, hide non essential widgets for a cleaner look or mark critical fields as required to ensure data collection

​
Disabled

Grey out and prevent interaction with specific UI elements
PropertyTypeDefaultNotes
disabledstring[][]List of element keys to disable (greyed out)
const config = {
  disabled: ["fromAmount", "fromToken"],
};

​
Hidden

Completely remove elements from the UI
PropertyTypeDefaultNotes
hiddenstring[][]List of element keys to remove entirely from UI
const config = {
  hidden: ["poweredBy", "language"],
};

​
Required

Ensure users fill out crucial fields before proceeding
PropertyTypeDefaultNotes
requiredstring[][]List of element keys that must be filled
const config = {
  required: ["toAddress"],
};

​
Theme Customizations

​
Layout

Override the outer container’s dimensions and spacing to fit any layout fixed width/sidebar, full-page modal or embedded card. Control styling factors like height, max-height, padding, box shadow and more for a perfect visual fit
PropertyTypeDefaultNotes
theme.containerobject—CSS style object for container
const config = {
  theme: {
    container: {
      width: "400px",
      height: "600px",
      maxHeight: "800px",
      boxShadow: "0px 8px 32px rgba(0, 0, 0, 0.08)",
      padding: "16px",
    },
  },
};

​
Shape

Adjust corner radii globally across cards, buttons and panels either a single radius for everything or separate values for primary (cards) and secondary (buttons) elements
PropertyTypeDefaultNotes
theme.shape.borderRadiusnumber—Base radius in pixels
theme.shape.borderRadiusSecondarynumber—Secondary (buttons) radius
const config = {
  theme: {
    shape: {
      borderRadius: 12,
      borderRadiusSecondary: 16,
    },
  },
};

​
Typography and Fonts

Define the widget’s typographic scale font family, base font size and weight variants for regular, medium and bold text. Use your brand’s font stack for full design cohesion
PropertyTypeDefaultNotes
theme.typography.fontFamilystring—CSS font-family string
theme.typography.fontSizenumber—Base font size in pixels
theme.typography.fontWeightRegularnumber—Numeric weight for regular text
theme.typography.fontWeightMediumnumber—Numeric weight for medium text
theme.typography.fontWeightBoldnumber—Numeric weight for bold text
const config = {
  theme: {
    typography: {
      fontFamily: "Verdana, sans-serif",
      fontSize: 14,
      fontWeightRegular: 400,
      fontWeightMedium: 500,
      fontWeightBold: 700,
    },
  },
};

​
Color System

Define full light and dark palettes - primary, secondary, background, text and semantic colors (success, error, warning, info) giving you end to end theming control with one config object 
const config = {
  theme: {
    colorSchemes: {
      light: {
        palette: {
          primary: { main: "#02F994", review: "#02F994" },
          secondary: { main: "#F5B5FF" },
          background: {
            default: "#FFFFFF",
            paper: "#F5F5F5",
            selected: "#E0E0E0",
          },
          text: { primary: "#1A1A1A", secondary: "#757575" },
          success: { main: "#4CAF50" },
          error: { main: "#F44336" },
          warning: { main: "#FF9800" },
          info: { main: "#2196F3" },
        },
      },
      dark: {
        palette: {
          /* dark-mode overrides here */
        },
      },
    },
  },
};

​
Component Customization

The GlueX Widget offers robust component customization through custom component overrides. This means you can tailor the look and feel of various elements to perfectly match your application’s design
Ensure your custom component implements all required handler functions and events. Missing handlers may cause unexpected behavior or break widget functionality

​
Amount Selection

import { type PercentageAmountSelectorProps } from "@gluex/widget";

export const CustomPercentageAmountSelector = ({
  onAmountChange, // (percentage: number) => void
  isLoading, // Whether data is loading
}: PercentageAmountSelectorProps) => {
  const percentages = [
    { value: 0.25, label: "25%" },
    { value: 0.5, label: "50%" },
    { value: 0.75, label: "75%" },
    { value: 1, label: "MAX" },
  ];

  return <div>{/* Your custom percentage selection UI */}</div>;
};

​
Token Amount Display

import { type TokenAmountPriceProps } from "@gluex/widget";

export const CustomTokenAmountPrice = ({
  amount, // Token amount
  token, // Token information
  tokenPrice, // Current token price
  isLoading, // Whether data is loading
}: TokenAmountPriceProps) => {
  return <div>{/* Your custom amount display UI */}</div>;
};

​
Transaction Details

import { type TransactionDetailsProps } from "@gluex/widget";

export const CustomTransactionDetails = ({
  tokens, // From/To token information
  fees, // Network, protocol, and total fees
  minReceived, // Minimum amount to receive
  providers, // List of providers used
}: TransactionDetailsProps) => {
  return <div>{/* Your custom transaction details UI */}</div>;
};

​
Completed Transaction

import { type CompletedTransactionDetailsProps } from "@gluex/widget";

export const CustomCompletedTransaction = ({
  tokens, // From/To token information
  amounts, // Transaction amounts
  fees, // Transaction fees
  transaction, // Transaction details with hash and link
  providers, // List of providers used
  showRouteSection, // Whether to show route section
  showDetailsSection, // Whether to show details section
}: CompletedTransactionDetailsProps) => {
  return <div>{/* Your custom completed transaction UI */}</div>;
};