Stylization of the Default Widget

All of the widgets that can be integrated has the default styling. However, you can customize the widget to match your brand's color scheme.

Radix UI for UI Design System

We use Radix UI for our default UI design system. You can customize the widget by changing the color scheme of the Radix UI components. Here's how you can do that:

Custom Pallete Generation

You can generate a custom palette for the Radix UI components using the Radix UI Palette Generator (opens in a new tab). Generate the desired color pallete from the generator.

This is an example for a generated custom palette. (opens in a new tab)

Pass Down the Generated Palette

You can pass down the generated palette to the cssOverride prop of the BanditContextProvider component.

<BanditContextProvider
      apiKey="REPLACE_WITH_API_KEY"
      cluster="mainnet"
      cssOverride="GENERATED_PALETTE"
    >
      <Campaign campaignId={"REPLACE_WITH_CAMPAIGN_ID"} displayMode="integrated" />
</BanditContextProvider>

Controlling the Light and Dark Versions

You can control the light and dark versions of the pallete using the appearance prop of the BanditContextProvider component.

<BanditContextProvider
      apiKey="REPLACE_WITH_API_KEY"
      cluster="mainnet"
      cssOverride="GENERATED_PALETTE"
      appearance="light | dark | inherit"
    >
      <Campaign campaignId={"REPLACE_WITH_CAMPAIGN_ID"} displayMode="integrated" />
    </BanditContextProvider>

The appearance prop can take the following values:

• light: Light version of the palette.
• dark: Dark version of the palette.
• inherit: Inherits the palette from the parent element or the system preference.