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 3.1.0 (2026-09-18)

See changelog

What's new

Version 3.1.0 (2026-09-18)

Features

• dhl-select: support for grouped items rendering

Bug fixes

• dhl-input-field: keep label and value clear of payment mark
• dhl-modal: fixed issue with esc key in modal

Version 3.0.5-alpha.4 (2026-09-17)

Features

• dhl-upload: add CTA disabled props, fix stuck file status

Bug fixes

• dhl-date: keep range picker focus in the navigated month
• dhl-icon: re-read src after load, never draw a src-less img
• stencil-library: name icon-only buttons, unnest upload drop zone
• tokens: remove redundant export

Version 3.0.5-alpha.3 (2026-09-16)

Features

• dhl-button: add loading and active props
• dhl-date: add DD MMM YYYY textual month date format
• dhl-input-field: loading state inside the component
• dhl-loader: add ring-steps type for step indicator
• dhl-loader: new sm size and new variants
• icons: add payment method marks and wire them into forms
• tokens: add Hebrew font family and fix language overrides
• tokens: add Hebrew font family and fix language overrides

Bug fixes

• dhl-action-bar: align height and spacing with design
• dhl-autocomplete-field: open the list on input, not keydown
• dhl-autocomplete-field: open the list on input, not keydown
• dhl-card: expose the menu button as a disclosure
• dhl-date: expose month and year context to screen readers
• dhl-dropdown: anchor option list to viewport to escape clipping
• dhl-input-field: do not announce validation present at mount
• dhl-list: fixed items being hidden in namespaced builds
• dhl-modal: expose dialog name and move focus on open
• dhl-panel: button covering full width
• dhl-panel: let header grow for multi-line heading slot
• dhl-selection-option: decouple hover from keyboard focus state
• dhl-select: stop helper text clicks from opening the option list
• dhl-toggle-control: fixed issue with truncation
• stencil-library: generate components: interface, custom events & HTML element type aliases for usage without namespace prefixing

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