kebab-case Converter
Convert any string to kebab-case — lowercase words joined by hyphens. The standard for CSS, HTML, and URLs.
0 characters
0 characters
About kebab-case Converter
kebab-case (also called dash-case or lisp-case) joins lowercase words with hyphens. It's the convention for CSS class names, HTML attributes, URL paths, and CLI flag names. This converter accepts input from any common shape and emits clean kebab-case.
When to use it
- Generating CSS class names from component labels
- Producing URL-safe paths from page titles (without the accent stripping that slugify does)
- Creating HTML data-attribute names from JavaScript property names
- Building CLI flag names from human-readable settings
How it works
The input is split into words by recognising whitespace, hyphens, underscores, dots, slashes, camelCase transitions, acronym boundaries, and letter-to-digit boundaries. Each word is lowercased and the words are joined with a hyphen.
Examples
User Profile Page
user-profile-page
camelCase → kebab-case
createdAt
created-at
Frequently asked questions
- How is kebab-case different from a slug?
- kebab-case keeps Unicode letters as-is. Slugify additionally strips accents (é → e) and removes any non-ASCII characters. Use slugify when the output must be safe in a URL; kebab-case when you only need words joined by hyphens.
- Why is it called kebab-case?
- The hyphens look like skewers running through letter-shaped pieces of meat. The name is informal but widely understood in developer communities.
- What about CSS custom properties?
- CSS custom properties (--my-variable) use kebab-case with a -- prefix. This converter produces the part after the prefix; add -- manually.