X Xerobit

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#...

Mian Ali Khalid · · 4 min read
Use the tool
Case Converter
Convert text between camelCase, PascalCase, snake_case, kebab-case, SCREAMING_CASE, Title Case, sentence case, and more. Bulk mode.
Open Case Converter →

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

AspectPascalCasecamelCase
First letterUppercaseLowercase
ExampleUserProfileuserProfile
Used forClasses, types, componentsVariables, functions, methods
LanguagesAllJS, 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 posts

Related tool

Case Converter

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.