kebab-case Converter

Free kebab-case Converter — Convert Text to kebab-case for URLs, CSS, and HTML

kebab-case is the naming convention where words are all lowercase and connected by hyphens: user-profile, background-color, max-retry-count, get-all-users. It is the standard format for URL slugs, CSS class names and property names, HTML data attributes, file names in many web projects, and command-line interface option names. If you are a web developer, frontend engineer, or anyone who works regularly with web standards, you encounter and write kebab-case identifiers dozens of times every day. Our free kebab-case converter transforms plain text, title-cased labels, camelCase identifiers, or snake_case names into correctly formatted kebab-case instantly.

Where kebab-case Is the Standard

CSS is the most prominent domain where kebab-case is not just conventional but mandatory — it is built into the language syntax. Every CSS property is kebab-case: background-color, font-size, border-radius, margin-top, flex-direction, z-index. CSS custom properties (CSS variables) follow the same pattern: --primary-color, --font-size-large, --spacing-unit. When defining or referencing CSS properties in stylesheets, trying to use camelCase (backgroundColor) or snake_case (background_color) simply does not work — the syntax requires the hyphenated format.

HTML data attributes follow the same kebab-case convention. The standard format for custom data attributes is data-attribute-name, where the attribute name after "data-" follows kebab-case: data-user-id, data-product-category, data-animation-delay. When these data attributes are accessed in JavaScript via the dataset API, the browser automatically converts the kebab-case attribute name to camelCase (data-user-id becomes dataset.userId), but the HTML source uses kebab-case.

URL slug generation is another core application. Web URLs should use lowercase letters and hyphens for word separation: /blog/getting-started-with-react, /products/wireless-noise-cancelling-headphones, /about-us/our-team. Search engines, browsers, and users all prefer hyphenated slugs over underscored or space-encoded alternatives. Our slug generator tool also produces kebab-case output, but this converter is useful when you need to convert an existing identifier or name to the kebab format without all the additional slug-generation logic.

Frontend Development and Component Naming

Modern frontend frameworks like Vue.js and Svelte use kebab-case for component names in HTML templates. In Vue, a component defined as UserProfile.vue or UserProfile in JavaScript can be used in templates as <user-profile> — and in HTML contexts (as opposed to single-file component templates), this kebab-case form is actually required because HTML is case-insensitive and would treat <UserProfile> as <userprofile>. React components use PascalCase (<UserProfile />) in JSX, but custom HTML elements and Web Components follow the kebab-case standard that the DOM spec requires.

CSS-in-JS libraries and utility CSS frameworks often involve converting between camelCase (used in JavaScript object keys) and kebab-case (used in CSS property names). A style object { backgroundColor: '#fff', fontSize: '16px', marginTop: '1rem' } represents the same styles as the CSS properties background-color, font-size, and margin-top. Understanding this camelCase-to-kebab-case correspondence and being able to convert quickly between them is part of working fluently in the JavaScript ecosystem.

Command-Line Interface Options

Command-line tools overwhelmingly use kebab-case for their option names. GNU-style long options use double-dash prefixes with kebab-case names: --output-file, --max-retry-count, --enable-verbose-logging, --dry-run. This is the convention used by git (--no-pager, --author-date), npm (--save-dev, --no-package-lock), Docker (--no-cache, --build-arg), and the vast majority of Unix and Linux command-line utilities. When writing CLI documentation, help text, or man pages, consistently using kebab-case for all option names is the expected style.

File Naming in Web Projects

Web project files — HTML templates, CSS stylesheets, JavaScript modules, image assets, and configuration files — are conventionally named in kebab-case in most frontend development ecosystems. Component files like user-profile.jsx, checkout-form.vue, or navigation-bar.tsx follow this convention. CSS file names like global-styles.css, component-overrides.css, and layout-utilities.css are readable and sort predictably in directory listings. Image assets like hero-background.jpg, team-member-photo.png, and product-thumbnail-2x.webp use kebab-case to remain URL-safe when served statically.

This file naming convention matters because file names become parts of import paths and URLs. An import like import NavigationBar from './navigation-bar' or a URL like /assets/images/hero-background.jpg depends on the file being named correctly. Using our converter to generate kebab-case file names from component descriptions or design specifications ensures consistent naming from the moment the file is created.

Converting from Other Case Formats

The converter accepts input in essentially any format and produces kebab-case output. Human-readable text with spaces ("User Profile Settings") becomes user-profile-settings. camelCase identifiers (userProfileSettings) become user-profile-settings. snake_case identifiers (user_profile_settings) become user-profile-settings. PascalCase class names (UserProfileSettings) become user-profile-settings. Title Case headings (User Profile Settings) become user-profile-settings. This flexibility makes the tool useful whenever you are moving an identifier from one context (where camelCase or snake_case is appropriate) to another (where kebab-case is required).