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

# TemplateSettings

## Overview

The `TemplateSettings` component (alias `DocumentSettings`) enables users to customize their invoice look-and-feel and branding.
Users can:

* choose from several built-in PDF templates,
* upload, replace, or remove the entity logo for PDFs,
* change the format of document numbers for invoices, quotes, and other document types (for example, `INV-00042` or `IN/2025/042`),
* set the next number for invoices and other document types,
* add or hide certain sections in PDFs (such as bank account details or signatures),
* and more.

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

The `TemplateSettings` component displays the available settings in tabs:

#### "Layout and logo" tab

![TemplateSettings component: 'Layout and logo' tab](/_fern-img/3a0f080acba56c7183d2aed9f6f0f71f8de9ccd7180e93224644fdb2a874b57b.webp)

#### "Document number" tab

![TemplateSettings component: 'Document number' tab](/_fern-img/034062418ec8d779e5b8e7974c0a8a9d1c20bc9eb627efc93529e46e1c8d8a2a.webp)

#### "Other settings" tab

![TemplateSettings component: 'Other settings' tab](/_fern-img/3b6561aaca5e169e459d2f0598249b2493d7caaf103713fceddd6ca2c72633e5.webp)

Individual tabs are also available as standalone components in case you want to expose only a subset of the available settings or to organize the settings in a different layout:

* [`LayoutAndLogo`](./layoutandlogo)
* [`DocumentNumber`](./documentnumber)
* [`OtherSettings`](./othersettings)

The dialog form of `TemplateSettings` is embedded into [`InvoiceDetails`](./invoicedetails) for seamless invoice editing experience.

## Permissions

To access and use the `TemplateSettings` 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 `TemplateSettings` component in your application as follows:

#### Render as a standalone screen

**`React`**

```jsx React
import { TemplateSettings } from "@monite/sdk-react";

...

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

#### Render in a popup

**`React`**

```jsx React
import { TemplateSettings } from "@monite/sdk-react";
import { Button } from 'react-native';
...

const [isEditTemplateModalOpen, setIsEditTemplateModalOpen] = useState(false);
...

<Button
  title="Edit template settings"
  onPress={() => setIsEditTemplateModalOpen(true)}
/>

...

{isEditTemplateModalOpen && (
  <TemplateSettings
    isDialog
    isOpen={isEditTemplateModalOpen}
    handleCloseDialog={() => setIsEditTemplateModalOpen(false)}
  />
)}
```

## Props

**`isDialog`** `boolean` — default: false

If `true`, the component will be rendered inside a `<Dialog>` wrapper.

This prop also controls the component's caption: "Template settings" (if `false`) or "Edit template settings" (if `true`).

---

**`isOpen`** `boolean` — default: false

This prop has effect only if `isDialog` is `true`.
It controls the overall visibility of the component.

---

**`handleCloseDialog`** `function`

Has effect only if `isDialog` is `true`.
This callback is triggered when the user closes the template settings dialog.

---

## See also

* [`LayoutAndLogo`](./layoutandlogo)
* [`DocumentNumber`](./documentnumber)
* [`OtherSettings`](./othersettings)