Customize Verification UI | Crossmint Docs

OrderIntentVerification renders a provider verification modal when an order-intent rail has status: "pending_verification". Customize its appearance with the appearance prop.

Customize the Appearance

The appearance object has two top-level keys: variables (global design tokens) and rules (per-element overrides).

Variables
Rules

Global design tokens that apply across the entire modal.

Token	What it controls
`fontFamily`	Font stack for all text
`fontSizeUnit`	Base body font size (for example, `"14px"`). Title, small, error, input, and passkey sizes scale proportionally
`spacingUnit`	Base section spacing (for example, `"16px"`). Modal, input, button-gap, and option-gap scale proportionally
`borderRadius`	Default border radius for modal, input, button, and option elements
`colors.accent`	Primary/brand color — buttons, focus rings, radio selected state, spinner
`colors.textPrimary`	Main text color and button text
`colors.textSecondary`	Secondary and placeholder text
`colors.backgroundPrimary`	Surface/card background
`colors.backgroundSecondary`	Input background, secondary button background
`colors.border`	Default border for modal, inputs, and radio
`colors.danger`	Error text, error border, error icon
`colors.success`	Success icon, success background

The SDK auto-infers missing color tokens from the ones you provide. For example, setting only backgroundPrimary will derive textPrimary, textSecondary, backgroundSecondary, and border automatically.

Per-element overrides that take precedence over variables.

Rule	Customizable properties
`Overlay`	`colors.background` (backdrop behind the modal)
`Modal`	`borderRadius`, `colors.border`
`Input`	`borderRadius`, `colors.background`, `colors.border`
`PrimaryButton`	`borderRadius`, `colors.text`, `colors.background`, `hover.colors.background`, `disabled.colors.background`
`SecondaryButton`	`colors.text`, `colors.background`, `hover.colors.background`
`CloseButton`	`colors.background`, `hover.colors.background`
`Radio`	`colors.border`, `selected.colors.border`, `selected.colors.background`, `selected.colors.dot`

Apply the Appearance

You do not need to specify everything. The SDK infers missing colors:

import {
    OrderIntentVerification,
    type OrderIntentVerificationProps,
} from "@crossmint/client-sdk-react-ui";

function VerifyOrderIntent({
    orderIntent,
}: {
    orderIntent: OrderIntentVerificationProps["orderIntent"];
}) {
    return (
        <OrderIntentVerification
            orderIntent={orderIntent}
            appearance={{
                variables: {
                    colors: {
                        accent: "#6366f1",
                        backgroundPrimary: "#1e1e2e",
                    },
                },
            }}
            onVerificationComplete={() => {
                console.log("Allowance verified");
            }}
            onVerificationError={(error) => {
                console.error("Allowance verification failed", error);
            }}
        />
    );
}

This alone will auto-derive textPrimary, textSecondary, backgroundSecondary, and border from the dark background, and use the accent color for buttons, focus rings, and radio selections.

Agents

Quickstarts ⚡

Payment Methods

Payment Flows

API Reference

Customize UI

Customize the Appearance

Apply the Appearance

​Customize the Appearance

​Apply the Appearance

Customize the Appearance

Apply the Appearance