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#design system#seo

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#seo

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

const slug = kebabCase(articleTitle);
// => "how-to-build-a-rest-api-with-type-script"
// Note: kebabCase splits on casing boundaries, so "TypeScript" becomes "type-script".
// For proper slugs with brand names, prefer deburr + manual regex: title.toLowerCase().replace(/\s+/g, "-")

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

Generate CSS class names from component props

Convert component variant names to CSS class names. Essential for design system components with dynamic styling.

#CSS#class#component#props#BEM#design system

const getClassName = (variant: string, size: string) =>
  `btn-${kebabCase(variant)}-${kebabCase(size)}`;

getClassName("primaryOutline", "extraLarge");
// => "btn-primary-outline-extra-large"

Create accessible anchor IDs from headings

Generate URL-safe anchor IDs from heading text for table of contents. Essential for documentation sites and blog posts with deep linking.

#anchor#ID#heading#table of contents#a11y#seo

const headings = ["Getting Started", "API Reference", "Error Handling Best Practices"];

const toc = headings.map((text) => ({
  text,
  id: kebabCase(text),
  href: `#${kebabCase(text)}`,
}));
// => [{ text: "Getting Started", id: "getting-started", href: "#getting-started" }, ...]