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.0.4 (2026-09-01)

See changelog

What's new

Version 3.0.4 (2026-09-01)

Bug fixes

• dhl-accordion: fixed issue with soloExpandable prop
• dhl-input-field: show validation in a natively validating form
• dhl-table: expose the grid description and a single tab stop
• dhl-table: toggle row selection on row checkbox click

Version 3.0.3 (2026-08-25)

Features

• dhl-date: add format prop for predefined date formats
• dhl-table: emit dhlTableSortChange, add manualSort prop
• tokens: Delivery Arabic & Delivery Vietnamese fonts added, introduced dedicated font-family tokens: --dui-font-family-arabic & --dui-font-family-vietnamese

Bug fixes

• dhl-accordion: fixed soloExpandable prop behavior
• dhl-alert: fixed displaying link on initial render
• dhl-country-select: fixed issue with option selection
• dhl-dropdown: expose combobox semantics to screen readers
• dhl-dropdown: fixed issues with label and placeholder
• dhl-panel: dataId exposed in DOM
• dhl-select: emit dhlChange when clear button is clicked
• dhl-tabs: fixed isFullWidth prop

Version 3.0.1 (2026-08-11)

Other changes

• stencil-library: solution for coexistence of multiple DUIL versions in applications with microFE

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