HomeGuidesRecipesAPI ExplorerForumSupport
Partner Portal
Partner Portal


The ProductDetails component renders the interface for viewing product information. It displays details of a product item and allows a user to edit the product.


`PayablesDetails` component preview.

ProductDetails component preview.


Use the ProductDetails component to view, edit and delete details of an existing product. To view details of an existing product, use the ProductDetails component with the id prop as shown:

import { Dialog, ProductDetails } from "@monite/sdk-react"


// TODO: This component must be rendered within the MoniteProvider wrapper
const ProductDetailsPage = () => {
  return (
    <Dialog open alignDialog="right">
      <ProductDetails id="PRODUCT_ID" /> 


idstringThis prop accepts the UUID of the product to be displayed.