ShipEngine Elements

ShipEngine Elements is a collection of prebuilt UI components for building your shipping flow.

Elements features include:

Responsive design to fit seamlessly on any screen size
Custom styling rules so you can match the look and feel of your site
Integrations with the leading global shipping carriers like USPS, UPS, and DHL Express

Available Elements

Onboarding

Onboard ShipEngine Carriers to a new ShipEngine seller account.

Label Workflow

Configure a new or existing shipment, purchase shipping labels, and view or void labels on a shipment.

Account Settings

Manage all of your ShipEngine account details such as carrier accounts, warehouses, payment methods, and more.

Customize the appearance of Elements

ShipEngine Elements is designed to look and feel native to your app.

Elements can be themed with custom styles and colors to more closely match the look and feel of its host application. Theme configuration is provided through the themeConfig property. If you are using emotion.js elsewhere and are experiencing collisions, you may pass the theme config wrapped in an objected keyed with [THEME_ID] (import THEME_ID from elements), this will cause elements to scope the theme to a unique key which will prevent collisions.

Example of scoping the theme

1
2
3
4
5
6
7
8
9
10
11
import { THEME_ID, Theme } from '@shipengine/elements';
const wrappedTheme = {
  [THEME_ID]: {
    palette: {
      primary: {
        main: '#ff0000',
      },
    },
    ...{} as Theme
  }
};

If a themeConfig object is not provided, elements will use our standard fallback theme. This theme is mostly shades of gray and uses Arial as it's default font. Without a custom theme, UI components like buttons can appear disabled or inactive.

Additionally, every variable within the themeConfig object is also optional, meaning you only need to include the variables that you wish to change from the default styling.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const elements = new ElementsSDK(getToken, {
  themeConfig: {
    palette: {...},
    components: {
      Typography: {...}
    },
    defaultFontFamily: "Roboto, sans-serif",
    borderRadius: {...},
    iconSize: {...},
  },
});

...

return (
  <ElementsProvider
    getToken={getToken}
    themeConfig={{
      palette: {...},
        components: {
          Typography: {...}
        }
        defaultFontFamily: "Roboto, sans-serif",
        borderRadius: {...},
        iconSize: {...},
      }}
    onError={handleError}
  >
    ...
  </ElementsProvider>
)