UI components are fully customizable so you can match your app's branding.

What you can customize in the pre-built authentication component:

• Overall theme: colors, radius, illustrations, custom css
• Header: text, logo, custom component
• External wallet connectors: featured wallets, specify order, chain filtering (EVM/Solana), WalletConnect, and more via configForExternalWallets(). See EOA connectors for more details.

Theme

Theme customizations and styling are passed through withAccountKitUi, the Account Kit Tailwind plugin, in your tailwind.config.js file.

Colors

The Account Kit Theme object passed to withAccountKitUi supports an overridable 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

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

Customizing Multiple Colors

You can customize multiple color properties at once for comprehensive theming:

import { withAccountKitUi, createColorSet } from "@account-kit/react/tailwind";
 
export default withAccountKitUi(
  {
    content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  },
  {
    colors: {
      "btn-primary": createColorSet("#3b82f6", "#1d4ed8"),
      "fg-accent-brand": createColorSet("#3b82f6", "#60a5fa"),
      active: createColorSet("#94a3b8", "#94a3b8"),
    },
  },
);

Available Color Variables

Account Kit supports these color customizations:

Border Colors:

• active - Border color when input is focused
• static - Border color when input is not focused
• critical - Border color for error states

Button Colors:

• btn-primary - Primary button background
• btn-secondary - Secondary button background
• btn-auth - Authentication button background

Text Colors:

• fg-primary - Primary text color
• fg-secondary - Secondary text color
• fg-tertiary - Tertiary text color
• fg-invert - Inverted text color
• fg-disabled - Disabled text color
• fg-accent-brand - Brand accent color
• fg-critical - Critical/error text color

Background Colors:

• bg-surface-default - Default background
• bg-surface-subtle - Subtle background
• bg-surface-inset - Inset component background
• bg-surface-critical - Critical component background
• bg-surface-error - Error component background
• bg-surface-success - Success component background
• bg-surface-warning - Warning component background

Borders

Similar to colors, the Account Theme object passed to withAccountKitUi supports an overridable borderRadius field to customize the border radius size. 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

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.

import { createConfig } from "@account-kit/react";
import { sepolia, alchemy } from "@account-kit/infra";
 
const config = createConfig(
  {
    transport: alchemy({ apiKey: "YOUR_KEY" }),
    chain: sepolia,
  },
  {
    // ... other ui config options
    illustrationStyle: "outline",
  },
);

Branding the header

To customize the header, you can override either of the header or hideSignInText options of the auth config when calling createConfig.

Changing the header text

The auth modal, by default, shows a Sign in text header.

In this example, we hide the default header text and replace it with our own.

// @jsx: react-jsx
import { createConfig } from "@account-kit/react";
import { sepolia, alchemy } from "@account-kit/infra";
 
export const config = createConfig(
  {
    transport: alchemy({ apiKey: "YOUR_API_KEY" }),
    chain: sepolia,
  },
  {
    auth: {
      header: "Sign in with your account", // [!code ++]
      hideSignInText: true, // [!code ++]
    },
  },
);

Adding an icon

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

// @jsx: react-jsx
import { createConfig } from "@account-kit/react";
import { sepolia, alchemy } from "@account-kit/infra";
 
export const config = createConfig(
  {
    transport: alchemy({ apiKey: "YOUR_API_KEY" }),
    chain: sepolia,
  },
  {
    auth: {
      header: <img src="img.src" />, // [!code ++]
    },
  },
);