Skip to main content

Branding Customization

Customize the appearance of Volr SDK components to match your brand.

Branding Configuration​

interface BrandingConfig {
  logoUrl?: string;        // Your logo URL
  primaryColor?: string;   // Primary brand color (hex)
  backgroundColor?: string; // Background color (hex)
}

Basic Branding​

<VolrUIProvider
  config={{
    branding: {
      logoUrl: 'https://example.com/logo.png',
      primaryColor: '#0066ff',
      backgroundColor: '#ffffff',
    },
    // ... other config
  }}
/>

Display your logo in authentication and payment modals:

<VolrUIProvider
  config={{
    branding: {
      logoUrl: '/logo.png', // Relative or absolute URL
    },
    // ... other config
  }}
/>

Logo Requirements​

  • Format: PNG, SVG, or JPG
  • Size: Recommended 200x200px or larger
  • Aspect Ratio: Square (1:1) works best
  • Background: Transparent PNG recommended

Logo Placement​

The logo appears in:

  • SigninModal (wide layout)
  • PaymentModal (if configured)
  • AccountModal

Colors​

Primary Color​

Sets the accent color for buttons, links, and highlights:

<VolrUIProvider
  config={{
    branding: {
      primaryColor: '#0066ff', // Hex color code
    },
    // ... other config
  }}
/>

Background Color​

Sets the background color for branded sections:

<VolrUIProvider
  config={{
    branding: {
      backgroundColor: '#f8f9fa', // Hex color code
    },
    // ... other config
  }}
/>

Complete Branding Example​

<VolrUIProvider
  config={{
    branding: {
      logoUrl: 'https://example.com/logo.png',
      primaryColor: '#0066ff',
      backgroundColor: '#ffffff',
    },
    accentColor: '#0066ff', // Also set accent color
    // ... other config
  }}
/>

Branding in Modals​

SigninModal Wide Layout​

When viewport is wide enough (≥864px) and branding is configured, SigninModal shows a branded side panel:

// Wide layout automatically enabled when:
// 1. Viewport width >= 864px
// 2. Branding config is provided
// 3. Current screen is method selection

<VolrUIProvider
  config={{
    branding: {
      logoUrl: '/logo.png',
      primaryColor: '#0066ff',
      backgroundColor: '#f8f9fa',
    },
    // ... other config
  }}
/>

PaymentModal​

Branding appears in payment confirmation screens:

// Logo and colors are used in payment UI
<VolrUIProvider
  config={{
    branding: {
      logoUrl: '/logo.png',
      primaryColor: '#0066ff',
    },
    // ... other config
  }}
/>

CSS Customization​

For more advanced branding, use CSS variables:

:root {
  --volr-accent-color: #0066ff;
  --volr-primary-color: #0066ff;
  --volr-background: #ffffff;
}

See Style Customization for details.

Best Practices​

Use a high-resolution logo for best appearance:

// Good: High resolution, transparent background
logoUrl: 'https://example.com/logo@2x.png'

// Avoid: Low resolution, white background
logoUrl: 'https://example.com/logo-small.jpg'

2. Match Your App Colors​

Use colors that match your application:

// Extract from your app's color palette
<VolrUIProvider
  config={{
    branding: {
      primaryColor: '#0066ff', // Match your app's primary color
      backgroundColor: '#ffffff', // Match your app's background
    },
    accentColor: '#0066ff', // Also set accent color
    // ... other config
  }}
/>

3. Test in Both Themes​

Test branding in both light and dark themes:

// Test with different themes
<VolrUIProvider
  config={{
    theme: 'system', // Test with system theme
    branding: {
      logoUrl: '/logo.png',
      primaryColor: '#0066ff',
    },
    // ... other config
  }}
/>

Next Steps​