Theming

Customize the widget to match your brand.

Basic Theming

<ImportWidget
  apiKey="your_key"
  fields={fields}
  theme={{
    primaryColor: '#6366f1',   // Indigo
    successColor: '#10b981',   // Emerald
    errorColor: '#ef4444',     // Red
    borderRadius: '12px',
  }}
  onComplete={handleComplete}
/>

Theme Properties

Property	Default	Description
`primaryColor`	`#3b82f6`	Buttons, links, focus states
`successColor`	`#10b981`	Success messages, valid states
`errorColor`	`#ef4444`	Error messages, invalid states
`borderColor`	`#e2e8f0`	Input borders, dividers
`borderRadius`	`8px`	Corner radius for all elements
`fontFamily`	`system-ui`	Font stack
`fontSize`	`14px`	Base font size

Dark Theme Example

const darkTheme = {
  primaryColor: '#8b5cf6',
  successColor: '#22c55e',
  errorColor: '#f43f5e',
  borderColor: '#374151',
  borderRadius: '12px',
  fontFamily: 'ui-monospace, monospace',
  fontSize: '13px',
}

Remove Branding

On Starter plan and above, you can remove the "Powered by ImportKit" watermark:

<ImportWidget
  apiKey="your_key"
  fields={fields}
  showBranding={false}
  onComplete={handleComplete}
/>

Tips

Use colors that contrast well with white backgrounds
Keep border radius consistent with your app's design system
The widget inherits font-family from your app if not specified