kebab-case writes a compound name in all lowercase with hyphens between words, like user-profile-id. It is the standard format for CSS class names, custom HTML attributes, and URL path slugs.

How does it convert camelCase input?

The converter detects the lowercase-to-uppercase transitions inside camelCase and PascalCase strings, splits at those points, lowercases everything, and joins with hyphens. So userProfileId becomes user-profile-id.

Why use kebab-case for URLs?

Hyphens are the recommended word separator in URLs because search engines treat them as word breaks, while underscores are not always split. A clean hyphenated slug is more readable and better for SEO.

What is the difference from snake_case?

Only the separator differs: kebab-case uses hyphens (user-id) and snake_case uses underscores (user_id). Hyphens are not valid in most language identifiers, so kebab-case is reserved for CSS, markup, and URLs.

Is my text sent anywhere?

No. The conversion runs locally in your browser. Your text is never uploaded or stored.

What is the kebab-case Converter?

Convert any phrase, camelCase, PascalCase, or snake_case string into kebab-case. Lowercases each word and joins them with hyphens — the standard format for CSS class names, HTML attributes, and URL slugs. It runs free in your browser on Gera Tools, with nothing uploaded.

kebab-case Converter

Name: kebab-case Converter
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

kebab-case is the conventional format for CSS class names, HTML attributes, and URL slugs: all lowercase, with hyphens between words. This converter turns any phrase or differently-cased identifier into clean kebab-case.

How it works

The input is normalised into a list of lowercase word tokens, then joined with hyphens. Word boundaries come from separators and from case transitions in camelCase or PascalCase input:

"User Profile Id" -> user-profile-id
"userProfileId"   -> user-profile-id
"user_profile_id" -> user-profile-id
"OpenAPISpec"     -> open-api-spec

Each word is lowercased before joining, producing a result that is safe to use directly as a class name or URL slug.

Where kebab-case is required — and where it is not

Understanding which context expects kebab-case saves you from naming bugs that are easy to miss:

Use kebab-case for:

CSS class names and IDs — .nav-bar, .user-avatar, #main-content. Hyphens are valid in CSS identifiers and are the dominant convention in vanilla CSS, BEM, and Tailwind utilities.
HTML custom data attributes — data-user-id, data-product-slug. The HTML spec normalises data-camelCase to all-lowercase anyway, so using kebab-case explicitly avoids browser inconsistencies.
URL path segments and slugs — /blog/how-to-bake-bread. Search engines treat hyphens as word separators, making how-to-bake-bread more readable and better for indexing than how_to_bake_bread or howtobakebread.
NPM package names — my-useful-package. The npm registry enforces lowercase and permits hyphens but not underscores or uppercase.
Vue component file names — the Vue style guide recommends multi-word component file names in kebab-case for case-insensitive file systems.

Do not use kebab-case for:

JavaScript or TypeScript variable and function names — hyphens are subtraction operators in JS. user-id is parsed as user minus id, not a variable name.
Python identifiers — Python uses snake_case by convention (PEP 8).
Database column names — most databases prefer snake_case for column identifiers.

Acronym handling

Acronyms are lowercased during conversion. For example:

Input	Output
`parseHTML`	`parse-html`
`OpenAPISpec`	`open-api-spec`
`getUserID`	`get-user-id`
`XMLHttpRequest`	`xml-http-request`

This is the most consistent and readable approach, though some style guides prefer preserving acronym casing (e.g. get-userID). If your project has a different convention, adjust the output manually after copying.

Common mistakes to avoid

Double hyphens — if your input has repeated spaces or punctuation, check that the output does not contain --. The converter collapses consecutive separators, but unusual input (like em — dash) may need manual cleanup.
Leading or trailing hyphens — inputs that start or end with a separator character can produce a leading or trailing hyphen in naive converters. This tool trims them automatically.
Numbers in identifiers — h1Title becomes h1-title, keeping the number attached to the preceding token. If you need h-1-title, split the number manually before converting.