kebab-case
Words joined by hyphens - lowercase by default, uppercase variant available. Supports up to 50,000 characters.
Programming Tools
Input Text
0 / 50,000
Variant
Converted Text
Result will appear here…
About
What is kebab-case?
kebab-case (also called dash-case or lisp-case) joins all words in lowercase separated by hyphens. It is the dominant convention for URLs, CSS class names, HTML attributes, and npm package names - anywhere a hyphen is a valid character but spaces and underscores are not. The UPPER-KEBAB-CASE variant uppercases every word and is occasionally used in HTTP headers and certain config formats.
Example
Input
get user profile data
Output
get-user-profile-data
Usage
When to use kebab-case?
URLs & route slugs
URL segments are conventionally kebab-case - /user-profile, /blog-post, /product-detail - readable, SEO-friendly, and universally supported.
CSS class names
BEM, SMACSS, and most CSS naming conventions use kebab-case - .nav-bar, .card-header, .btn-primary.
npm package names
All npm packages use kebab-case - react-router, tailwind-merge, lodash-es, @tanstack/react-query.
HTML attributes & data attrs
Custom HTML attributes and data attributes follow kebab-case - data-user-id, aria-label, x-transition-enter.
Try More