How to use the Kebab Case Converter
Convert to kebab-case in three steps:
1
Paste your phrases
Enter one phrase per line in any format — spaces, underscores, camelCase, PascalCase, or mixed.
2
Click Convert
Press 'Convert to kebab-case'. All characters are lowercased and all word boundaries are replaced with hyphens.
3
Copy or download
Copy the kebab-case output to clipboard or download as a .txt file for use in your project.
When to use this tool
Use kebab-case for web and CSS naming conventions:
- →Generating CSS class names from component or element descriptions
- →Creating URL slugs from page titles, blog post headings, or product names
- →Converting variable names to HTML data attribute names (data-user-id, data-item-count)
- →Naming files and directories in web projects following kebab-case convention
- →Converting component names to their kebab-case custom HTML element equivalents
- →Batch-converting a list of route names or API endpoint paths to kebab-case
Frequently asked questions
Q:What is the difference between kebab-case and snake_case?
kebab-case uses hyphens as word separators (my-component-name) and is standard for CSS class names, HTML attributes, URL slugs, and web project file names. snake_case uses underscores (my_component_name) and is standard for Python, databases, and environment variables. Both are lowercase, but the separator character differs and each has distinct domain conventions.
Q:Is kebab-case the same as slug case?
Yes — kebab-case and slug case refer to the same format. URL slugs (my-article-title, buy-blue-shoes) are written in kebab-case. If you need to generate a slug from a page title or heading, this converter will produce the correct output.
Q:Can I use this to generate CSS BEM class names?
You can use it to convert element and modifier names to kebab-case segments. For full BEM class name assembly (block__element--modifier), you would need to combine the kebab-cased segments with the BEM double-underscore and double-hyphen separators manually, as BEM structure is a layout decision rather than a simple case transformation.
Q:Does it correctly handle camelCase and PascalCase input?
Yes — the converter detects word boundaries in camelCase and PascalCase by identifying lowercase-to-uppercase transitions. 'getUserById' becomes 'get-user-by-id' and 'MyComponent' becomes 'my-component' correctly.
Q:Can I convert multiple phrases at once?
Yes — enter one phrase per line. All lines are converted in a single click, making it efficient to generate a large batch of CSS class names, file names, or URL slugs from a list of plain-English descriptions.
Q:Are hyphens in the original input handled correctly?
Yes — existing hyphens in the input are treated as word separators, just like spaces and underscores. Multiple consecutive hyphens are collapsed into a single hyphen in the output, and leading or trailing hyphens are trimmed.