PascalCase — What It Is and Where to Use It in Code
PascalCase capitalizes the first letter of every word with no separators: HelloWorld, UserProfile. It's the standard for class names, React components, TypeScript types, and C#...
PascalCase (also called UpperCamelCase) capitalizes the first letter of every word with no separators: HelloWorld, UserProfile, HttpRequest. It’s the standard naming convention for classes and types across most programming languages.
Use the Case Converter to convert any text to PascalCase instantly.
PascalCase rules
user name → UserName
get user profile → GetUserProfile
first name → FirstName
http request → HttpRequest
- First letter of every word is capitalized
- No spaces, underscores, or hyphens
- Numbers allowed:
Sha256Hash,Oauth2Token
The key difference from camelCase: PascalCase capitalizes the first word too (UserName vs userName).
Where PascalCase is standard
Class names in most languages
PascalCase is nearly universal for class definitions:
// JavaScript / TypeScript:
class UserAuthentication {
constructor(private userId: string) {}
}
class DatabaseConnectionPool {
private connections: Connection[] = [];
}
// Python:
class UserProfile:
def __init__(self, user_id: int):
self.user_id = user_id
class HttpRequestHandler:
def handle(self, request):
pass
// Java:
public class OrderManagementService {
private final OrderRepository orderRepository;
}
// C#:
public class CustomerInvoiceProcessor {
public Invoice ProcessInvoice(Customer customer) { ... }
}
React components
React components must be PascalCase for JSX to distinguish them from HTML elements:
// Components — PascalCase:
function UserProfileCard({ user }) {
return (
<div className="profile-card">
<ProfileAvatar src={user.avatar} />
<UserDetails name={user.name} email={user.email} />
</div>
);
}
// HTML element — lowercase:
// <div>, <span>, <button>
// Custom component — PascalCase:
// <UserProfileCard>, <NavMenu>, <ErrorBoundary>
If you use lowercase for a component, React treats it as an HTML element:
// WRONG: React treats this as an unknown HTML element:
function myButton() { ... }
<myButton /> // Renders as <mybutton> in DOM
// CORRECT:
function MyButton() { ... }
<MyButton /> // Renders as your component
TypeScript types and interfaces
TypeScript uses PascalCase for all type-level identifiers:
// Interfaces:
interface UserProfile {
id: number;
firstName: string;
lastName: string;
email: string;
}
// Type aliases:
type ApiResponse<T> = {
data: T;
error: string | null;
statusCode: number;
};
// Enums:
enum UserRole {
Admin = 'admin',
Editor = 'editor',
Viewer = 'viewer',
}
// Generic parameters are often single uppercase letters or PascalCase:
function fetchData<TResponse>(url: string): Promise<TResponse> {
return fetch(url).then(r => r.json());
}
C# naming conventions
C# uses PascalCase for methods, properties, and events (unlike most languages that use camelCase for methods):
public class UserService
{
// Properties — PascalCase:
public string FirstName { get; set; }
public int MaxRetryCount { get; set; }
// Methods — PascalCase (C# specific!):
public User GetUserById(int userId) { ... }
public bool ValidateUserCredentials(string email, string password) { ... }
// Events — PascalCase:
public event EventHandler UserLoggedIn;
}
Constructors (all languages)
Since constructors share the class name, they’re always PascalCase:
const user = new UserProfile({ id: 1, name: 'Alice' });
const pool = new DatabaseConnectionPool({ maxSize: 10 });
const request = new HttpRequest('GET', '/api/users');
Converting to PascalCase in code
JavaScript
function toPascalCase(str) {
return str
.replace(/[-_\s]+(.)/g, (_, char) => char.toUpperCase())
.replace(/^(.)/, char => char.toUpperCase());
}
toPascalCase('user profile'); // 'UserProfile'
toPascalCase('get-user-data'); // 'GetUserData'
toPascalCase('parse_http_request'); // 'ParseHttpRequest'
toPascalCase('firstName'); // 'FirstName'
// More robust version:
function toPascalCaseAdvanced(str) {
return str
.split(/(?=[A-Z])|[-_\s]+/)
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
.join('');
}
toPascalCaseAdvanced('hello-world'); // 'HelloWorld'
toPascalCaseAdvanced('camelCase'); // 'Camelcase' (note: 'C' lowercased)
Python
def to_pascal_case(name: str) -> str:
import re
words = re.split(r'[-_\s]+', name)
return ''.join(word.capitalize() for word in words if word)
to_pascal_case('user_profile') # 'UserProfile'
to_pascal_case('get-user-data') # 'GetUserData'
to_pascal_case('hello world') # 'HelloWorld'
# Using title() for simple cases:
'user profile'.title().replace(' ', '') # 'UserProfile'
PascalCase in file naming
Some ecosystems use PascalCase for file names:
React components:
components/
UserProfileCard.tsx
NavigationMenu.tsx
ErrorBoundary.tsx
C# classes:
Services/
UserAuthenticationService.cs
OrderManagementRepository.cs
Java classes:
src/
UserService.java
DatabaseConnectionPool.java
Other ecosystems use kebab-case for files even when the content is PascalCase (Vue.js single-file components, Angular):
Angular (PascalCase class, kebab-case file):
user-profile.component.ts → class UserProfileComponent
auth.service.ts → class AuthService
PascalCase vs camelCase
| Aspect | PascalCase | camelCase |
|---|---|---|
| First letter | Uppercase | Lowercase |
| Example | UserProfile | userProfile |
| Used for | Classes, types, components | Variables, functions, methods |
| Languages | All | JS, Java, Swift, Dart |
Quick rule: if it’s a type (class, interface, component), use PascalCase. If it’s a value (variable, function, method), use camelCase.
Related tools
- Case Converter — convert between PascalCase, camelCase, snake_case, and more
- camelCase vs snake_case — naming convention comparison
- snake_case Guide — Python and SQL naming
Related posts
- camelCase — What It Is and Where to Use It in Programming — camelCase capitalizes the first letter of each word except the first: helloWorld…
- camelCase vs snake_case — Which Naming Convention to Use and When — camelCase and snake_case are the two dominant naming conventions in programming.…
- Kebab Case — What It Is and Where to Use kebab-case — Kebab case uses hyphens between lowercase words: hello-world, user-first-name. I…
- Snake Case — What It Is, When to Use It, and How to Convert — Snake case uses underscores between words in lowercase: hello_world, user_first_…
Related tool
Convert text between camelCase, PascalCase, snake_case, kebab-case, SCREAMING_CASE, Title Case, sentence case, and more. Bulk mode.
Written by Mian Ali Khalid. Part of the Dev Productivity pillar.