kebab-case Converter
Convert any text to kebab-case and all programming naming conventions.
Enter text above and click Convert.
How to Use This Tool
- Paste or type the text you want to reformat into the kebab-case Case Converter input area at the top of the page.
- The kebab-case Case Converter instantly transforms your text into the target case style as you type, with no button click required.
- Copy the converted result to your clipboard with one click and paste it wherever you need it.
Common Use Cases
- CSS class names: BEM methodology uses kebab-case (.card__title--large); convert design system tokens from camelCase to kebab-case for stylesheet exports.
- URL slugs: Convert article titles like "How to Use Docker Compose" into "how-to-use-docker-compose" for SEO-friendly, lowercase URL paths.
- Vue.js components: Vue templates expect kebab-case in HTML (
) even though the JS file uses PascalCase; convert when wiring up templates.
Frequently Asked Questions
Why do URLs use kebab-case instead of underscores?
Google's SEO guide recommends hyphens because crawlers treat hyphens as word separators but underscores as joiners. So /user-profile is parsed as two terms while /user_profile is parsed as one, hurting keyword matching for long-tail queries.
How do I convert camelCase like "backgroundColor" to kebab-case?
Insert a hyphen before each uppercase letter and lowercase the result: background-color. This matches the CSS property naming used in stylesheets, so React's style={{backgroundColor}} maps to background-color in compiled CSS.
Are hyphens allowed in HTML custom element names?
Yes, the Web Components spec actually requires at least one hyphen (e.g., ) to distinguish custom elements from native HTML tags. Names like "mybutton" without a hyphen are invalid custom element identifiers.