> ## Documentation Index
> Fetch the complete documentation index at: https://react-docx.com/llms.txt
> Use this file to discover all available pages before exploring further.
# PageNumber
Dynamic page number field.
```tsx theme={"dark"}
Page
```
***
## Props
| Prop | Type | Default | Description |
| -------- | ------------------------------------ | ----------- | -------------------- |
| `type` | `"current"` \| `"total"` \| `"both"` | `"current"` | What to display |
| `format` | `string` | — | Custom format string |
***
## Types
### Current page
```tsx theme={"dark"}
// or
```
Outputs: 1, 2, 3...
### Total pages
```tsx theme={"dark"}
```
Outputs the total page count.
### Both
```tsx theme={"dark"}
```
Outputs: "Page 1 of 10"
***
## Custom format
Use `{current}` and `{total}` placeholders:
```tsx theme={"dark"}
// Output: "1 / 10"
// Output: "- 1 -"
// Output: "Page 1"
// Output: "1 of 10 pages"
```
***
## Usage
PageNumber is typically used inside headers or footers:
```tsx theme={"dark"}
```
Can also be used in regular content:
```tsx theme={"dark"}
See page for details.
```
***
## Common patterns
### Simple footer
```tsx theme={"dark"}
```
### Page X of Y
```tsx theme={"dark"}
Page of
```
### With document title
```tsx theme={"dark"}
Annual Report 2024Page
```
### Styled page number
```tsx theme={"dark"}
Page of
```
### Right-aligned
```tsx theme={"dark"}
```