Kebab Case Converter Free Online Tool 2026

Last updated March 22, 2026

Converting camelCase to kebab-case

JavaScript variable names use camelCase, but CSS class names and HTML attributes use kebab-case. Convert common variable names:

Input (camelCase)       Output (kebab-case)
─────────────────────────────────────────
backgroundColor    →    background-color
fontSize           →    font-size
borderRadius       →    border-radius
maxWidth           →    max-width
isUserLoggedIn     →    is-user-logged-in
primaryButtonText  →    primary-button-text

This is the most common conversion when mapping JavaScript component props to CSS class names.

Converting PascalCase to kebab-case

React component names use PascalCase, but their corresponding CSS modules or file names often use kebab-case:

Input (PascalCase)          Output (kebab-case)
──────────────────────────────────────────────
UserProfileCard        →    user-profile-card
NavigationSidebar      →    navigation-sidebar
ProductDetailPage      →    product-detail-page
AuthenticationModal    →    authentication-modal
DataTableComponent     →    data-table-component

Use this when naming CSS module files to match their corresponding React component files.

Converting snake_case to kebab-case

Database column names use snake_case, but URL slugs and CSS classes use kebab-case:

Input (snake_case)          Output (kebab-case)
──────────────────────────────────────────────
user_first_name        →    user-first-name
created_at_timestamp   →    created-at-timestamp
product_category_id    →    product-category-id
is_email_verified      →    is-email-verified
max_retry_count        →    max-retry-count

Generating URL Slugs from Page Titles

Convert blog post titles or page names into SEO-friendly URL slugs:

Input (title)                                    Output (kebab-case slug)
──────────────────────────────────────────────────────────────────────────
Getting Started with React Hooks            →    getting-started-with-react-hooks
10 Tips for Better JavaScript Performance   →    10-tips-for-better-javascript-performance
What is a REST API?                         →    what-is-a-rest-api
CSS Grid vs Flexbox: When to Use Each       →    css-grid-vs-flexbox-when-to-use-each
Building a Node.js Authentication System    →    building-a-nodejs-authentication-system

Search engines treat hyphens as word separators, making kebab-case slugs better for SEO than underscore or camelCase URLs.

Handling Acronyms and Consecutive Uppercase Letters

The converter correctly handles acronyms that would produce wrong results with simple find-and-replace:

Input                   Output (kebab-case)
──────────────────────────────────────────
XMLParser          →    xml-parser
HTTPSConnection    →    https-connection
parseJSON          →    parse-json
getAPIResponse     →    get-api-response
URLEncoder         →    url-encoder
HTMLToMarkdown     →    html-to-markdown

A naive replacement would turn XMLParser into x-m-l-parser, which is wrong. The converter groups consecutive uppercase letters correctly.

Converting kebab-case to camelCase

When receiving kebab-case CSS property names and needing to use them in JavaScript:

Input (kebab-case)          Output (camelCase)
──────────────────────────────────────────────
background-color       →    backgroundColor
border-top-left-radius →    borderTopLeftRadius
font-family            →    fontFamily
z-index                →    zIndex
flex-direction         →    flexDirection
grid-template-columns  →    gridTemplateColumns

This is useful when working with the element.style API in JavaScript, which uses camelCase property names.

Converting kebab-case to SCREAMING_SNAKE_CASE

Environment variable names and constants use SCREAMING_SNAKE_CASE. Convert configuration keys:

Input (kebab-case)          Output (SCREAMING_SNAKE_CASE)
──────────────────────────────────────────────────────────
database-host          →    DATABASE_HOST
api-secret-key         →    API_SECRET_KEY
max-connection-pool    →    MAX_CONNECTION_POOL
redis-cache-ttl        →    REDIS_CACHE_TTL
jwt-expiry-seconds     →    JWT_EXPIRY_SECONDS

Batch Converting Multiple Names

Paste a list of names to convert them all at once. Input (one per line):

userProfileImage
backgroundColorPrimary
navigationMenuItems
footerLinkColor
headerBackgroundGradient
buttonHoverState
formInputBorderRadius

Output (all converted to kebab-case):

user-profile-image
background-color-primary
navigation-menu-items
footer-link-color
header-background-gradient
button-hover-state
form-input-border-radius

Batch conversion is useful when renaming a large set of CSS variables or migrating a codebase to a consistent naming convention.

CSS Custom Properties (Variables)

CSS custom properties always use kebab-case. Convert your design token names:

Input (camelCase design tokens)    Output (CSS custom properties)
──────────────────────────────────────────────────────────────────
primaryColor              →    --primary-color
secondaryTextColor        →    --secondary-text-color
spacingLarge              →    --spacing-large
fontSizeHeading1          →    --font-size-heading-1
borderRadiusCard          →    --border-radius-card
shadowElevationMedium     →    --shadow-elevation-medium

Use these in your CSS:

:root {
  --primary-color: #3b82f6;
  --secondary-text-color: #6b7280;
  --spacing-large: 2rem;
  --border-radius-card: 0.5rem;
}

HTML Data Attributes

HTML data attributes use kebab-case. Convert JavaScript property names to data attribute names:

Input (camelCase)          HTML data attribute
──────────────────────────────────────────────
userId             →    data-user-id
productCategory    →    data-product-category
isActive           →    data-is-active
sortOrder          →    data-sort-order
pageNumber         →    data-page-number

Example usage in HTML:

<div data-user-id="42" data-product-category="electronics" data-is-active="true">
  Product Card
</div>

In JavaScript, access these with element.dataset.userId — the browser automatically converts kebab-case data attributes back to camelCase for the dataset API.