> For AI agents: the complete documentation index is available at https://rslint.rs/llms.txt, the full documentation bundle is available at https://rslint.rs/llms-full.txt.

# jsx-pascal-case

[Added in v0.5.0](https://github.com/web-infra-dev/rslint/releases/tag/v0.5.0)
## Configuration


```ts title=rslint.config.ts
import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/jsx-pascal-case': 'error',
    },
  },
]);
```

Enforce PascalCase for user-defined JSX components.

## Rule Details

JSX tag names that start with a lowercase letter are interpreted by React as
HTML intrinsics (`<div>`, `<span>`, …) and are skipped. For user components
(`<TestComponent>`), this rule requires PascalCase: the first character must
be an upper-case letter, the remaining characters must be alphanumeric, and
at least one lower-case letter or digit must follow.

Examples of **incorrect** code for this rule:

```jsx
<Test_component />
```

```jsx
<TEST_COMPONENT />
```

Examples of **correct** code for this rule:

```jsx
<div />
```

```jsx
<TestComponent />
```

```jsx
<TestComponent>
  <div />
</TestComponent>
```

```jsx
<CSSTransitionGroup />
```

## Rule Options

```json
{
  "react/jsx-pascal-case": [
    "error",
    {
      "allowAllCaps": false,
      "allowNamespace": false,
      "allowLeadingUnderscore": false,
      "ignore": []
    }
  ]
}
```

- `allowAllCaps` (default `false`): allow SCREAMING\_SNAKE\_CASE component names.
- `allowNamespace` (default `false`): skip the check for parts after the first
  dot or colon in a namespaced / member-access tag.
- `allowLeadingUnderscore` (default `false`): strip a single leading `_` before
  running the PascalCase / all-caps check.
- `ignore` (default `[]`): array of names to exempt. Entries are matched as
  minimatch-style globs — supports `*`, `?`, character classes, and extglob
  groups such as `+(a|b)`.

### `allowAllCaps`

Examples of **correct** code for this rule, when `allowAllCaps` is `true`:

```json
{ "react/jsx-pascal-case": ["error", { "allowAllCaps": true }] }
```

```jsx
<ALLOWED />
<TEST_COMPONENT />
```

### `allowNamespace`

Examples of **correct** code for this rule, when `allowNamespace` is `true`:

```json
{ "react/jsx-pascal-case": ["error", { "allowNamespace": true }] }
```

```jsx
<Allowed.div />
<TestComponent.p />
```

### `allowLeadingUnderscore`

Examples of **correct** code for this rule, when `allowLeadingUnderscore` is
`true`:

```json
{ "react/jsx-pascal-case": ["error", { "allowLeadingUnderscore": true }] }
```

```jsx
<_AllowedComponent />
<_AllowedComponent>
  <div />
</_AllowedComponent>
```

## Differences from ESLint

- `ignore` entries do not support the `!(a|b)` negative extglob syntax.

## Original Documentation

- [eslint-plugin-react: jsx-pascal-case](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/docs/rules/jsx-pascal-case.md)
- [Source code](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/lib/rules/jsx-pascal-case.js)