Kebab Case Converter
CSS class names, URL slugs, and file names all benefit from the clean readability of kebab-case. Our free Kebab Case Converter transforms any text with spaces, underscores, or camelCase formatting into lowercase hyphen-separated words in real time. Front-end developers spend hours renaming classes when adopting BEM or other CSS methodologies, and this tool eliminates that manual work. Need to go in the other direction? The Camel Case Converter turns kebab-case back into JavaScript-friendly identifiers. For crafting optimized URL paths, pair this tool with the Slug Generator which adds accent stripping and length limits. All processing happens locally in your browser, so your text never leaves your machine. Paste your input, see the kebab-case result instantly, and copy it with a single click. The converter handles edge cases like consecutive separators and mixed separator types gracefully.
your-output-appears-hereHow to Use This Tool
- Type or paste your text into the input area above.
- The kebab-case output appears instantly as you type.
- Click the Copy button to copy the result to your clipboard.
- Click Clear to reset the input and start over.
Examples
| Input | Output |
|---|---|
| hello world | hello-world |
| backgroundColor | background-color |
| max_retry_count | max-retry-count |
| My Component Name | my-component-name |
What This Tool Is Useful For
- Naming CSS classes and custom properties following BEM or other conventions.
- Creating URL-friendly paths and slugs for web applications and blog posts.
- Naming files and folders in a consistent, cross-platform format without spaces.
- Generating npm package names that follow the kebab-case naming requirement.
- Creating readable Git branch names like feature/add-user-authentication.
Frequently Asked Questions
- What is kebab-case?
- kebab-case is a naming convention where all letters are lowercase and words are separated by hyphens. For example, "my-component-name" and "background-color" are kebab-case. It is called kebab-case because the words skewered by hyphens resemble ingredients on a kebab stick.
- Where is kebab-case used most often?
- kebab-case is the standard for CSS class names and custom properties, HTML data attributes, URL paths and slugs, npm package names, and Git branch names. BEM methodology for CSS also uses kebab-case as the base for its naming pattern. Most web frameworks generate kebab-case URLs from route definitions.
- How does the tool handle camelCase input?
- The converter detects camelCase word boundaries by finding transitions from a lowercase letter to an uppercase letter. It inserts a hyphen at each boundary and converts everything to lowercase. For example, "backgroundColor" becomes "background-color" and "getUserById" becomes "get-user-by-id".
- Is kebab-case the same as a URL slug?
- They are closely related but not identical. A URL slug is a kebab-case string used specifically in URLs, and it may also strip special characters, accents, and stop words for SEO purposes. kebab-case is the broader naming convention used in CSS, file names, and other contexts. Our Slug Generator offers additional URL-specific features.
- Can I use kebab-case for JavaScript variable names?
- No, JavaScript does not allow hyphens in variable names because the hyphen is interpreted as a minus operator. You would need to use bracket notation (object["my-key"]) to access kebab-case keys in JavaScript objects. For JavaScript identifiers, use camelCase instead.
More Text Tools
- All Text Tools — browse the full collection of text utilities
- Camel Case Converter — convert text to camelCase for JavaScript and TypeScript
- Snake Case Converter — convert text to snake_case for Python and databases
- Slug Generator — create URL-friendly slugs with accent stripping
- Yantrasagaram homepage
Related Tools
Word Counter
Count words, sentences, and paragraphs in your text instantly.
Character Counter
Count characters with and without spaces for Twitter, SMS, and more.
Case Converter
Convert text between uppercase, lowercase, title case, and sentence case.
Slug Generator
Generate clean, URL-friendly slugs from any text string instantly.