Dialtone recipes have been migrated to UI-Kits

Copy post link

Hello everyone, the Dialtone team here with an important update, We'll be deprecating all DtRecipe* components in Dialtone in favor of standalone UI-Kit packages. Additionally a few recipes have been upgraded from recipes to core dialtone components.

Each kit is individually published to npm and can be installed independently:

npm install @dialpad/callbarkit
npm install @dialpad/chatkit
npm install @dialpad/formkit
npm install @dialpad/navigationkit
npm install @dialpad/workflowkit

You may see the storybook for UI-Kits here: https://uikits.dialpad.com/

Here are the mappings from old components to new components. They are all functionally the same, however the deprecated DtRecipe components will no longer receieve updates.

Full migration mapping:

CSS classes also change: dt-recipe-* → dp-*

You will also need to import the CSS for each kit you install:

@import '@dialpad/callbarkit/vue3/css';
@import '@dialpad/chatkit/vue3/css';
@import '@dialpad/formkit/vue3/css';
@import '@dialpad/navigationkit/vue3/css';
@import '@dialpad/workflowkit/vue3/css';

Timeline:

• DtRecipe* components will remain available until the next major Dialtone release (Q2 2026), but will no longer receive updates
• Migrate before then to stay current with improvements and bug fixes

Automated migration script:

We provide a Node.js script that automatically updates your codebase — no manual find-and-replace needed. It handles:

• Import statement rewrites (splits @dialpad/dialtone/vue3 imports into the correct new packages)
• PascalCase component name replacements in JS/TS/Vue script blocks
• Kebab-case component name replacements in Vue templates
• CSS class prefix changes (dt-recipe-* → dp-* / dt-*)

Download and run it with:

# Preview changes without writing files

curl -s <https://raw.githubusercontent.com/dialpad/dialtone/staging/scripts/migrate-recipes-to-uikits.mjs> | node - /path/to/your/project --dry-run

# Apply changes

curl -s <https://raw.githubusercontent.com/dialpad/dialtone/staging/scripts/migrate-recipes-to-uikits.mjs> | node - /path/to/your/project

After running, install the new packages your project needs and verify with your lint + test suite.

This migration has already been performed on the Dialpad (ubervoice) application.

What you need to do:

• npm install whichever ui-kits packages you need
• import the css for whichever packages you need
• Run the migration script to migrate your project to the new components
• Any changes you wish to make to DtRecipe* components in Dialtone should now be made in dialpad-uikits instead.

Thanks! Please let us know in #dialtone if you have any issues.