Customization of your component integration is managed via the NMI Appearance API. The Appearance API provides a theming standard for styling any component in our component library.

Component Studio

Visit the component studio to easily style the appearance of your components.

[]

After you are done customizing the look and feel of your component, selecting the code tab will show you your Appearance object. This object is then passed to your payment component as a prop to apply your theme.

Appearance Configuration

Theme Customization

The Appearance object contains comprehensive theming options including colors, typography, spacing, borders, and effects. You can customize every aspect of your component's visual appearance.

Integration

Simply pass your customized appearance object to your component as the appearance prop to apply your theme.

Built-in Themes & Modifiers

Choose from pre-built themes like 'light' and 'dark' for quick setup. You can also use modifier properties to make rapid adjustments to the overall look and feel without needing to customize individual values.

This approach allows you to start with a solid foundation and make targeted tweaks rather than building everything from scratch.

The Appearance Object Type

The entire appearance object type looks as follows. We recommend using the component studio to generate the appearance object to match the look and feel of your application.

interface Appearance {
  theme?: 'light' | 'dark';
  customTheme?: Partial<NmiTheme>;
  layoutSpacing?: 'compact' | 'default' | 'spacious';
  textSize?: 'smaller' | 'default' | 'larger';
  radiusSize?: 'none' | 'smaller' | 'default' | 'larger';
}

NmiTheme Interface:

interface NmiTheme {
  layout: NmiLayoutTheme;
  typography: NmiTypographyTheme;
  colors: NmiColorsTheme;
}

NmiLayoutTheme Interface:

interface NmiLayoutTheme {
  radius: {
    small: string;
    medium: string;
    large: string;
  };
  borderWidth: {
    small: string;
    medium: string;
    large: string;
  };
  spacing: {
    padding: string;
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
    '3xl': string;
  };
}

NmiTypographyTheme Interface:

interface NmiTypographyTheme {
  size: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
  };
  weight: {
    light: string;
    medium: string;
    bold: string;
  };
  font: {
    sans: string;
    mono: string;
  };
}

NmiColorsTheme Interface:

interface NmiColorsTheme extends NmiSemanticColors, NmiContentColors {
  background: string;
  foreground: string;
  border: string;
  input: string;
}

NmiSemanticColors Interface:

interface NmiSemanticColors {
  primary: NmiColorScale;
  secondary: NmiColorScale;
  success: NmiColorScale;
  warning: NmiColorScale;
  danger: NmiColorScale;
  default: NmiColorScale;
}

NmiContentColors Interface:

interface NmiContentColors {
  content1: NmiColorScale;
  content2: NmiColorScale;
}

NmiColorScale Interface:

interface NmiColorScale extends NmiColorPair {
  100: string;
  200: string;
}

NmiColorPair Interface:

interface NmiColorPair {
  default: string;
  foreground: string;
}