UI Customization | Alchemy Docs

This guide assumes you’re using Next.js, if you’re using a different framework or need more info checkout our full tailwind setup guide

Create two configuration files that will customize your authentication methods and UI styles.

Create your configuration files

In your project root, create a config.ts file
In your project root, create a tailwind.config.ts file

Basic configuration example

Start with a basic configuration:

tailwind.config.ts

tailwind.config.ts

1 import { withAccountKitUi } from "@account-kit/react/tailwind";
2 
3 export default withAccountKitUi(
4   {
5     // Your existing Tailwind config (if already using Tailwind).
6     // If using Tailwind v4, this will likely be left empty.
7   },
8   {
9     // AccountKit UI theme customizations
10   },
11 );

Important: If your tailwind.config.ts already contains any existing config information, be sure to wrap it with withAccountKitUi as shown above. Don’t replace your existing config - just wrap it!

Update your global.css to include the config:

global.css

1 @import "tailwindcss";
2 @config '../../tailwind.config.ts';

Note: If still using Tailwind v3, skip this step as the tailwind.config.ts file is used by default.

config.ts

src/config.ts

1 // @noErrors
2 import { createConfig, cookieStorage } from "@account-kit/react";
3 import { QueryClient } from "@tanstack/react-query";
4 import { arbitrumSepolia, alchemy } from "@account-kit/infra";
5 
6 export const config = createConfig(
7   {
8     transport: alchemy({
9       apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY,
10     }),
11     chain: arbitrumSepolia,
12     ssr: true,
13     storage: cookieStorage,
14     enablePopupOauth: true,
15     // For gas sponsorship
16     // Learn more here: https://www.alchemy.com/docs/wallets/transactions/sponsor-gas
17     policyId: process.env.NEXT_PUBLIC_ALCHEMY_POLICY_ID,
18   },
19   {
20     auth: {
21       sections: [
22         [{ type: "email" }],
23         [
24           { type: "passkey" },
25           { type: "social", authProviderId: "google", mode: "popup" },
26         ],
27       ],
28       addPasskeyOnSignup: true,
29     },
30   },
31 );
32 
33 export const queryClient = new QueryClient();

Important: The chain you import (like arbitrumSepolia) must come from the @account-kit/infra package, not from viem. Additionally, make sure this chain is enabled in both your Alchemy app and Smart Wallets config policy in the dashboard.

Note: You can add an "external_wallets" auth method to your config to allow connecting existing external EOAs (such as MetaMask) using our built-in connectors and WalletConnect. Learn more here.

1 // @noErrors
2 [
3   {
4     type: "external_wallets",
5     walletConnect: { projectId: "your-project-id" },
6   },
7 ];

Customization

Customize both configuration files by visiting our demo app - use the interactive sandbox to explore different authentication methods and styling options. When ready, click ‘Code preview’ to export your customized configuration files.

You can also follow these links to learn more about using UI Components and theming.

Finally, to the last step: integration into the application.