CcConvertCase

Kebab Case Converter

Convert any text into kebab-case format. Words are lowercased and joined with hyphens — the standard for CSS properties, HTML attributes, and URL-friendly identifiers.

Characters: 0  |  Words: 0  |  Lines: 0

EXAMPLE

Input:   "Hello World" / "helloWorld" / "hello_world"

Output: hello-world

About Kebab Case

Kebab case uses hyphens to separate words, all in lowercase. The name comes from the skewered appearance of the hyphens between words. It's the dominant convention in CSS and HTML.

When should I use kebab-case?

  • CSS custom properties: --primary-color, --font-size-lg
  • CSS class names: .nav-bar, .hero-section
  • HTML data attributes: data-user-id
  • Vue component names: <my-component>
  • NPM package names: react-router-dom

Kebab-case vs slug-case?

They produce the same output. "Slug case" is the term used in the context of URLs; "kebab case" is used in the context of code. This tool works for both.