Skip to main content

DIAL UI Kit 0.16.0

UI Kit 0.16.0 moves the stylesheet to Tailwind CSS v4 and removes the legacy file manager and most unused 1.0 components. It adds 2.0 components for analytics, sign-in, and error screens. This page summarizes the release for frontend developers who plan an upgrade. There are no patch releases.

0.16.0​

Released 2026-11-04. Release notes

Breaking

  • styles.css is built with Tailwind CSS v4. Variant utilities move into @layer ui, so a host's unlayered CSS always wins, and hover: applies only on devices that can hover. The v4 preflight gives input, select, and textarea a transparent background and no radius. The stylesheet targets Safari 16.4, Chrome 111, Firefox 128, and later. See the migration guide.
  • The legacy DialFileManager is removed, with DialFoldersTree, DialDestinationFolderPopup, its provider, hooks, enums, column constants, and the ./file-manager subpath. Import them from @epam/ai-dial-react-file-manager. See the migration guide.
  • 34 unused 1.0 components and DialSchemaRenderer are removed in favor of their 2.0 counterparts, and monaco-editor and @monaco-editor/react are no longer optional peers. See the migration guide.
  • The legacy DialAnalytics* components and the 1.0 DialSteps are removed. Use the 2.0 Analytics* components, a red filled Badge, and Steps. See the migration guide.
  • CaptionText and ErrorText (2.0) no longer render role="alert". Fields link their caption and error through aria-describedby and set aria-invalid, so tests that query getByRole('alert') need another query. See the migration guide.
  • The empty state of Grid (2.0) uses the shared NoDataContent card, with new default texts and filteredEmptyState*, emptyStateAction, and emptyStateLive props. The no-rows message is no longer announced by default. See the migration guide.

Added

  • 2.0 components: AnalyticsCard, AnalyticsBar, AnalyticsBarGroup, and AnalyticsHistogram for DIAL Admin analytics; Steps and LabelledText, renames of the 1.0 components.
  • 2.0 screens: StateScreen for a state the app cannot work past, ErrorBoundary for render errors, and LoginScreen with one button per identity provider. Spinner gains fullScreen and focusRef.
  • 2.0 components: FormSection, SelectedEntityCard, LiveRegion, ToggleChip, and ResizeHandle. EntityIdentity gains showType.
  • Dropdown (2.0): searchable, maxVisibleItems, overlayRole with overlayAriaLabel and overlayAriaLabelledBy, and returnFocus={false}.
  • ButtonDropdown and DropdownItem (2.0): controlled open, defaultOpen, and onOpenChange, controlled submenus, iconAfter={null}, and search and placement options through dropdownProps.
  • Calendar (2.0): an hour and minute picker in time mode, showTimezone on the datetime time field, and renderTimeField and pickerButtonClassName.
  • Accessibility props: ariaDescribedBy on Calendar and MarkdownEditor, invalid on MarkdownEditor, announce on StateScreen, closeAriaLabel on Notification, and Step.disabled on Steps.
  • Grid (2.0): appearance={GridAppearance.Chat} for the Chat table design, and colorScheme={GridColorScheme.Dark} for dark native controls.
  • NoDataContent (2.0) follows the Patterns 2.0 empty state with an illustration and an action slot. Select uses it for its no-options state.
  • On mobile, the footer buttons of Popup and ConfirmationPopup (2.0) split the row evenly.
  • Tabs: TabItem.status for error and warning icons. Tag: TagAppearance.Bordered. Avatar: color, with AVATAR_PALETTE, AvatarColor, and AvatarColorClasses exported. Breadcrumbs: BreadcrumbsSize.Tiny.
  • PasswordInput: isToggleHidden. TransferQueue: a determinate progress ring for a numeric percent. ProgressBar: ProgressBarRole.Meter. Notification: NotificationSurface.Neutral. FileName: icon.
  • The BottomSheet backdrop carries dial-kit-bottom-sheet-overlay (DIAL_KIT_CLASS.bottomSheetOverlay).
  • Monospace type steps dial-code-semi-text, dial-tiny-code-text, and dial-tiny-code-semi-text.

Fixed

  • Spinner (2.0) and DialLoader spin again, a regression since 0.13.0, and bg-info and bg-success fall back to their 2.0 shades.
  • Dropdown (2.0) passes axe: the ARIA attributes move onto the trigger, and the Select listbox no longer sits inside a menu.
  • Grid (2.0): hovered and selected rows lose the 0.15.0 outline, right-aligned and numeric cells align right, and rows that isRowSelectable rejects show a disabled selection control.
  • The title of Popup and ConfirmationPopup (2.0) uses Heading 2 (dial-h2-text).
  • shadow-xs, shadow-sm, shadow-md, and shadow-lg match the design scale; no token is renamed.
  • TransferQueue no longer counts failed items in its header, and asks for confirmation on close only while an item is running.
  • A collapsed FolderPath shows the full path in a tooltip.
  • Radio, Checkbox, and Switch show their hover state while the label is hovered.
  • Inputs draw the focus ring over the border, so an overflow container no longer clips it.
  • EntityIdentity draws its icon on the themable bg-entity-icon plate, and Avatar gains imageClassName.
  • StarterButton is transparent at rest and fills only on hover and press.
  • Primary solid buttons no longer show a sliver along each edge.
  • The MarkdownEditor toolbar wraps on narrow cards.
  • mergeClasses treats the dial-*-text type scale as one conflict group, so a caller's class replaces the component default.
  • The package no longer publishes .d.ts files for specs, tests, and mocks.

Other

  • Development dependencies are updated for security advisories. The runtime dependency ranges are unchanged.

Upgrade​

File Manager 0.3.x accepts only UI Kit 0.15, while File Manager 0.4.0 requires UI Kit 0.16. Upgrade the kit and the File Manager together, and re-check host CSS overrides against the new cascade layers.

Further reading​