kebab-case Converter

Convert any text, camelCase, snake_case, or PascalCase to kebab-case. All letters lowercased, words joined with hyphens. Standard for CSS class names, URL slugs, and HTML attributes.

Runs locallyInstantPrivate
Input
Output
kebab-case output appears here.

When to use kebab-case

Kebab-case is the standard for anything living in HTML or URLs — CSS class names, HTML attributes, URL slugs, and npm package names. It is human-readable in links and renders safely in all browsers. When naming React component files, some projects prefer MyComponent.tsx (PascalCase) while others use my-component.tsx (kebab-case) — choose one convention and be consistent.

Conversion examples

  • getUserProfile → get-user-profile
  • user_profile_data → user-profile-data
  • My Component Name → my-component-name

Frequently asked questions

Where is kebab-case used?

CSS class names, HTML data attributes, URL slugs, npm package names, Angular component selectors, and file names in web projects.

Why can't kebab-case be used in JavaScript?

The hyphen is the subtraction operator in JS — my-variable is parsed as my minus variable. Use camelCase for JS identifiers.

Is kebab-case the same as lisp-case?

Yes — identical convention (lowercase + hyphens). "Lisp-case" is the older term; "kebab-case" is the modern web term.

Related tools

camelCase ConverterConvert snake_case, kebab-case, or text to camelCase.snake_case ConverterConvert camelCase, PascalCase, or text to snake_case.PascalCase ConverterConvert snake_case, kebab-case, or text to PascalCase for class names.Word CounterWords, characters, sentences, paragraphs, and reading time together.