Convert Text to kebab-case for URL Slugs, CSS Classes, and File Names
kebab-case writes a phrase in lowercase with hyphens between the words, like
user-profile-image. It is the standard for URL slugs, CSS class names, HTML
attributes, and file names on the web, because hyphens survive URLs intact and search
engines read them as word separators. This converter takes text in any of the common
naming styles and rewrites it as kebab-case, one line at a time, entirely in your browser.
What can I paste in?
Plain sentences, camelCase, PascalCase,
snake_case, dot.case, SCREAMING_SNAKE_CASE, or a
messy mix of all of them. Word boundaries are detected from capital letters, digits, and
any punctuation or spacing, so getUserID, get_user_id, and
Get User ID all come out as get-user-id. Paste a whole list and
each line is converted on its own, which makes renaming a batch of files or CSS classes
quick.
How are acronyms handled?
A run of capitals is kept together as one word, and the split happens before the last
capital when a lowercase letter follows it. So XMLHttpRequest becomes
xml-http-request rather than x-m-l-http-request, and
parseHTMLString becomes parse-html-string. This is the same
rule the camelCase Converter and
dot.case Converter use, so the three tools agree on
where words begin and end.
What happens to numbers and punctuation?
A digit always becomes its own word, on both sides: user2Name converts to
user-2-name and version2point0 to
version-2-point-0. Punctuation is treated purely as a separator and dropped
— Hello, World! becomes hello-world and
it's a test becomes it-s-a-test. Accented and non-Latin letters
are kept as ordinary letters, so café naïve converts to
café-naïve rather than losing characters.
kebab-case, snake_case, or camelCase — which should I use?
| Style | Looks like | Typically used for |
|---|---|---|
| kebab-case | user-profile | URL slugs, CSS classes, HTML attributes, file names |
| snake_case | user_profile | Python and Ruby variables, database columns |
| camelCase | userProfile | JavaScript and Java variables and functions |
| PascalCase | UserProfile | Class and component names |
| dot.case | user.profile | Config keys, namespaced identifiers |
One caveat worth knowing: kebab-case cannot be used for variable names in most programming languages, because the hyphen is read as a minus sign. Reach for it in URLs, markup, and filenames — and use camelCase or snake_case in code.
Where is kebab-case actually used?
URL slugs. Static site generators and frameworks like Next.js, Astro,
and Gatsby derive routes from file names, so a post titled "Getting Started With Docker"
becomes getting-started-with-docker. Google treats hyphens as word
separators but underscores as joiners, which is why hyphenated slugs are the long-standing
SEO recommendation.
CSS class names. The BEM convention is built on hyphens —
card__title--featured — and utility frameworks such as Tailwind use
hyphenated names throughout. Converting a component name to kebab-case gives you a class
that needs no escaping in a selector.
HTML attributes and package names. Custom data attributes must be
lowercase and hyphenated (data-user-id), custom element names are required
by spec to contain a hyphen, and npm package names are conventionally kebab-case. The
same applies to most file names, where hyphens avoid the encoding problems spaces cause
in URLs.
Last reviewed: August 2026