Convert camelCase to kebab-case
Convert camelCase to kebab-case for CSS classes, URLs, and file names. Inserts hyphens at word boundaries. Free tool.
Example: myComponentName → my-component-name
0 words, 0 chars
Text
Programming
Other
aa
lowercaseoutput
About This Conversion
Kebab-case (also called hyphen-case or dash-case) uses hyphens to separate words and is entirely lowercase. It's the standard for CSS class names, HTML attributes, URL slugs, and file names. Converting from camelCase inserts hyphens at uppercase boundaries and lowercases everything. This is commonly needed when generating CSS class names from JavaScript component names, creating URL-friendly slugs, or naming files in a project that follows kebab-case convention.
Frequently Asked Questions
When should I use kebab-case?
CSS classes (.my-component), HTML custom attributes (data-user-id), URL slugs (/blog/my-article), file names (my-component.tsx), and CLI arguments (--output-dir).
What is the difference between kebab-case and snake_case?
Kebab-case uses hyphens (my-variable-name), snake_case uses underscores (my_variable_name). Kebab-case is preferred for CSS/HTML/URLs; snake_case for Python/databases/env vars.
Can I convert CSS class names to JavaScript camelCase?
Use the reverse conversion (kebab to camelCase) for that. CSS Modules and styled-components often require this when accessing CSS classes as JavaScript object properties.