{"templateId":"markdown","versions":[{"version":"shipstation-v2","label":"ShipStation V2 API","link":"/apis/shipstation-v2/docs/elements/elements-guide","default":true,"active":false,"folderId":"58c9a61d"},{"version":"shipengine","label":"ShipStation API (formerly ShipEngine)","link":"/apis/shipengine/docs/elements/elements-guide","default":false,"active":true,"folderId":"58c9a61d"},{"version":"shipstation-v1","label":"ShipStation V1 API","link":"/apis/shipstation-v1/docs/elements/elements-guide","default":false,"active":false,"folderId":"58c9a61d"}],"sharedDataIds":{"sidebar":"sidebar-apis/@shipengine/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"ShipEngine Elements","keywords":"shipping, labels, shipstation, documentation, api","siteUrl":"https://docs.shipstation.com","lang":"en-US","llmstxt":{"hide":false,"title":"ShipStation API LLM Docs","description":"Find links and references to all markdown documentation for use with LLMs","excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"shipengine-elements","__idx":0},"children":["ShipEngine Elements"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["ShipEngine Elements is a collection of prebuilt UI components for building your shipping flow."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Elements features include:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Responsive design to fit seamlessly on any screen size"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Custom styling rules so you can match the look and feel of your site"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Integrations with the leading global shipping carriers like USPS, UPS, and DHL Express"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"available-elements","__idx":1},"children":["Available Elements"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"_","__idx":2},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/apis/shipengine/docs/elements/onboarding/onboarding"},"children":["Onboarding"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Onboard ShipEngine Carriers to a new ShipEngine seller account."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"_-1","__idx":3},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/apis/shipengine/docs/elements/label-workflow/label-workflow"},"children":["Label Workflow"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure a new or existing shipment, purchase shipping labels, and view or void labels on a shipment."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"_-2","__idx":4},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/apis/shipengine/docs/elements/account-settings/account-settings"},"children":["Account Settings"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Manage all of your ShipEngine account details such as carrier accounts, warehouses, payment methods, and more."]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["NOTE:"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"customize-the-appearance-of-elements","__idx":5},"children":["Customize the appearance of Elements"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["ShipEngine Elements is designed to look and feel native to your app."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example of scoping the theme"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import { THEME_ID, Theme } from '@shipengine/elements';\nconst wrappedTheme = {\n  [THEME_ID]: {\n    palette: {\n      primary: {\n        main: '#ff0000',\n      },\n    },\n    ...{} as Theme\n  }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Additionally, every variable within the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["themeConfig"]}," object is also optional, meaning you only need to include the variables that you wish to change from the default styling."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"const elements = new ElementsSDK(getToken, {\n  themeConfig: {\n    palette: {...},\n    components: {\n      Typography: {...}\n    },\n    defaultFontFamily: \"Roboto, sans-serif\",\n    borderRadius: {...},\n    iconSize: {...},\n  },\n});\n\n...\n\nreturn (\n  <ElementsProvider\n    getToken={getToken}\n    themeConfig={{\n      palette: {...},\n        components: {\n          Typography: {...}\n        }\n        defaultFontFamily: \"Roboto, sans-serif\",\n        borderRadius: {...},\n        iconSize: {...},\n      }}\n    onError={handleError}\n  >\n    ...\n  </ElementsProvider>\n)\n\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["NOTE:"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For additional guidance and code examples, we have provided the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://elements-theme-creator.shipengine.com/"},"children":["Elements Theme Creator"]}," tool. This tool allows you to easily visualize custom styles and generate a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["themeConfig"]}," object."]}]}]},"headings":[{"value":"ShipEngine Elements","id":"shipengine-elements","depth":1},{"value":"Available Elements","id":"available-elements","depth":2},{"value":"","id":"_","depth":3},{"value":"","id":"_-1","depth":3},{"value":"","id":"_-2","depth":3},{"value":"Customize the appearance of Elements","id":"customize-the-appearance-of-elements","depth":2}],"frontmatter":{"seo":{"title":"ShipEngine Elements"}},"lastModified":"2026-04-08T10:47:45.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/apis/shipengine/docs/elements/elements-guide","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}