PascalCase Converter
Use the CaseSwitch PascalCase Converter to turn a phrase, snake_case column, or kebab-case slug into a type-style identifier (UserProfile). Paste one name or a list, review acronyms, and copy the result. Conversion runs in this browser — nothing is uploaded.
Written by the CaseSwitch editorial team. We maintain these tools in the browser so drafts, keys, and images stay on your device.
Last reviewed: 23 July 2026
Processed locally in your browser. Nothing is sent to a server.
Paste or type text to convert. Output stays empty until there is input.
Character count: 0 · Word count: 0 · Line count: 0
Examples
Phrase to PascalCase
Input
user profile
Output
UserProfile
From snake_case
Input
order_summary
Output
OrderSummary
From kebab-case
Input
get-user-id
Output
GetUserId
Multi-word component name
Input
my React component
Output
MyReactComponent
Acronym-like first word
Input
http response
Output
HttpResponse
How to use
- Paste a phrase, snake_case name, kebab-case slug, or camelCase identifier.
- Check acronyms (ID, HTTP, XML) and any leftover punctuation on the output.
- Copy the PascalCase name. For a list, convert one name per line.
What this tool is for
PascalCase (also called UpperCamelCase) joins words without spaces and capitalizes every segment, including the first: UserProfileCard. It is the usual convention for classes, TypeScript interfaces and type aliases, C# types, and React function components so a name reads as a constructable thing rather than a local variable. This converter turns a readable phrase or another naming style into that shape without hand-editing a long list. It is a case/separator transform, not a refactor that updates import paths or call sites.
How it works
Word boundaries come from spaces, hyphens, underscores, and dots, and from camelCase / PascalCase shifts already in the input (a lowercase or digit letter followed by a capital, or an acronym followed by a capital-then-lowercase run). Each segment is lowercased, then given an initial capital, and the segments are concatenated. Punctuation that is not a separator stays attached to the segment. Identifiers can start with a digit if the first segment does.
When to use it
Naming React components and matching file names to their default export, generating TypeScript interfaces from a design-doc phrase list, turning SQL or API field labels into C# or Java class names, and converting a kebab-case or snake_case token into a type name. Paste one identifier per line for bulk work, then review acronyms before you commit.
When not to use it
JSON keys in JavaScript-heavy APIs are usually camelCase, not PascalCase. CSS class names and public URL paths belong in kebab-case. Environment variables are SCREAMING_SNAKE_CASE. Do not paste a whole source file — comments and strings will be mashed into identifier-shaped noise. Do not treat this as a rename that updates call sites.
How it compares to related tools
camelCase is identical except the first letter stays lowercase (userProfile vs UserProfile). snake_case is for Python functions and SQL columns; Python types still use CapWords. kebab-case is for URLs and CSS. The Slug Generator is stricter about punctuation for public paths. Longer background: What is camelCase? and Developer naming conventions.
Common mistakes
PascalCasing a whole sentence including articles (“TheQuickBrownFox”). Converting CSS class names that must remain kebab-case for HTML. Leaving acronyms inconsistent across a codebase (HttpResponse vs HTTPResponse — this tool produces HttpResponse from “http response”). Assuming “!” and “@” are dropped; only space, _, -, and . are separators.
Why React components need PascalCase
In JSX, lowercase tags are treated as HTML or SVG elements. A component named userAvatar is parsed as an unknown HTML tag, not your function. Naming it UserAvatar tells React to use your component. Matching the file name to the export (UserAvatar.tsx) keeps imports predictable. Convert the English label here, then create the file — this tool does not write the file for you.
Types, interfaces, and file names
TypeScript community style uses PascalCase for classes, interfaces, type aliases, and enums (User, UserId, PaymentStatus). Some older C# or Java codebases prefix interfaces with I (IUser); follow the repo, not this page. When a design doc lists features in plain English, convert each line to PascalCase to draft component and type names, then shorten or merge duplicates by hand.
Frequently asked questions
Should React components always be PascalCase?+
Yes in standard React. Lowercase names are treated as HTML tags. UserAvatar works; userAvatar does not as a component.
What about interfaces vs type aliases?+
TypeScript community style uses PascalCase for both (User, UserId). Some codebases prefix interfaces with I — follow the repo, not this tool.
How is PascalCase different from camelCase?+
Only the first letter. PascalCase capitalizes every word including the first (OrderSummary). camelCase keeps the first word lowercase (orderSummary). Same word splits, different first character.
Can I convert a list of names at once?+
Paste one identifier or phrase per line and convert. Review names with digits or irregular acronyms before committing.
Does this strip punctuation?+
Spaces, underscores, hyphens, and dots are treated as word breaks and removed as separators. Other punctuation stays attached to the adjacent word.
Is my code uploaded?+
PascalCase mapping never leaves this tab. Treat the input like a whiteboard — do not drop production credentials into a demo you might capture.
Does this tool send my payload to CaseSwitch?+
No. Formatting, encoding, and naming conversions for this page run in your browser after load — your sample stays on the device.
Related guides
Read our original articles on this topic.
Developer
What Is camelCase? A Developer's Guide
camelCase joins words without spaces or underscores. See how it works in JavaScript, JSON, and API fields — and how it differs from PascalCase and snake_case.
Developer
The Complete Guide to Developer Naming Conventions
camelCase, PascalCase, snake_case, kebab-case, and dot.case — when to use each style, with examples for JavaScript, Python, URLs, databases, and APIs.
Related tools
camelCase Converter
Migrating SQL columns to a Node API, turning spreadsheet headers into TypeScript property names, renaming CSS modules that a linter wants in camelCase, and converting a design-doc phrase into a variable name. Paste a list, one identifier per line, for bulk work, then review acronyms before you commit.
snake_case Converter
Aligning a Node or TypeScript mapper with PostgreSQL column names, generating Python method names from a product spec, turning spreadsheet headers into database fields, and preparing keys that will later become environment-style constants (then uppercasing). Paste one identifier per line for bulk work.
kebab-case Converter
CSS class names and BEM blocks, REST path segments, data-testid values, design-token names that a style guide wants dashed, and a first-pass convert from camelCase props into a URL-ish token. Paste one name per line for bulk work.
dot.case Converter
Building i18n keys, namespacing telemetry events, matching a config schema that already uses dotted paths, and turning spreadsheet headers into lodash-style accessor strings. Paste one identifier per line for bulk work, then shorten overly deep keys by hand.
Slug Generator
Blog posts, documentation pages, product listing URLs, knowledge-base articles, and CMS permalink fields when you have a working title and need a path before publish. Also useful for turning a noisy marketing headline into a short candidate slug you can still edit by hand.