> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.monite.com/v2023-09-01/sdks/react/components/documentnumber/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.monite.com/_mcp/server.

# DocumentNumber

## Overview

The `DocumentNumber` component enables users to customize the format of document numbers assigned to accounts receivable and accounts payable documents: invoices, quotes, credit notes, delivery notes, and purchase orders.

![DocumentNumber component preview](/_fern-img/ac93a88da7a621cf2f167bb9c274334edff73075387ba7f13ec356f96f7fe18b.webp)

Users can:

* Set the next number for each document type.
  This can be useful if the company is migrating from another invoicing platform and wants to maintain their existing document numbering sequences.
* Set the prefix for each document type. For example, INV for invoices, Q for quotes, and so on.
* Add an extra company-specific prefix in addition to the document-specific prefix.
* Change the separator between the components of a document number. For example, `-`, `/`, or no separator.
* Include the current year into document numbers.
* Pad the number with zeroes.

> **Note**
>
> All options apply only to newly issued documents and do not affect existing issued documents.

The `DocumentNumber` component is also integrated into the larger [`TemplateSettings`](./templatesettings) component that provides a unified UI for all available invoice template settings.

## Permissions

To access and use the `DocumentNumber` component, the authenticated entity user must have a role with the `read` and `update` [permissions](../../../api/concepts/authentication#permissions) for the `entity` resource.

## Usage

Use the `DocumentNumber` component in your application as follows:

**`React.js`**

```jsx React.js
import { DocumentNumber } from "@monite/sdk-react";

...

// This component must be rendered within the MoniteProvider wrapper
const DocumentNumberPage = () => {
  return <DocumentNumber />
};
```

## Props

None.

## See also

* [`LayoutAndLogo`](./layoutandlogo)
* [`OtherSettings`](./othersettings)
* [`TemplateSettings`](./templatesettings)