You can customize the appearance of Reach to match your application’s branding through the theme property in the SDK configuration.

​
Theme Configuration

Reach supports shadcn/ui’s styling conventions, making it easy to maintain consistent design. 
const config = {
  // Other configuration...

  theme: {
    styles: {
      primary: '#00758a', // Primary brand color
      secondary: 'pink', // Secondary color
      background: '0 0% 100%', // Page background (HSL format)
      border: 'border-purple-500',

      // Fonts
      'font-body': 'Inter, system-ui, sans-serif',
      'font-heading': 'Montserrat, Arial, sans-serif',
    },
  },
};

​
Color Format Support

Reach supports multiple color format types:
  • HEX colors: #00758a
  • Named CSS colors: pink
  • HSL (shadcn/ui format): 240 5.9% 10% (hue saturation lightness)
  • Tailwind classes: bg-purple-500
We only support the default tailwind background color classes (bg--). Custom color names, bg-inherit, bg-current, and bg-transparent are not supported. To see a full list of supported tailwind colors, please refer to the tailwind documentation.

​
Font Customization

Reach allows you to customize the fonts used throughout the interface. You can use any system font or any font available on Google Fonts—just specify the font name in your theme config, and Reach will automatically load it for you. Example: Using a Google Font 
const config = {
  theme: {
    styles: {
      'font-body': 'Raleway, sans-serif', // This will load Raleway from Google Fonts
      'font-heading': 'Montserrat, Arial, sans-serif', // Montserrat will also be loaded from Google Fonts
    },
  },
};
If you specify a font that is not a system font, Reach will automatically inject the appropriate Google Fonts <link> tag for you. You do not need to manually include any font imports.

​
Key Style Variables

VariableDescriptionDefault (Light)
backgroundPage background0 0% 100%
foregroundMain text color225 15% 16%
cardCard background0 0% 100%
card-foregroundCard text225 15% 16%
popoverPopover background0 0% 100%
popover-foregroundPopover text225 15% 16%
primaryPrimary accent210 30% 25%
primary-foregroundText on primary0 0% 98%
secondarySecondary accent210 15% 94%
secondary-foregroundText on secondary210 30% 25%
mutedSubdued elements210 10% 96%
muted-foregroundSubdued text220 10% 45%
accentAccent elements210 15% 94%
accent-foregroundText on accent210 30% 25%
destructiveError/delete0 84.2% 60.2%
destructive-foregroundText on destructive0 0% 98%
borderBorder color220 13% 90%
inputForm inputs220 13% 90%
ringFocus rings210 30% 25%
chart-1Chart color 1210 50% 50%
chart-2Chart color 2260 50% 55%
chart-3Chart color 3150 50% 45%
chart-4Chart color 4325 50% 55%
chart-5Chart color 545 80% 55%
radiusBorder radius0.625rem
font-headingFont for heading elements”Plus Jakarta Sans” and system fonts*
font-bodyFont for body elementsInter and system fonts*
System fonts include:
  • system-ui
  • apple-system
  • BlinkMacSystemFont
  • Segoe UI
  • Roboto
  • sans-serif

​
Language

Reach supports multiple languages through the language configuration option. Currently, we support:
  • English (en)
  • Spanish (es)
To set the language, simply specify the language code in your configuration: 
const config = {
  // Other configuration...
  language: {
    default: 'en', // Set to Spanish
  },
};
If no language is specified, Reach will automatically detect the user’s preferred language based on:
  1. URL parameters
  2. Browser settings
  3. Local storage preferences
For language requests or to discuss adding support for additional languages, please contact our support team at support@embedreach.com.

​
Customizing Verbs in Engage

You can customize the verbs used in the Engage feature by providing a custom language configuration. 
const config = {
  // Other configuration...
  language: {
    overrides: {
      engage: {
        en: {
          ...
        },
        es: {
          ...
        },
      },
    },
  },
};
This allows you to customize the verbs used in the Engage feature for your specific use case. For example, if you want to use “Contacts” instead of “Users”, you can do the following: 
const config = {
  // Other configuration...
  language: {
    overrides: {
      engage: {
        en: {
          user: 'Contacts',
          user_other: 'Contacts', // The plural form of the word
        },
        es: {
          user: 'Contactos',
          user_other: 'Contactos', // The plural form of the word
        },
      },
    },
  },
};
The full list of verbs that can be customized in Engage can be found below, we support en and es for each verb: 
{
    "user": "User",
    "user_other": "Users",
    "segment": "Segment",
    "segment_other": "Segments",
    "broadcast": "Broadcast",
    "broadcast_other": "Broadcasts",
    "automation": "Automation",
    "automation_other": "Automations",
    "insight": "Insight",
    "insight_other": "Insights",
    "merge_field": "Merge Field",
    "merge_field_other": "Merge Fields",
    "extra_merge_field_name": "Custom Field",
    "extra_merge_field_name_other": "Custom Fields",
    "advanced_merge_field_name": "Advanced Field",
    "advanced_merge_field_name_other": "Advanced Fields"
}

​
Customizing the Measure Dashboard

You can customize certain strings in the Measure feature by providing language overrides in your configuration: 
const config = {
  // Other configuration...
  language: {
    overrides: {
      measure: {
        en: {
          // The default value for this string is "Transaction ID".
          // The code below will override the string to read "Order ID"
          transaction_table_id_header: 'Order ID',
        },
        es: {
          transaction_table_id_header: 'ID de pedido', // optional Spanish translation
        },
      },
    },
  },
};
Currently, the following strings can be customized in Measure: 
{
    "transaction_table_id_header": "Order ID"
    "transaction_table_created_header": "Order Created"
}
For language requests or to discuss adding support for additional languages, please contact our support team at support@embedreach.com.