Codemod API

Codemod API Reference

Complete API for modern-cmdk — automated migration from cmdk to modern-cmdk.

---

Installation

pnpm add -D modern-cmdk

Or run directly:

npx modern-cmdk --help

---

CLI Usage

command-codemod [options] [files...]

Options

Flag	Description	Default
--transform, -t	Transform(s) to apply (comma-separated or all)	all
--dry-run	Preview changes without writing	false
--extensions	File extensions to process	tsx,ts,jsx,js
--ignore	Glob patterns to ignore	node_modules,dist,.next

Examples

# Run all transforms on src/ directory
command-codemod src/

# Dry run to preview changes
command-codemod --dry-run src/

# Run specific transforms
command-codemod -t import-rewrite,data-attrs src/

# Process specific files
command-codemod src/components/CommandPalette.tsx

---

Transforms

import-rewrite

Rewrites cmdk imports to modern-cmdk/react.

Before:

import { Command } from 'cmdk';
import type { CommandProps } from 'cmdk';
const Cmd = await import('cmdk');

After:

import { Command } from 'modern-cmdk/react';
import type { CommandProps } from 'modern-cmdk/react';
const Cmd = await import('modern-cmdk/react');

Handles:

• Named imports and re-exports
• Dynamic import() expressions
• require() calls
• Type-only imports
• Namespace imports (import * as cmdk from 'cmdk')

data-attrs

Rewrites [cmdk-*] data attributes to [data-command-*].

Before:

<div cmdk-root="">
<div cmdk-item="" cmdk-item-active="">

[cmdk-root] { background: black; }
[cmdk-item][cmdk-item-active] { color: white; }

After:

<div data-command-root="">
<div data-command-item="" data-command-item-active="">

[data-command-root] { background: black; }
[data-command-item][data-command-item-active] { color: white; }

Handles:

• JSX attributes
• CSS selectors in .css, .scss, .module.css files
• CSS-in-JS template literals (styled-components, emotion)
• querySelector / querySelectorAll string arguments

forward-ref

Removes React.forwardRef() wrappers and merges ref into the props parameter. React 19 accepts ref as a regular prop.

Before:

const MyCommand = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
  return <Command ref={ref} {...props} />;
});

After:

const MyCommand = ({ ref, ...props }: Props & { ref?: React.Ref<HTMLDivElement> }) => {
  return <Command ref={ref} {...props} />;
};

should-filter

Renames the shouldFilter prop to filter.

Before:

<Command shouldFilter={false}>

After:

<Command filter={false}>

---

Programmatic API

Use transforms programmatically with jscodeshift:

import { applyTransform } from 'jscodeshift/core';
import importRewrite from 'modern-cmdk/transforms/import-rewrite';

const result = applyTransform(
  importRewrite,
  {},
  { source: fileContents, path: filePath },
);

---

Migration Checklist

After running codemods, verify manually:

1. Custom CSS -- Check any hand-written selectors targeting [cmdk-*]
2. Tests -- Update test selectors and assertions
3. Snapshots -- Regenerate snapshot tests
4. Type imports -- Verify type names haven't changed in your usage
5. Runtime -- Test the app end-to-end