Skip to main content

DIAL UI Kit

The DIAL UI Kit (@epam/ai-dial-ui-kit) is the React design system of the DIAL web interfaces. It provides the buttons, fields, dropdowns, popups, grids, and other controls that DIAL Chat and DIAL Admin render. This reference is for frontend developers who build a React interface with it. It covers installation, entry points, component generations, styling, theming, and the MCP server for coding agents.

Version scope​

Everything below is checked against UI Kit 0.16.0: its package.json, src/index.ts, src/styles/theme.scss, the README, and src/mcp/README.md. The released DIAL web interfaces ship 0.15.x; see Versions in DIAL releases. For what changed in 0.16.0, see UI Kit 0.16.0.

Install​

npm install @epam/ai-dial-ui-kit@0.16.0 react@19.2.5 react-dom@19.2.5
Peer dependencyRangeRequired
react, react-dom^19.2.5Yes
@uiw/react-md-editor^4.1.0Only for the Markdown editor (LazyMarkdownEditor)
@modelcontextprotocol/sdk^1.29.0Only for the MCP server

The kit installs everything else it renders with as dependencies, among them Floating UI, Tabler icons, and AG Grid (ag-grid-community and ag-grid-react ^35.2.1). In 0.15.x, monaco-editor and @monaco-editor/react were also optional peers; 0.16.0 drops them.

Entry points​

Import pathContents
@epam/ai-dial-ui-kitEvery component, hook, type, constant, and utility, as ES module and CommonJS builds
@epam/ai-dial-ui-kit/gridThe 2.0 Grid and its renderers, constants, and helpers. It pulls in AG Grid, as importing Grid from the root does.
@epam/ai-dial-ui-kit/editorsLazyMarkdownEditor, EditorThemes, and the MarkdownEditorProps type
@epam/ai-dial-ui-kit/styles.cssThe stylesheet that every component needs

The root entry is tree-shakable. Import the components by name rather than with import * as, so the bundle keeps only what the application uses.

Component generations​

The kit ships two generations of components:

  • 2.0 is the current design system. Its components are exported without a prefix, for example Button, Input, Select, and Popup.
  • 1.0 is the legacy Dial* set, for example DialPrimaryButton and DialInput. Most 1.0 components have a 2.0 replacement, and 0.16.0 removed 34 unused ones.

Use the 2.0 component for a control whenever one exists, and do not mix generations for the same control on one screen.

import { Button, ButtonVariant } from '@epam/ai-dial-ui-kit';
import '@epam/ai-dial-ui-kit/styles.css';

export const SaveButton = ({ onSave }: { onSave: () => void }) => (
  <Button label="Save" variant={ButtonVariant.Primary} onClick={onSave} />
);

IconButton, DialIconButton, and DialFabButton render no text. Give each an aria-label; a string tooltipProps.tooltip is used as the name when aria-label is missing, but tooltips are suppressed on mobile.

Stylesheet​

Import @epam/ai-dial-ui-kit/styles.css once, in the application entry point or root layout. Libraries built on the kit, such as the File Manager, load their own stylesheet after it.

Since 0.16.0 the stylesheet is built with Tailwind CSS v4, and its utilities sit in the kit's ui cascade layers. A host's unlayered CSS therefore always wins over them, and hover: styles apply only on devices that can hover. The stylesheet targets Safari 16.4, Chrome 111, Firefox 128, and later.

The Markdown editor needs two more stylesheets. Import them once, globally:

import '@uiw/react-markdown-preview/markdown.css';
import '@uiw/react-md-editor/markdown-editor.css';

Theming​

The kit reads its colors, corner radii, and overlay stacking from CSS custom properties. Set them on :root to restyle every component. src/styles/theme.scss lists every variable with its default.

:root {
  --bg-layer-base: #0c101d;
  --text-primary: #eef1f7;
  --radius-control: 12px;
  --z-overlay: 1000;
}

DIAL Chat sets the color variables from its theme; see Themes configuration for the tokens.

VariableDefaultControls
--radius-control9999pxThe corner radius of Button at the standard and large sizes
--radius-control-small9999pxThe corner radius of Button at ElementSize.Small
--radius-control-icon9999pxThe corner radius of IconButton and ToggleIconButton at any size
--z-overlay52The z-index of popups. Dropdowns, selects, and the calendar use one step more, interactive tooltips two, and tooltips three.

Overlays render in a portal at the end of <body>, so a variable set on an inner wrapper never reaches them. Set overlay variables on :root, or on the class that a ThemeScope re-applies to its portalled overlays. A rounded-* utility passed to a single control through className still overrides the radius variables.

Public class names​

Every 2.0 component puts a stable class from the exported DIAL_KIT_CLASS record on the element it draws, for example dial-kit-menuitem on each dropdown row. Use these classes to restyle parts that props do not reach, instead of hashed class names or DOM order. They carry no declarations of their own, so a host rule needs no !important.

.dial-kit-dropdown-list {
  padding-block: 0;
}

.dial-kit-menuitem {
  border-radius: 8px;
}

Renaming one of these classes, or moving it to another element, is a breaking change that ships with a migration guide.

Next.js​

Import @epam/ai-dial-ui-kit/styles.css in the root layout (app/layout.tsx), and render the kit's components from client components ("use client"). The Markdown editor is exported only as LazyMarkdownEditor, a lazy loader that keeps the editor out of server-side rendering.

MCP server for coding agents​

The package includes an MCP server that lets coding agents look up the kit's components, props, examples, hooks, types, typography classes, and theme tokens. The server is dist/mcp-server.cjs, also exposed as the ai-dial-ui-kit-mcp binary, and reads a component manifest generated at build time. It needs the optional @modelcontextprotocol/sdk peer:

npm install @modelcontextprotocol/sdk@1.29.0

Register it as a stdio server in the agent's MCP configuration. For Claude Code, add it to .mcp.json:

{
  "mcpServers": {
    "ai-dial-ui-kit": {
      "type": "stdio",
      "command": "node",
      "args": ["./node_modules/@epam/ai-dial-ui-kit/dist/mcp-server.cjs"]
    }
  }
}
AgentConfiguration fileRoot field
Claude Code.mcp.jsonmcpServers
Cursor.cursor/mcp.jsonmcpServers
GitHub Copilot.vscode/mcp.jsonservers

The server has three tools:

  • searchEntity(entity, query?) and getEntityDetails(entity, name?) look up the kit's entities. entity is one of component, hook, util, type, constant, typography, or theming. Component search ranks 2.0 components first and names the 2.0 replacement of each 1.0 component.
  • getMigrationGuides(fromVersion, toVersion) returns the changelog entries and migration guides for the breaking changes between two kit versions.

Further reading​