Skip to content

Custom Themes

When adding the React components to your App, there are two places where the components can be customized. All but one of the theme customizations options are passed through to the Account Kit Tailwind plugin in your tailwind.config.js file.

Colors

The Account Theme object passed to withAccountKitUi supports a colors object which accepts a set of color values which you can override. Each color is a key-value pair where the key is the name of the color and the value is an object containing the light and dark mode value to use.

The available colors are:

Border colors

  • active - the color of the border when the input is focused
  • static - the color of the border when the input is not focused
  • critical - the color of the border when the input is in an error state

Button colors

These colors affect the background of buttons

  • btn-primary - the color of the primary button
  • btn-secondary - the color of the secondary button
  • btn-auth - the color of the authentication button

Foreground colors

These colors primarily affect the text color of the components

  • fg-primary - the color of the primary text
  • fg-secondary - the color of the secondary text
  • fg-tertiary - the color of the tertiary text
  • fg-invert - the color of the inverted text
  • fg-disabled - the color of the disabled text
  • fg-accent-brand - your brand color
  • fg-critical - the color of the critical text

Surface colors

These colors affect the background of various components (eg. modal, inputs, etc)

  • bg-surface-default - the default background color
  • bg-surface-subtle - a subtle background color
  • bg-surface-inset - the background color of inset components
  • bg-surface-critical - the background color of critical components
  • bg-surface-error - the background color of error components
  • bg-surface-success - the background color of success components
  • bg-surface-warning - the background color of warning components

Example

import { withAccountKitUi, createColorSet } from "@account-kit/react/tailwind";
 
export const tailwindConfig = withAccountKitUi(
  {
    content: [],
    // your tailwind config
  },
  {
    colors: {
      active: createColorSet("#94A3B8", "#94A3B8"),
    },
  }
);

Borders

The border radius intensity can be configured directly in the Tailwind plugin's theme overrides. The default value is sm which is an 8px border radius.

import { withAccountKitUi } from "@account-kit/react/tailwind";
 
export const tailwindConfig = withAccountKitUi(
  {
    content: [],
    // your tailwind config
  },
  {
    borderRadius: "md",
  }
);

The available options are:

  • none (0px)
  • xs (4px)
  • sm (8px)
  • md (16px)
  • lg (24px)

Illustration styles

This is the one customization option that is not passed through to the Tailwind plugin. The illustration style of various icons used in the components is customized by passing in one of the enum values to your uiConfig when you call createConfig.

import { createConfig } from "@account-kit/react";
import { sepolia } from "@account-kit/infra";
 
const config = createConfig(
  {
    apiKey: "YOUR_API_KEY",
    chain: sepolia,
  },
  {
    // ... other ui config options
    illustrationStyle: "outline",
  }
);
## Errors were thrown in the sample, but not included in an error tag

These errors were not marked as being expected: 2353. 
Expected: // @errors: 2353

Compiler Errors:

index.ts
  [2353] 135 - Object literal may only specify known properties, and 'apiKey' does not exist in type 'CreateConfigProps'.