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

# RolesAndPolicies

## Overview

The `RolesAndPolicies` component is a comprehensive React component that gather both [user roles](../../../get-started/server-side#create-role) and approval policies of an entity and their given permissions.

## Permissions

To access this component, the entity user must have `read` permissions for the `role` and `approval_policy` objects. For more information, see [List of permissions](/api/concepts/authentication#permissions).

## Preview

#### User roles tab

![RolesAndPolicies component in the User roles view](/_fern-img/7543f67e4d05ac97f66c33bfaa18ba24c1f4139cd1a50f34d36836f3d024ccdf.webp)

#### Approval policies tab

![RolesAndPolicies component in the Approval policies view](/_fern-img/fadcd58651578e5b628bbb1153b42b7a17197ab7dfcf062d49858d1166f890c9.webp)

## Usage

Use the `RolesAndPolicies` component in your application as shown:

**`React.js`**

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

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