[Blazor] Support kebab-case file names for Razor components with auto-mapping to PascalCase class names

[StevenTCramer]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

In Blazor, Razor component file names must follow PascalCase conventions (e.g., ProductDetail.razor), starting with an uppercase letter and without hyphens or other punctuation. This is because the file name directly becomes the default class name in the auto-generated partial class, which must be a valid C# identifier.

However, many web developers (coming from React, Vue, Angular, etc.) prefer kebab-case file names (e.g., product-detail.razor) for consistency with conventions in those frameworks and broader web standards (e.g., HTML custom elements). Currently, using kebab-case leads to compilation errors, as it doesn't form a valid class name and violates the uppercase start rule for component tags.

Workarounds like @inherits or code-behind files exist but are limited—they add boilerplate, and the .razor file name still influences the partial class and tag resolution, so kebab-case won't compile without extra hacks.

Describe the solution you'd like

Add support in the Blazor/Razor compiler to automatically convert kebab-case file names to PascalCase for the generated class name. For example:

• product-detail.razor → Generates a class named ProductDetail
• Tag usage remains <ProductDetail /> (PascalCase, to maintain distinction from HTML elements)
• Handle edge cases deterministically, e.g., split on hyphens, title-case each segment (first letter upper, rest lower), and join without separators.
• Acronyms could follow a simple rule like full upper if all caps in original (e.g., api-endpoint.razor → ApiEndpoint), or configurable via a project setting.

Describe alternatives you've considered

This keeps the generated code as valid C# while allowing more flexible file naming. Routes already support kebab-case (@page "/product-detail"), so this aligns Blazor closer to web norms without breaking .NET conventions.

• Manual renaming via build scripts/MSBuild tasks: Works but is project-specific, error-prone, and adds unnecessary complexity.
• Explicit class declarations (e.g., @inherits or code-behind): Adds verbosity for simple components and doesn't fully resolve the issue, as the .razor file name still ties into the partial class generation and must follow conventions to avoid compilation errors.

Additional context

This would improve Blazor's appeal for hybrid web/.NET devs, especially those migrating from frameworks like React (kebab-case files common, no strict enforcement), Vue (auto-converts kebab files to Pascal for imports), and Angular (official kebab-case for files/selectors). With Blazor's push for broader adoption in .NET 9/10, supporting kebab-case files could reduce friction for front-end adopters used to these patterns. No major ambiguities in conversion (simple string transform), and cross-platform case sensitivity is already handled in MSBuild.

[javiercn]

Thanks for contacting us.

We appreciate your perspective and understand the appeal of kebab-case file naming, especially for those coming from ecosystems like React, Vue, or Angular.

However, Blazor and Razor have well-established conventions built around PascalCase for component file and class names. These conventions are deeply integrated throughout the compiler and tooling pipeline. Introducing kebab-case file name support would add significant complexity and maintenance overhead for our team and could potentially introduce confusion for new and existing users who rely on the consistency of current .NET standard idioms.

We recognize that different frameworks have different idioms, and while we strive to make Blazor approachable for everyone, we also believe in maintaining a clear and consistent experience that aligns with the broader .NET ecosystem. At this time, we do not plan to change naming conventions for Razor components.