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.

Purchase Label

Configure a new shipment from a sales order and buy labels or create a one-off label.

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 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 (
  <AlchemyProvider
    getToken={getToken}
    themeConfig={{
      palette: {...},
        components: {
          Typography: {...}
        }
        defaultFontFamily: "Roboto, sans-serif",
        borderRadius: {...},
        iconSize: {...},
      }}
    onError={handleError}
  >
    ...
  </AlchemyProvider>
)