DHL User Interface Library

Browse componentsHow to use?

Build sustainable solutions with our agnostic web componentsFor developers

Design consistent, on-brand DHL experiencesFor designers

Help shape the future of DHL's design systemContribution

What's newVersion 2.34.2 (2026-07-30)

See changelog

What's new

Version 2.34.2 (2026-07-30)

Features

• dhl-button: apply soft hover transition to all variants
• dhl-modal: new fixedHeader and fixedFooter props

Version 2.34.1 (2026-07-27)

Features

• dhl-input-addon: support default selected option via value

Bug fixes

• dhl-dropdown: emit dhlChange when clear button is clicked
• dhl-input-field: fixed label offset when initial value was set
• dhl-popover: fixed setAttribute error
• dhl-selection-control-group: fixed getAttribute error
• stencil-library: prevent errors on getAttribute & setAttribute

Version 2.34.0 (2026-07-09)

Breaking changes

• dhl-autocomplete-field: icon & image option keys replaced by leftAssetSrc, leftAssetType &
• dhl-table: Removed variant & borderColor props, DHL_TABLE.VARIANT & DHL_TABLE.BORDER_COLOR

Features

• dhl-accordion: new design for accordion
• dhl-alert: added support for html markup
• dhl-autocomplete-field: fixedOptions prop added, fixed options implementation; icon & image option keys replaced by leftAssetSrc, leftAssetType & rightAssetSrc, rightAssetType
• stencil-library: new component created: dhl-breadcrumb navigation
• dhl-button: improved focus in disabled state

Bug fixes

• dhl-accordion: fixed soloExpandable prop
• dhl-alert: added default false to button-only prop
• dhl-carousel: walk shadow boundaries for focus-leave detection
• dhl-country-select: clear image when value is set to default state
• dhl-country-select: clear resets state, onChange returns code

See changelog

Built for modernDHL product teams

We've kept our tech stack minimal, so you can focus on building.

70+Components

44+Teams using DUIL

43.7kFigma instances

Accessibility
out of the box.Every component ships WCAG 2.1 AA compliant, with full keyboard navigation and ARIA support built in, so your team can build inclusive experiences without extra effort.

Keyboard navigationNavigate every element without a mouse

Focus managementGuide users to the right interactive element

Screen reader supportEnsure content is announced clearly

a11y checklist

Need a token?Don't be shy and requestRequest token

Address verification
required

We were unable to verify the delivery address for your shipment. Please review the recipient details and confirm the correct address to ensure successful delivery.

CancelConfirm

Route

From

To

Notify recipient by SMSSend delivery updates to the recipient's mobile number

70+ building block
componentsA comprehensive UI library built for DHL digital products. Assemble consistent, accessible experiences using ready-to-use components aligned with DHL brand standards.

ActionsButtons, links, and interactive controls

NavigationMenus, tabs, breadcrumbs, and wayfinding

InputsText fields, dropdowns, checkboxes, and pickers

System feedbackAlerts, toasts, modals, and notifications

ContentCards, tables, lists, and data display

Component overview

Community & toolsConnect, contribute, and collaborate with the DHL Design System team.

Stay connectedTeams channel

Report bugs & request featuresGitHub

Design assets & componentsFigma library

Interactive component docsStorybook