diff --git a/docs/src/components/iou.tsx b/docs/src/components/iou.tsx
index 275f2c4d..ad342304 100644
--- a/docs/src/components/iou.tsx
+++ b/docs/src/components/iou.tsx
@@ -1,26 +1,53 @@
 'use client';
 import React, { useRef, useEffect, useState, useCallback } from 'react';
 
+/**
+ * Represents a rectangle with position, dimensions, styling, and identification
+ */
 interface Rectangle {
+  /** The x-coordinate of the rectangle's left edge */
   left: number;
+  /** The y-coordinate of the rectangle's top edge */
   top: number;
+  /** The width of the rectangle */
   width: number;
+  /** The height of the rectangle */
   height: number;
+  /** The fill color of the rectangle */
   fill: string;
+  /** The display name of the rectangle */
   name: string;
 }
 
+/**
+ * Props for the IOU component
+ */
 interface IOUProps {
+  /** The title to display above the visualization */
   title: string;
+  /** The description text to display below the IOU value */
   description: string;
+  /** The first rectangle for IOU calculation */
   rect1: Rectangle;
+  /** The second rectangle for IOU calculation */
   rect2: Rectangle;
 }
 
+/**
+ * A React component that visualizes and calculates the Intersection over Union (IOU) 
+ * of two rectangles on a canvas
+ * @param props - The component props
+ * @returns The rendered IOU visualization component
+ */
 export default function IOU({ title, description, rect1, rect2 }: IOUProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [actualIOU, setActualIOU] = useState<number>(0);
 
+  /**
+   * Converts a rectangle to a bounding box with left, right, top, and bottom coordinates
+   * @param rect - The rectangle to convert
+   * @returns An object containing the bounding box coordinates
+   */
   const getBbox = (rect: Rectangle) => ({
     left: rect.left,
     right: rect.left + rect.width,
@@ -28,6 +55,12 @@ export default function IOU({ title, description, rect1, rect2 }: IOUProps) {
     bottom: rect.top + rect.height,
   });
 
+  /**
+   * Calculates the intersection area between two bounding boxes
+   * @param bbox1 - The first bounding box
+   * @param bbox2 - The second bounding box
+   * @returns The area of intersection between the two bounding boxes
+   */
   const calcIntersection = (bbox1: any, bbox2: any): number => {
     const x1 = Math.max(bbox1.left, bbox2.left);
     const x2 = Math.min(bbox1.right, bbox2.right);
@@ -43,10 +76,18 @@ export default function IOU({ title, description, rect1, rect2 }: IOUProps) {
     return intersection;
   };
 
+  /**
+   * Calculates the area of a rectangle
+   * @param rect - The rectangle to calculate area for
+   * @returns The area of the rectangle
+   */
   const calcArea = (rect: Rectangle): number => {
     return rect.width * rect.height;
   };
 
+  /**
+   * Draws the rectangles on the canvas and calculates the IOU value
+   */
   const drawCanvas = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;