---
updatedAt: 2026-09-02T19:20:48.000Z
agentTools:
  projectIndex: https://docs.nmi.com/llms.txt
---

# The Appearance API

A theming standard for styling any component in our component library

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 <Anchor target="_blank" href="https://guide.nmi.com/app/component-studio">the component studio</Anchor> to easily style the appearance of your components.

<Image src="https://files.readme.io/1afb25c7e59e13db8b686cd03c97e22b1a24243c01f906f3f24f990e2c0b60e3-componentStudio-DzLsKVVB.png" align="center" />

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.

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

**NmiTheme Interface**:

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

**NmiLayoutTheme Interface**:

```typescript
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**:

```typescript
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**:

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

**NmiSemanticColors Interface**:

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

**NmiContentColors Interface**:

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

**NmiColorScale Interface**:

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

**NmiColorPair Interface**:

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

<br />

<Callout icon="📘" theme="info">
  ###

  **Tip:** You can use the appearance object generated by the component studio with any NMI component. It is recommended to share the same appearance object with multiple component integrations to achieve a consistent look and feel across your application.
</Callout>

<br />