Removal of Dialtone Recipes

TLDR #

• All DtRecipe* components have been removed from @dialpad/dialtone.
• They have been replaced by standalone UI-Kit packages or promoted to core Dialtone components.
• If you haven't migrated yet, refer to the migration mapping and automated script below — originally published as part of the Migrating Recipes to UI Kits deprecation guide.
• Any DtRecipe* imports remaining in your codebase will break after upgrading to this major version.

New Packages #

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

Storybook for UI-Kits: https://uikits.dialpad.com/

Migration Mapping #

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

CSS Imports #

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 were deprecated in a previous release and have now been fully removed in this major version.
• If you have not yet migrated, you must do so before upgrading.

Automated Migration Script #

The Node.js script 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:

# 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.

What You Need to Do #

1. npm install whichever UI Kit packages you need
2. Import the CSS for whichever packages you need
3. Run the migration script to migrate your project to the new components
4. Any changes you wish to make to DtRecipe* components should now be made in dialpad-uikits instead.