Home Text Tools kebab-case Converter
🔒 Private — data never leaves your browser ⚡ Instant results 🚫 No login required ∞ No limits
Switch tool: ⊞ CSS Grid Generator 🗜️ CSS Minifier & Beautifier 📦 HTML Minifier ↩️ Htaccess Redirect Generator ⏰ Cron Job Expression Generator 🔧 HTTP Request Builder 🔄 Hex to Text Converter 🔢 Number Sorter 🅿️ PascalCase Converter 🐫 camelCase Converter 🍢 kebab-case Converter
💡 kebab-case is the standard for CSS class names, HTML attributes, URL slugs, npm package names, and most config file keys.
Input text
Live preview — all four developer formats generated simultaneously:
camelCase JS/TS variables, functions, JSON keys
PascalCase Classes, components, types
snake_case Python, PHP, SQL columns
kebab-case CSS, HTML attrs, URLs, npm
SCREAMING_SNAKE Constants, env variables
Train-Case HTTP headers, some frameworks
CSS Grid Generator 🗜️ CSS Minifier & Beautifier 📦 HTML Minifier ↩️ Htaccess Redirect Generator Cron Job Expression Generator 🔧 HTTP Request Builder 🔄 Hex to Text Converter 🔢 Number Sorter 🅿️ PascalCase Converter 🐫 camelCase Converter 🍢 kebab-case Converter ← current
What is kebab-case?

kebab-case writes all words in lowercase and separates them with hyphens. "user login count" becomes "user-login-count". The name comes from the appearance of words threaded on a hyphen like a kebab skewer.

When should I use kebab-case?

Use kebab-case for CSS class names and IDs, HTML data-* attributes, URL slugs and paths, npm/yarn package names, file names in web projects, and most YAML/TOML config keys.

Is kebab-case the same as slug-case?

Yes — kebab-case, slug-case, spinal-case, and dash-case all refer to the same format: lowercase words separated by hyphens. The term "slug" is most common in content management and SEO contexts.

What about accented or Unicode characters?

Accented characters are normalised to their ASCII equivalents before conversion: é becomes e, ü becomes u, ñ becomes n, etc. This ensures the output is valid for CSS, HTML attributes, and URLs.

Does this also generate a Train-Case variant?

Yes — the tool shows a Train-Case variant (My-Component-Name) alongside the standard kebab-case. Train-Case is used in some HTTP headers and component naming conventions.

Is my text private?

Yes. All conversion runs locally in your browser. Nothing is sent to any server.