> ## Documentation Index
> Fetch the complete documentation index at: https://docs.goshippo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customization

> Customize the look of Shippo Shipping Elements in your site using theme options for colors, buttons, cards, and more.

You can change how Shippo Shipping Elements looks in your site using the `theme` parameter when calling the [init method](/docs/ShippingElements/install).

## Theme

Here are all supported theme values:

```typescript theme={null}
export interface Theme {
  elementId?: string;
  title?: string;
  style?: string;
  height?: string;
  width?: string;
  primaryColor?: string;
  container?: {
    backgroundColor?: string;
  };
  header?: {
    backgroundColor?: string;
    borderColor?: string;
    color?: string;
    hasBoxShadow?: boolean;
    textAlign?: 'left' | 'right' | 'center';
  };
  footer?: {
    backgroundColor?: string;
    borderColor?: string;
    hasBoxShadow?: boolean;
  };
  button?: {
    primary: {
      backgroundColor?: string;
      activeBackgroundColor?: string;
      hoverColor?: string;
      color?: string;
      borderRadius?: string;
      borderColor?: string;
      activeBorderColor?: string;
      textTransform?: 'lowercase' | 'uppercase' | 'capitalize';
      disabledBackgroundColor?: string;
      disabledBorderColor?: string;
      disabledTextColor?: string;
    };
    secondary?: {
      backgroundColor?: string;
      activeBackgroundColor?: string;
      color?: string;
      borderRadius?: string;
      borderColor?: string;
      activeBorderColor?: string;
      textTransform?: 'lowercase' | 'uppercase' | 'capitalize';
      disabledBackgroundColor?: string;
      disabledBorderColor?: string;
      disabledTextColor?: string;
    };
  };
  cards?: {
    subHeaderColor?: string;
    backgroundColor?: string;
    borderRadius?: string;
    borderColor?: string;
    borderStyle?: string;
    hoverBackgroundColor?: string;
    activeBackgroundColor?: string;
};
  inputs?: {
    borderColor?: string;
    borderActive?: string;
    hoverColor?: string;
  };
  menu?: {
    titleBackgroundColor?: string;
    hoverColor?: string;
    hoverBackgroundColor?: string;
  };
}
```