> ## Documentation Index
> Fetch the complete documentation index at: https://anypay-docs-widget-callback-intent-id.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Customization
> Customize the Trails widget appearance with CSS variables
To customise the widget, pass CSS variables through the `customCss` prop. You can pass a string of CSS declarations or a key-value object — both formats work.
```tsx theme={null}
import { Pay } from '0xtrails/widget'
// Object form also accepted
```
## Match your brand colours
Override the primary colour and its interactive states:
```tsx theme={null}
```
To pull in colours from your existing design system, reference your own CSS variables directly:
```tsx theme={null}
customCss={{
'--trails-primary': 'var(--color-brand-500)',
'--trails-primary-hover': 'var(--color-brand-600)',
'--trails-bg-primary': 'var(--color-surface)',
'--trails-text-primary': 'var(--color-text-default)',
}}
```
## Set the border radius style
Rounded theme:
```tsx theme={null}
customCss={`
--trails-border-radius-widget: 32px;
--trails-border-radius-button: 24px;
--trails-border-radius-input: 20px;
--trails-border-radius-dropdown: 16px;
`}
```
Square / no-radius theme:
```tsx theme={null}
customCss={`
--trails-border-radius-widget: 0px;
--trails-border-radius-button: 0px;
--trails-border-radius-input: 0px;
--trails-border-radius-dropdown: 0px;
--trails-border-radius-container: 0px;
`}
```
## Set the font family
```tsx theme={null}
customCss={`
--trails-font-family: "Inter", "SF Pro Display", -apple-system, sans-serif;
`}
```
Monospace:
```tsx theme={null}
customCss={`
--trails-font-family: "Fira Code", "Monaco", monospace;
`}
```
## Configure dark mode
Use the `theme` prop for light/dark/auto. If you need to override colours for a specific theme, combine `theme` with `customCss`:
```tsx theme={null}
```
## Advanced: glassmorphism
```tsx theme={null}
customCss={`
--trails-bg-primary: rgba(255, 255, 255, 0.1);
--trails-bg-secondary: rgba(255, 255, 255, 0.05);
--trails-border-primary: rgba(255, 255, 255, 0.2);
--trails-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
`}
```
## Advanced: disable default CSS
To apply a fully custom stylesheet without Trails' defaults interfering:
```tsx theme={null}
```
## Global CSS overrides
Variables cascade as normal CSS custom properties. You can set them globally or scope them to a container:
```css theme={null}
/* Apply to all widget instances */
:root {
--trails-primary: #6366f1;
}
/* Scope to a specific container */
.my-payment-section {
--trails-primary: #10b981;
}
```
***
## Widget copy overrides
Pass `labels` to replace the widget's default copy. Every key is optional, and a blank string falls back to the built-in text.
```tsx theme={null}
import { Fund } from '0xtrails/widget'
```
| Key | What it renames | Default |
| --------------- | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `confirmButton` | The action verb on the primary form button, and on the modal trigger button | `Fund`, `Pay`, `Swap`, `Deposit`, `Withdraw` by mode; the modal trigger shows `Earn` in earn mode |
| `formTitle` | The amount form screen, and the crypto-transfer screens that continue it, so the header stays put across the flow | `Fund`, `Pay`, `Swap`, `Withdraw`, `Earn` by mode; `Deposit` on the transfer screens |
| `methodsTitle` | The payment method picker | `Choose a funding method`; `Choose a payment method` in pay and earn modes; `Payment methods` on the pay flow's own picker |
| `tokensTitle` | The screen where the user picks what to pay *with* | Varies by mode — `Fund with any token`, `Select From Token`, and others |
Overrides apply only to the **configured mode's** screens. With `mode="fund"`, a `confirmButton` override does not follow the user onto the swap
sub-screen reached from the fund header.
Destination token pickers keep their own titles, and transient button states — "Enter an amount", "Getting quote...", "Connect your wallet",
"Processing...", "Insufficient Balance" — are never overridden.
Where a modal trigger button is rendered, an explicit `buttonText` prop takes precedence over `labels.confirmButton`.
***
## Consent checkbox
Pass `consentCheckbox` to render a consent line directly above the primary form button.
```tsx theme={null}
Terms & Conditions`,
requiredMessage: 'Please accept the Terms & Conditions to continue.',
}}
/>
```
| Key | Required | Purpose |
| ----------------- | -------- | ----------------------------------------------------------------------------- |
| `label` | Yes | The consent line, as inline HTML |
| `requiredMessage` | No | Standing notice shown under the checkbox after the button is pressed unticked |
Setting the prop makes the tick **mandatory** — there is no separate required flag. While the box is unticked the button is not disabled by the
checkbox; pressing it flags the row instead of submitting, so a ready quote still reads as ready. A failed press moves focus to the checkbox. With
`requiredMessage` set, the notice stands under the row until the box is ticked and is announced to assistive technology. Without it, a failed press
shakes and tints the row, and the tint clears itself (both are skipped under `prefers-reduced-motion`).
The row is not a `