kebabCase()

kebabCase(str): string

Converts a string to kebab-case.

note

Handles camelCase, PascalCase, acronyms, snake_case, and spaces.

---

Parameters

str: string

The string to convert.

---

Returns: string

The string in kebab-case.

---

Since

2.0.0

---

Performance

O(n) where n is string length. Single regex pass with match + join.

---

Also known as

dash (Radashi) · kebabCase (Lodash, es-toolkit, Modern Dash) · toKebabCase (Remeda) · ❌ (Ramda, Effect, Antfu)

---

Example

kebabCase('backgroundColor'); // => 'background-color'
kebabCase('XMLHttpRequest');  // => 'xml-http-request'
kebabCase('hello world');     // => 'hello-world'
kebabCase('foo_bar');         // => 'foo-bar'
kebabCase('--foo--bar--');    // => 'foo-bar'

---

How it works?

Converts a string to kebab-case format. All lowercase, words separated by hyphens.

Conversion Examples

Input	Output
backgroundColor	background-color
XMLHttpRequest	xml-http-request
hello world	hello-world
foo_bar	foo-bar

Process

---

Use Cases

Format CSS classes 📌

Convert strings to kebab-case for CSS class names or URL slugs. Essential for frontend development and SEO-friendly URLs.

#format#CSS#classes#kebab-case#slugs#URLs

const className = kebabCase('MenuList'); // 'menu-list'
const slug = kebabCase('Hello World Post'); // 'hello-world-post'

Generate URL slugs from titles

Convert article or product titles into SEO-friendly URL slugs. Essential for blogs, CMS platforms, and any content with human-readable URLs.

#slug#URL#SEO#title#blog#routing#permalink

const articleTitle = "How to Build a REST API with TypeScript";

const slug = kebabCase(articleTitle);
// => "how-to-build-a-rest-api-with-type-script"

const url = `/blog/${slug}`;
// => "/blog/how-to-build-a-rest-api-with-type-script"