Migration from cmdk

Migration from cmdk

Automated Migration

The modern-cmdk package provides 4 jscodeshift transforms:

pnpm add -D modern-cmdk

# Run all transforms
npx modern-cmdk import-rewrite "src/**/*.tsx"
npx modern-cmdk data-attrs "src/**/*.tsx"
npx modern-cmdk forward-ref "src/**/*.tsx"
npx modern-cmdk should-filter "src/**/*.tsx"

--dry-run

Preview changes without writing files:

npx modern-cmdk import-rewrite "src/**/*.tsx" --dry-run

Transform Details

1. import-rewrite

- import { Command } from 'cmdk'
+ import { Command } from 'modern-cmdk/react'

Handles: named imports, default imports, export * from, import(), require().

2. data-attrs

- <div cmdk-root="" />
+ <div data-command="" />

- querySelector('[cmdk-item]')
+ querySelector('[data-command-item]')

Full mapping: cmdk-root → data-command, cmdk-input → data-command-input, cmdk-list → data-command-list, cmdk-item → data-command-item, cmdk-group → data-command-group, cmdk-separator → data-command-separator, cmdk-empty → data-command-empty, cmdk-loading → data-command-loading.

CSS variables: --cmdk-list-height → --command-list-height.

3. forward-ref

- const MyComponent = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
-   return <div ref={ref} {...props} />;
- });
+ const MyComponent = ({ ref, ...props }: Props & { ref?: React.Ref<HTMLDivElement> }) => {
+   return <div ref={ref} {...props} />;
+ };

React 19 no longer needs forwardRef — ref is a normal prop.

4. should-filter

- <Command shouldFilter={false}>
+ <Command filter={false}>

shouldFilter={true} and bare shouldFilter are removed (filter defaults to true).

Breaking Changes

cmdk	modern-cmdk/react
import { Command } from 'cmdk'	import { Command } from 'modern-cmdk/react'
[cmdk-item]	[data-command-item]
--cmdk-list-height	--command-list-height
React.forwardRef	ref as prop
shouldFilter	filter
React 18	React 19+ required