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
Onboard ShipEngine Carriers to a new ShipEngine seller account.
Configure a new or existing shipment, purchase shipping labels, and view or void labels on a shipment.
Manage all of your ShipEngine account details such as carrier accounts, warehouses, payment methods, and more.
NOTE:
These offerings are considered workflow Elements, as they encompass multiple Elements to create a seamless user experience. It is recommended to initialize a workflow Element as a whole; however, all nested Elements can be instantiated individually.
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
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.
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>
)
NOTE:
For additional guidance and code examples, we have provided the Elements Theme Creator tool. This tool allows you to easily visualize custom styles and generate a
themeConfigobject.