Custom theme

When using React components in your app, you can customize both 1) overall theme and 2) authentication components.

Most theme customizations are passed through using withAccountKitUi, the Account Kit Tailwind plugin, in your tailwind.config.js file.

Colors

The Account Kit Theme object passed to withAccountKitUi supports an overiddable colors object which accepts a set of color values. 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.

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

1
import { withAccountKitUi, createColorSet } from "@account-kit/react/tailwind";
2
3
export const tailwindConfig = withAccountKitUi(
4
  {
5
    content: [],
6
    // your tailwind config
7
  },
8
  {
9
    colors: {
10
      active: createColorSet("#94A3B8", "#94A3B8"),
11
    },
12
  }
13
);

Borders

Similar to colors, the Account Theme object passed to withAccountKitUi supports an overiddable borderRadius field to customize the border radius size. The default value is sm which is an 8px border radius.

1
import { withAccountKitUi } from "@account-kit/react/tailwind";
2
3
export const tailwindConfig = withAccountKitUi(
4
  {
5
    content: [],
6
    // your tailwind config
7
  },
8
  {
9
    borderRadius: "md",
10
  }
11
);

The available options are:

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

Illustration styles

Unlike colors and border radius, illustration styles are not passed through the Tailwind plugin.

Customize the illustration style of various icons used in the components by passing one of the enum values to illustrationStyle in your uiConfig when you call createConfig.

1
import { createConfig } from "@account-kit/react";
2
import { sepolia, alchemy } from "@account-kit/infra";
3
4
const config = createConfig(
5
  {
6
    transport: alchemy({ apiKey: "YOUR_KEY" }),
7
    chain: sepolia,
8
  },
9
  {
10
    // ... other ui config options
11
    illustrationStyle: "outline",
12
  }
13
);

Custom authentication component

The auth modal, by default, shows a Sign in text header. This header is fully cusomizable, allowing you to change the text or add an icon.

Customize header text

To customize the header text, you can override the header or hideSignInText options of the auth config when calling createConfig. In this example, we hide the default header text and replace it with our own.

1
// @jsx: react-jsx
2
import { createConfig } from "@account-kit/react";
3
import { sepolia, alchemy } from "@account-kit/infra";
4
5
export const confg = createConfig(
6
  {
7
    transport: alchemy({ apiKey: "YOUR_KEY" }),
8
    chain: sepolia,
9
  },
10
  {
11
    auth: {
12
      header: "Sign in with your account", // [!code ++]
13
      hideSignInText: true, // [!code ++]
14
    },
15
  }
16
);

Adding an icon

In this example, we leave the Sign in text in the modal and add an icon above it.

1
// @jsx: react-jsx
2
import { createConfig } from "@account-kit/react";
3
import { sepolia, alchemy } from "@account-kit/infra";
4
5
export const confg = createConfig(
6
  {
7
    transport: alchemy({ apiKey: "YOUR_KEY" }),
8
    chain: sepolia,
9
  },
10
  {
11
    auth: {
12
      header: <img src="img.src" />, // [!code ++]
13
    },
14
  }
15
);