convertCASEpro
MODE

Kebab Case Converter – Convert Text to kebab-case Instantly

The ConvertCasePro kebab-case converter transforms any text — including camelCase, PascalCase, phrases with spaces, or underscore-separated words — into proper kebab-case. All letters become lowercase and word boundaries become hyphens.

INPUT_BUFFER
CHARS: 0WORDS: 0LINES: 0
OUTPUT_BUFFER // kebab-case
CHARS: 0WORDS: 0LINES: 0

What Is kebab-case?

kebab-case is a naming convention where words are joined with hyphens and all letters are lowercase. There are no spaces, no underscores, and no capital letters. Examples: • Input: Background Color • Output: background-color • Input: myComponentName • Output: my-component-name The name is a visual metaphor — words skewered together like pieces of meat on a kebab.

Where kebab-case Is Used

  • •CSS property names: Every multi-word CSS property is kebab-case by specification — background-color, font-size, border-radius, margin-top, text-transform. This is not a convention — it's defined by the CSS specification.
  • •HTML attributes: Custom data attributes and ARIA attributes use kebab-case — data-user-id, data-track-event, aria-label, aria-describedby.
  • •URL slugs: Web URLs use kebab-case for path segments. Google recommends hyphens over underscores because hyphens are treated as word separators, which improves keyword indexing.
  • •npm packages: All npm package names use kebab-case — react-router, express, @tanstack/react-query. Package names cannot contain uppercase letters.
  • •CLI flags: Command-line tools use kebab-case for options — --dry-run, --output-file, --max-retries, --no-cache.

How to Convert Text to kebab-case

  • •Paste or type your text into the input box.
  • •Click the kebab-case button.
  • •Your text is instantly converted — spaces become hyphens, capitals become lowercase.
  • •Click Copy to copy to clipboard, or Download to save as a text file.
  • •Works with text that has spaces, underscores, camelCase, or any other separator format.

kebab-case in Modern Web Frameworks

Vue.js components can be referenced as <my-component> in HTML templates. Web Components require kebab-case by specification — custom element names must contain a hyphen. Tailwind CSS classes are all kebab-case: bg-blue-500, text-xl, rounded-full. kebab-case is also the convention for CSS custom property names: --primary-color, --font-size-base, --border-radius-lg.

Frequently Asked Questions

How does the converter handle spaces and underscores?
Spaces, underscores, and other separators are stripped and replaced with hyphens. 'Hello World' and 'hello_world' both become 'hello-world'.
Can I convert camelCase to kebab-case?
Yes. Paste myComponentName and click kebab-case — you get my-component-name. The converter splits on camelCase word boundaries.
Why is kebab-case used for URLs instead of snake_case?
Google treats hyphens as word separators in URLs, which helps with keyword indexing. Underscores are treated as joining characters — so 'my-page' is indexed as two words, while 'my_page' is indexed as one compound word.
Can I use kebab-case for variable names in code?
No. In most programming languages, hyphens are subtraction operators. Writing my-variable in JavaScript or Python causes a syntax error. Use snake_case for variable names instead.

More tools you may need

[ Browse all tools ]