Kebab Case Converter

Convert any text to kebab-case format for URL slugs, CSS class names, REST endpoints, and file naming conventions.

Input

Try:

What Is Kebab Case?

Kebab case (also called kebab-case, dash-case, or lisp-case) is a naming convention where words are separated by hyphens and all letters are lowercase. For example,my-variable-name or user-profile-page.

Kebab Case vs Other Naming Conventions

Kebab case: my-variable-name — used in URLs, CSS, HTML attributes
Camel case: myVariableName — used in JavaScript, Java
Snake case: my_variable_name — used in Python, Ruby, databases
Pascal case: MyVariableName — used in C#, React components

How to Convert camelCase to kebab-case

Converting camelCase to kebab-case is common when turning JavaScript variable names into CSS classes or URL-friendly strings. The algorithm inserts a hyphen before each uppercase letter and lowercases everything:

myComponentName → my-component-name
userProfilePage → user-profile-page
backgroundColor → background-color

This is especially useful in React projects where component names (PascalCase) need to become CSS class names (kebab-case), or when generating URL slugs from code identifiers.

kebab-case vs snake_case

Convention	Separator	Example	Best For
kebab-case	hyphen (-)	`my-variable`	URLs, CSS, HTML
snake_case	underscore (_)	`my_variable`	Python, databases, APIs

kebab-case Slug for SEO URLs

A kebab-case slug is the standard shape for many SEO-friendly URLs because hyphens are easy for people and search engines to read. For example, Product Launch Checklist becomesproduct-launch-checklist. If you are creating page URLs, you can also use the URL Slug Generatorfor stop-word removal, max length, and bulk mode.

kebab case in JavaScript, CSS, and REST URLs

JavaScript code usually uses camelCase, but kebab case appears often in CSS class names, custom elements, file names, REST endpoint paths, and route slugs. This converter is useful when a JS variable such as userProfilePageneeds to become user-profile-page for a URL or CSS selector.