kebab-case Converter
Use the CaseSwitch kebab-case Converter to turn camelCase, snake_case, or spaced labels into lowercase names joined by hyphens (user-profile). Paste one name or a list, review the result, and copy it. Conversion runs in this browser — nothing is uploaded.
Written by the CaseSwitch editorial team. We maintain these tools in the browser so drafts, keys, and images stay on your device.
Last reviewed: 23 July 2026
Processed locally in your browser. Nothing is sent to a server.
Paste or type text to convert. Output stays empty until there is input.
Character count: 0 · Word count: 0 · Line count: 0
Examples
From camelCase
Input
userProfile
Output
user-profile
From a spaced label
Input
User Profile
Output
user-profile
From snake_case
Input
user_profile
Output
user-profile
From PascalCase with acronym run
Input
HTTPResponse
Output
http-response
Already kebab-case (normalized)
Input
Already-Kebab
Output
already-kebab
How to use
- Paste a camelCase, PascalCase, snake_case, or spaced label.
- If the input had punctuation or accents meant for a public URL, switch to the Slug Generator instead.
- Copy the kebab-case result. For a list, convert one name per line.
What this tool is for
kebab-case (dash-case) is lowercase words joined by hyphens: user-profile-settings. It is the conventional separator for URL path segments, many CSS class names, and HTML data attributes because hyphens wrap cleanly and make URL words easier for people and search engines to distinguish. This converter maps another naming style into that shape. It is a case/separator transform — not a full URL slug sanitizer that strips every unsafe character (use the Slug Generator when the input is a title with punctuation).
How it works
Word boundaries come from spaces, hyphens, underscores, and dots, and from camelCase / PascalCase shifts already in the input. Segments are lowercased and joined with a single hyphen. Punctuation that is not a separator stays attached to the segment, so messy titles may still need the Slug Generator. Letters are always lowercased in the output.
When to use it
CSS class names and BEM blocks, REST path segments, data-testid values, design-token names that a style guide wants dashed, and a first-pass convert from camelCase props into a URL-ish token. Paste one name per line for bulk work.
When not to use it
JavaScript identifiers cannot contain hyphens (they parse as minus). Python and SQL names cannot either — use snake_case or camelCase. Do not kebab-case a secret token. For blog titles with punctuation, exclamation marks, or accents, prefer the Slug Generator so those characters are removed rather than left hanging.
How it compares to related tools
The Slug Generator is stricter about punctuation and accent folding for public URLs. snake_case is for SQL and Python. camelCase and PascalCase are for JavaScript identifiers and types. If you only need dashes and lowercase from already-clean identifiers, kebab-case is enough. Longer notes: SEO URL slugs and kebab-case and Developer naming conventions.
Common mistakes
Leaving punctuation on the output because this is not a slug sanitizer. Using underscores in public URLs when hyphens are the conventional choice for readable paths. Kebab-casing a JS variable and pasting it into source (it will not parse). Expecting HTTPResponse to stay one word — you get http-response.
kebab-case for URLs vs CSS
Hyphens are the conventional choice for readable URLs: /user-profile is easier for people and search engines to distinguish as separate words. Global CSS and BEM also lean on kebab-case (block__element--modifier still uses hyphens inside the convention). CSS modules imported into JavaScript sometimes prefer camelCase exports so you can write styles.userProfile — follow the bundler setup. Convert the token here, then paste into the layer that owns the convention.
When to escalate to the Slug Generator
If the input is a headline (“How to Fix Caps Lock!”), a string with %, em dashes, or accented letters, kebab-case alone may leave junk attached or fail to fold accents. The Slug Generator lowercases, hyphenates, strips non-alphanumerics, and folds combining marks (café → cafe). Use this page for clean identifier-to-identifier converts; use the slug tool for publishable permalinks.
Frequently asked questions
Why use hyphens instead of underscores in URLs?+
Hyphens are the conventional choice for readable URLs. They make URL words easier for people and search engines to distinguish. Underscores are more easily seen as part of a single token. Prefer kebab-case for public paths.
Should CSS modules use kebab-case or camelCase?+
Both exist. Global CSS and BEM often use kebab-case. CSS modules imported into JS often use camelCase so you can write styles.fooBar. Follow the project.
Is kebab-case the same as a URL slug?+
Close, but not always. A slug also removes punctuation and often folds accents. This converter only splits on known separators and lowercases. Use the Slug Generator for titles.
Can JavaScript variable names be kebab-case?+
No. A hyphen is the minus operator. Use camelCase in JS/TS source and kebab-case in URLs, CSS, and HTML attributes.
Does Already-Kebab change?+
Yes — letters are lowercased, so you get already-kebab. The hyphen layout stays; only casing is normalized.
Is my text uploaded?+
No. Conversion runs in this browser. Still, do not paste secrets into a screenshot.
Does this tool send my payload to CaseSwitch?+
No. Formatting, encoding, and naming conversions for this page run in your browser after load — your sample stays on the device.
Related guides
Read our original articles on this topic.
SEO
SEO URL Slugs: Why kebab-case Wins Over snake_case
Google treats hyphens and underscores differently. Learn the SEO best practices for formatting URL slugs and naming files.
Developer
The Complete Guide to Developer Naming Conventions
camelCase, PascalCase, snake_case, kebab-case, and dot.case — when to use each style, with examples for JavaScript, Python, URLs, databases, and APIs.
Developer
What Is camelCase? A Developer's Guide
camelCase joins words without spaces or underscores. See how it works in JavaScript, JSON, and API fields — and how it differs from PascalCase and snake_case.
Related tools
snake_case Converter
Aligning a Node or TypeScript mapper with PostgreSQL column names, generating Python method names from a product spec, turning spreadsheet headers into database fields, and preparing keys that will later become environment-style constants (then uppercasing). Paste one identifier per line for bulk work.
Slug Generator
Blog posts, documentation pages, product listing URLs, knowledge-base articles, and CMS permalink fields when you have a working title and need a path before publish. Also useful for turning a noisy marketing headline into a short candidate slug you can still edit by hand.
dot.case Converter
Building i18n keys, namespacing telemetry events, matching a config schema that already uses dotted paths, and turning spreadsheet headers into lodash-style accessor strings. Paste one identifier per line for bulk work, then shorten overly deep keys by hand.
camelCase Converter
Migrating SQL columns to a Node API, turning spreadsheet headers into TypeScript property names, renaming CSS modules that a linter wants in camelCase, and converting a design-doc phrase into a variable name. Paste a list, one identifier per line, for bulk work, then review acronyms before you commit.
PascalCase Converter
Naming React components and matching file names to their default export, generating TypeScript interfaces from a design-doc phrase list, turning SQL or API field labels into C# or Java class names, and converting a kebab-case or snake_case token into a type name. Paste one identifier per line for bulk work, then review acronyms before you commit.