​
Creating a Theme

RelayKit UI can be fully themed using an intuitive set of theme tokens. You can choose to override all tokens or just a few to make the components match your application theme. You can view the full list of theme overrides here.

import { RelayKitTheme } from '@reservoir0x/relay-kit-ui'

const theme: RelayKitTheme = {
  font: "Inter",
  primaryColor: "#09F9E9"
  focusColor: "#08DECF"
  text: {
    default: "#000"
    subtle: "#fff"
  }
  buttons: {
    primary: {
      color: "#000"
      background: "#09F9E9",
      hover: {
        color: "#000"
        background: "#0ad1c4",
      }
    }
  }
}

​
Fonts

If you are overriding any fonts with custom fonts you need to configure the custom font in your application. For example if you’re using nextjs you can refer to this doc or if you’re pulling the fonts in via css you can refer to this doc.

​
Usage

Now that your theme is configured you’ll just need to pass it into the RelayKitProvider.

import { RelayKitProvider, RelayKitTheme } from '@reservoir0x/relay-kit-ui'

const theme: RelayKitTheme = { ... } //Previously created theme

...

<RelayKitProvider theme={theme}>
  {YOUR_APP}
</RelayKitProvider>
SwapWidgetTroubleshooting