From ccf82df032b46294e05a5752f07396efbee82b9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= <wingkwong.code@gmail.com>
Date: Sat, 30 Nov 2024 22:44:10 +0800
Subject: [PATCH 1/3] chore(docs): revise defaultShowFlagList (#4193)

* chore(docs): add Example to defaultShowFlagList

* chore(docs): revise defaultShowFlagList
---
 apps/docs/components/docs/components/helper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/components/docs/components/helper.ts b/apps/docs/components/docs/components/helper.ts
index 451c106139..f9c46f0db2 100644
--- a/apps/docs/components/docs/components/helper.ts
+++ b/apps/docs/components/docs/components/helper.ts
@@ -15,7 +15,7 @@ const endFlag = ["}", "]"];
 const specialStartFlag = ["("];
 const specialEndFlag = [")"];
 const defaultFoldFlagList = ["cn", "HTMLAttributes"];
-const defaultShowFlagList = ["Component", "forwardRef", "App"];
+const defaultShowFlagList = ["Component", "forwardRef", "App", "Example", "AddForm", "SignupForm"];
 
 /**
  * Transform tokens from `prism-react-renderer` to wrap them in folder structure

From 290182df2670aa176fc44f08a13c3d0a4544ad41 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 30 Nov 2024 18:51:15 -0300
Subject: [PATCH 2/3] feat: documentation improvements (#4195)

* feat: documentation improvements

* fix: alert api
---
 apps/docs/components/copy-button.tsx          |  12 +-
 .../docs/components/code-demo/code-demo.tsx   |   1 +
 .../components/code-demo/react-live-demo.tsx  |  10 +
 apps/docs/components/icons/info-circle.tsx    |  33 +
 apps/docs/components/mdx-components.tsx       | 102 +++-
 apps/docs/components/sandpack/copy-button.tsx |   4 +-
 .../components/sandpack/language-selector.tsx |   2 +-
 apps/docs/components/static-table.tsx         |  73 +++
 apps/docs/content/docs/components/alert.mdx   | 117 +++-
 .../content/docs/components/autocomplete.mdx  | 439 +++++++++++--
 apps/docs/content/docs/components/avatar.mdx  | 180 +++++-
 apps/docs/content/docs/components/badge.mdx   | 104 +++-
 .../content/docs/components/breadcrumbs.mdx   | 270 ++++++--
 apps/docs/content/docs/components/button.mdx  | 239 ++++++--
 .../docs/content/docs/components/calendar.mdx | 229 +++++--
 apps/docs/content/docs/components/card.mdx    | 138 ++++-
 .../docs/components/checkbox-group.mdx        | 166 ++++-
 .../docs/content/docs/components/checkbox.mdx | 152 ++++-
 apps/docs/content/docs/components/chip.mdx    |  89 ++-
 .../docs/components/circular-progress.mdx     | 104 +++-
 apps/docs/content/docs/components/code.mdx    |  34 +-
 .../content/docs/components/date-input.mdx    | 212 +++++--
 .../content/docs/components/date-picker.mdx   | 268 ++++++--
 .../docs/components/date-range-picker.mdx     | 377 ++++++++++--
 apps/docs/content/docs/components/divider.mdx |  13 +-
 apps/docs/content/docs/components/drawer.mdx  | 131 +++-
 .../docs/content/docs/components/dropdown.mdx | 576 +++++++++++++++---
 apps/docs/content/docs/components/image.mdx   | 133 +++-
 .../content/docs/components/input-otp.mdx     | 194 +++++-
 apps/docs/content/docs/components/input.mdx   | 209 ++++++-
 apps/docs/content/docs/components/kbd.mdx     |  27 +-
 apps/docs/content/docs/components/link.mdx    | 173 +++++-
 apps/docs/content/docs/components/listbox.mdx | 461 +++++++++++---
 apps/docs/content/docs/components/modal.mdx   | 152 ++++-
 apps/docs/content/docs/components/navbar.mdx  | 264 ++++++--
 .../content/docs/components/pagination.mdx    | 159 ++++-
 apps/docs/content/docs/components/popover.mdx | 245 ++++++--
 .../docs/content/docs/components/progress.mdx | 111 +++-
 .../content/docs/components/radio-group.mdx   | 242 ++++++--
 .../docs/components/range-calendar.mdx        | 216 +++++--
 .../content/docs/components/scroll-shadow.mdx |  71 ++-
 apps/docs/content/docs/components/select.mdx  | 306 ++++++++--
 .../docs/content/docs/components/skeleton.mdx |  34 +-
 apps/docs/content/docs/components/slider.mdx  | 243 ++++++--
 apps/docs/content/docs/components/snippet.mdx | 131 +++-
 apps/docs/content/docs/components/spacer.mdx  |  22 +-
 apps/docs/content/docs/components/spinner.mdx |  45 +-
 apps/docs/content/docs/components/switch.mdx  | 131 +++-
 apps/docs/content/docs/components/table.mdx   | 471 +++++++++++---
 apps/docs/content/docs/components/tabs.mdx    | 248 ++++++--
 .../docs/content/docs/components/textarea.mdx | 243 ++++++--
 .../content/docs/components/time-input.mdx    | 237 +++++--
 apps/docs/content/docs/components/tooltip.mdx | 226 +++++--
 apps/docs/content/docs/components/user.mdx    |  41 +-
 apps/docs/styles/globals.css                  |   8 +-
 apps/docs/tailwind.config.js                  |   4 +-
 56 files changed, 7626 insertions(+), 1496 deletions(-)
 create mode 100644 apps/docs/components/icons/info-circle.tsx
 create mode 100644 apps/docs/components/static-table.tsx

diff --git a/apps/docs/components/copy-button.tsx b/apps/docs/components/copy-button.tsx
index 35a652d2eb..72a4b871ff 100644
--- a/apps/docs/components/copy-button.tsx
+++ b/apps/docs/components/copy-button.tsx
@@ -1,6 +1,7 @@
 import {FC} from "react";
 import {Button, ButtonProps} from "@nextui-org/react";
 import {useClipboard} from "@nextui-org/use-clipboard";
+import {clsx} from "@nextui-org/shared-utils";
 
 import {CheckLinearIcon, CopyLinearIcon} from "@/components/icons";
 
@@ -8,7 +9,7 @@ export interface CopyButtonProps extends ButtonProps {
   value?: string;
 }
 
-export const CopyButton: FC<CopyButtonProps> = ({value, ...buttonProps}) => {
+export const CopyButton: FC<CopyButtonProps> = ({value, className, ...buttonProps}) => {
   const {copy, copied} = useClipboard();
 
   const handleCopy = () => {
@@ -18,19 +19,22 @@ export const CopyButton: FC<CopyButtonProps> = ({value, ...buttonProps}) => {
   return (
     <Button
       isIconOnly
-      className="absolute z-50 right-3 top-8 border-1 border-transparent bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100 before:rounded-lg"
+      className={clsx(
+        "absolute z-50 right-3 text-zinc-300 top-8 border-1 border-transparent bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100 before:rounded-lg",
+        className,
+      )}
       size="sm"
       variant="bordered"
       onPress={handleCopy}
       {...buttonProps}
     >
       <CheckLinearIcon
-        className="absolute opacity-0 scale-50 text-zinc-300 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+        className="absolute opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
         data-visible={copied}
         size={16}
       />
       <CopyLinearIcon
-        className="absolute opacity-0 scale-50 text-zinc-300 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+        className="absolute opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
         data-visible={!copied}
         size={16}
       />
diff --git a/apps/docs/components/docs/components/code-demo/code-demo.tsx b/apps/docs/components/docs/components/code-demo/code-demo.tsx
index d79b7d1873..ba44bc3bea 100644
--- a/apps/docs/components/docs/components/code-demo/code-demo.tsx
+++ b/apps/docs/components/docs/components/code-demo/code-demo.tsx
@@ -109,6 +109,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
       <DynamicReactLiveDemo
         className={className}
         code={code}
+        files={files}
         gradientColor={gradientColor}
         height={previewHeight}
         isCentered={isPreviewCentered}
diff --git a/apps/docs/components/docs/components/code-demo/react-live-demo.tsx b/apps/docs/components/docs/components/code-demo/react-live-demo.tsx
index 2ca4108f92..a93b90cfb8 100644
--- a/apps/docs/components/docs/components/code-demo/react-live-demo.tsx
+++ b/apps/docs/components/docs/components/code-demo/react-live-demo.tsx
@@ -8,9 +8,11 @@ import * as reactHookForm from "react-hook-form";
 
 import {BgGridContainer} from "@/components/bg-grid-container";
 import {GradientBox, GradientBoxProps} from "@/components/gradient-box";
+import {CopyButton} from "@/components/copy-button";
 
 export interface ReactLiveDemoProps {
   code: string;
+  files: string[];
   noInline?: boolean;
   height?: string | number;
   isCentered?: boolean;
@@ -27,8 +29,11 @@ export const scope = {
   ...reactHookForm,
 } as Record<string, unknown>;
 
+const DEFAULT_FILE = "/App.jsx";
+
 export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
   code,
+  files,
   isGradientBox,
   gradientColor = "orange",
   isCentered = false,
@@ -38,6 +43,11 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
 }) => {
   const content = (
     <>
+      {files?.[DEFAULT_FILE] && (
+        <div className="absolute top-[-24px] right-[-8px]">
+          <CopyButton className="text-zinc-400" value={files?.[DEFAULT_FILE]} />
+        </div>
+      )}
       <LivePreview
         className={clsx("live-preview flex h-full w-full not-prose", {
           "justify-center items-center": isCentered,
diff --git a/apps/docs/components/icons/info-circle.tsx b/apps/docs/components/icons/info-circle.tsx
new file mode 100644
index 0000000000..c4346917d3
--- /dev/null
+++ b/apps/docs/components/icons/info-circle.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+export const InfoCircle = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: {
+  size?: number;
+  width?: number;
+  height?: number;
+  [key: string]: any;
+}) => (
+  <svg
+    fill="none"
+    height={size || height}
+    viewBox="0 0 24 24"
+    width={size || width}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path d="M12 17V11" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5" />
+    <path
+      d="M12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z"
+      fill="currentColor"
+    />
+  </svg>
+);
diff --git a/apps/docs/components/mdx-components.tsx b/apps/docs/components/mdx-components.tsx
index 78663d4673..1affe8dd96 100644
--- a/apps/docs/components/mdx-components.tsx
+++ b/apps/docs/components/mdx-components.tsx
@@ -6,6 +6,7 @@ import NextImage from "next/image";
 import {usePostHog} from "posthog-js/react";
 
 import {ThemeSwitch} from "./theme-switch";
+import {InfoCircle} from "./icons/info-circle";
 
 import {Sandpack} from "@/components/sandpack";
 import {CarbonAd} from "@/components/ads/carbon-ad";
@@ -13,6 +14,15 @@ import * as DocsComponents from "@/components/docs/components";
 import * as BlogComponents from "@/components/blog/components";
 import {Codeblock} from "@/components/docs/components";
 import {VirtualAnchor, virtualAnchorEncode} from "@/components/virtual-anchor";
+import {
+  Table as StaticTable,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableColumnHeader,
+  TableRoot,
+} from "@/components/static-table";
 
 const Table: React.FC<{children?: React.ReactNode}> = ({children}) => {
   return (
@@ -103,9 +113,14 @@ const List: React.FC<{children?: React.ReactNode}> = ({children}) => {
   );
 };
 
-const InlineCode = ({children}: {children?: React.ReactNode}) => {
+const InlineCode = ({children, className}: {children?: React.ReactNode; className?: string}) => {
   return (
-    <Components.Code className="font-normal text-default-700 bg-default-200/50 dark:bg-default-100/60 px-2 py-0.5">
+    <Components.Code
+      className={clsx(
+        "font-mono text-tiny rounded-md text-default-500 bg-default-100 dark:bg-default-100/80 px-1.5 py-0.5",
+        className,
+      )}
+    >
       {children}
     </Components.Code>
   );
@@ -187,6 +202,88 @@ const Link = ({href, children}: {href?: string; children?: React.ReactNode}) =>
   );
 };
 
+interface APITableProps {
+  data: {
+    attribute: string;
+    type: string;
+    description: string;
+    default?: string;
+  }[];
+}
+
+export const APITable: React.FC<APITableProps> = ({data}) => {
+  return (
+    <TableRoot className="overflow-x-auto overflow-y-hidden">
+      <StaticTable aria-label="API table" className="w-full" layout="auto">
+        <TableHeader>
+          <TableRow>
+            <TableColumnHeader>Prop</TableColumnHeader>
+            <TableColumnHeader>Type</TableColumnHeader>
+            <TableColumnHeader>Default</TableColumnHeader>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.map((item, index) => (
+            <TableRow key={index} className="[&>td]:px-2 [&>td]:py-1.5 [&>td]:first:pt-4">
+              <TableCell className="flex items-center gap-1 font-mono text-small whitespace-nowrap">
+                <InlineCode className="text-default-700 bg-default-100 dark:bg-default-100/80">
+                  {item.attribute}
+                </InlineCode>
+                {item.description && (
+                  <Components.Tooltip
+                    classNames={{
+                      content: "max-w-[240px]",
+                    }}
+                    content={item.description}
+                    delay={0}
+                    placement="top"
+                  >
+                    <div className="flex items-center gap-1 cursor-help">
+                      <InfoCircle className="text-default-400" size={16} />
+                    </div>
+                  </Components.Tooltip>
+                )}
+              </TableCell>
+              <TableCell className="font-mono text-small whitespace-nowrap text-primary">
+                <InlineCode>
+                  <div className="flex max-w-[300px] flex-wrap text-wrap">{item.type}</div>
+                </InlineCode>
+              </TableCell>
+              <TableCell className="font-mono text-small whitespace-nowrap">
+                {item.default && item.default !== "-" ? (
+                  <InlineCode>
+                    {item.default !== "true" && item.default !== "false"
+                      ? `"${item.default}"`
+                      : item.default}
+                  </InlineCode>
+                ) : (
+                  <svg
+                    aria-hidden="true"
+                    className="text-default-400"
+                    fill="none"
+                    focusable="false"
+                    height="15"
+                    viewBox="0 0 15 15"
+                    width="15"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      clipRule="evenodd"
+                      d="M2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5Z"
+                      fill="currentColor"
+                      fillRule="evenodd"
+                    />
+                  </svg>
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </StaticTable>
+    </TableRoot>
+  );
+};
+
 export const MDXComponents = {
   /**
    * Next.js components
@@ -239,5 +336,6 @@ export const MDXComponents = {
       {...props}
     />
   ),
+  APITable,
   // Block,
 } as unknown as Record<string, React.ReactNode>;
diff --git a/apps/docs/components/sandpack/copy-button.tsx b/apps/docs/components/sandpack/copy-button.tsx
index d9648d7a15..2ba1db1436 100644
--- a/apps/docs/components/sandpack/copy-button.tsx
+++ b/apps/docs/components/sandpack/copy-button.tsx
@@ -5,13 +5,13 @@ import {useClipboard} from "@nextui-org/use-clipboard";
 
 import {CopyLinearIcon} from "@/components/icons";
 
-export const CopyButton = () => {
+export const CopyButton = ({code: codeProp}: {code?: string}) => {
   const {copy, copied} = useClipboard();
 
   const {sandpack} = useSandpack();
 
   const copyHandler = () => {
-    const code = sandpack.files[sandpack.activeFile].code;
+    const code = codeProp ?? sandpack.files[sandpack.activeFile].code;
 
     copy(code);
   };
diff --git a/apps/docs/components/sandpack/language-selector.tsx b/apps/docs/components/sandpack/language-selector.tsx
index faea80fd79..658af6a6fa 100644
--- a/apps/docs/components/sandpack/language-selector.tsx
+++ b/apps/docs/components/sandpack/language-selector.tsx
@@ -29,7 +29,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onC
       aria-label="Language selector"
       classNames={{
         base: "absolute z-10 right-3 bottom-4",
-        cursor: "bg-zinc-400 dark:bg-zinc-700",
+        cursor: "bg-default-600 dark:bg-default-300",
         tabList:
           "bg-transparent relative before:bg-white/5 before:w-full before:rounded-lg before:h-full before:content-[''] before:block before:z-1 before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100",
       }}
diff --git a/apps/docs/components/static-table.tsx b/apps/docs/components/static-table.tsx
new file mode 100644
index 0000000000..fa9b43f70a
--- /dev/null
+++ b/apps/docs/components/static-table.tsx
@@ -0,0 +1,73 @@
+import type {ComponentProps, FC} from "react";
+
+import {cn, table} from "@nextui-org/theme";
+
+const tableSlots = table();
+
+export const TableRoot: FC<ComponentProps<"div">> = ({children, className, ...props}) => {
+  return (
+    <div {...props} className={tableSlots.base({className})}>
+      {children}
+    </div>
+  );
+};
+
+export const Table: FC<
+  ComponentProps<"table"> & {
+    layout?: "fixed" | "auto";
+  }
+> = ({children, className, layout = "auto", ...props}) => {
+  return (
+    <table {...props} className={tableSlots.table({className, layout})}>
+      {children}
+    </table>
+  );
+};
+
+export const TableHeader: FC<ComponentProps<"thead">> = ({children, className, ...props}) => {
+  return (
+    <thead {...props} className={tableSlots.thead({className})}>
+      {children}
+    </thead>
+  );
+};
+
+export const TableBody: FC<ComponentProps<"tbody">> = ({children, className, ...props}) => {
+  return (
+    <tbody {...props} className={tableSlots.tbody({className})}>
+      {children}
+    </tbody>
+  );
+};
+
+export const TableRow: FC<ComponentProps<"tr">> = ({children, className, ...props}) => {
+  return (
+    <tr {...props} className={tableSlots.tr({className})}>
+      {children}
+    </tr>
+  );
+};
+
+export const TableColumnHeader: FC<ComponentProps<"th">> = ({children, className, ...props}) => {
+  return (
+    <td {...props} className={tableSlots.th({className})}>
+      {children}
+    </td>
+  );
+};
+
+export const TableCell: FC<ComponentProps<"td">> = ({children, className, ...props}) => {
+  return (
+    <td {...props} className={tableSlots.td({class: cn("p-0", className)})}>
+      {children}
+    </td>
+  );
+};
+
+export const TableColumn: FC<ComponentProps<"th">> = ({children, className, ...props}) => {
+  return (
+    <th {...props} className={tableSlots.th({class: cn("p-0", className)})}>
+      {children}
+    </th>
+  );
+};
diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
index 4aa902518b..ef4c994950 100644
--- a/apps/docs/content/docs/components/alert.mdx
+++ b/apps/docs/content/docs/components/alert.mdx
@@ -128,25 +128,104 @@ Alert has the following slots:
 
 ### Alert Props
 
-| Attribute        | Type                                                                        | Description                                 | Default   |
-| ---------------- | --------------------------------------------------------------------------- | ------------------------------------------- | --------- |
-| title            | `string`                                                                    | The alert title                             | -         |
-| icon             | `ReactNode`                                                                 | The alert icon - overrides the default icon | -         |
-| description      | `ReactNode`                                                                 | The alert description                       | -         |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The alert color theme                       | `default` |
-| variant          | `solid` \| `bordered` \| `flat` \| `faded`                                  | The alert variant                           | `flat`    |
-| radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                    | The alert border radius                     | `md`      |
-| startContent     | `ReactNode`                                                                 | The alert start content                     | -         |
-| endContent       | `ReactNode`                                                                 | The alert end content                       | -         |
-| isVisible        | `boolean`                                                                   | Whether the alert is visible                | -         |
-| isClosable       | `boolean`                                                                   | Whether the alert can be closed             | `false`   |
-| hideIcon         | `boolean`                                                                   | Whether the icon is hidden                  | `false`   |
-| hideIconWrapper  | `boolean`                                                                   | Whether the icon wrapper is hidden          | `false`   |
-| closeButtonProps | `ButtonProps`                                                               | Props for the close button                  | -         |
+<APITable
+  data={[
+    {
+      attribute: "title",
+      type: "string",
+      description: "The alert title",
+      default: "-"
+    },
+    {
+      attribute: "icon", 
+      type: "ReactNode",
+      description: "The alert icon - overrides the default icon",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode", 
+      description: "The alert description",
+      default: "-"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The alert color theme",
+      default: "default"
+    },
+    {
+      attribute: "variant",
+      type: "solid | bordered | flat | faded",
+      description: "The alert variant",
+      default: "flat"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The alert border radius",
+      default: "md"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The alert start content",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "The alert end content", 
+      default: "-"
+    },
+    {
+      attribute: "isVisible",
+      type: "boolean",
+      description: "Whether the alert is visible",
+      default: "-"
+    },
+    {
+      attribute: "isClosable",
+      type: "boolean",
+      description: "Whether the alert can be closed",
+      default: "false"
+    },
+    {
+      attribute: "hideIcon",
+      type: "boolean",
+      description: "Whether the icon is hidden",
+      default: "false"
+    },
+    {
+      attribute: "hideIconWrapper",
+      type: "boolean",
+      description: "Whether the icon wrapper is hidden",
+      default: "false"
+    },
+    {
+      attribute: "closeButtonProps",
+      type: "ButtonProps",
+      description: "Props for the close button",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Alert Events
 
-| Attribute       | Type                           | Description                                      |
-| --------------- | ------------------------------ | ------------------------------------------------ |
-| onClose         | `() => void`                   | Handler called when the close button is clicked  |
-| onVisibleChange | `(isVisible: boolean) => void` | Handler called when the alert visibility changes |
+<APITable
+  data={[
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler called when the close button is clicked",
+      default: "-"
+    },
+    {
+      attribute: "onVisibleChange",
+      type: "(isVisible: boolean) => void",
+      description: "Handler called when the alert visibility changes",
+      default: "-"
+    }
+  ]}
+/>
\ No newline at end of file
diff --git a/apps/docs/content/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx
index 6b4cd37727..94f3ff92d2 100644
--- a/apps/docs/content/docs/components/autocomplete.mdx
+++ b/apps/docs/content/docs/components/autocomplete.mdx
@@ -435,74 +435,383 @@ properties to customize the popover, listbox and input components.
 
 ### Autocomplete Props
 
-| Attribute                   | Type                                                                                                                                  | Description                                                                                                                                                    | Default                  |
-| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
-| children\*                  | `ReactNode[]`                                                                                                                         | The children to render. Usually a list of `AutocompleteItem` and `AutocompleteSection` elements.                                                               | -                        |
-| label                       | `ReactNode`                                                                                                                           | The content to display as the label.                                                                                                                           | -                        |
-| name                        | `string`                                                                                                                              | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).  | -                        |
-| variant                     | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                       | The variant of the Autocomplete.                                                                                                                               | `flat`                   |
-| color                       | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                           | The color of the Autocomplete.                                                                                                                                 | `default`                |
-| size                        | `sm` \| `md` \| `lg`                                                                                                                  | The size of the Autocomplete.                                                                                                                                  | `md`                     |
-| radius                      | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                              | The radius of the Autocomplete.                                                                                                                                | -                        |
-| items                       | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)                                | The list of Autocomplete items. (controlled)                                                                                                                   | -                        |
-| defaultItems                | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)                                | The list of Autocomplete items (uncontrolled).                                                                                                                 | -                        |
-| inputValue                  | `string`                                                                                                                              | The value of the Autocomplete input (controlled).                                                                                                              | -                        |
-| defaultInputValue           | `string`                                                                                                                              | The value of the Autocomplete input (uncontrolled).                                                                                                            | -                        |
-| allowsCustomValue           | `boolean`                                                                                                                             | Whether the Autocomplete allows a non-item matching input value to be set.                                                                                     | `false`                  |
-| allowsEmptyCollection       | `boolean`                                                                                                                             | Whether the autocomplete allows the menu to be open when the collection is empty.                                                                              | `true`                   |
-| shouldCloseOnBlur           | `boolean`                                                                                                                             | Whether the Autocomplete should close when the input is blurred.                                                                                               | `true`                   |
-| placeholder                 | `string`                                                                                                                              | Temporary text that occupies the text input when it is empty.                                                                                                  | -                        |
-| description                 | `ReactNode`                                                                                                                           | A description for the field. Provides a hint such as specific requirements for what to choose.                                                                 | -                        |
-| menuTrigger                 | `focus` \| `input` \| `manual`                                                                                                        | The action that causes the menu to open.                                                                                                                       | `focus`                  |
-| labelPlacement              | `inside` \| `outside` \| `outside-left`                                                                                               | The position of the label.                                                                                                                                     | `inside`                 |
-| selectedKey                 | `React.Key`                                                                                                                           | The currently selected key in the collection (controlled).                                                                                                     | -                        |
-| defaultSelectedKey          | `React.Key`                                                                                                                           | The initial selected key in the collection (uncontrolled).                                                                                                     | -                        |
-| disabledKeys                | `all` \| `React.Key[]`                                                                                                                | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.                                                        | -                        |
-| errorMessage                | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                                                 | An error message to display below the field.                                                                                                                   | -                        |
-| validate                    | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined`                             | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                            | -                        |
-| validationBehavior          | `native` \| `aria`                                                                                                                    | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. | `aria`                   |
-| startContent                | `ReactNode`                                                                                                                           | Element to be rendered in the left side of the Autocomplete.                                                                                                   | -                        |
-| endContent                  | `ReactNode`                                                                                                                           | Element to be rendered in the right side of the Autocomplete.                                                                                                  | -                        |
-| autoFocus                   | `boolean`                                                                                                                             | Whether the Autocomplete should be focused on render.                                                                                                          | `false`                  |
-| defaultFilter               | `(textValue: string, inputValue: string) => boolean`                                                                                  | The filter function used to determine if a option should be included in the Autocomplete list.                                                                 | -                        |
-| filterOptions               | [Intl.CollatorOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator/Collator)            | The options used to create the collator used for filtering.                                                                                                    | `{ sensitivity: 'base'}` |
-| maxListboxHeight            | `number`                                                                                                                              | The maximum height of the listbox in pixels. Required when using virtualization.                                                                               | `256`                    |
-| itemHeight                  | `number`                                                                                                                              | The fixed height of each item in pixels. Required when using virtualization.                                                                                   | `32`                     |
-| isVirtualized               | `boolean`                                                                                                                             | Whether to enable virtualization. By default, it's enabled when the number of items exceeds 50.                                                                | `undefined`              |
-| isReadOnly                  | `boolean`                                                                                                                             | Whether the Autocomplete is read only.                                                                                                                         | `false`                  |
-| isRequired                  | `boolean`                                                                                                                             | Whether the Autocomplete is required.                                                                                                                          | `false`                  |
-| isInvalid                   | `boolean`                                                                                                                             | Whether the Autocomplete is invalid.                                                                                                                           | `false`                  |
-| isDisabled                  | `boolean`                                                                                                                             | Whether the Autocomplete is disabled.                                                                                                                          | `false`                  |
-| fullWidth                   | `boolean`                                                                                                                             | Whether the input should take up the width of its parent.                                                                                                      | `true`                   |
-| selectorIcon                | `ReactNode`                                                                                                                           | The icon that represents the autocomplete open state. Usually a chevron icon.                                                                                  | -                        |
-| clearIcon                   | `ReactNode`                                                                                                                           | The icon to be used in the clear button. Usually a cross icon.                                                                                                 | -                        |
-| showScrollIndicators        | `boolean`                                                                                                                             | Whether the scroll indicators should be shown when the listbox is scrollable.                                                                                  | `true`                   |
-| scrollRef                   | `React.RefObject<HTMLElement>`                                                                                                        | A ref to the scrollable element.                                                                                                                               | -                        |
-| inputProps                  | [InputProps](/docs/components/input#api)                                                                                              | Props to be passed to the Input component.                                                                                                                     | -                        |
-| popoverProps                | [PopoverProps](/docs/components/popover#api)                                                                                          | Props to be passed to the Popover component.                                                                                                                   | -                        |
-| listboxProps                | [ListboxProps](/docs/components/listbox#api)                                                                                          | Props to be passed to the Listbox component.                                                                                                                   | -                        |
-| scrollShadowProps           | [ScrollShadowProps](/docs/components/scroll-shadow#api)                                                                               | Props to be passed to the ScrollShadow component.                                                                                                              | -                        |
-| selectorButtonProps         | [ButtonProps](/docs/components/button#api)                                                                                            | Props to be passed to the selector button.                                                                                                                     | -                        |
-| clearButtonProps            | [ButtonProps](/docs/components/button#api)                                                                                            | Props to be passed to the clear button.                                                                                                                        | -                        |
-| isClearable                 | `boolean`                                                                                                                             | Whether the clear button should be shown.                                                                                                                      | `true`                   |
-| disableClearable            | `boolean`                                                                                                                             | Whether the clear button should be hidden. (**Deprecated**) Use `isClearable` instead.                                                                         | `false`                  |
-| disableAnimation            | `boolean`                                                                                                                             | Whether the Autocomplete should be animated.                                                                                                                   | `true`                   |
-| disableSelectorIconRotation | `boolean`                                                                                                                             | Whether the select should disable the rotation of the selector icon.                                                                                           | `false`                  |
-| classNames                  | `Record<"base"｜ "listboxWrapper"｜ "listbox"｜ "popoverContent" ｜ "endContentWrapper"｜ "clearButton" ｜ "selectorButton", string>` | Allows to set custom class names for the Autocomplete slots.                                                                                                   | -                        |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render. Usually a list of AutocompleteItem and AutocompleteSection elements.",
+      default: "-"
+    },
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "name",
+      type: "string", 
+      description: "The name of the input element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the Autocomplete.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the Autocomplete.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the Autocomplete.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the Autocomplete.",
+      default: "-"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "The list of Autocomplete items. (controlled)",
+      default: "-"
+    },
+    {
+      attribute: "defaultItems",
+      type: "Iterable<T>",
+      description: "The list of Autocomplete items (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "inputValue",
+      type: "string",
+      description: "The value of the Autocomplete input (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultInputValue",
+      type: "string",
+      description: "The value of the Autocomplete input (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "allowsCustomValue",
+      type: "boolean",
+      description: "Whether the Autocomplete allows a non-item matching input value to be set.",
+      default: "false"
+    },
+    {
+      attribute: "allowsEmptyCollection",
+      type: "boolean",
+      description: "Whether the autocomplete allows the menu to be open when the collection is empty.",
+      default: "true"
+    },
+    {
+      attribute: "shouldCloseOnBlur",
+      type: "boolean",
+      description: "Whether the Autocomplete should close when the input is blurred.",
+      default: "true"
+    },
+    {
+      attribute: "placeholder",
+      type: "string",
+      description: "Temporary text that occupies the text input when it is empty.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the field. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "menuTrigger",
+      type: "focus | input | manual",
+      description: "The action that causes the menu to open.",
+      default: "focus"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "selectedKey",
+      type: "React.Key",
+      description: "The currently selected key in the collection (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelectedKey",
+      type: "React.Key",
+      description: "The initial selected key in the collection (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "disabledKeys",
+      type: "all | React.Key[]",
+      description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | ((v: ValidationResult) => ReactNode)",
+      description: "An error message to display below the field.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: { inputValue: string, selectedKey: React.Key }) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), and return error messages for invalid values.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.",
+      default: "aria"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the left side of the Autocomplete.",
+      default: "-"
+    },
+    {
+      attribute: "endContent", 
+      type: "ReactNode",
+      description: "Element to be rendered in the right side of the Autocomplete.",
+      default: "-"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether the Autocomplete should be focused on render.",
+      default: "false"
+    },
+    {
+      attribute: "defaultFilter",
+      type: "(textValue: string, inputValue: string) => boolean",
+      description: "The filter function used to determine if a option should be included in the Autocomplete list.",
+      default: "-"
+    },
+    {
+      attribute: "filterOptions",
+      type: "Intl.CollatorOptions",
+      description: "The options used to create the collator used for filtering.",
+      default: "{ sensitivity: 'base'}"
+    },
+    {
+      attribute: "maxListboxHeight",
+      type: "number",
+      description: "The maximum height of the listbox in pixels. Required when using virtualization.",
+      default: "256"
+    },
+    {
+      attribute: "itemHeight",
+      type: "number", 
+      description: "The fixed height of each item in pixels. Required when using virtualization.",
+      default: "32"
+    },
+    {
+      attribute: "isVirtualized",
+      type: "boolean",
+      description: "Whether to enable virtualization. By default, it's enabled when the number of items exceeds 50.",
+      default: "undefined"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the Autocomplete is read only.",
+      default: "false"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether the Autocomplete is required.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the Autocomplete is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the Autocomplete is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the input should take up the width of its parent.",
+      default: "true"
+    },
+    {
+      attribute: "selectorIcon",
+      type: "ReactNode",
+      description: "The icon that represents the autocomplete open state. Usually a chevron icon.",
+      default: "-"
+    },
+    {
+      attribute: "clearIcon",
+      type: "ReactNode",
+      description: "The icon to be used in the clear button. Usually a cross icon.",
+      default: "-"
+    },
+    {
+      attribute: "showScrollIndicators",
+      type: "boolean",
+      description: "Whether the scroll indicators should be shown when the listbox is scrollable.",
+      default: "true"
+    },
+    {
+      attribute: "scrollRef",
+      type: "React.RefObject<HTMLElement>",
+      description: "A ref to the scrollable element.",
+      default: "-"
+    },
+    {
+      attribute: "inputProps",
+      type: "InputProps",
+      description: "Props to be passed to the Input component.",
+      default: "-"
+    },
+    {
+      attribute: "popoverProps",
+      type: "PopoverProps",
+      description: "Props to be passed to the Popover component.",
+      default: "-"
+    },
+    {
+      attribute: "listboxProps",
+      type: "ListboxProps",
+      description: "Props to be passed to the Listbox component.",
+      default: "-"
+    },
+    {
+      attribute: "scrollShadowProps",
+      type: "ScrollShadowProps",
+      description: "Props to be passed to the ScrollShadow component.",
+      default: "-"
+    },
+    {
+      attribute: "selectorButtonProps",
+      type: "ButtonProps",
+      description: "Props to be passed to the selector button.",
+      default: "-"
+    },
+    {
+      attribute: "clearButtonProps",
+      type: "ButtonProps",
+      description: "Props to be passed to the clear button.",
+      default: "-"
+    },
+    {
+      attribute: "isClearable",
+      type: "boolean",
+      description: "Whether the clear button should be shown.",
+      default: "true"
+    },
+    {
+      attribute: "disableClearable",
+      type: "boolean",
+      description: "Whether the clear button should be hidden. (Deprecated) Use isClearable instead.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the Autocomplete should be animated.",
+      default: "true"
+    },
+    {
+      attribute: "disableSelectorIconRotation",
+      type: "boolean",
+      description: "Whether the select should disable the rotation of the selector icon.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'base' | 'listboxWrapper' | 'listbox' | 'popoverContent' | 'endContentWrapper' | 'clearButton' | 'selectorButton', string>",
+      description: "Allows to set custom class names for the Autocomplete slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Autocomplete Events
 
-| Attribute         | Type                                                         | Description                                                                                                                                   |
-| ----------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| onOpenChange      | `(isOpen: boolean, menuTrigger?: MenuTriggerAction) => void` | Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu. |
-| onInputChange     | `(value: string) => void`                                    | Handler that is called when the Autocomplete input value changes.                                                                             |
-| onSelectionChange | `(key: React.Key) => void`                                   | Handler that is called when the Autocomplete selection changes.                                                                               |
-| onFocus           | `(e:  FocusEvent<HTMLInputElement>) => void`                 | Handler that is called when the Autocomplete input is focused.                                                                                |
-| onBlur            | `(e:  FocusEvent<HTMLInputElement>) => void`                 | Handler that is called when the Autocomplete input is blurred.                                                                                |
-| onFocusChange     | `(isFocused: boolean) => void`                               | Handler that is called when the Autocomplete input focus changes.                                                                             |
-| onKeyDown         | `(e: KeyboardEvent) => void`                                 | Handler that is called when a key is pressed.                                                                                                 |
-| onKeyUp           | `(e: KeyboardEvent) => void`                                 | Handler that is called when a key is released.                                                                                                |
-| onClose           | `() => void`                                                 | Handler that is called when the Autocomplete's Popover is closed.                                                                             |
+<APITable
+  data={[
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean, menuTrigger?: MenuTriggerAction) => void",
+      description: "Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu.",
+      default: "-"
+    },
+    {
+      attribute: "onInputChange",
+      type: "(value: string) => void",
+      description: "Handler that is called when the Autocomplete input value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onSelectionChange",
+      type: "(key: React.Key) => void",
+      description: "Handler that is called when the Autocomplete selection changes.",
+      default: "-"
+    },
+    {
+      attribute: "onFocus",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the Autocomplete input is focused.",
+      default: "-"
+    },
+    {
+      attribute: "onBlur",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the Autocomplete input is blurred.",
+      default: "-"
+    },
+    {
+      attribute: "onFocusChange",
+      type: "(isFocused: boolean) => void",
+      description: "Handler that is called when the Autocomplete input focus changes.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is released.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the Autocomplete's Popover is closed.",
+      default: "-"
+    }
+  ]}
+/>
 
 ---
 
diff --git a/apps/docs/content/docs/components/avatar.mdx b/apps/docs/content/docs/components/avatar.mdx
index a8603a96e6..4c6b1a4f3f 100644
--- a/apps/docs/content/docs/components/avatar.mdx
+++ b/apps/docs/content/docs/components/avatar.mdx
@@ -170,34 +170,158 @@ You can customize any part of the avatar by using the `classNames` prop, each `s
 
 ### Avatar Props
 
-| Attribute    | Type                                                                        | Description                                                                  | Default   |
-| ------------ | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | --------- |
-| src          | `string`                                                                    | The source URL of the image to be displayed.                                 | -         |
-| color        | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | Sets the avatar background color.                                            | `default` |
-| radius       | `none` \| `sm` \| `md` \| `lg` \| `full`                                    | Sets the avatar border radius.                                               | `full`    |
-| size         | `sm` \| `md` \| `lg`                                                        | Sets the avatar size.                                                        | `md`      |
-| name         | `string`                                                                    | Displays the initials if the image is not provided or fails to load.         | -         |
-| icon         | `ReactNode`                                                                 | Displays a custom icon inside the avatar.                                    | -         |
-| fallback     | `ReactNode`                                                                 | A custom fallback component to display when the image fails to load.         | -         |
-| isBordered   | `boolean`                                                                   | If `true`, adds a border around the avatar.                                  | `false`   |
-| isDisabled   | `boolean`                                                                   | If `true`, disables the avatar and applies a disabled styling.               | `false`   |
-| isFocusable  | `boolean`                                                                   | If `true`, makes the avatar focusable for keyboard navigation.               | `false`   |
-| showFallback | `boolean`                                                                   | If `true`, shows the fallback icon or initials when the image fails to load. | `false`   |
-| ImgComponent | `React.ElementType`                                                         | The component to be used as the image element.                               | `img`     |
-| imgProps     | `ImgComponentProps`                                                         | Props to be passed to the image element.                                     | -         |
-| classNames   | `Record<"base"｜ "img"｜ "fallback"｜ "name"｜ "icon", string>`             | Allows to set custom class names for the avatar slots.                       | -         |
+<APITable
+  data={[
+    {
+      attribute: "src",
+      type: "string", 
+      description: "The source URL of the image to be displayed.",
+      default: "-"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "Sets the avatar background color.",
+      default: "default"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "Sets the avatar border radius.",
+      default: "full"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "Sets the avatar size.",
+      default: "md"
+    },
+    {
+      attribute: "name",
+      type: "string",
+      description: "Displays the initials if the image is not provided or fails to load.",
+      default: "-"
+    },
+    {
+      attribute: "icon",
+      type: "ReactNode",
+      description: "Displays a custom icon inside the avatar.",
+      default: "-"
+    },
+    {
+      attribute: "fallback",
+      type: "ReactNode",
+      description: "A custom fallback component to display when the image fails to load.",
+      default: "-"
+    },
+    {
+      attribute: "isBordered",
+      type: "boolean",
+      description: "If true, adds a border around the avatar.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean", 
+      description: "If true, disables the avatar and applies a disabled styling.",
+      default: "false"
+    },
+    {
+      attribute: "isFocusable",
+      type: "boolean",
+      description: "If true, makes the avatar focusable for keyboard navigation.",
+      default: "false"
+    },
+    {
+      attribute: "showFallback",
+      type: "boolean",
+      description: "If true, shows the fallback icon or initials when the image fails to load.",
+      default: "false"
+    },
+    {
+      attribute: "ImgComponent",
+      type: "React.ElementType",
+      description: "The component to be used as the image element.",
+      default: "img"
+    },
+    {
+      attribute: "imgProps",
+      type: "ImgComponentProps",
+      description: "Props to be passed to the image element.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\" | \"img\" | \"fallback\" | \"name\" | \"icon\", string>",
+      description: "Allows to set custom class names for the avatar slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Avatar Group Props
 
-| Attribute   | Type                               | Description                                         | Default |
-| ----------- | ---------------------------------- | --------------------------------------------------- | ------- |
-| max         | `number`                           | The maximum number of visible avatars               | `5`     |
-| total       | `number`                           | Control the number of avatar not visible            | -       |
-| size        | `AvatarProps['size']`              | Size of the avatars                                 | -       |
-| color       | `AvatarProps['color']`             | Color of the avatars                                | -       |
-| radius      | `AvatarProps['radius']`            | Radius of the avatars                               | -       |
-| isGrid      | `boolean`                          | Whether the avatars should be displayed in a grid   | `false` |
-| isDisabled  | `boolean`                          | Whether the avatars are disabled                    | -       |
-| isBordered  | `boolean`                          | Whether the avatars have a border                   | -       |
-| renderCount | `(count: number) => ReactNode`     | This allows you to render a custom count component. | -       |
-| classNames  | `Record<"base"｜ "count", string>` | Allows to set custom class names for the avatar group slots. | -  |
+<APITable
+  data={[
+    {
+      attribute: "max",
+      type: "number",
+      description: "The maximum number of visible avatars",
+      default: "5"
+    },
+    {
+      attribute: "total",
+      type: "number", 
+      description: "Control the number of avatar not visible",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "AvatarProps['size']",
+      description: "Size of the avatars",
+      default: "-"
+    },
+    {
+      attribute: "color",
+      type: "AvatarProps['color']",
+      description: "Color of the avatars",
+      default: "-"
+    },
+    {
+      attribute: "radius",
+      type: "AvatarProps['radius']",
+      description: "Radius of the avatars",
+      default: "-"
+    },
+    {
+      attribute: "isGrid",
+      type: "boolean",
+      description: "Whether the avatars should be displayed in a grid",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the avatars are disabled",
+      default: "-"
+    },
+    {
+      attribute: "isBordered",
+      type: "boolean",
+      description: "Whether the avatars have a border",
+      default: "-"
+    },
+    {
+      attribute: "renderCount",
+      type: "(count: number) => ReactNode",
+      description: "This allows you to render a custom count component.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\" | \"count\", string>",
+      description: "Allows to set custom class names for the avatar group slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/badge.mdx b/apps/docs/content/docs/components/badge.mdx
index 3a57b4155e..477d3e2c27 100644
--- a/apps/docs/content/docs/components/badge.mdx
+++ b/apps/docs/content/docs/components/badge.mdx
@@ -103,19 +103,91 @@ The Badge component has two slots:
 
 ### Badge Props
 
-| Attribute        | Type                                                                        | Description                                                                              | Default     |
-| ---------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------- |
-| children \*      | `ReactNode`                                                                 | The wrapped component.                                                                   | -           |
-| content          | `string` \| `number` \| `ReactNode`                                         | The content of the badge. The badge will be rendered relative to its children.           | -           |
-| variant          | `solid` \| `flat` \| `faded` \| `shadow`                                    | The variant style of the badge.                                                          | `solid`     |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the badge.                                                                  | `default`   |
-| size             | `sm` \| `md` \| `lg`                                                        | The size of the badge.                                                                   | `md`        |
-| shape            | `circle` \| `rectangle`                                                     | The shape of the badge.                                                                  | `rectangle` |
-| placement        | `top-right` \| `top-left` \| `bottom-right` \| `bottom-left`                | The placement of the badge.                                                              | `top-right` |
-| showOutline      | `boolean`                                                                   | If `true`, the badge will have an outline.                                               | `true`      |
-| disableOutline   | `boolean`                                                                   | If `true`, the badge will not have an outline. **Deprecated** use `showOutline` instead. | `false`     |
-| disableAnimation | `boolean`                                                                   | If `true`, the badge will not have an animation.                                         | `false`     |
-| isInvisible      | `boolean`                                                                   | If `true`, the badge will be invisible.                                                  | `false`     |
-| isOneChar        | `boolean`                                                                   | If `true`, the badge will have the same width and height.                                | `false`     |
-| isDot            | `boolean`                                                                   | If `true`, the badge will have smaller dimensions.                                       | `false`     |
-| classNames       | `Record<"base"｜"badge", string>`                                           | Allows to set custom class names for the badge slots.                                    | -           |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The wrapped component.",
+      default: "-"
+    },
+    {
+      attribute: "content", 
+      type: "string | number | ReactNode",
+      description: "The content of the badge. The badge will be rendered relative to its children.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "solid | flat | faded | shadow",
+      description: "The variant style of the badge.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the badge.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the badge.",
+      default: "md"
+    },
+    {
+      attribute: "shape",
+      type: "circle | rectangle",
+      description: "The shape of the badge.",
+      default: "rectangle"
+    },
+    {
+      attribute: "placement",
+      type: "top-right | top-left | bottom-right | bottom-left",
+      description: "The placement of the badge.",
+      default: "top-right"
+    },
+    {
+      attribute: "showOutline",
+      type: "boolean",
+      description: "If `true`, the badge will have an outline.",
+      default: "true"
+    },
+    {
+      attribute: "disableOutline",
+      type: "boolean", 
+      description: "If `true`, the badge will not have an outline. **Deprecated** use `showOutline` instead.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "If `true`, the badge will not have an animation.",
+      default: "false"
+    },
+    {
+      attribute: "isInvisible",
+      type: "boolean",
+      description: "If `true`, the badge will be invisible.",
+      default: "false"
+    },
+    {
+      attribute: "isOneChar",
+      type: "boolean",
+      description: "If `true`, the badge will have the same width and height.",
+      default: "false"
+    },
+    {
+      attribute: "isDot",
+      type: "boolean",
+      description: "If `true`, the badge will have smaller dimensions.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\"｜\"badge\", string>",
+      description: "Allows to set custom class names for the badge slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/breadcrumbs.mdx b/apps/docs/content/docs/components/breadcrumbs.mdx
index 05a461302c..39782e1b9c 100644
--- a/apps/docs/content/docs/components/breadcrumbs.mdx
+++ b/apps/docs/content/docs/components/breadcrumbs.mdx
@@ -211,65 +211,235 @@ You can customize the `Breadcrumbs` style by using the `classNames` prop and its
 
 ### Breadcrumbs Props
 
-| Attribute           | Type                                                                           | Description                                                                     | Default      |
-| ------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------- | ------------ |
-| children\*          | `ReactNode`                                                                    | The contents of the Breadcrumbs. Usually a list of `BreadcrumbItem` components. | -            |
-| variant             | `solid` \| `bordered` \| `light`                                               | The Breadcrumbs list appearance style.                                          | `solid`      |
-| color               | `foreground` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The Breadcrumbs' items color theme.                                             | `foreground` |
-| size                | `sm` \| `md` \| `lg`                                                           | The Breadcrumbs' items size.                                                    | `md`         |
-| radius              | `none` \| `sm` \| `md` \| `lg` \| `full`                                       | The Breadcrumbs list border radius.                                             | -            |
-| underline           | `none` \| `active` \| `hover` \| `focus` \| `always`                           | The Breadcrumbs' items underline style.                                         | `none`       |
-| separator           | `ReactNode`                                                                    | The custom separator between Breadcrumbs. It is a chevron by default.           | -            |
-| maxItems            | `number`                                                                       | The maximum number of breadcrumbs to display.                                   | -            |
-| itemsBeforeCollapse | `number`                                                                       | The number of items to show before the ellipsis.                                | -            |
-| itemsAfterCollapse  | `number`                                                                       | The number of items to show after the ellipsis.                                 | -            |
-| hideSeparator       | `boolean`                                                                      | Whether to hide the separator between breadcrumbs.                              | `false`      |
-| isDisabled          | `boolean`                                                                      | Whether the Breadcrumbs are disabled except the last item.                      | `false`      |
-| disableAnimation    | `boolean`                                                                      | Whether the Breadcrumbs should display animations.                              | `false`      |
-| itemClasses         | `Record<"base"｜ "item"｜ "separator", string>`                                | Allows to set custom class names for the breadcrumbs item slots.                | -            |
-| classNames          | `Record<"base"｜ "list"｜ "ellipsis"｜ "separator", string>`                   | Allows to set custom class names for the breadcrumbs slots.                     | -            |
-
-### Breadcrumbs Functions
-
-| Attribute      | Type                                                | Description                                                |
-| -------------- | --------------------------------------------------- | ---------------------------------------------------------- |
-| renderEllipsis | [RenderEllipsisFunction](#render-ellipsis-function) | Handler called when the press is released over the target. |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The contents of the Breadcrumbs. Usually a list of `BreadcrumbItem` components.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "solid | bordered | light",
+      description: "The Breadcrumbs list appearance style.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "foreground | primary | secondary | success | warning | danger",
+      description: "The Breadcrumbs' items color theme.",
+      default: "foreground"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The Breadcrumbs' items size.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The Breadcrumbs list border radius.",
+      default: "-"
+    },
+    {
+      attribute: "underline",
+      type: "none | active | hover | focus | always",
+      description: "The Breadcrumbs' items underline style.",
+      default: "none"
+    },
+    {
+      attribute: "separator",
+      type: "ReactNode",
+      description: "The custom separator between Breadcrumbs. It is a chevron by default.",
+      default: "-"
+    },
+    {
+      attribute: "maxItems",
+      type: "number",
+      description: "The maximum number of breadcrumbs to display.",
+      default: "-"
+    },
+    {
+      attribute: "itemsBeforeCollapse",
+      type: "number",
+      description: "The number of items to show before the ellipsis.",
+      default: "-"
+    },
+    {
+      attribute: "itemsAfterCollapse",
+      type: "number",
+      description: "The number of items to show after the ellipsis.",
+      default: "-"
+    },
+    {
+      attribute: "hideSeparator",
+      type: "boolean",
+      description: "Whether to hide the separator between breadcrumbs.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the Breadcrumbs are disabled except the last item.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the Breadcrumbs should display animations.",
+      default: "false"
+    },
+    {
+      attribute: "itemClasses",
+      type: "Record<\"base\" | \"item\" | \"separator\", string>",
+      description: "Allows to set custom class names for the breadcrumbs item slots.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\" | \"list\" | \"ellipsis\" | \"separator\", string>",
+      description: "Allows to set custom class names for the breadcrumbs slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Breadcrumbs Events
 
-| Attribute | Type                       | Description                                                                  |
-| --------- | -------------------------- | ---------------------------------------------------------------------------- |
-| onAction  | `(key: React.Key) => void` | Handler called when any breadcrumb item is pressed. It returns the item key. |
-
-<Spacer y={2} />
+<APITable
+  data={[
+    {
+      attribute: "onAction",
+      type: "(key: React.Key) => void",
+      description: "Handler called when any breadcrumb item is pressed. It returns the item key.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### BreadcrumbItem Props
 
-| Attribute        | Type                                                                           | Description                                               | Default      |
-| ---------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------- | ------------ |
-| children\*       | `ReactNode`                                                                    | The contents of the item. Usually the link label or icon. | -            |
-| color            | `foreground` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The item color theme.                                     | `foreground` |
-| size             | `sm` \| `md` \| `lg`                                                           | The item size.                                            | `md`         |
-| underline        | `none` \| `active` \| `hover` \| `focus` \| `always`                           | The item underline style.                                 | `none`       |
-| startContent     | `ReactNode`                                                                    | The item start content.                                   | -            |
-| endContent       | `ReactNode`                                                                    | The item end content.                                     | -            |
-| separator        | `ReactNode`                                                                    | The item custom separator. It is a chevron by default.    | -            |
-| isCurrent        | `boolean`                                                                      | Whether the item is the current/active one.               | `false`      |
-| isLast           | `boolean`                                                                      | Whether the item is the last one.                         | `false`      |
-| hideSeparator    | `boolean`                                                                      | Whether to hide the item separator.                       | `false`      |
-| isDisabled       | `boolean`                                                                      | Whether the item is disabled.                             | `false`      |
-| disableAnimation | `boolean`                                                                      | Whether the item should display animations.               | `false`      |
-| classNames       | `Record<"base"｜ "item"｜ "separator", string>`                                | Allows to set custom class names for the item slots.      | -            |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The contents of the item. Usually the link label or icon.",
+      default: "-"
+    },
+    {
+      attribute: "color",
+      type: "foreground | primary | secondary | success | warning | danger",
+      description: "The item color theme.",
+      default: "foreground"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The item size.",
+      default: "md"
+    },
+    {
+      attribute: "underline",
+      type: "none | active | hover | focus | always",
+      description: "The item underline style.",
+      default: "none"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The item start content.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "The item end content.",
+      default: "-"
+    },
+    {
+      attribute: "separator",
+      type: "ReactNode",
+      description: "The item custom separator. It is a chevron by default.",
+      default: "-"
+    },
+    {
+      attribute: "isCurrent",
+      type: "boolean",
+      description: "Whether the item is the current/active one.",
+      default: "false"
+    },
+    {
+      attribute: "isLast",
+      type: "boolean",
+      description: "Whether the item is the last one.",
+      default: "false"
+    },
+    {
+      attribute: "hideSeparator",
+      type: "boolean",
+      description: "Whether to hide the item separator.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the item is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the item should display animations.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\" | \"item\" | \"separator\", string>",
+      description: "Allows to set custom class names for the item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### BreadcrumbItem Events
 
-| Attribute    | Type                         | Description                                                                                                 |
-| ------------ | ---------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| onPress      | `(e: PressEvent) => void`    | Handler called when the press is released over the target.                                                  |
-| onPressStart | `(e: PressEvent) => void`    | Handler called when a press interaction starts.                                                             |
-| onPressEnd   | `(e: PressEvent) => void`    | Handler called when a press interaction ends, either over the target or when the pointer leaves the target. |
-| onKeyDown    | `(e: KeyboardEvent) => void` | Handler called when a key is pressed.                                                                       |
-| onKeyUp      | `(e: KeyboardEvent) => void` | Handler called when a key is released.                                                                      |
+<APITable
+  data={[
+    {
+      attribute: "onPress",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when the press is released over the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressStart",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction starts.",
+      default: "-"
+    },
+    {
+      attribute: "onPressEnd",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction ends, either over the target or when the pointer leaves the target.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is released.",
+      default: "-"
+    }
+  ]}
+/>
 
 <Spacer y={2} />
 
diff --git a/apps/docs/content/docs/components/button.mdx b/apps/docs/content/docs/components/button.mdx
index 5fabb5da40..61a2989ffb 100644
--- a/apps/docs/content/docs/components/button.mdx
+++ b/apps/docs/content/docs/components/button.mdx
@@ -13,7 +13,7 @@ Buttons allow users to perform actions and choose with a single tap.
 
 ---
 
-<CarbonAd/>
+<CarbonAd />
 
 ## Installation
 
@@ -24,7 +24,7 @@ Buttons allow users to perform actions and choose with a single tap.
     npm: "npm install @nextui-org/button",
     yarn: "yarn add @nextui-org/button",
     pnpm: "pnpm add @nextui-org/button",
-    bun: "bun add @nextui-org/button"
+    bun: "bun add @nextui-org/button",
   }}
 />
 
@@ -101,7 +101,12 @@ You can customize the `Button` component by passing custom Tailwind CSS classes
 
 You can also use the `useButton` hook to create your own button component.
 
-<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="Custom Implementation" files={buttonContent.customImpl} />
+<CodeDemo
+  showPreview={false}
+  showOpenInCodeSandbox={false}
+  title="Custom Implementation"
+  files={buttonContent.customImpl}
+/>
 
 ## Button Group
 
@@ -158,45 +163,201 @@ building buttons that work well across devices and interaction methods.
 
 ### Button Props
 
-| Attribute        | Type                                                                         | Description                                                  | Default   |
-| ---------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------ | --------- |
-| children         | `ReactNode`                                                                  | The content to display in the button.                        | -         |
-| variant          | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow` \| `ghost` | The button appearance style.                                 | `solid`   |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`  | The button color theme.                                      | `default` |
-| size             | `sm` \| `md` \| `lg`                                                         | The button size.                                             | `md`      |
-| radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                     | The button border radius.                                    | -         |
-| startContent     | `ReactNode`                                                                  | The button start content.                                    | -         |
-| endContent       | `ReactNode`                                                                  | The button end content.                                      | -         |
-| spinner          | `ReactNode`                                                                  | Spinner to display when loading.                             | -         |
-| spinnerPlacement | `start` \| `end`                                                             | The spinner placement.                                       | `start`   |
-| fullWidth        | `boolean`                                                                    | Whether the button should take the full width of its parent. | `false`   |
-| isIconOnly       | `boolean`                                                                    | Whether the button should have the same width and height.    | `false`   |
-| isDisabled       | `boolean`                                                                    | Whether the button is disabled.                              | `false`   |
-| isLoading        | `boolean`                                                                    | Whether the button is loading.                               | `false`   |
-| disableRipple    | `boolean`                                                                    | Whether the button should display a ripple effect on press.  | `false`   |
-| disableAnimation | `boolean`                                                                    | Whether the button should display animations.                | `false`   |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content to display in the button.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: 'solid | bordered | light | flat | faded | shadow | ghost',
+      description: "The button appearance style.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The button color theme.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The button size.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The button border radius.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The button start content.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "The button end content.",
+      default: "-"
+    },
+    {
+      attribute: "spinner",
+      type: "ReactNode",
+      description: "Spinner to display when loading.",
+      default: "-"
+    },
+    {
+      attribute: "spinnerPlacement",
+      type: "start | end",
+      description: "The spinner placement.",
+      default: "start"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the button should take the full width of its parent.",
+      default: "false"
+    },
+    {
+      attribute: "isIconOnly",
+      type: "boolean",
+      description: "Whether the button should have the same width and height.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the button is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isLoading",
+      type: "boolean",
+      description: "Whether the button is loading.",
+      default: "false"
+    },
+    {
+      attribute: "disableRipple",
+      type: "boolean",
+      description: "Whether the button should display a ripple effect on press.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the button should display animations.",
+      default: "false"
+    }
+  ]}
+/>
 
 ### Button Events
 
-| Attribute     | Type                           | Description                                                                                                     |
-| ------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------- |
-| onPress       | `(e: PressEvent) => void`      | Handler called when the press is released over the target.                                                      |
-| onPressStart  | `(e: PressEvent) => void`      | Handler called when a press interaction starts.                                                                 |
-| onPressEnd    | `(e: PressEvent) => void`      | Handler called when a press interaction ends, either over the target or when the pointer leaves the target.     |
-| onPressChange | `(isPressed: boolean) => void` | Handler called when the press state changes.                                                                    |
-| onPressUp     | `(e: PressEvent) => void`      | Handler called when a press is released over the target, regardless of whether it started on the target or not. |
-| onKeyDown     | `(e: KeyboardEvent) => void`   | Handler called when a key is pressed.                                                                           |
-| onKeyUp       | `(e: KeyboardEvent) => void`   | Handler called when a key is released.                                                                          |
-| onClick       | `MouseEventHandler`            | The native button click event handler (**Deprecated**) use **onPress** instead.                                 |
+<APITable
+  data={[
+    {
+      attribute: "onPress",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when the press is released over the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressStart",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction starts.",
+      default: "-"
+    },
+    {
+      attribute: "onPressEnd",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction ends, either over the target or when the pointer leaves the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressChange",
+      type: "(isPressed: boolean) => void",
+      description: "Handler called when the press state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onPressUp",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press is released over the target, regardless of whether it started on the target or not.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is released.",
+      default: "-"
+    },
+    {
+      attribute: "onClick",
+      type: "MouseEventHandler",
+      description: "The native button click event handler (Deprecated) use onPress instead.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Button Group Props
 
-| Attribute  | Type                                                                         | Description                                     | Default   |
-| ---------- | ---------------------------------------------------------------------------- | ----------------------------------------------- | --------- |
-| children   | `ReactNode` \| `ReactNode[]`                                                 | The buttons to display.                         | -         |
-| variant    | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow` \| `ghost` | The buttons appearance style.                   | `solid`   |
-| color      | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`  | The buttons color theme.                        | `default` |
-| size       | `sm` \| `md` \| `lg`                                                         | The buttons size.                               | `md`      |
-| radius     | `none` \| `sm` \| `md` \| `lg` \| `full`                                     | The buttons border radius.                      | `xl`      |
-| fullWidth  | `boolean`                                                                    | Whether the buttons should take the full width. | `false`   |
-| isDisabled | `boolean`                                                                    | Whether the buttons are disabled.               | `false`   |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode | ReactNode[]",
+      description: "The buttons to display.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "solid | bordered | light | flat | faded | shadow | ghost",
+      description: "The buttons appearance style.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The buttons color theme.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The buttons size.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The buttons border radius.",
+      default: "xl"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the buttons should take the full width.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the buttons are disabled.",
+      default: "false"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/calendar.mdx b/apps/docs/content/docs/components/calendar.mdx
index 56312766af..fdb6f1cb08 100644
--- a/apps/docs/content/docs/components/calendar.mdx
+++ b/apps/docs/content/docs/components/calendar.mdx
@@ -199,44 +199,203 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 
 ### Calendar Props
 
-| Attribute               | Type                                                                                                                                                                                                                                                                                                                                                                                          | Description                                                                                                                                                                               | Default             |
-| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
-| value                   | `DateValue \| null`                                                                                                                                                                                                                                                                                                                                                                           | The current value (controlled).                                                                                                                                                           | -                   |
-| defaultValue            | `DateValue \| null`                                                                                                                                                                                                                                                                                                                                                                           | The default value (uncontrolled).                                                                                                                                                         | -                   |
-| minValue                | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The minimum allowed date that a user may select.                                                                                                                                          | -                   |
-| maxValue                | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The maximum allowed date that a user may select.                                                                                                                                          | -                   |
-| color                   | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                                                                                                                                                                                                                                                   | The color of the time input.                                                                                                                                                              | `default`           |
-| visibleMonths           | `number`                                                                                                                                                                                                                                                                                                                                                                                      | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop.                                   | `1`                 |
-| focusedValue            | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | Controls the currently focused date within the calendar.                                                                                                                                  | -                   |
-| defaultFocusedValue     | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The date that is focused when the calendar first mounts (uncountrolled).                                                                                                                  | -                   |
-| calendarWidth           | `number` \| `string`                                                                                                                                                                                                                                                                                                                                                                          | The width to be applied to the calendar component. This value is multiplied by the `visibleMonths` number to determine the total width of the calendar.                                   | `256`               |
-| pageBehavior            | `single` \| `visible`                                                                                                                                                                                                                                                                                                                                                                         | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.                                       | `visible`           |
-| weekdayStyle            | `narrow` \|`short` \| `long` \| `undefined`                                                                                                                                                                                                                                                                                                                                                   | The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name.                                                                    | `narrow`            |
-| showMonthAndYearPickers | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the label should be crossed out.                                                                                                                                                  | `false`             |
-| isDisabled              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar is disabled.                                                                                                                                                         | `false`             |
-| isReadOnly              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar value is immutable.                                                                                                                                                  | `false`             |
-| isInvalid               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the current selection is invalid according to application logic.                                                                                                                  | -                   |
-| autoFocus               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to automatically focus the calendar when it mounts.                                                                                                                               | `false`             |
-| showHelper              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to show the description or error message.                                                                                                                                         | `false`             |
-| showShadow              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to show the shadow in the selected date.                                                                                                                                          | `false`             |
-| isHeaderExpanded        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar header is expanded. This is only available if the `showMonthAndYearPickers` prop is set to `true`.                                                                   | `false`             |
-| isHeaderDefaultExpanded | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar header should be expanded by default.This is only available if the `showMonthAndYearPickers` prop is set to `true`.                                                  | `false`             |
-| topContent              | `ReactNode`                                                                                                                                                                                                                                                                                                                                                                                   | Custom content to be included in the top of the calendar.                                                                                                                                 | -                   |
-| bottomContent           | `ReactNode`                                                                                                                                                                                                                                                                                                                                                                                   | Custom content to be included in the bottom of the calendar.                                                                                                                              | -                   |
-| isDateUnavailable       | `(date: DateValue) => boolean`                                                                                                                                                                                                                                                                                                                                                                | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                                                  | -                   |
-| createCalendar          | `(calendar: SupportedCalendars) => Calendar \| null`                                                                                                                                                                                                                                                                                                                                          | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all<br> calendars` |
-| errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                                                                                                                                                                                                                                                             | An error message for the field.                                                                                                                                                           | -                   |
-| hideDisabledDates       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to hide the disabled or invalid dates.                                                                                                                                            | `false`             |
-| disableAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to disable the animation of the calendar.                                                                                                                                         | `false`             |
-| classNames              | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>`  | Allows to set custom class names for the calendar slots.                                                                                                                                  | -                   |
+<APITable 
+  data={[
+    {
+      attribute: "value",
+      type: "DateValue | null",
+      description: "The current value (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue", 
+      type: "DateValue | null",
+      description: "The default value (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "minValue",
+      type: "DateValue",
+      description: "The minimum allowed date that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "maxValue",
+      type: "DateValue", 
+      description: "The maximum allowed date that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the time input.",
+      default: "default"
+    },
+    {
+      attribute: "visibleMonths",
+      type: "number",
+      description: "The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the showMonthAndYearPickers prop.",
+      default: "1"
+    },
+    {
+      attribute: "focusedValue",
+      type: "DateValue",
+      description: "Controls the currently focused date within the calendar.",
+      default: "-"
+    },
+    {
+      attribute: "defaultFocusedValue",
+      type: "DateValue",
+      description: "The date that is focused when the calendar first mounts (uncountrolled).",
+      default: "-"
+    },
+    {
+      attribute: "calendarWidth",
+      type: "number | string",
+      description: "The width to be applied to the calendar component. This value is multiplied by the visibleMonths number to determine the total width of the calendar.",
+      default: "256"
+    },
+    {
+      attribute: "pageBehavior",
+      type: "single | visible",
+      description: "Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.",
+      default: "visible"
+    },
+    {
+      attribute: "weekdayStyle",
+      type: "narrow | short | long | undefined",
+      description: "The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name.",
+      default: "narrow"
+    },
+    {
+      attribute: "showMonthAndYearPickers",
+      type: "boolean",
+      description: "Whether the label should be crossed out.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean", 
+      description: "Whether the calendar is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the calendar value is immutable.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the current selection is invalid according to application logic.",
+      default: "-"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether to automatically focus the calendar when it mounts.",
+      default: "false"
+    },
+    {
+      attribute: "showHelper",
+      type: "boolean",
+      description: "Whether to show the description or error message.",
+      default: "false"
+    },
+    {
+      attribute: "showShadow",
+      type: "boolean", 
+      description: "Whether to show the shadow in the selected date.",
+      default: "false"
+    },
+    {
+      attribute: "isHeaderExpanded",
+      type: "boolean",
+      description: "Whether the calendar header is expanded. This is only available if the showMonthAndYearPickers prop is set to true.",
+      default: "false"
+    },
+    {
+      attribute: "isHeaderDefaultExpanded",
+      type: "boolean",
+      description: "Whether the calendar header should be expanded by default. This is only available if the showMonthAndYearPickers prop is set to true.",
+      default: "false"
+    },
+    {
+      attribute: "topContent",
+      type: "ReactNode",
+      description: "Custom content to be included in the top of the calendar.",
+      default: "-"
+    },
+    {
+      attribute: "bottomContent",
+      type: "ReactNode",
+      description: "Custom content to be included in the bottom of the calendar.",
+      default: "-"
+    },
+    {
+      attribute: "isDateUnavailable",
+      type: "(date: DateValue) => boolean",
+      description: "Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.",
+      default: "-"
+    },
+    {
+      attribute: "createCalendar",
+      type: "(calendar: SupportedCalendars) => Calendar | null",
+      description: "This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components.",
+      default: "all calendars"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | (v: ValidationResult) => ReactNode",
+      description: "An error message for the field.",
+      default: "-"
+    },
+    {
+      attribute: "hideDisabledDates",
+      type: "boolean",
+      description: "Whether to hide the disabled or invalid dates.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation of the calendar.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'base' | 'prevButton' | 'nextButton' | 'headerWrapper' | 'header' | 'title' | 'content' | 'gridWrapper' | 'grid' | 'gridHeader' | 'gridHeaderRow' | 'gridHeaderCell' | 'gridBody' | 'gridBodyRow' | 'cell' | 'cellButton' | 'pickerWrapper' | 'pickerMonthList' | 'pickerYearList' | 'pickerHighlight' | 'pickerItem' | 'helperWrapper' | 'errorMessage', string>",
+      description: "Allows to set custom class names for the calendar slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Calendar Events
 
-| Attribute              | Type                               | Description                                                                                                                              |
-| ---------------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| onChange               | `(value: MappedDateValue) => void` | Handler that is called when the value changes.                                                                                           |
-| onFocusChange          | `(date: CalendarDate) => void`     | Handler that is called when the focused date changes.                                                                                    |
-| onHeaderExpandedChange | `(isExpanded: boolean) => void`    | The event handler for the calendar header expanded state. This is only available if the `showMonthAndYearPickers` prop is set to `true`. |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(value: MappedDateValue) => void",
+      description: "Handler that is called when the value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onFocusChange",
+      type: "(date: CalendarDate) => void",
+      description: "Handler that is called when the focused date changes.",
+      default: "-"
+    },
+    {
+      attribute: "onHeaderExpandedChange",
+      type: "(isExpanded: boolean) => void", 
+      description: "The event handler for the calendar header expanded state. This is only available if the showMonthAndYearPickers prop is set to true.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Types
 
diff --git a/apps/docs/content/docs/components/card.mdx b/apps/docs/content/docs/components/card.mdx
index cda38a8738..062f500251 100644
--- a/apps/docs/content/docs/components/card.mdx
+++ b/apps/docs/content/docs/components/card.mdx
@@ -129,28 +129,122 @@ You can use `Image` component as the cover of the card by taking it out of the `
 
 ### Card Props
 
-| Attribute                 | Type                                                    | Description                                                                   | Default |
-| ------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------- | ------- |
-| children                  | `ReactNode` \| `ReactNode[]`                            | Usually the Card parts, `CardHeader`, `CardBody` and `CardFooter`.            | -       |
-| shadow                    | `none` \| `sm` \| `md` \| `lg`                          | The card shadow.                                                              | `md`    |
-| radius                    | `none` \| `sm` \| `md` \| `lg`                          | The card border radius.                                                       | `lg`    |
-| fullWidth                 | `boolean`                                               | Whether the card should take the full width of its parent.                    | `false` |
-| isHoverable               | `boolean`                                               | Whether the card should change the background on hover.                       | `false` |
-| isPressable               | `boolean`                                               | Whether the card should allow to be pressed.                                  | `false` |
-| isBlurred                 | `boolean`                                               | Whether the card background should be blurred.                                | `false` |
-| isFooterBlurred           | `boolean`                                               | Whether the card footer background should be blurred.                         | `false` |
-| isDisabled                | `boolean`                                               | Whether the card should be disabled. The press events will be ignored.        | `false` |
-| disableAnimation          | `boolean`                                               | Whether to disable the animation.                                             | `false` |
-| disableRipple             | `boolean`                                               | Whether to disable ripple effect. Only when `isPressable` is true.            | `false` |
-| allowTextSelectionOnPress | `boolean`                                               | Whether to allow text selection on pressing. Only when `isPressable` is true. | `false` |
-| classNames                | `Record<"base"｜ "header"｜ "body"｜ "footer", string>` | Allows to set custom class names for the card slots.                          | -       |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode | ReactNode[]",
+      description: "Usually the Card parts, `CardHeader`, `CardBody` and `CardFooter`.",
+      default: "-"
+    },
+    {
+      attribute: "shadow",
+      type: "none | sm | md | lg",
+      description: "The card shadow.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg",
+      description: "The card border radius.",
+      default: "lg"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the card should take the full width of its parent.",
+      default: "false"
+    },
+    {
+      attribute: "isHoverable",
+      type: "boolean",
+      description: "Whether the card should change the background on hover.",
+      default: "false"
+    },
+    {
+      attribute: "isPressable",
+      type: "boolean",
+      description: "Whether the card should allow to be pressed.",
+      default: "false"
+    },
+    {
+      attribute: "isBlurred",
+      type: "boolean",
+      description: "Whether the card background should be blurred.",
+      default: "false"
+    },
+    {
+      attribute: "isFooterBlurred",
+      type: "boolean",
+      description: "Whether the card footer background should be blurred.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the card should be disabled. The press events will be ignored.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation.",
+      default: "false"
+    },
+    {
+      attribute: "disableRipple",
+      type: "boolean",
+      description: "Whether to disable ripple effect. Only when `isPressable` is true.",
+      default: "false"
+    },
+    {
+      attribute: "allowTextSelectionOnPress",
+      type: "boolean",
+      description: "Whether to allow text selection on pressing. Only when `isPressable` is true.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'base' | 'header' | 'body' | 'footer', string>",
+      description: "Allows to set custom class names for the card slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Card Events
 
-| Attribute     | Type                           | Description                                                                                                             |
-| ------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
-| onPress       | `(e: PressEvent) => void`      | Handler that is called when the press is released over the target.                                                      |
-| onPressStart  | `(e: PressEvent) => void`      | Handler that is called when a press interaction starts.                                                                 |
-| onPressEnd    | `(e: PressEvent) => void`      | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.     |
-| onPressChange | `(isPressed: boolean) => void` | Handler that is called when the press state changes.                                                                    |
-| onPressUp     | `(e: PressEvent) => void`      | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
+<APITable
+  data={[
+    {
+      attribute: "onPress",
+      type: "(e: PressEvent) => void",
+      description: "Handler that is called when the press is released over the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressStart",
+      type: "(e: PressEvent) => void",
+      description: "Handler that is called when a press interaction starts.",
+      default: "-"
+    },
+    {
+      attribute: "onPressEnd",
+      type: "(e: PressEvent) => void",
+      description: "Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressChange",
+      type: "(isPressed: boolean) => void",
+      description: "Handler that is called when the press state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onPressUp",
+      type: "(e: PressEvent) => void",
+      description: "Handler that is called when a press is released over the target, regardless of whether it started on the target or not.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/checkbox-group.mdx b/apps/docs/content/docs/components/checkbox-group.mdx
index e1ad2283df..e98beb726c 100644
--- a/apps/docs/content/docs/components/checkbox-group.mdx
+++ b/apps/docs/content/docs/components/checkbox-group.mdx
@@ -93,32 +93,146 @@ In case you need to customize the checkbox even further, you can use the `useChe
 
 ### Checkbox Group Props
 
-| Attribute          | Type                                                                        | Description                                                                                                                                                   | Default    |
-| ------------------ | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| children           | `ReactNode[]` \| `ReactNode[]`                                              | The checkboxes items.                                                                                                                                         | -          |
-| orientation        | `vertical` \| `horizontal`                                                  | The axis the checkbox group items should align with.                                                                                                          | `vertical` |
-| color              | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkboxes.                                                                                                                                  | `primary`  |
-| size               | `xs` \| `sm` \| `md` \| `lg` \| `xl`                                        | The size of the checkboxes.                                                                                                                                   | `md`       |
-| radius             | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full`          | The radius of the checkboxes.                                                                                                                                 | `md`       |
-| name               | `string`                                                                    | The name of the CheckboxGroup, used when submitting an HTML form.                                                                                             | -          |
-| label              | `string`                                                                    | The label of the CheckboxGroup.                                                                                                                               | -          |
-| value              | `string[]`                                                                  | The current selected values. (controlled).                                                                                                                    | -          |
-| lineThrough        | `boolean`                                                                   | Whether the checkboxes label should be crossed out.                                                                                                           | `false`    |
-| defaultValue       | `string[]`                                                                  | The default selected values. (uncontrolled).                                                                                                                  | -          |
-| isInvalid          | `boolean`                                                                   | Whether the checkbox group is invalid.                                                                                                                        | `false`    |
-| validationState    | `valid` \| `invalid`                                                        | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                        | -          |
-| description        | `ReactNode`                                                                 | The checkbox group description.                                                                                                                               | -          |
-| errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                       | The checkbox group error message.                                                                                                                             | -          |
-| validate           | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined`          | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -          |
-| validationBehavior | `native` \| `aria`                                                          | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`     |
-| isDisabled         | `boolean`                                                                   | Whether the checkbox group is disabled.                                                                                                                       | `false`    |
-| isRequired         | `boolean`                                                                   | Whether user checkboxes are required on the input before form submission.                                                                                     | `false`    |
-| isReadOnly         | `boolean`                                                                   | Whether the checkboxes can be selected but not changed by the user.                                                                                           | -          |
-| disableAnimation   | `boolean`                                                                   | Whether the animation should be disabled.                                                                                                                     | `false`    |
-| classNames         | `Record<"base"｜ "wrapper"｜ "label", string>`                              | Allows to set custom class names for the checkbox group slots.                                                                                                | -          |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode[] | ReactNode[]",
+      description: "The checkboxes items.",
+      default: "-"
+    },
+    {
+      attribute: "orientation",
+      type: "vertical | horizontal",
+      description: "The axis the checkbox group items should align with.",
+      default: "vertical"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the checkboxes.",
+      default: "primary"
+    },
+    {
+      attribute: "size",
+      type: "xs | sm | md | lg | xl",
+      description: "The size of the checkboxes.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | base | xs | sm | md | lg | xl | full",
+      description: "The radius of the checkboxes.",
+      default: "md"
+    },
+    {
+      attribute: "name",
+      type: "string",
+      description: "The name of the CheckboxGroup, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "label",
+      type: "string",
+      description: "The label of the CheckboxGroup.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "string[]",
+      description: "The current selected values. (controlled)",
+      default: "-"
+    },
+    {
+      attribute: "lineThrough",
+      type: "boolean",
+      description: "Whether the checkboxes label should be crossed out.",
+      default: "false"
+    },
+    {
+      attribute: "defaultValue",
+      type: "string[]",
+      description: "The default selected values. (uncontrolled)",
+      default: "-"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the checkbox group is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "validationState",
+      type: "valid | invalid",
+      description: "Whether the inputs should display its \"valid\" or \"invalid\" visual styling. (Deprecated) use isInvalid instead.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "The checkbox group description.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | ((v: ValidationResult) => ReactNode)",
+      description: "The checkbox group error message.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: string[]) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if validationBehavior is set to native. For real-time validation, use the isInvalid prop.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.",
+      default: "aria"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the checkbox group is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user checkboxes are required on the input before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the checkboxes can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the animation should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\" | \"wrapper\" | \"label\", string>",
+      description: "Allows to set custom class names for the checkbox group slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Checkbox Group Events
 
-| Attribute | Type                        | Description                                    |
-| --------- | --------------------------- | ---------------------------------------------- |
-| onChange  | `(value: string[]) => void` | Handler that is called when the value changes. |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(value: string[]) => void",
+      description: "Handler that is called when the value changes.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/checkbox.mdx b/apps/docs/content/docs/components/checkbox.mdx
index 567d776ea7..93a59618c3 100644
--- a/apps/docs/content/docs/components/checkbox.mdx
+++ b/apps/docs/content/docs/components/checkbox.mdx
@@ -146,33 +146,137 @@ In case you need to customize the checkbox even further, you can use the `useChe
 
 ### Checkbox Props
 
-| Attribute        | Type                                                                        | Description                                                                                                           | Default   |
-| ---------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | --------- |
-| children         | `ReactNode`                                                                 | The label of the checkbox.                                                                                            | -         |
-| icon             | [CheckboxIconProps](#checkbox-icon-props)                                   | The icon to be displayed when the checkbox is checked.                                                                | -         |
-| value            | `string`                                                                    | The value of the checkbox element, used when submitting an HTML form.                                                    |           |
-| name             | `string`                                                                    | The name of the checkbox element, used when submitting an HTML form.                                                     |           |
-| size             | `sm` \| `md` \| `lg`                                                        | The size of the checkbox.                                                                                             | `md`      |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkbox.                                                                                            | `primary` |
-| radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                    | The radius of the checkbox.                                                                                           | -         |
-| lineThrough      | `boolean`                                                                   | Whether the label should be crossed out.                                                                              | `false`   |
-| isSelected       | `boolean`                                                                   | Whether the element should be selected (controlled).                                                                  |           |
-| defaultSelected  | `boolean`                                                                   | Whether the element should be selected (uncontrolled).                                                                |           |
-| isRequired       | `boolean`                                                                   | Whether user checkbox is required on the checkbox before form submission.                                                   | `false`   |
-| isReadOnly       | `boolean`                                                                   | Whether the checkbox can be selected but not changed by the user.                                                        |           |
-| isDisabled       | `boolean`                                                                   | Whether the checkbox is disabled.                                                                                     | `false`   |
-| isIndeterminate  | `boolean`                                                                   | Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction. |           |
-| isInvalid        | `boolean`                                                                   | Whether the checkbox is invalid.                                                                                         | `false`   |
-| validationState  | `valid` \| `invalid`                                                        | Whether the checkbox should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | -         |
-| disableAnimation | `boolean`                                                                   | Whether the animation should be disabled.                                                                             | `false`   |
-| classNames       | `Record<"base"｜ "wrapper"｜ "icon"｜ "label", string>`                     | Allows to set custom class names for the checkbox slots.                                                              | -         |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The label of the checkbox.",
+      default: "-"
+    },
+    {
+      attribute: "icon",
+      type: "CheckboxIconProps",
+      description: "The icon to be displayed when the checkbox is checked.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "string",
+      description: "The value of the checkbox element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "name",
+      type: "string",
+      description: "The name of the checkbox element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the checkbox.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the checkbox.",
+      default: "primary"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the checkbox.",
+      default: "-"
+    },
+    {
+      attribute: "lineThrough",
+      type: "boolean",
+      description: "Whether the label should be crossed out.",
+      default: "false"
+    },
+    {
+      attribute: "isSelected",
+      type: "boolean",
+      description: "Whether the element should be selected (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelected",
+      type: "boolean",
+      description: "Whether the element should be selected (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user checkbox is required on the checkbox before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the checkbox can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the checkbox is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isIndeterminate",
+      type: "boolean",
+      description: "Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction.",
+      default: "-"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the checkbox is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "validationState",
+      type: "valid | invalid",
+      description: "Whether the checkbox should display its \"valid\" or \"invalid\" visual styling. (Deprecated) use isInvalid instead.",
+      default: "-"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the animation should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\"｜ \"wrapper\"｜ \"icon\"｜ \"label\", string>",
+      description: "Allows to set custom class names for the checkbox slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Checkbox Events
 
-| Attribute     | Type                                  | Description                                                                                                                                              |
-| ------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| onChange      | `React.ChangeEvent<HTMLInputElement>` | Handler that is called when the element's selection state changes. You can pull out the new checked state by accessing `event.target.checked` (boolean). |
-| onValueChange | `(isSelected: boolean) => void`       | Handler that is called when the element's selection state changes.                                                                                       |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "React.ChangeEvent<HTMLInputElement>",
+      description: "Handler that is called when the element's selection state changes. You can pull out the new checked state by accessing event.target.checked (boolean).",
+      default: "-"
+    },
+    {
+      attribute: "onValueChange",
+      type: "(isSelected: boolean) => void",
+      description: "Handler that is called when the element's selection state changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Types
 
diff --git a/apps/docs/content/docs/components/chip.mdx b/apps/docs/content/docs/components/chip.mdx
index 0b68899d05..1e9eaf3294 100644
--- a/apps/docs/content/docs/components/chip.mdx
+++ b/apps/docs/content/docs/components/chip.mdx
@@ -99,21 +99,80 @@ You can customize the `Chip` component by passing custom Tailwind CSS classes to
 
 ### Chip Props
 
-| Attribute    | Type                                                                         | Description                                                                                                                  | Default   |
-| ------------ | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | --------- |
-| children     | `ReactNode`                                                                  | The content of the chip.                                                                                                     | -         |
-| variant      | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow` \| `dot`   | The chip appearance style.                                                                                                   | `solid`   |
-| color        | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`  | The color of the chip.                                                                                                       | `default` |
-| size         | `sm` \| `md` \| `lg`                                                         | The size of the chip.                                                                                                        | `md`      |
-| radius       | `none` \| `sm` \| `md` \| `lg` \| `full`                                     | The radius of the chip.                                                                                                      | `full`    |
-| avatar       | `ReactNode`                                                                  | Avatar to be rendered in the left side of the chip.                                                                          | -         |
-| startContent | `ReactNode`                                                                  | Element to be rendered in the left side of the chip. This prop overrides the `avatar` prop.                                  | -         |
-| endContent   | `ReactNode`                                                                  | Element to be rendered in the right side of the chip. This prop overrides the default close button when `onClose` is passed. | -         |
-| isDisabled   | `boolean`                                                                    | Whether the chip is disabled.                                                                                                | `false`   |
-| classNames   | `Record<"base"｜ "content"｜ "dot"｜ "avatar"｜ "closeButton", string>`      | Allows to set custom class names for the chip slots.                                                                         | -         |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content of the chip.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "solid | bordered | light | flat | faded | shadow | dot",
+      description: "The chip appearance style.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the chip.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the chip.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the chip.",
+      default: "full"
+    },
+    {
+      attribute: "avatar",
+      type: "ReactNode",
+      description: "Avatar to be rendered in the left side of the chip.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the left side of the chip. This prop overrides the avatar prop.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the right side of the chip. This prop overrides the default close button when onClose is passed.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the chip is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: 'Record<"base" | "content" | "dot" | "avatar" | "closeButton", string>',
+      description: "Allows to set custom class names for the chip slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Chip Events
 
-| Attribute | Type                      | Description                                                                                                                        |
-| --------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| onClose   | `(e: PressEvent) => void` | Handler that is called when the close button is pressed. If you pass this prop, the chip will display a close button (endContent). |
+<APITable
+  data={[
+    {
+      attribute: "onClose",
+      type: "(e: PressEvent) => void",
+      description: "Handler that is called when the close button is pressed. If you pass this prop, the chip will display a close button (endContent).",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/circular-progress.mdx b/apps/docs/content/docs/components/circular-progress.mdx
index 611808fc84..0ef9d04f88 100644
--- a/apps/docs/content/docs/components/circular-progress.mdx
+++ b/apps/docs/content/docs/components/circular-progress.mdx
@@ -119,19 +119,91 @@ You can customize the `CircularProgress` component by passing custom Tailwind CS
 
 ### Circular Progress Props
 
-| Attribute        | Type                                                                                                                    | Description                                                       | Default              |
-| ---------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | -------------------- |
-| label            | `ReactNode`                                                                                                             | The content to display as the label.                              | -                    |
-| size             | `sm` \| `md` \| `lg`                                                                                                    | The size of the indicator.                                        | `md`                 |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                             | The color of the indicator.                                       | `primary`            |
-| value            | `number`                                                                                                                | The current value (controlled).                                   | -                    |
-| valueLabel       | `ReactNode`                                                                                                             | The content to display as the value's label (e.g. 1 of 4).        | -                    |
-| minValue         | `number`                                                                                                                | The smallest value allowed for the input.                         | `0`                  |
-| maxValue         | `number`                                                                                                                | The largest value allowed for the input.                          | `100`                |
-| formatOptions    | [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) | The options to format the value.                                  | `{style: 'percent'}` |
-| isIndeterminate  | `boolean`                                                                                                               | Whether the progress is indeterminate.                            | `true`               |
-| showValueLabel   | `boolean`                                                                                                               | Whether to show the value label.                                  | `true`               |
-| strokeWidth      | `number`                                                                                                                | The width of the progress stroke.                                 | `2`                  |
-| isDisabled       | `boolean`                                                                                                               | Whether the progress is disabled.                                 | `false`              |
-| disableAnimation | `boolean`                                                                                                               | Whether to disable the animation.                                 | `false`              |
-| classNames       | `Record<"base"｜"svgWrapper"｜"svg"｜"track"｜"indicator"｜"value"｜"label", string>`                                   | Allows to set custom class names for the circular progress slots. | -                    |
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the indicator.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the indicator.",
+      default: "primary"
+    },
+    {
+      attribute: "value",
+      type: "number",
+      description: "The current value (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "valueLabel",
+      type: "ReactNode",
+      description: "The content to display as the value's label (e.g. 1 of 4).",
+      default: "-"
+    },
+    {
+      attribute: "minValue",
+      type: "number",
+      description: "The smallest value allowed for the input.",
+      default: "0"
+    },
+    {
+      attribute: "maxValue",
+      type: "number",
+      description: "The largest value allowed for the input.",
+      default: "100"
+    },
+    {
+      attribute: "formatOptions",
+      type: "Intl.NumberFormat",
+      description: "The options to format the value.",
+      default: "{style: 'percent'}"
+    },
+    {
+      attribute: "isIndeterminate",
+      type: "boolean",
+      description: "Whether the progress is indeterminate.",
+      default: "true"
+    },
+    {
+      attribute: "showValueLabel",
+      type: "boolean",
+      description: "Whether to show the value label.",
+      default: "true"
+    },
+    {
+      attribute: "strokeWidth",
+      type: "number",
+      description: "The width of the progress stroke.",
+      default: "2"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the progress is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'base'｜'svgWrapper'｜'svg'｜'track'｜'indicator'｜'value'｜'label', string>",
+      description: "Allows to set custom class names for the circular progress slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/code.mdx b/apps/docs/content/docs/components/code.mdx
index 3b723f99af..2678be19f5 100644
--- a/apps/docs/content/docs/components/code.mdx
+++ b/apps/docs/content/docs/components/code.mdx
@@ -56,9 +56,31 @@ Code is a component used to display inline code.
 
 ### Code Props
 
-| Attribute | Type                                                                        | Description              | Default   |
-| --------- | --------------------------------------------------------------------------- | ------------------------ | --------- |
-| children  | `ReactNode`                                                                 | The content of the code. | -         |
-| size      | `sm` \| `md` \| `lg`                                                        | The size of the code.    | `sm`      |
-| color     | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the code.   | `default` |
-| radius    | `none` \| `sm` \| `md` \| `lg` \| `full`                                    | The radius of the code.  | `sm`      |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content of the code.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the code.",
+      default: "sm"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the code.",
+      default: "default"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the code.",
+      default: "sm"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/date-input.mdx b/apps/docs/content/docs/components/date-input.mdx
index 3b67ba7138..c2616b2e54 100644
--- a/apps/docs/content/docs/components/date-input.mdx
+++ b/apps/docs/content/docs/components/date-input.mdx
@@ -288,48 +288,176 @@ import {parseZonedDateTime} from "@internationalized/date";
 
 ### DateInput Props
 
-| Attribute               | Type                                                                                                                              | Description                                                                                                                                                   | Default   |
-| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| label                   | `ReactNode`                                                                                                                       | The content to display as the label.                                                                                                                          | -         |
-| value                   | `DateValue`                                                                                                                       | The current value of the date input (controlled).                                                                                                             | -         |
-| defaultValue            | `DateValue`                                                                                                                       | The default value of the date input (uncontrolled).                                                                                                           | -         |
-| variant                 | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                   | The variant of the date input.                                                                                                                                | `flat`    |
-| color                   | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                       | The color of the date input.                                                                                                                                  | `default` |
-| size                    | `sm` \| `md` \| `lg`                                                                                                              | The size of the date input.                                                                                                                                   | `md`      |
-| radius                  | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                          | The radius of the date input.                                                                                                                                 | -         |
-| placeholderValue        | `DateValue`                                                                                                                       | A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults current date at midnight.                          | -         |
-| minValue                | `DateValue`                                                                                                                       | The minimum allowed date that a user may select.                                                                                                              | -         |
-| maxValue                | `DateValue`                                                                                                                       | The maximum allowed date that a user may select.                                                                                                              | -         |
-| locale                  | `string`                                                                                                                          | The locale to display and edit the value according to.                                                                                                        | -         |
-| description             | `ReactNode`                                                                                                                       | A description for the date input. Provides a hint such as specific requirements for what to choose.                                                           | -         |
-| errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                 | An error message for the date input.                                                                                                                          | -         |
-| validate                | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                              | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -         |
-| validationBehavior      | `native` \| `aria`                                                                                                                | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`    |
-| startContent            | `ReactNode`                                                                                                                       | Element to be rendered in the left side of the date input.                                                                                                    | -         |
-| endContent              | `ReactNode`                                                                                                                       | Element to be rendered in the right side of the date input.                                                                                                   | -         |
-| labelPlacement          | `inside` \| `outside` \| `outside-left`                                                                                           | The position of the label.                                                                                                                                    | `inside`  |
-| isRequired              | `boolean`                                                                                                                         | Whether user input is required on the input before form submission.                                                                                           | `false`   |
-| isReadOnly              | `boolean`                                                                                                                         | Whether the input can be selected but not changed by the user.                                                                                                | -         |
-| isDisabled              | `boolean`                                                                                                                         | Whether the input is disabled.                                                                                                                                | `false`   |
-| isInvalid               | `boolean`                                                                                                                         | Whether the input value is invalid.                                                                                                                           | `false`   |
-| inputRef                | `ReactRef<HTMLInputElement \| null>`                                                                                              | A ref for the hidden input element for HTML form submission.                                                                                                  | -         |
-| createCalendar          | `(name: string) => Calendar`                                                                                                      | A function that creates a Calendar object for a given calendar identifier.                                                                                    | -         |
-| isDateUnavailable       | `(date: DateValue) => boolean`                                                                                                    | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                      | -         |
-| autoFocus               | `boolean`                                                                                                                         | Whether the element should receive focus on render.                                                                                                           | `false`   |
-| hourCycle               | `12` \| `24`                                                                                                                      | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale.                                                                 | -         |
-| granularity             | `day` \| `hour` \| `minute` \| `second`                                                                                           | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates.                                                                 | -         |
-| hideTimeZone            | `boolean`                                                                                                                         | Whether to hide the time zone abbreviation.                                                                                                                   | `false`   |
-| shouldForceLeadingZeros | `boolean`                                                                                                                         | Whether to always show leading zeros in the month, day, and hour fields.                                                                                      | `true`    |
-| disableAnimation        | `boolean`                                                                                                                         | Whether to disable animations.                                                                                                                                | `false`   |
-| classNames              | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "input"｜ "helperWrapper"｜ "description"｜ "errorMessage", string>`   | Allows to set custom class names for the date input slots.                                                                                                    | -         |
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "DateValue",
+      description: "The current value of the date input (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "DateValue",
+      description: "The default value of the date input (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the date input.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the date input.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the date input.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the date input.",
+      default: "-"
+    },
+    {
+      attribute: "placeholderValue",
+      type: "DateValue",
+      description: "A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults current date at midnight.",
+      default: "-"
+    },
+    {
+      attribute: "minValue",
+      type: "DateValue",
+      description: "The minimum allowed date that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "maxValue",
+      type: "DateValue",
+      description: "The maximum allowed date that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "locale",
+      type: "string",
+      description: "The locale to display and edit the value according to.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the date input. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | (v: ValidationResult) => ReactNode",
+      description: "An error message for the date input.",
+      default: "-"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user input is required on the input before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the input can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the input is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the input value is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether the element should receive focus on render.",
+      default: "false"
+    },
+    {
+      attribute: "hideTimeZone",
+      type: "boolean",
+      description: "Whether to hide the time zone abbreviation.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable animations.",
+      default: "false"
+    }
+  ]}
+/>
 
 ### DateInput Events
 
-| Attribute     | Type                                                                   | Description                                                     |     |
-| ------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------- | --- |
-| onChange      | `((value: ZonedDateTime \| CalendarDate \| CalendarDateTime) => void)` | Handler that is called when the date-input's value changes.     | -   |
-| onFocus       | `(e: FocusEvent<HTMLInputElement>) => void`                            | Handler that is called when the element receives focus.         | -   |
-| onBlur        | `(e: FocusEvent<HTMLInputElement>) => void`                            | Handler that is called when the element loses focus.            | -   |
-| onFocusChange | `(isFocused: boolean) => void`                                         | Handler that is called when the element's focus status changes. | -   |
-| onKeyDown     | `(e: KeyboardEvent) => void`                                           | Handler that is called when a key is pressed.                   | -   |
-| onKeyUp       | `(e: KeyboardEvent) => void`                                           | Handler that is called when a key is released.                  | -   |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(value: ZonedDateTime | CalendarDate | CalendarDateTime) => void",
+      description: "Handler that is called when the date-input's value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onFocus",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the element receives focus.",
+      default: "-"
+    },
+    {
+      attribute: "onBlur",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the element loses focus.",
+      default: "-"
+    },
+    {
+      attribute: "onFocusChange",
+      type: "(isFocused: boolean) => void",
+      description: "Handler that is called when the element's focus status changes.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is released.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/date-picker.mdx b/apps/docs/content/docs/components/date-picker.mdx
index ec8c1f5fce..3b9fb18d53 100644
--- a/apps/docs/content/docs/components/date-picker.mdx
+++ b/apps/docs/content/docs/components/date-picker.mdx
@@ -313,56 +313,224 @@ import {I18nProvider} from "@react-aria/i18n";
 
 ### DatePicker Props
 
-| Attribute               | Type                                                                                                                                                     | Description                                                                                                                                                   | Default                                                              |
-| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------       | -------------------------------------------------------------------- |
-| label                   | `ReactNode`                                                                                                                                              | The content to display as the label.                                                                                                                          | -                                                                    |
-| value                   | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null`                                                                         | The current value of the date-picker (controlled).                                                                                                            | -                                                                    |
-| variant                 | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                          | The variant of the date input.                                                                                                                                | `flat`                                                               |
-| color                   | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                              | The color of the date input.                                                                                                                                  | `default`                                                            |
-| size                    | `sm` \| `md` \| `lg`                                                                                                                                     | The size of the date input.                                                                                                                                   | `md`                                                                 |
-| radius                  | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                                 | The radius of the date input.                                                                                                                                 | -                                                                    |
-| defaultValue            | `string`                                                                                                                                                 | The default value of the date-picker (uncontrolled).                                                                                                          | -                                                                    |
-| placeholderValue        | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null`                                                                         | The placeholder of the date-picker.                                                                                                                           | -                                                                    |
-| description             | `ReactNode`                                                                                                                                              | A description for the date-picker. Provides a hint such as specific requirements for what to choose.                                                          | -                                                                    |
-| errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                        | An error message for the date input.                                                                                                                          | -                                                                    |
-| validate                | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                                                     | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -                                                                    |
-| validationBehavior      | `native` \| `aria`                                                                                                                                       | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`                                                               |
-| startContent            | `ReactNode`                                                                                                                                              | Element to be rendered in the left side of the date-picker.                                                                                                   | -                                                                    |
-| endContent              | `ReactNode`                                                                                                                                              | Element to be rendered in the right side of the date-picker.                                                                                                  | -                                                                    |
-| labelPlacement          | `inside` \| `outside` \| `outside-left`                                                                                                                  | The position of the label.                                                                                                                                    | `inside`                                                             |
-| isRequired              | `boolean`                                                                                                                                                | Whether user input is required on the date-picker before form submission.                                                                                     | `false`                                                              |
-| isReadOnly              | `boolean`                                                                                                                                                | Whether the date-picker can be selected but not changed by the user.                                                                                          |                                                                      |
-| isDisabled              | `boolean`                                                                                                                                                | Whether the date-picker is disabled.                                                                                                                          | `false`                                                              |
-| isInvalid               | `boolean`                                                                                                                                                | Whether the date-picker is invalid.                                                                                                                           | `false`                                                              |
-| visibleMonths           | `number`                                                                                                                                                 | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop.       | `1`                                                                  |
-| selectorIcon            | `ReactNode`                                                                                                                                              | The icon to toggle the date picker popover. Usually a calendar icon.                                                                                          |                                                                      |
-| pageBehavior            | `PageBehavior`                                                                                                                                           | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.           | `visible`                                                            |
-| calendarWidth           | `number`                                                                                                                                                 | The width to be applied to the calendar component.                                                                                                            | `256`                                                                |
-| CalendarTopContent      | `ReactNode`                                                                                                                                              | Top content to be rendered in the calendar component.                                                                                                         |                                                                      |
-| isDateUnavailable       | `((date: DateValue) => boolean)`                                                                                                                         | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                      |                                                                      |
-| autoFocus               | `boolean`                                                                                                                                                | Whether the element should receive focus on render.                                                                                                           | `false`                                                              |
-| hourCycle               | `12` \| `24`                                                                                                                                             | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale.                                                                 | -                                                                    |
-| granularity             | `day` \| `hour` \| `minute` \| `second`                                                                                                                  | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates.                                                                 | -                                                                    |
-| hideTimeZone            | `boolean`                                                                                                                                                | Whether to hide the time zone abbreviation.                                                                                                                   | `false`                                                              |
-| shouldForceLeadingZeros | `boolean`                                                                                                                                                | Whether to always show leading zeros in the month, day, and hour fields.                                                                                      | `true`                                                               |
-| CalendarBottomContent   | `ReactNode`                                                                                                                                              | Bottom content to be rendered in the calendar component.                                                                                                      |                                                                      |
-| showMonthAndYearPickers | `boolean` \| `undefined`                                                                                                                                 | Whether the calendar should show month and year pickers.                                                                                                      | false                                                                |
-| popoverProps            | `PopoverProps` \| `undefined`                                                                                                                            | Props to be passed to the popover component.                                                                                                                  | `{ placement: "bottom", triggerScaleOnOpen: false, offset: 13 }`     |
-| selectorButtonProps     | `ButtonProps` \| `undefined`                                                                                                                             | Props to be passed to the selector button component.                                                                                                          | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
-| selectorButtonPlacement | `start` \| `end`                                                                                                                                         | The position of the selector button.                                                                                                                          | `end`                                                                |
-| calendarProps           | `CalendarProps` \| `undefined`                                                                                                                           | Props to be passed to the selector button component.                                                                                                          | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
-| timeInputProps          | `TimeInputProps`                                                                                                                                         | Props to be passed to the time input component.                                                                                                               | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
-| disableAnimation        | `boolean`                                                                                                                                                | Whether to disable all animations in the date picker. Including the DateInput, Button, Calendar, and Popover.                                                 | `false`                                                              |
-| classNames              | `Record<"base" \| "selectorButton" \| "selectorIcon" \| "popoverContent" \| "calendar" \| "calendarContent" \| "timeInputLabel" \| "timeInput", string>` | Allows to set custom class names for the date-picker slots.                                                                                                   | -                                                                    |
-| dateInputClassNames     | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "input"｜ "helperWrapper"｜ "description"｜ "errorMessage", string>`                          | Allows to set custom class names for the [date input slots](/docs/components/date-input#slots).                                                               | -                                                                    |
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "ZonedDateTime | CalendarDate | CalendarDateTime | undefined | null",
+      description: "The current value of the date-picker (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the date input.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the date input.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the date input.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the date input.",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "string",
+      description: "The default value of the date-picker (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "placeholderValue",
+      type: "ZonedDateTime | CalendarDate | CalendarDateTime | undefined | null",
+      description: "The placeholder of the date-picker.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the date-picker. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | (v: ValidationResult) => ReactNode",
+      description: "An error message for the date input.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: MappedDateValue<DateValue>) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation or ARIA validation.",
+      default: "aria"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the left side of the date-picker.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the right side of the date-picker.",
+      default: "-"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user input is required on the date-picker before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the date-picker can be selected but not changed by the user.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the date-picker is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the date-picker is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "visibleMonths",
+      type: "number",
+      description: "The number of months to display at once. Up to 3 months are supported.",
+      default: "1"
+    },
+    {
+      attribute: "selectorIcon",
+      type: "ReactNode",
+      description: "The icon to toggle the date picker popover. Usually a calendar icon.",
+      default: "-"
+    },
+    {
+      attribute: "pageBehavior",
+      type: "PageBehavior",
+      description: "Controls the behavior of paging.",
+      default: "visible"
+    },
+    {
+      attribute: "calendarWidth",
+      type: "number",
+      description: "The width to be applied to the calendar component.",
+      default: "256"
+    },
+    {
+      attribute: "isDateUnavailable",
+      type: "(date: DateValue) => boolean",
+      description: "Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.",
+      default: "-"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether the element should receive focus on render.",
+      default: "false"
+    },
+    {
+      attribute: "hourCycle",
+      type: "12 | 24",
+      description: "Whether to display the time in 12 or 24 hour format.",
+      default: "-"
+    },
+    {
+      attribute: "granularity",
+      type: "day | hour | minute | second",
+      description: "Determines the smallest unit that is displayed in the date picker.",
+      default: "-"
+    },
+    {
+      attribute: "hideTimeZone",
+      type: "boolean",
+      description: "Whether to hide the time zone abbreviation.",
+      default: "false"
+    },
+    {
+      attribute: "shouldForceLeadingZeros",
+      type: "boolean",
+      description: "Whether to always show leading zeros in the month, day, and hour fields.",
+      default: "true"
+    }
+  ]}
+/>
 
 ### DatePicker Events
 
-| Attribute     | Type                                                                                 | Description                                                     |     |
-| ------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------------- | --- |
-| onChange      | `((value: ZonedDateTime  \| CalendarDate \| CalendarDateTime) => void)` \| undefined | Handler that is called when the date-picker's value changes.    | -   |
-| onFocus       | `(e: FocusEvent<HTMLInputElement>) => void`                                          | Handler that is called when the element receives focus.         | -   |
-| onBlur        | `(e: FocusEvent<HTMLInputElement>) => void`                                          | Handler that is called when the element loses focus.            | -   |
-| onFocusChange | `(isFocused: boolean) => void`                                                       | Handler that is called when the element's focus status changes. | -   |
-| onKeyDown     | `(e: KeyboardEvent) => void`                                                         | Handler that is called when a key is pressed.                   | -   |
-| onKeyUp       | `(e: KeyboardEvent) => void`                                                         | Handler that is called when a key is released.                  | -   |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(value: ZonedDateTime | CalendarDate | CalendarDateTime) => void",
+      description: "Handler that is called when the date-picker's value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onFocus",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the element receives focus.",
+      default: "-"
+    },
+    {
+      attribute: "onBlur",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the element loses focus.",
+      default: "-"
+    },
+    {
+      attribute: "onFocusChange",
+      type: "(isFocused: boolean) => void",
+      description: "Handler that is called when the element's focus status changes.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is released.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/date-range-picker.mdx b/apps/docs/content/docs/components/date-range-picker.mdx
index 65b351118a..be73717ae2 100644
--- a/apps/docs/content/docs/components/date-range-picker.mdx
+++ b/apps/docs/content/docs/components/date-range-picker.mdx
@@ -360,63 +360,326 @@ You can customize the `DateRangePicker` component by passing custom Tailwind CSS
 
 ### DateRangePicker Props
 
-| Attribute                 | Type                                                                                                                                                     | Description                                                                                                                                                             | Default                                                              |
-|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------|
-| label                     | `ReactNode`                                                                                                                                              | The content to display as the label.                                                                                                                                    | -                                                                    |
-| value                     | `RangeValue<CalendarDate \| CalendarDateTime \| ZonedDateTime>` \| `undefined` \| `null`                                                                 | The current value of the date-range-picker (controlled).                                                                                                                | -                                                                    |
-| variant                   | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                          | The variant of the date input.                                                                                                                                          | `flat`                                                               |
-| color                     | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                              | The color of the date input.                                                                                                                                            | `default`                                                            |
-| size                      | `sm` \| `md` \| `lg`                                                                                                                                     | The size of the date input.                                                                                                                                             | `md`                                                                 |
-| radius                    | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                                 | The radius of the date input.                                                                                                                                           | -                                                                    |
-| minValue                  | `RangeValue<CalendarDate \| CalendarDateTime \| ZonedDateTime>` \| `undefined` \| `null`                                                                 | The minimum value of the date-range-picker.                                                                                                                             | -                                                                    |
-| maxValue                  | `RangeValue<CalendarDate \| CalendarDateTime \| ZonedDateTime>` \| `undefined` \| `null`                                                                 | The maximum value of the date-range-picker.                                                                                                                             | -                                                                    |
-| defaultValue              | `string`                                                                                                                                                 | The default value of the date-range-picker (uncontrolled).                                                                                                              | -                                                                    |
-| placeholderValue          | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null`                                                                         | The placeholder of the date-range-picker.                                                                                                                               | -                                                                    |
-| description               | `ReactNode`                                                                                                                                              | A description for the date-range-picker. Provides a hint such as specific requirements for what to choose.                                                              | -                                                                    |
-| errorMessage              | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                        | An error message for the date input.                                                                                                                                    | -                                                                    |
-| validate                  | `(value: RangeValue<MappedDateValue<DateValue>>) => ValidationError ｜ true ｜ null ｜ undefined`                                                         | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -                                                                    |
-| validationBehavior        | `native` \| `aria`                                                                                                                                       | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.          | `aria`                                                               |
-| startContent              | `ReactNode`                                                                                                                                              | Element to be rendered in the left side of the date-range-picker.                                                                                                       | -                                                                    |
-| endContent                | `ReactNode`                                                                                                                                              | Element to be rendered in the right side of the date-range-picker.                                                                                                      | -                                                                    |
-| startName                 | `string`                                                                                                                                                 | The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname) | -                                                                    |
-| endName                   | `string`                                                                                                                                                 | The name of the end date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname)   | -                                                                    |
-| labelPlacement            | `inside` \| `outside` \| `outside-left`                                                                                                                  | The position of the label.                                                                                                                                              | `inside`                                                             |
-| isOpen                    | `boolean`                                                                                                                                                | Whether the date picker popover is open.                                                                                                                                | -                                                                    |
-| defaultOpen               | `boolean`                                                                                                                                                | Whether the date picker popover is open by default.                                                                                                                     | `false`                                                              |
-| isRequired                | `boolean`                                                                                                                                                | Whether user input is required on the date-range-picker before form submission.                                                                                         | `false`                                                              |
-| isReadOnly                | `boolean`                                                                                                                                                | Whether the date-range-picker can be selected but not changed by the user.                                                                                              |                                                                      |
-| isDisabled                | `boolean`                                                                                                                                                | Whether the date-range-picker is disabled.                                                                                                                              | `false`                                                              |
-| isInvalid                 | `boolean`                                                                                                                                                | Whether the date-range-picker is invalid.                                                                                                                               | `false`                                                              |
-| selectorIcon              | `ReactNode`                                                                                                                                              | The icon to toggle the date picker popover. Usually a calendar icon.                                                                                                    |                                                                      |
-| pageBehavior              | `single` \| `visible`                                                                                                                                    | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.                     | `visible`                                                            |
-| visibleMonths             | `number`                                                                                                                                                 | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop.                 | `1`                                                                  |
-| autoFocus                 | `boolean`                                                                                                                                                | Whether the element should receive focus on render.                                                                                                                     | `false`                                                              |
-| hourCycle                 | `12` \| `24`                                                                                                                                             | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale.                                                                           | -                                                                    |
-| granularity               | `day` \| `hour` \| `minute` \| `second`                                                                                                                  | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates.                                                                           | -                                                                    |
-| hideTimeZone              | `boolean`                                                                                                                                                | Whether to hide the time zone abbreviation.                                                                                                                             | `false`                                                              |
-| allowsNonContiguousRanges | `boolean`                                                                                                                                                | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.                            | `false`                                                              |
-| shouldForceLeadingZeros   | `boolean`                                                                                                                                                | Whether to always show leading zeros in the month, day, and hour fields.                                                                                                | `true`                                                               |
-| calendarWidth             | `number`                                                                                                                                                 | The width to be applied to the calendar component.                                                                                                                      | `256`                                                                |
-| CalendarTopContent        | `ReactNode`                                                                                                                                              | Top content to be rendered in the calendar component.                                                                                                                   |                                                                      |
-| CalendarBottomContent     | `ReactNode`                                                                                                                                              | Bottom content to be rendered in the calendar component.                                                                                                                |                                                                      |
-| showMonthAndYearPickers   | `boolean`                                                                                                                                                | Whether the calendar should show month and year pickers.                                                                                                                | `false`                                                              |
-| allowsNonContiguousRanges | `boolean`                                                                                                                                                | enables a range to be selected even if there are unavailable dates in the middle                                                                                        | `false`                                                              |
-| popoverProps              | [PopoverProps](/docs/components/popover#api)                                                                                                             | Props to be passed to the popover component.                                                                                                                            | `{ placement: "bottom", triggerScaleOnOpen: false, offset: 13 }`     |
-| selectorButtonProps       | `ButtonProps`                                                                                                                                            | Props to be passed to the selector button component.                                                                                                                    | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
-| selectorButtonPlacement   | `start` \| `end`                                                                                                                                         | The position of the selector button.                                                                                                                                    | `end`                                                                |
-| calendarProps             | `CalendarProps`                                                                                                                                          | Props to be passed to the selector button component.                                                                                                                    | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
-| timeInputProps            | `TimeInputProps`                                                                                                                                         | Props to be passed to the time input component.                                                                                                                         | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
-| disableAnimation          | `boolean`                                                                                                                                                | Whether to disable all animations in the date picker. Including the DateInput, Button, Calendar, and Popover.                                                           | `false`                                                              |
-| classNames                | `Record<"base" \| "selectorButton" \| "selectorIcon" \| "popoverContent" \| "calendar" \| "calendarContent" \| "timeInputLabel" \| "timeInput", string>` | Allows to set custom class names for the date-range-picker slots.                                                                                                       | -                                                                    |
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "RangeValue<CalendarDate | CalendarDateTime | ZonedDateTime> | undefined | null",
+      description: "The current value of the date-range-picker (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the date input.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the date input.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the date input.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the date input.",
+      default: "-"
+    },
+    {
+      attribute: "minValue",
+      type: "RangeValue<CalendarDate | CalendarDateTime | ZonedDateTime> | undefined | null",
+      description: "The minimum value of the date-range-picker.",
+      default: "-"
+    },
+    {
+      attribute: "maxValue",
+      type: "RangeValue<CalendarDate | CalendarDateTime | ZonedDateTime> | undefined | null",
+      description: "The maximum value of the date-range-picker.",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "string",
+      description: "The default value of the date-range-picker (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "placeholderValue",
+      type: "ZonedDateTime | CalendarDate | CalendarDateTime | undefined | null",
+      description: "The placeholder of the date-range-picker.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the date-range-picker. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | (v: ValidationResult) => ReactNode",
+      description: "An error message for the date input.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: RangeValue<MappedDateValue<DateValue>>) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation or ARIA validation.",
+      default: "aria"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the left side of the date-range-picker.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the right side of the date-range-picker.",
+      default: "-"
+    },
+    {
+      attribute: "startName",
+      type: "string",
+      description: "The name of the start date input element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "endName",
+      type: "string",
+      description: "The name of the end date input element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "isOpen",
+      type: "boolean",
+      description: "Whether the date picker popover is open.",
+      default: "-"
+    },
+    {
+      attribute: "defaultOpen",
+      type: "boolean",
+      description: "Whether the date picker popover is open by default.",
+      default: "false"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user input is required on the date-range-picker before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the date-range-picker can be selected but not changed by the user.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the date-range-picker is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the date-range-picker is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "selectorIcon",
+      type: "ReactNode",
+      description: "The icon to toggle the date picker popover. Usually a calendar icon.",
+      default: "-"
+    },
+    {
+      attribute: "pageBehavior",
+      type: "single | visible",
+      description: "Controls the behavior of paging.",
+      default: "visible"
+    },
+    {
+      attribute: "visibleMonths",
+      type: "number",
+      description: "The number of months to display at once. Up to 3 months are supported.",
+      default: "1"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether the element should receive focus on render.",
+      default: "false"
+    },
+    {
+      attribute: "hourCycle",
+      type: "12 | 24",
+      description: "Whether to display the time in 12 or 24 hour format.",
+      default: "-"
+    },
+    {
+      attribute: "granularity",
+      type: "day | hour | minute | second",
+      description: "Determines the smallest unit that is displayed in the date picker.",
+      default: "-"
+    },
+    {
+      attribute: "hideTimeZone",
+      type: "boolean",
+      description: "Whether to hide the time zone abbreviation.",
+      default: "false"
+    },
+    {
+      attribute: "allowsNonContiguousRanges",
+      type: "boolean",
+      description: "When combined with isDateUnavailable, determines whether non-contiguous ranges may be selected.",
+      default: "false"
+    },
+    {
+      attribute: "shouldForceLeadingZeros",
+      type: "boolean",
+      description: "Whether to always show leading zeros in the month, day, and hour fields.",
+      default: "true"
+    },
+    {
+      attribute: "calendarWidth",
+      type: "number",
+      description: "The width to be applied to the calendar component.",
+      default: "256"
+    },
+    {
+      attribute: "CalendarTopContent",
+      type: "ReactNode",
+      description: "Top content to be rendered in the calendar component.",
+      default: "-"
+    },
+    {
+      attribute: "CalendarBottomContent",
+      type: "ReactNode",
+      description: "Bottom content to be rendered in the calendar component.",
+      default: "-"
+    },
+    {
+      attribute: "showMonthAndYearPickers",
+      type: "boolean",
+      description: "Whether the calendar should show month and year pickers.",
+      default: "false"
+    },
+    {
+      attribute: "popoverProps",
+      type: "PopoverProps",
+      description: "Props to be passed to the popover component.",
+      default: "{ placement: \"bottom\", triggerScaleOnOpen: false, offset: 13 }"
+    },
+    {
+      attribute: "selectorButtonProps",
+      type: "ButtonProps",
+      description: "Props to be passed to the selector button component.",
+      default: "{ size: \"sm\", variant: \"light\", radius: \"full\", isIconOnly: true }"
+    },
+    {
+      attribute: "selectorButtonPlacement",
+      type: "start | end",
+      description: "The position of the selector button.",
+      default: "end"
+    },
+    {
+      attribute: "calendarProps",
+      type: "CalendarProps",
+      description: "Props to be passed to the calendar component.",
+      default: "-"
+    },
+    {
+      attribute: "timeInputProps",
+      type: "TimeInputProps",
+      description: "Props to be passed to the time input component.",
+      default: "-"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable all animations in the date picker.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\" | \"selectorButton\" | \"selectorIcon\" | \"popoverContent\" | \"calendar\" | \"calendarContent\" | \"timeInputLabel\" | \"timeInput\", string>",
+      description: "Allows to set custom class names for the date-range-picker slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### DateRangePicker Events
 
-| Attribute     | Type                                                                                            | Description                                                              |     |
-| ------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | --- |
-| onChange      | `((value: RangeValue<CalendarDate \| CalendarDateTime \| ZonedDateTime>) => void)` \| undefined | Handler that is called when the date-range-picker's value changes.       | -   |
-| onOpenChange  | `(isOpen: boolean) => void`                                                                     | Handler that is called when the date picker popover is opened or closed. | -   |
-| onFocus       | `(e: FocusEvent<HTMLInputElement>) => void`                                                     | Handler that is called when the element receives focus.                  | -   |
-| onBlur        | `(e: FocusEvent<HTMLInputElement>) => void`                                                     | Handler that is called when the element loses focus.                     | -   |
-| onFocusChange | `(isFocused: boolean) => void`                                                                  | Handler that is called when the element's focus status changes.          | -   |
-| onKeyDown     | `(e: KeyboardEvent) => void`                                                                    | Handler that is called when a key is pressed.                            | -   |
-| onKeyUp       | `(e: KeyboardEvent) => void`                                                                    | Handler that is called when a key is released.                           | -   |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(value: RangeValue<CalendarDate | CalendarDateTime | ZonedDateTime>) => void",
+      description: "Handler that is called when the date-range-picker's value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the date picker popover is opened or closed.",
+      default: "-"
+    },
+    {
+      attribute: "onFocus",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the element receives focus.",
+      default: "-"
+    },
+    {
+      attribute: "onBlur",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the element loses focus.",
+      default: "-"
+    },
+    {
+      attribute: "onFocusChange",
+      type: "(isFocused: boolean) => void",
+      description: "Handler that is called when the element's focus status changes.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is released.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/divider.mdx b/apps/docs/content/docs/components/divider.mdx
index ad5d81c36d..74bc965c52 100644
--- a/apps/docs/content/docs/components/divider.mdx
+++ b/apps/docs/content/docs/components/divider.mdx
@@ -65,6 +65,13 @@ Divider is a component that separates content in a page.
 
 ### Divider Props
 
-| Attribute   | Type                       | Description                     | Default      |
-| ----------- | -------------------------- | ------------------------------- | ------------ |
-| orientation | `horizontal` \| `vertical` | The orientation of the divider. | `horizontal` |
+<APITable
+  data={[
+    {
+      attribute: "orientation",
+      type: "`horizontal` | `vertical`",
+      description: "The orientation of the divider.",
+      default: "`horizontal`"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/drawer.mdx b/apps/docs/content/docs/components/drawer.mdx
index 0018f868a6..0b41f99ba1 100644
--- a/apps/docs/content/docs/components/drawer.mdx
+++ b/apps/docs/content/docs/components/drawer.mdx
@@ -159,30 +159,119 @@ The Drawer component design is inspired by [Luma](https://x.com/LumaHQ).
 
 ### Drawer Props
 
-| Attribute                 | Type                                                                                                | Description                                                                                           | Default         |
-| ------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | --------------- |
-| children\*                | `ReactNode`                                                                                         | The content of the drawer. It's usually the `DrawerContent`.                                          | -               |
-| size                      | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `3xl` \| `4xl` \| `5xl` \| `full`                  | The drawer size.                                                                                       | `md`            |
-| radius                    | `none` \| `sm` \| `md` \| `lg`                                                                      | The drawer border radius.                                                                              | `lg`            |
-| placement                 | `left` \| `right` \| `top` \| `bottom`                                                              | The drawer position.                                                                                   | `right`         |
-| isOpen                    | `boolean`                                                                                           | Whether the drawer is open by default (controlled).                                                    | -               |
-| defaultOpen               | `boolean`                                                                                           | Whether the drawer is open by default (uncontrolled).                                                  | -               |
-| isDismissable             | `boolean`                                                                                           | Whether the drawer can be closed by clicking on the overlay or pressing the <Kbd>Esc</Kbd> key.        | `true`          |
-| isKeyboardDismissDisabled | `boolean`                                                                                           | Whether pressing the <Kbd>Esc</Kbd> key to close the drawer should be disabled.                        | `false`         |
-| shouldBlockScroll         | `boolean`                                                                                           | Whether the drawer should block the scroll of the page on open.                                        | `true`          |
-| hideCloseButton           | `boolean`                                                                                           | Whether to hide the drawer close button.                                                               | `false`         |
-| closeButton               | `ReactNode`                                                                                         | Custom close button to display on top right corner.                                                   | -               |
-| motionProps               | [MotionProps](#motion-props)                                                                        | The props to modify the framer motion animation. Use the `variants` API to create your own animation. |                 |
-| portalContainer           | `HTMLElement`                                                                                       | The container element in which the overlay portal will be placed.                                     | `document.body` |
-| disableAnimation          | `boolean`                                                                                           | Whether the drawer should not have animations.                                                         | `false`         |
-| classNames                | `Record<"wrapper"｜ "base"｜ "backdrop"｜ "header" ｜ "body" ｜ "footer" ｜ "closeButton", string>` | Allows to set custom class names for the drawer slots.                                                 | -               |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content of the drawer. It's usually the DrawerContent.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | full",
+      description: "The drawer size.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg",
+      description: "The drawer border radius.",
+      default: "lg"
+    },
+    {
+      attribute: "placement",
+      type: "left | right | top | bottom",
+      description: "The drawer position.",
+      default: "right"
+    },
+    {
+      attribute: "isOpen",
+      type: "boolean",
+      description: "Whether the drawer is open by default (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultOpen",
+      type: "boolean",
+      description: "Whether the drawer is open by default (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "isDismissable",
+      type: "boolean",
+      description: "Whether the drawer can be closed by clicking on the overlay or pressing the Esc key.",
+      default: "true"
+    },
+    {
+      attribute: "isKeyboardDismissDisabled",
+      type: "boolean",
+      description: "Whether pressing the Esc key to close the drawer should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "shouldBlockScroll",
+      type: "boolean",
+      description: "Whether the drawer should block the scroll of the page on open.",
+      default: "true"
+    },
+    {
+      attribute: "hideCloseButton",
+      type: "boolean",
+      description: "Whether to hide the drawer close button.",
+      default: "false"
+    },
+    {
+      attribute: "closeButton",
+      type: "ReactNode",
+      description: "Custom close button to display on top right corner.",
+      default: "-"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The props to modify the framer motion animation. Use the variants API to create your own animation.",
+      default: "-"
+    },
+    {
+      attribute: "portalContainer",
+      type: "HTMLElement",
+      description: "The container element in which the overlay portal will be placed.",
+      default: "document.body"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the drawer should not have animations.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'wrapper' | 'base' | 'backdrop' | 'header' | 'body' | 'footer' | 'closeButton', string>",
+      description: "Allows to set custom class names for the drawer slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Drawer Events
 
-| Attribute    | Type                        | Description                                                 |
-| ------------ | --------------------------- | ----------------------------------------------------------- |
-| onOpenChange | `(isOpen: boolean) => void` | Handler that is called when the drawer's open state changes. |
-| onClose      | `() => void`                | Handler that is called when the drawer is closed.            |
+<APITable
+  data={[
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the drawer's open state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the drawer is closed.",
+      default: "-"
+    }
+  ]}
+/>
 
 <Spacer y={4} />
 
diff --git a/apps/docs/content/docs/components/dropdown.mdx b/apps/docs/content/docs/components/dropdown.mdx
index dc4bb63a4d..62bb65e018 100644
--- a/apps/docs/content/docs/components/dropdown.mdx
+++ b/apps/docs/content/docs/components/dropdown.mdx
@@ -281,127 +281,503 @@ you to customize each item individually.
 
 ### Dropdown Props
 
-| Attribute         | Type                                     | Description                                                                                           | Default |
-| ----------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------- |
-| children\*        | `ReactNode[]`                            | The children to render. Usually a `DropdownTrigger` and `DropdownMenu` elements.                      | -       |
-| type              | `menu` \| `listbox`                      | Type of overlay that is opened by the dropdown trigger.                                               | `menu`  |
-| trigger           | `press` \| `longPress`                   | How the dropdown menu is triggered.                                                                   | `press` |
-| isDisabled        | `boolean`                                | Whether the dropdown trigger is disabled.                                                             | `false` |
-| closeOnSelect     | `boolean`                                | Whether the dropdown menu should be closed when an item is selected.                                  | `true`  |
-| shouldBlockScroll | `boolean`                                | Whether the dropdown menu should block scrolling outside the menu.                                    | `true`  |
-| PopoverProps      | [PopoverProps](/docs/components/popover) | Since the dropdown is an extension of the popover, it accepts all the props of the popover component. | -       |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render. Usually a DropdownTrigger and DropdownMenu elements.",
+      default: "-"
+    },
+    {
+      attribute: "type",
+      type: "menu | listbox",
+      description: "Type of overlay that is opened by the dropdown trigger.",
+      default: "menu"
+    },
+    {
+      attribute: "trigger",
+      type: "press | longPress",
+      description: "How the dropdown menu is triggered.",
+      default: "press"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the dropdown trigger is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "closeOnSelect",
+      type: "boolean",
+      description: "Whether the dropdown menu should be closed when an item is selected.",
+      default: "true"
+    },
+    {
+      attribute: "shouldBlockScroll",
+      type: "boolean",
+      description: "Whether the dropdown menu should block scrolling outside the menu.",
+      default: "true"
+    },
+    {
+      attribute: "PopoverProps",
+      type: "PopoverProps",
+      description: "Since the dropdown is an extension of the popover, it accepts all the props of the popover component.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Dropdown Events
 
-| Attribute                    | Type                        | Description                                                                                                             |
-| ---------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| onOpenChange                 | `(isOpen: boolean) => void` | Handler that is called when the dropdown's open state changes.                                                          |
-| shouldCloseOnInteractOutside | `(e: HTMLElement) => void`  | When user interacts with the argument element outside of the dropdown ref, return `true` if `onClose` should be called. |
-| onClose                      | `() => void`                | Handler that is called when the dropdown should close.                                                                  |
-
----
+<APITable
+  data={[
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the dropdown's open state changes.",
+      default: "-"
+    },
+    {
+      attribute: "shouldCloseOnInteractOutside",
+      type: "(e: HTMLElement) => void",
+      description: "When user interacts with the argument element outside of the dropdown ref, return true if onClose should be called.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the dropdown should close.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### DropdownTrigger Props
 
-| Attribute | Type        | Description                                                                                                                                                                   | Default |
-| --------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| children  | `ReactNode` | The dropdown trigger component, ensure the `children` passed is focusable. Users can tab to it using their keyboard, and it can take a ref. It is critical for accessibility. | -       |
-
----
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The dropdown trigger component, ensure the children passed is focusable. Users can tab to it using their keyboard, and it can take a ref. It is critical for accessibility.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### DropdownMenu Props
 
-| Attribute              | Type                                                                                                   | Description                                                                                             |             |
-| ---------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | ----------- |
-| children\*             | `ReactNode` \| `((item: T) => ReactElement)`                                                           | The contents of the collection. It's usually the `DropdownItem` or `DropdownSection`. (static)          | -           |
-| items                  | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic)                                                               | -           |
-| variant                | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow`                                      | The dropdown items appearance style.                                                                    | `solid`     |
-| color                  | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                            | The dropdown items color theme.                                                                         | `default`   |
-| selectionMode          | `none` \| `single` \| `multiple`                                                                       | The type of selection that is allowed in the collection.                                                | -           |
-| selectedKeys           | `all` \| `Iterable<React.Key>`                                                                                          | The currently selected keys in the collection (controlled).                                             | -           |
-| disabledKeys           | `Iterable<React.Key>`                                                                                          | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | -           |
-| defaultSelectedKeys    | `all` \| `Iterable<React.Key>`                                                                                 | The initial selected keys in the collection (uncontrolled).                                             | -           |
-| disallowEmptySelection | `boolean`                                                                                              | Whether the collection allows empty selection.                                                          | `false`     |
-| autoFocus              | `boolean` \| `first` \| `last`                                                                         | Where the focus should be set.                                                                          | `false`     |
-| topContent             | `ReactNode`                                                                                            | The content to display above the listbox items.                                                         | -           |
-| bottomContent          | `ReactNode`                                                                                            | The content to display below the listbox items.                                                         | -           |
-| emptyContent           | `ReactNode`                                                                                            | The content to display when the collection is empty.                                                    | `No items.` |
-| hideEmptyContent       | `boolean`                                                                                              | Whether to not display the empty content when the collection is empty.                                  | `false`     |
-| hideSelectedIcon       | `boolean`                                                                                              | Whether to hide the check icon when the items are selected.                                             | `false`     |
-| shouldFocusWrap        | `boolean`                                                                                              | Whether keyboard navigation is circular.                                                                | `false`     |
-| closeOnSelect          | `boolean`                                                                                              | Whether the dropdown menu should be closed when an item is selected.                                    | `true`      |
-| disableAnimation       | `boolean`                                                                                              | Whether to disable the animation of the dropdown items.                                                 | `false`     |
-| classNames             | `Record<"base"｜ "list"｜ "emptyContent", string>`                                                     | Allows to set custom class names for the dropdown menu slots.                                           | -           |
-| itemClasses            | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>`          | Allows to set custom class names for the dropdown item slots.                                           | -           |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode | ((item: T) => ReactElement)",
+      description: "The contents of the collection. It's usually the DropdownItem or DropdownSection. (static)",
+      default: "-"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "Item objects in the collection. (dynamic)",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "solid | bordered | light | flat | faded | shadow",
+      description: "The dropdown items appearance style.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The dropdown items color theme.",
+      default: "default"
+    },
+    {
+      attribute: "selectionMode",
+      type: "none | single | multiple",
+      description: "The type of selection that is allowed in the collection.",
+      default: "-"
+    },
+    {
+      attribute: "selectedKeys",
+      type: "all | Iterable<React.Key>",
+      description: "The currently selected keys in the collection (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "disabledKeys",
+      type: "Iterable<React.Key>",
+      description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelectedKeys",
+      type: "all | Iterable<React.Key>",
+      description: "The initial selected keys in the collection (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "disallowEmptySelection",
+      type: "boolean",
+      description: "Whether the collection allows empty selection.",
+      default: "false"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean | first | last",
+      description: "Where the focus should be set.",
+      default: "false"
+    },
+    {
+      attribute: "topContent",
+      type: "ReactNode",
+      description: "The content to display above the listbox items.",
+      default: "-"
+    },
+    {
+      attribute: "bottomContent",
+      type: "ReactNode",
+      description: "The content to display below the listbox items.",
+      default: "-"
+    },
+    {
+      attribute: "emptyContent",
+      type: "ReactNode",
+      description: "The content to display when the collection is empty.",
+      default: "No items."
+    },
+    {
+      attribute: "hideEmptyContent",
+      type: "boolean",
+      description: "Whether to not display the empty content when the collection is empty.",
+      default: "false"
+    },
+    {
+      attribute: "hideSelectedIcon",
+      type: "boolean",
+      description: "Whether to hide the check icon when the items are selected.",
+      default: "false"
+    },
+    {
+      attribute: "shouldFocusWrap",
+      type: "boolean",
+      description: "Whether keyboard navigation is circular.",
+      default: "false"
+    },
+    {
+      attribute: "closeOnSelect",
+      type: "boolean",
+      description: "Whether the dropdown menu should be closed when an item is selected.",
+      default: "true"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation of the dropdown items.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<base｜list｜emptyContent, string>",
+      description: "Allows to set custom class names for the dropdown menu slots.",
+      default: "-"
+    },
+    {
+      attribute: "itemClasses",
+      type: "Record<base｜wrapper｜title｜description｜shortcut｜selectedIcon, string>",
+      description: "Allows to set custom class names for the dropdown item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### DropdownMenu Events
 
-| Attribute         | Type                          | Description                                                                |
-| ----------------- | ----------------------------- | -------------------------------------------------------------------------- |
-| onAction          | `(key: React.Key) => void`    | Handler that is called when an item is selected.                           |
-| onSelectionChange | `(keys: "all" \| Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void` | Handler that is called when the selection changes.                         |
-| onClose           | `() => void`                  | Handler that is called when the menu should close after selecting an item. |
-
----
+<APITable
+  data={[
+    {
+      attribute: "onAction",
+      type: "(key: React.Key) => void",
+      description: "Handler that is called when an item is selected.",
+      default: "-"
+    },
+    {
+      attribute: "onSelectionChange",
+      type: "(keys: \"all\" | Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void",
+      description: "Handler that is called when the selection changes.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the menu should close after selecting an item.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### DropdownSection Props
 
-| Attribute        | Type                                                                                                   | Description                                                                                 | Default |
-| ---------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ------- |
-| children\*       | `ReactNode`                                                                                            | The contents of the dropdown section. Usually a list of `DropdownItem` components. (static) | -       |
-| title            | `string`                                                                                               | The title of the dropdown section.                                                          | -       |
-| items            | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic)                                                   | -       |
-| hideSelectedIcon | `boolean`                                                                                              | Whether to hide the check icon when the items are selected.                                 | `false` |
-| showDivider      | `boolean`                                                                                              | Whether to show the divider between the groups.                                             | `false` |
-| dividerProps     | [DividerProps](/docs/components/divider)                                                               | The divider component props.                                                                | -       |
-| classNames       | `Record<"base"｜ "heading"｜ "group"｜ "divider", string>`                                             | Allows to set custom class names for the dropdown section slots.                            | -       |
-| itemClasses      | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>`          | Allows to set custom class names for the dropdown item slots.                               | -       |
-
----
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The contents of the dropdown section. Usually a list of DropdownItem components. (static)",
+      default: "-"
+    },
+    {
+      attribute: "title",
+      type: "string",
+      description: "The title of the dropdown section.",
+      default: "-"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "Item objects in the collection. (dynamic)",
+      default: "-"
+    },
+    {
+      attribute: "hideSelectedIcon",
+      type: "boolean",
+      description: "Whether to hide the check icon when the items are selected.",
+      default: "false"
+    },
+    {
+      attribute: "showDivider",
+      type: "boolean",
+      description: "Whether to show the divider between the groups.",
+      default: "false"
+    },
+    {
+      attribute: "dividerProps",
+      type: "DividerProps",
+      description: "The divider component props.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<base｜heading｜group｜divider, string>",
+      description: "Allows to set custom class names for the dropdown section slots.",
+      default: "-"
+    },
+    {
+      attribute: "itemClasses",
+      type: "Record<base｜wrapper｜title｜description｜shortcut｜selectedIcon, string>",
+      description: "Allows to set custom class names for the dropdown item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### DropdownItem Props
 
-| Attribute        | Type                                                                                          | Description                                                                                                                                                                      | Default |
-| ---------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| children\*       | `ReactNode`                                                                                   | The contents of the dropdown item.                                                                                                                                               | -       |
-| key              | `React.Key`                                                                                   | The unique key for the dropdown item.                                                                                                                                            | -       |
-| title            | `string` \| `ReactNode`                                                                       | The title of the dropdown item.                                                                                                                                                  | -       |
-| textValue        | `string`                                                                                      | A string representation of the item's contents, used for features like typeahead.                                                                                                | -       |
-| description      | `string` \| `ReactNode`                                                                       | The description of the dropdown item.                                                                                                                                            | -       |
-| shortcut         | `string` \| `ReactNode`                                                                       | The dropdown item keyboard shortcut.                                                                                                                                             | -       |
-| startContent     | `ReactNode`                                                                                   | The start content of the dropdown item.                                                                                                                                          | -       |
-| endContent       | `ReactNode`                                                                                   | The end content of the dropdown item. This is positioned after the shortcut and the selected icon.                                                                               | -       |
-| selectedIcon     | [SelectedIconProps](#dropdown-item-selected-icon-props)                                       | Custom icon to render when the item is selected.                                                                                                                                 | -       |
-| showDivider      | `boolean`                                                                                     | Whether to show a divider below the item.                                                                                                                                        | `false` |
-| href             | `string`                                                                                      | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                   | -       |
-| target           | `HTMLAttributeAnchorTarget`                                                                   | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                   | -       |
-| rel              | `string`                                                                                      | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                  | -       |
-| download         | `boolean` \| `string`                                                                         | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). | -       |
-| ping             | `string`                                                                                      | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                   | -       |
-| referrerPolicy   | `HTMLAttributeReferrerPolicy`                                                                 | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                 | -       |
-| isDisabled       | `boolean`                                                                                     | Whether the dropdown item should be disabled. (**Deprecated**) pass **disabledKeys** to `DropdownMenu` instead.                                                                  | `false` |
-| isSelected       | `boolean`                                                                                     | Whether the dropdown item should be selected. (**Deprecated**) pass **selectedKeys** to `DropdownMenu` instead.                                                                  | `false` |
-| isReadOnly       | `boolean`                                                                                     | Whether the dropdown item press events should be ignored.                                                                                                                        | `false` |
-| hideSelectedIcon | `boolean`                                                                                     | Whether to hide the check icon when the item is selected.                                                                                                                        | `false` |
-| closeOnSelect    | `boolean`                                                                                     | Whether the dropdown menu should be closed when the item is selected.                                                                                                            | `true`  |
-| classNames       | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>` | Allows to set custom class names for the dropdown item slots.                                                                                                                    | -       |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The contents of the dropdown item.",
+      default: "-"
+    },
+    {
+      attribute: "key",
+      type: "React.Key",
+      description: "The unique key for the dropdown item.",
+      default: "-"
+    },
+    {
+      attribute: "title",
+      type: "string | ReactNode",
+      description: "The title of the dropdown item.",
+      default: "-"
+    },
+    {
+      attribute: "textValue",
+      type: "string",
+      description: "A string representation of the item's contents, used for features like typeahead.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "string | ReactNode",
+      description: "The description of the dropdown item.",
+      default: "-"
+    },
+    {
+      attribute: "shortcut",
+      type: "string | ReactNode",
+      description: "The dropdown item keyboard shortcut.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The start content of the dropdown item.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "The end content of the dropdown item. This is positioned after the shortcut and the selected icon.",
+      default: "-"
+    },
+    {
+      attribute: "selectedIcon",
+      type: "SelectedIconProps",
+      description: "Custom icon to render when the item is selected.",
+      default: "-"
+    },
+    {
+      attribute: "showDivider",
+      type: "boolean",
+      description: "Whether to show a divider below the item.",
+      default: "false"
+    },
+    {
+      attribute: "href",
+      type: "string",
+      description: "A URL to link to. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "target",
+      type: "HTMLAttributeAnchorTarget",
+      description: "The target window for the link. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "rel",
+      type: "string",
+      description: "The relationship between the linked resource and the current page. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "download",
+      type: "boolean | string",
+      description: "Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "ping",
+      type: "string",
+      description: "A space-separated list of URLs to ping when the link is followed. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "referrerPolicy",
+      type: "HTMLAttributeReferrerPolicy",
+      description: "How much of the referrer to send when following the link. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the dropdown item should be disabled. (Deprecated) pass disabledKeys to DropdownMenu instead.",
+      default: "false"
+    },
+    {
+      attribute: "isSelected",
+      type: "boolean",
+      description: "Whether the dropdown item should be selected. (Deprecated) pass selectedKeys to DropdownMenu instead.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the dropdown item press events should be ignored.",
+      default: "false"
+    },
+    {
+      attribute: "hideSelectedIcon",
+      type: "boolean",
+      description: "Whether to hide the check icon when the item is selected.",
+      default: "false"
+    },
+    {
+      attribute: "closeOnSelect",
+      type: "boolean",
+      description: "Whether the dropdown menu should be closed when the item is selected.",
+      default: "true"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<base｜wrapper｜title｜description｜shortcut｜selectedIcon, string>",
+      description: "Allows to set custom class names for the dropdown item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### DropdownItem Events
 
-| Attribute     | Type                           | Description                                                                                                                  |
-| ------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
-| onAction      | `() => void`                   | Handler that is called when the dropdown item is selected. (**Deprecated**) pass to `DropdownMenu` instead.                  |
-| onClose       | `() => void`                   | Handler that is called when the dropdown item should close after selecting. (**Deprecated**) pass to `DropdownMenu` instead. |
-| onPress       | `(e: PressEvent) => void`      | Handler called when the press is released over the target.                                                                   |
-| onPressStart  | `(e: PressEvent) => void`      | Handler called when a press interaction starts.                                                                              |
-| onPressEnd    | `(e: PressEvent) => void`      | Handler called when a press interaction ends, either over the target or when the pointer leaves the target.                  |
-| onPressChange | `(isPressed: boolean) => void` | Handler called when the press state changes.                                                                                 |
-| onPressUp     | `(e: PressEvent) => void`      | Handler called when a press is released over the target, regardless of whether it started on the target or not.              |
-| onKeyDown     | `(e: KeyboardEvent) => void`   | Handler called when a key is pressed.                                                                                        |
-| onKeyUp       | `(e: KeyboardEvent) => void`   | Handler called when a key is released.                                                                                       |
-| onClick       | `MouseEventHandler`            | The native button click event handler (**Deprecated**) use **onPress** instead.                                              |
-
----
+<APITable
+  data={[
+    {
+      attribute: "onAction",
+      type: "() => void",
+      description: "Handler that is called when the dropdown item is selected. (Deprecated) pass to DropdownMenu instead.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the dropdown item should close after selecting. (Deprecated) pass to DropdownMenu instead.",
+      default: "-"
+    },
+    {
+      attribute: "onPress",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when the press is released over the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressStart",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction starts.",
+      default: "-"
+    },
+    {
+      attribute: "onPressEnd",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction ends, either over the target or when the pointer leaves the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressChange",
+      type: "(isPressed: boolean) => void",
+      description: "Handler called when the press state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onPressUp",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press is released over the target, regardless of whether it started on the target or not.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is released.",
+      default: "-"
+    },
+    {
+      attribute: "onClick",
+      type: "MouseEventHandler",
+      description: "The native button click event handler (**Deprecated**) use **onPress** instead.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Types
 
diff --git a/apps/docs/content/docs/components/image.mdx b/apps/docs/content/docs/components/image.mdx
index ab1ce41953..3f88e447e4 100644
--- a/apps/docs/content/docs/components/image.mdx
+++ b/apps/docs/content/docs/components/image.mdx
@@ -91,31 +91,122 @@ you can use it with NextUI `Image` component as well.
 - **zoomedWrapper**: The wrapper slot for the zoomed image it avoids the image content to overflow the parent container.
 - **blurredImg**: The wrapper slot for the duplicated blurred image.
 
+<Spacer y={4} />
+
 ## API
 
 ### Image Props
 
-| Attribute       | Type                                                                 | Description                                                                                                                                                                                                 | Default |
-| --------------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| src             | `string`                                                             | The image source.                                                                                                                                                                                           | -       |
-| srcSet          | `string`                                                             | The image srcSet.                                                                                                                                                                                           | -       |
-| sizes           | `string`                                                             | The image sizes.                                                                                                                                                                                            | -       |
-| alt             | `string`                                                             | The image alt.                                                                                                                                                                                              | -       |
-| width           | `number`                                                             | The image width.                                                                                                                                                                                            | -       |
-| height          | `number`                                                             | The image height.                                                                                                                                                                                           | -       |
-| radius          | `none` \| `sm` \| `md` \| `lg` \| `full`                             | The image border radius.                                                                                                                                                                                    | `xl`    |
-| shadow          | `none` \| `sm` \| `md` \| `lg`                                       | The image shadow.                                                                                                                                                                                           | `none`  |
-| loading         | `eager` \| `lazy`                                                    | A loading strategy to use for the image.                                                                                                                                                                    | -       |
-| fallbackSrc     | `string`                                                             | The fallback image source.                                                                                                                                                                                  | -       |
-| isBlurred       | `boolean`                                                            | Whether the image should have a duplicated blurred image at the background.                                                                                                                                 | `false` |
-| isZoomed        | `boolean`                                                            | Whether the image should be zoomed when hovered.                                                                                                                                                            | `false` |
-| removeWrapper   | `boolean`                                                            | Whether to remove the wrapper element. This will cause the image to be rendered as a direct child of the parent element. If you set this prop as `true` neither the skeleton nor the zoom effect will work. | `false` |
-| disableSkeleton | `boolean`                                                            | Whether the image should disable the skeleton animation while loading.                                                                                                                                      | `false` |
-| classNames      | `Record<"img"｜ "wrapper"｜ "zoomedWrapper"｜ "blurredImg", string>` | Allows to set custom class names for the image slots.                                                                                                                                                       | -       |
+<APITable
+  data={[
+    {
+      attribute: "src",
+      type: "string",
+      description: "The image source.",
+      default: "-"
+    },
+    {
+      attribute: "srcSet",
+      type: "string",
+      description: "The image srcSet.",
+      default: "-"
+    },
+    {
+      attribute: "sizes",
+      type: "string",
+      description: "The image sizes.",
+      default: "-"
+    },
+    {
+      attribute: "alt",
+      type: "string",
+      description: "The image alt.",
+      default: "-"
+    },
+    {
+      attribute: "width",
+      type: "number",
+      description: "The image width.",
+      default: "-"
+    },
+    {
+      attribute: "height",
+      type: "number",
+      description: "The image height.",
+      default: "-"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The image border radius.",
+      default: "xl"
+    },
+    {
+      attribute: "shadow",
+      type: "none | sm | md | lg",
+      description: "The image shadow.",
+      default: "none"
+    },
+    {
+      attribute: "loading",
+      type: "eager | lazy",
+      description: "A loading strategy to use for the image.",
+      default: "-"
+    },
+    {
+      attribute: "fallbackSrc",
+      type: "string",
+      description: "The fallback image source.",
+      default: "-"
+    },
+    {
+      attribute: "isBlurred",
+      type: "boolean",
+      description: "Whether the image should have a duplicated blurred image at the background.",
+      default: "false"
+    },
+    {
+      attribute: "isZoomed",
+      type: "boolean",
+      description: "Whether the image should be zoomed when hovered.",
+      default: "false"
+    },
+    {
+      attribute: "removeWrapper",
+      type: "boolean",
+      description: "Whether to remove the wrapper element. This will cause the image to be rendered as a direct child of the parent element. If you set this prop as `true` neither the skeleton nor the zoom effect will work.",
+      default: "false"
+    },
+    {
+      attribute: "disableSkeleton",
+      type: "boolean",
+      description: "Whether the image should disable the skeleton animation while loading.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: 'Record<"img" | "wrapper" | "zoomedWrapper" | "blurredImg", string>',
+      description: "Allows to set custom class names for the image slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Image Events
 
-| Attribute | Type                                  | Description                                          |
-| --------- | ------------------------------------- | ---------------------------------------------------- |
-| onLoad    | `ReactEventHandler<HTMLImageElement>` | Handler that is called when the image load.          |
-| onError   | `() => void`                          | Handler that is called when the image fails to load. |
+<APITable
+  data={[
+    {
+      attribute: "onLoad",
+      type: "ReactEventHandler<HTMLImageElement>",
+      description: "Handler that is called when the image load.",
+      default: "-"
+    },
+    {
+      attribute: "onError",
+      type: "() => void",
+      description: "Handler that is called when the image fails to load.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/input-otp.mdx b/apps/docs/content/docs/components/input-otp.mdx
index d7b5d514b3..9741205111 100644
--- a/apps/docs/content/docs/components/input-otp.mdx
+++ b/apps/docs/content/docs/components/input-otp.mdx
@@ -193,36 +193,170 @@ You can customize the styles of the `InputOtp` component using the `classNames`
 
 ### InputOtp Props
 
-| Attribute                   | Type                                                                                                                                                                  | Description                                                                                    | Default    |
-| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------- |
-| length                      | `number`                                                                                                                                                              | The length of the input-otp.                                                                   | `4`        |
-| allowedKeys                 | `regEx string`                                                                                                                                                        | The allowed keys for the input-otp.                                                            | `^[0-9]*$` |
-| variant                     | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                                       | The variant of the input-otp.                                                                  | `flat`     |
-| color                       | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                           | The color of the input-otp.                                                                    | `default`  |
-| size                        | `sm` \| `md` \| `lg`                                                                                                                                                  | The size of the input-otp.                                                                     | `md`       |
-| radius                      | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                                              | The radius of the input-otp.                                                                   | -          |
-| value                       | `string`                                                                                                                                                              | The current value of the input-otp (controlled).                                               | -          |
-| defaultValue                | `string`                                                                                                                                                              | The default value of the input-otp (uncontrolled).                                             | -          |
-| description                 | `ReactNode`                                                                                                                                                           | Provides additional information or hints about the input requirements.                           | -          |
-| errorMessage                | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                                                                                 | An error message for the input-otp. It is only shown when `isInvalid` is set to `true`         | -          |
-| fullWidth                   | `boolean`                                                                                                                                                             | When true, the InputOtp expands to fill its parent container width.                          | `false`    |
-| isRequired                  | `boolean`                                                                                                                                                             | Marks the input as required for form submission.                                             | `false`    |
-| isReadOnly                  | `boolean`                                                                                                                                                             | When true, allows selection but prevents user modification.                                | `false`    |
-| isDisabled                  | `boolean`                                                                                                                                                             | Whether the input-otp is disabled.                                                             | `false`    |
-| isInvalid                   | `boolean`                                                                                                                                                             | Whether the input-otp is invalid.                                                              | `false`    |
-| baseRef                     | `RefObject<HTMLDivElement>`                                                                                                                                           | The ref to the base element.                                                                   | -          |
-| disableAnimation            | `boolean`                                                                                                                                                             | Whether the input-otp should be animated.                                                      | `false`    |
-| classNames                  | `Record<"base"｜ "inputWrapper"｜ "input"｜ "segmentWrapper"｜ "segment" ｜ "caret" ｜ "passwordChar" ｜ "helperWrapper" ｜ "description" ｜ "errorMessage", string>` | Allows to set custom class names for the Input slots.                                          | -          |
-| textAlign                   | `left` \| `center` \| `right`                                                                                                                                         | The text alignment of the input segments                                                       | `center`   |
-| pushPasswordManagerStrategy | `"none"` \| `"hidden"` \| `"input"`                                                                                                                                   | Strategy for password manager support                                                          | -          |
-| pasteTransformer            | `(text: string) => string`                                                                                                                                            | A function to transform pasted text before it's inserted into the input.                      | -          |
-| containerClassName          | `string`                                                                                                                                                              | Class name for the input container                                                             | -          |
-| noScriptCSSFallback         | `string`                                                                                                                                                              | CSS fallback for when JavaScript is disabled                                                   | -          |
+<APITable
+  data={[
+    {
+      attribute: "length",
+      type: "number",
+      description: "The length of the input-otp.",
+      default: "4"
+    },
+    {
+      attribute: "allowedKeys",
+      type: "regEx string",
+      description: "The allowed keys for the input-otp.",
+      default: "^[0-9]*$"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the input-otp.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the input-otp.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the input-otp.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the input-otp.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "string",
+      description: "The current value of the input-otp (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "string",
+      description: "The default value of the input-otp (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "Provides additional information or hints about the input requirements.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | ((v: ValidationResult) => ReactNode)",
+      description: "An error message for the input-otp. It is only shown when isInvalid is set to true",
+      default: "-"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "When true, the InputOtp expands to fill its parent container width.",
+      default: "false"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Marks the input as required for form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "When true, allows selection but prevents user modification.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the input-otp is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the input-otp is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "baseRef",
+      type: "RefObject<HTMLDivElement>",
+      description: "The ref to the base element.",
+      default: "-"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the input-otp should be animated.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'base' | 'inputWrapper' | 'input' | 'segmentWrapper' | 'segment' | 'caret' | 'passwordChar' | 'helperWrapper' | 'description' | 'errorMessage', string>",
+      description: "Allows to set custom class names for the Input slots.",
+      default: "-"
+    },
+    {
+      attribute: "textAlign",
+      type: "left | center | right",
+      description: "The text alignment of the input segments",
+      default: "center"
+    },
+    {
+      attribute: "pushPasswordManagerStrategy",
+      type: "'none' | 'hidden' | 'input'",
+      description: "Strategy for password manager support",
+      default: "-"
+    },
+    {
+      attribute: "pasteTransformer",
+      type: "(text: string) => string",
+      description: "A function to transform pasted text before it's inserted into the input.",
+      default: "-"
+    },
+    {
+      attribute: "containerClassName",
+      type: "string",
+      description: "Class name for the input container",
+      default: "-"
+    },
+    {
+      attribute: "noScriptCSSFallback",
+      type: "string",
+      description: "CSS fallback for when JavaScript is disabled",
+      default: "-"
+    }
+  ]}
+/>
 
 ### InputOtp Events
 
-| Attribute     | Type                                  | Description                                                                                                                         |
-| ------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| onChange      | `React.ChangeEvent<HTMLInputElement>` | Handler that is called when the element's value changes. You can pull out the new value by accessing `event.target.value` (string). |
-| onValueChange | `(value: string) => void`             | Handler that is called when the element's value changes.                                                                            |
-| onComplete    | `(value: string) => void`             | Handler that is called when the element's value is completely filled.                                                               |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "React.ChangeEvent<HTMLInputElement>",
+      description: "Handler that is called when the element's value changes. You can pull out the new value by accessing event.target.value (string).",
+      default: "-"
+    },
+    {
+      attribute: "onValueChange",
+      type: "(value: string) => void",
+      description: "Handler that is called when the element's value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onComplete",
+      type: "(value: string) => void",
+      description: "Handler that is called when the element's value is completely filled.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/input.mdx b/apps/docs/content/docs/components/input.mdx
index 9ff7d55a89..f42b3b750d 100644
--- a/apps/docs/content/docs/components/input.mdx
+++ b/apps/docs/content/docs/components/input.mdx
@@ -194,39 +194,182 @@ In case you need to customize the input even further, you can use the `useInput`
 
 ### Input Props
 
-| Attribute          | Type                                                                                                                                                                   | Description                                                                                                                                                   | Default   |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| children           | `ReactNode`                                                                                                                                                            | The content of the input.                                                                                                                                     | -         |
-| variant            | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                                        | The variant of the input.                                                                                                                                     | `flat`    |
-| color              | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                            | The color of the input.                                                                                                                                       | `default` |
-| size               | `sm` \| `md` \| `lg`                                                                                                                                                   | The size of the input.                                                                                                                                        | `md`      |
-| radius             | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                                               | The radius of the input.                                                                                                                                      | -         |
-| label              | `ReactNode`                                                                                                                                                            | The content to display as the label.                                                                                                                          | -         |
-| value              | `string`                                                                                                                                                               | The current value of the input (controlled).                                                                                                                  | -         |
-| defaultValue       | `string`                                                                                                                                                               | The default value of the input (uncontrolled).                                                                                                                | -         |
-| placeholder        | `string`                                                                                                                                                               | The placeholder of the input.                                                                                                                                 | -         |
-| description        | `ReactNode`                                                                                                                                                            | A description for the input. Provides a hint such as specific requirements for what to choose.                                                                | -         |
-| errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                                                                                  | An error message for the input. It is only shown when `isInvalid` is set to `true`                                                                            | -         |
-| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                       | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -         |
-| validationBehavior | `native` \| `aria`                                                                                                                                                     | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`    |
-| startContent       | `ReactNode`                                                                                                                                                            | Element to be rendered in the left side of the input.                                                                                                         | -         |
-| endContent         | `ReactNode`                                                                                                                                                            | Element to be rendered in the right side of the input.                                                                                                        | -         |
-| labelPlacement     | `inside` \| `outside` \| `outside-left`                                                                                                                                | The position of the label.                                                                                                                                    | `inside`  |
-| fullWidth          | `boolean`                                                                                                                                                              | Whether the input should take up the width of its parent.                                                                                                     | `true`    |
-| isClearable        | `boolean`                                                                                                                                                              | Whether the input should have a clear button.                                                                                                                 | `false`   |
-| isRequired         | `boolean`                                                                                                                                                              | Whether user input is required on the input before form submission.                                                                                           | `false`   |
-| isReadOnly         | `boolean`                                                                                                                                                              | Whether the input can be selected but not changed by the user.                                                                                                |           |
-| isDisabled         | `boolean`                                                                                                                                                              | Whether the input is disabled.                                                                                                                                | `false`   |
-| isInvalid          | `boolean`                                                                                                                                                              | Whether the input is invalid.                                                                                                                                 | `false`   |
-| baseRef            | `RefObject<HTMLDivElement>`                                                                                                                                            | The ref to the base element.                                                                                                                                  | -         |
-| validationState    | `valid` \| `invalid`                                                                                                                                                   | Whether the input should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                         | -         |
-| disableAnimation   | `boolean`                                                                                                                                                              | Whether the input should be animated.                                                                                                                         | `false`   |
-| classNames         | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "mainWrapper" ｜ "input" ｜ "clearButton" ｜ "helperWrapper" ｜ "description" ｜ "errorMessage", string>`    | Allows to set custom class names for the Input slots.                                                                                                         | -         |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content of the input.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the input.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the input.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the input.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the input.",
+      default: "-"
+    },
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "string",
+      description: "The current value of the input (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "string",
+      description: "The default value of the input (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "placeholder",
+      type: "string",
+      description: "The placeholder of the input.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the input. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | ((v: ValidationResult) => ReactNode)",
+      description: "An error message for the input. It is only shown when isInvalid is set to true",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: string) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation or ARIA validation.",
+      default: "aria"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the left side of the input.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the right side of the input.",
+      default: "-"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the input should take up the width of its parent.",
+      default: "true"
+    },
+    {
+      attribute: "isClearable",
+      type: "boolean",
+      description: "Whether the input should have a clear button.",
+      default: "false"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user input is required on the input before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the input can be selected but not changed by the user.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the input is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the input is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "baseRef",
+      type: "RefObject<HTMLDivElement>",
+      description: "The ref to the base element.",
+      default: "-"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the input should be animated.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'base' | 'label' | 'inputWrapper' | 'innerWrapper' | 'mainWrapper' | 'input' | 'clearButton' | 'helperWrapper' | 'description' | 'errorMessage', string>",
+      description: "Allows to set custom class names for the Input slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Input Events
 
-| Attribute     | Type                                  | Description                                                                                                                         |
-| ------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| onChange      | `React.ChangeEvent<HTMLInputElement>` | Handler that is called when the element's value changes. You can pull out the new value by accessing `event.target.value` (string). |
-| onValueChange | `(value: string) => void`             | Handler that is called when the element's value changes.                                                                            |
-| onClear       | `() => void`                          | Handler that is called when the clear button is clicked.                                                                            |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "React.ChangeEvent<HTMLInputElement>",
+      description: "Handler that is called when the element's value changes. You can pull out the new value by accessing event.target.value (string).",
+      default: "-"
+    },
+    {
+      attribute: "onValueChange",
+      type: "(value: string) => void",
+      description: "Handler that is called when the element's value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onClear",
+      type: "() => void",
+      description: "Handler that is called when the clear button is clicked.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/kbd.mdx b/apps/docs/content/docs/components/kbd.mdx
index 506b17bee3..30f289fa79 100644
--- a/apps/docs/content/docs/components/kbd.mdx
+++ b/apps/docs/content/docs/components/kbd.mdx
@@ -65,11 +65,28 @@ Keyboard key is a component to display which key or combination of keys performs
 
 ### Keyboard Key Props
 
-| Attribute  | Type                                                   | Description                                              | Default |
-| ---------- | ------------------------------------------------------ | -------------------------------------------------------- | ------- |
-| children   | `ReactNode`                                            | The content of the keyboard key.                         | -       |
-| keys       | [KbdKey](#keyboard-keys) \| [KbdKey[]](#keyboard-keys) | The keys of the keyboard key.                            | -       |
-| classNames | `Record<"base"｜"abbr"｜"content",string>`          | Allows to set custom class names for the checkbox slots. | -       |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content to display in the keyboard key.",
+      default: "-"
+    },
+    {
+      attribute: "keys",
+      type: "KbdKey | KbdKey[]",
+      description: "The keys of the keyboard key.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: 'Record<"base" | "abbr" | "content", string>',
+      description: "Allows to set custom class names for the keyboard key slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Keyboard Keys
 
diff --git a/apps/docs/content/docs/components/link.mdx b/apps/docs/content/docs/components/link.mdx
index d90b84a4f9..1a5896223d 100644
--- a/apps/docs/content/docs/components/link.mdx
+++ b/apps/docs/content/docs/components/link.mdx
@@ -132,33 +132,152 @@ In case you need to customize the link even further, you can use the `useLink` h
 
 ### Link Props
 
-| Attribute        | Type                                                                           | Description                                                                                                                                                                      | Default   |
-| ---------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| size             | `sm` \| `md` \| `lg`                                                           | The size of the link.                                                                                                                                                            | `md`      |
-| color            | `foreground` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the link.                                                                                                                                                           | `primary` |
-| underline        | `none` \| `hover` \| `always` \| `active` \| `focus`                           | The underline of the link.                                                                                                                                                       | `none`    |
-| href             | `string`                                                                       | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                   | -         |
-| target           | `HTMLAttributeAnchorTarget`                                                    | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                   | -         |
-| rel              | `string`                                                                       | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                  | -         |
-| download         | `boolean` \| `string`                                                          | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). | -         |
-| ping             | `string`                                                                       | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                   | -         |
-| referrerPolicy   | `HTMLAttributeReferrerPolicy`                                                  | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                 | -         |
-| isExternal       | `boolean`                                                                      | Whether the link should open in a new tab.                                                                                                                                       | `false`   |
-| showAnchorIcon   | `boolean`                                                                      | Whether to show the anchor icon.                                                                                                                                                 | `false`   |
-| anchorIcon       | `ReactNode`                                                                    | The anchor icon.                                                                                                                                                                 | -         |
-| isBlock          | `boolean`                                                                      | Whether the link should be rendered as block with a hover effect.                                                                                                                | `false`   |
-| isDisabled       | `boolean`                                                                      | Whether the link is disabled.                                                                                                                                                    | `false`   |
-| disableAnimation | `boolean`                                                                      | Whether to disable link and block animations.                                                                                                                                    | `false`   |
+<APITable
+  data={[
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the link.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "foreground | primary | secondary | success | warning | danger",
+      description: "The color of the link.",
+      default: "primary"
+    },
+    {
+      attribute: "underline",
+      type: "none | hover | always | active | focus",
+      description: "The underline style of the link.",
+      default: "none"
+    },
+    {
+      attribute: "href",
+      type: "string",
+      description: "A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).",
+      default: "-"
+    },
+    {
+      attribute: "target",
+      type: "HTMLAttributeAnchorTarget",
+      description: "The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).",
+      default: "-"
+    },
+    {
+      attribute: "rel",
+      type: "string",
+      description: "The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).",
+      default: "-"
+    },
+    {
+      attribute: "download",
+      type: "boolean | string",
+      description: "Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).",
+      default: "-"
+    },
+    {
+      attribute: "ping",
+      type: "string",
+      description: "A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).",
+      default: "-"
+    },
+    {
+      attribute: "referrerPolicy",
+      type: "HTMLAttributeReferrerPolicy",
+      description: "How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).",
+      default: "-"
+    },
+    {
+      attribute: "isExternal",
+      type: "boolean",
+      description: "Whether the link should open in a new tab.",
+      default: "false"
+    },
+    {
+      attribute: "showAnchorIcon",
+      type: "boolean",
+      description: "Whether to show the anchor icon.",
+      default: "false"
+    },
+    {
+      attribute: "anchorIcon",
+      type: "ReactNode",
+      description: "The anchor icon.",
+      default: "-"
+    },
+    {
+      attribute: "isBlock",
+      type: "boolean",
+      description: "Whether the link should be rendered as block with a hover effect.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the link is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable link and block animations.",
+      default: "false"
+    }
+  ]}
+/>
 
 ### Link Events
 
-| Attribute     | Type                           | Description                                                                                                     | Default |
-| ------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------- | ------- |
-| onPress       | `(e: PressEvent) => void`      | Handler called when the press is released over the target.                                                      | -       |
-| onPressStart  | `(e: PressEvent) => void`      | Handler called when a press interaction starts.                                                                 | -       |
-| onPressEnd    | `(e: PressEvent) => void`      | Handler called when a press interaction ends, either over the target or when the pointer leaves the target.     | -       |
-| onPressChange | `(isPressed: boolean) => void` | Handler called when the press state changes.                                                                    | -       |
-| onPressUp     | `(e: PressEvent) => void`      | Handler called when a press is released over the target, regardless of whether it started on the target or not. | -       |
-| onKeyDown     | `(e: KeyboardEvent) => void`   | Handler called when a key is pressed.                                                                           | -       |
-| onKeyUp       | `(e: KeyboardEvent) => void`   | Handler called when a key is released.                                                                          | -       |
-| onClick       | `MouseEventHandler`            | The native link click event handler (**Deprecated**) use **onPress** instead.                                   | -       |
+<APITable
+  data={[
+    {
+      attribute: "onPress",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when the press is released over the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressStart",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction starts.",
+      default: "-"
+    },
+    {
+      attribute: "onPressEnd",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction ends, either over the target or when the pointer leaves the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressChange",
+      type: "(isPressed: boolean) => void",
+      description: "Handler called when the press state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onPressUp",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press is released over the target, regardless of whether it started on the target or not.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is released.",
+      default: "-"
+    },
+    {
+      attribute: "onClick",
+      type: "MouseEventHandler",
+      description: "The native link click event handler (Deprecated) use onPress instead.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/listbox.mdx b/apps/docs/content/docs/components/listbox.mdx
index 5139f7f023..2c8eb66fc1 100644
--- a/apps/docs/content/docs/components/listbox.mdx
+++ b/apps/docs/content/docs/components/listbox.mdx
@@ -237,93 +237,404 @@ You can customize the `Listbox` items style by using the `itemClasses` prop and
 
 ### Listbox Props
 
-| Attribute              | Type                                                                                                   | Description                                                                                              | Default     |
-| ---------------------- | ------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | ----------- |
-| children\*             | `ReactNode[]`                                                                                          | The children to render. Usually a list of `ListboxItem` or `ListboxSection`                              | -           |
-| items                  | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic)                                                                | -           |
-| variant                | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow`                                      | The listbox items appearance style.                                                                      | `solid`     |
-| color                  | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                            | The listbox items color theme.                                                                           | `default`   |
-| selectionMode          | `none` \| `single` \| `multiple`                                                                       | The type of selection that is allowed in the collection.                                                 | -           |
-| selectedKeys           | `React.Key[]`                                                                                          | The currently selected keys in the collection (controlled).                                              | -           |
-| disabledKeys           | `React.Key[]`                                                                                          | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.  | -           |
-| defaultSelectedKeys    | `all` \| `React.Key[]`                                                                                 | The initial selected keys in the collection (uncontrolled).                                              | -           |
-| disallowEmptySelection | `boolean`                                                                                              | Whether the collection allows empty selection.                                                           | `false`     |
-| shouldHighlightOnFocus | `boolean`                                                                                              | Whether the focused item should be highlighted. It applies the same styles to the items as when hovered. | `false`     |
-| autoFocus              | `boolean` \| `first` \| `last`                                                                         | Where the focus should be set.                                                                           | `false`     |
-| topContent             | `ReactNode`                                                                                            | The content to display above the listbox items.                                                          | -           |
-| bottomContent          | `ReactNode`                                                                                            | The content to display below the listbox items.                                                          | -           |
-| emptyContent           | `ReactNode`                                                                                            | The content to display when the collection is empty.                                                     | `No items.` |
-| shouldFocusWrap        | `boolean`                                                                                              | Whether keyboard navigation is circular.                                                                 | `false`     |
-| hideEmptyContent       | `boolean`                                                                                              | Whether to not display the empty content when the collection is empty.                                   | `false`     |
-| hideSelectedIcon       | `boolean`                                                                                              | Whether to hide the check icon when the items are selected.                                              | `false`     |
-| disableAnimation       | `boolean`                                                                                              | Whether to disable the animation of the listbox items.                                                   | `false`     |
-| classNames             | `Record<"base"｜ "list"｜ "emptyContent", string>`                                                     | Allows to set custom class names for the listbox slots.                                                  | -           |
-| itemClasses            | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "selectedIcon", string>`                        | Allows to set custom class names for the listbox item slots.                                             | -           |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render. Usually a list of ListboxItem or ListboxSection",
+      default: "-"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "Item objects in the collection. (dynamic)",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "solid | bordered | light | flat | faded | shadow",
+      description: "The listbox items appearance style.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The listbox items color theme.",
+      default: "default"
+    },
+    {
+      attribute: "selectionMode",
+      type: "none | single | multiple",
+      description: "The type of selection that is allowed in the collection.",
+      default: "-"
+    },
+    {
+      attribute: "selectedKeys",
+      type: "React.Key[]",
+      description: "The currently selected keys in the collection (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "disabledKeys",
+      type: "React.Key[]",
+      description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelectedKeys",
+      type: "all | React.Key[]",
+      description: "The initial selected keys in the collection (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "disallowEmptySelection",
+      type: "boolean",
+      description: "Whether the collection allows empty selection.",
+      default: "false"
+    },
+    {
+      attribute: "shouldHighlightOnFocus",
+      type: "boolean",
+      description: "Whether the focused item should be highlighted. It applies the same styles to the items as when hovered.",
+      default: "false"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean | first | last",
+      description: "Where the focus should be set.",
+      default: "false"
+    },
+    {
+      attribute: "topContent",
+      type: "ReactNode",
+      description: "The content to display above the listbox items.",
+      default: "-"
+    },
+    {
+      attribute: "bottomContent",
+      type: "ReactNode",
+      description: "The content to display below the listbox items.",
+      default: "-"
+    },
+    {
+      attribute: "emptyContent",
+      type: "ReactNode",
+      description: "The content to display when the collection is empty.",
+      default: "No items."
+    },
+    {
+      attribute: "shouldFocusWrap",
+      type: "boolean",
+      description: "Whether keyboard navigation is circular.",
+      default: "false"
+    },
+    {
+      attribute: "hideEmptyContent",
+      type: "boolean",
+      description: "Whether to not display the empty content when the collection is empty.",
+      default: "false"
+    },
+    {
+      attribute: "hideSelectedIcon",
+      type: "boolean",
+      description: "Whether to hide the check icon when the items are selected.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation of the listbox items.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\" | \"list\" | \"emptyContent\", string>",
+      description: "Allows to set custom class names for the listbox slots.",
+      default: "-"
+    },
+    {
+      attribute: "itemClasses",
+      type: "Record<\"base\" | \"wrapper\" | \"title\" | \"description\" | \"selectedIcon\", string>",
+      description: "Allows to set custom class names for the listbox item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Listbox Events
 
-| Attribute         | Type                          | Description                                        |
-| ----------------- | ----------------------------- | -------------------------------------------------- |
-| onAction          | `(key: React.Key) => void`    | Handler that is called when an item is selected.   |
-| onSelectionChange | `(keys: React.Key[]) => void` | Handler that is called when the selection changes. |
-
----
+<APITable
+  data={[
+    {
+      attribute: "onAction",
+      type: "(key: React.Key) => void",
+      description: "Handler that is called when an item is selected.",
+      default: "-"
+    },
+    {
+      attribute: "onSelectionChange",
+      type: "(keys: React.Key[]) => void",
+      description: "Handler that is called when the selection changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### ListboxSection Props
 
-| Attribute        | Type                                                                                                   | Description                                                                               | Default |
-| ---------------- | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ------- |
-| children\*       | `ReactNode`                                                                                            | The contents of the listbox section. Usually a list of `ListboxItem` components. (static) | -       |
-| title            | `string`                                                                                               | The title of the listbox section.                                                         | -       |
-| items            | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic)                                                 | -       |
-| hideSelectedIcon | `boolean`                                                                                              | Whether to hide the check icon when the items are selected.                               | `false` |
-| showDivider      | `boolean`                                                                                              | Whether to show the divider between the groups.                                           | `false` |
-| dividerProps     | [DividerProps](/docs/components/divider)                                                               | The divider component props.                                                              | -       |
-| classNames       | `Record<"base"｜ "heading"｜ "group"｜ "divider", string>`                                             | Allows to set custom class names for the listbox section slots.                           | -       |
-| itemClasses      | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>`          | Allows to set custom class names for the listbox item slots.                              | -       |
-
----
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The contents of the listbox section. Usually a list of ListboxItem components. (static)",
+      default: "-"
+    },
+    {
+      attribute: "title",
+      type: "string",
+      description: "The title of the listbox section.",
+      default: "-"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "Item objects in the collection. (dynamic)",
+      default: "-"
+    },
+    {
+      attribute: "hideSelectedIcon",
+      type: "boolean",
+      description: "Whether to hide the check icon when the items are selected.",
+      default: "false"
+    },
+    {
+      attribute: "showDivider",
+      type: "boolean",
+      description: "Whether to show the divider between the groups.",
+      default: "false"
+    },
+    {
+      attribute: "dividerProps",
+      type: "DividerProps",
+      description: "The divider component props.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\" | \"heading\" | \"group\" | \"divider\", string>",
+      description: "Allows to set custom class names for the listbox section slots.",
+      default: "-"
+    },
+    {
+      attribute: "itemClasses",
+      type: "Record<\"base\" | \"wrapper\" | \"title\" | \"description\" | \"shortcut\" | \"selectedIcon\", string>",
+      description: "Allows to set custom class names for the listbox item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### ListboxItem Props
 
-| Attribute              | Type                                                                                          | Description                                                                                                                                                                      | Default |
-| ---------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| children\*             | `ReactNode`                                                                                   | The contents of the listbox item.                                                                                                                                                | -       |
-| key                    | `React.Key`                                                                                   | The unique key for the listbox item.                                                                                                                                             | -       |
-| title                  | `string` \| `ReactNode`                                                                       | The title of the listbox item.                                                                                                                                                   | -       |
-| textValue              | `string`                                                                                      | A string representation of the item's contents, used for features like typeahead.                                                                                                | -       |
-| description            | `string` \| `ReactNode`                                                                       | The description of the listbox item.                                                                                                                                             | -       |
-| shortcut               | `string` \| `ReactNode`                                                                       | The listbox item keyboard shortcut.                                                                                                                                              | -       |
-| startContent           | `ReactNode`                                                                                   | The start content of the listbox item.                                                                                                                                           | -       |
-| endContent             | `ReactNode`                                                                                   | The end content of the listbox item. This is positioned after the shortcut and the selected icon.                                                                                | -       |
-| selectedIcon           | [SelectedIconProps](#listbox-item-selected-icon-props)                                        | Custom icon to render when the item is selected.                                                                                                                                 | -       |
-| href                   | `string`                                                                                      | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                   | -       |
-| target                 | `HTMLAttributeAnchorTarget`                                                                   | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                   | -       |
-| rel                    | `string`                                                                                      | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                  | -       |
-| download               | `boolean` \| `string`                                                                         | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). | -       |
-| ping                   | `string`                                                                                      | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                   | -       |
-| referrerPolicy         | `HTMLAttributeReferrerPolicy`                                                                 | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                 | -       |
-| shouldHighlightOnFocus | `boolean`                                                                                     | Whether the focused item should be highlighted. It applies the same styles to the item as when hovered.                                                                          | `false` |
-| hideSelectedIcon       | `boolean`                                                                                     | Whether to hide the check icon when the item is selected.                                                                                                                        | `false` |
-| showDivider            | `boolean`                                                                                     | Whether to show a divider below the item.                                                                                                                                        | `false` |
-| isDisabled             | `boolean`                                                                                     | Whether the listbox item should be disabled. (**Deprecated**) pass **disabledKeys** to `Listbox` instead.                                                                        | `false` |
-| isSelected             | `boolean`                                                                                     | Whether the listbox item should be selected. (**Deprecated**) pass **selectedKeys** to `Listbox` instead.                                                                        | `false` |
-| isReadOnly             | `boolean`                                                                                     | Whether the listbox item press events should be ignored.                                                                                                                         | `false` |
-| classNames             | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>` | Allows to set custom class names for the listbox item slots.                                                                                                                     | -       |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The contents of the listbox item.",
+      default: "-"
+    },
+    {
+      attribute: "key",
+      type: "React.Key",
+      description: "The unique key for the listbox item.",
+      default: "-"
+    },
+    {
+      attribute: "title",
+      type: "string | ReactNode",
+      description: "The title of the listbox item.",
+      default: "-"
+    },
+    {
+      attribute: "textValue",
+      type: "string",
+      description: "A string representation of the item's contents, used for features like typeahead.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "string | ReactNode",
+      description: "The description of the listbox item.",
+      default: "-"
+    },
+    {
+      attribute: "shortcut",
+      type: "string | ReactNode",
+      description: "The listbox item keyboard shortcut.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The start content of the listbox item.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "The end content of the listbox item. This is positioned after the shortcut and the selected icon.",
+      default: "-"
+    },
+    {
+      attribute: "selectedIcon",
+      type: "ListboxItemSelectedIconProps",
+      description: "Custom icon to render when the item is selected.",
+      default: "-"
+    },
+    {
+      attribute: "href",
+      type: "string",
+      description: "A URL to link to. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "target",
+      type: "HTMLAttributeAnchorTarget",
+      description: "The target window for the link. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "rel",
+      type: "string",
+      description: "The relationship between the linked resource and the current page. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "download",
+      type: "boolean | string",
+      description: "Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "ping",
+      type: "string",
+      description: "A space-separated list of URLs to ping when the link is followed. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "referrerPolicy",
+      type: "HTMLAttributeReferrerPolicy",
+      description: "How much of the referrer to send when following the link. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "shouldHighlightOnFocus",
+      type: "boolean",
+      description: "Whether the focused item should be highlighted. It applies the same styles to the item as when hovered.",
+      default: "false"
+    },
+    {
+      attribute: "hideSelectedIcon",
+      type: "boolean",
+      description: "Whether to hide the check icon when the item is selected.",
+      default: "false"
+    },
+    {
+      attribute: "showDivider",
+      type: "boolean",
+      description: "Whether to show a divider below the item.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the listbox item should be disabled. (Deprecated) pass disabledKeys to Listbox instead.",
+      default: "false"
+    },
+    {
+      attribute: "isSelected",
+      type: "boolean",
+      description: "Whether the listbox item should be selected. (Deprecated) pass selectedKeys to Listbox instead.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the listbox item press events should be ignored.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\" | \"wrapper\" | \"title\" | \"description\" | \"shortcut\" | \"selectedIcon\", string>",
+      description: "Allows to set custom class names for the listbox item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### ListboxItem Events
 
-| Attribute     | Type                           | Description                                                                                                     |
-| ------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------- |
-| onAction      | `() => void`                   | Handler that is called when the listbox item is selected. (**Deprecated**) pass to `Listbox` instead.           |
-| onPress       | `(e: PressEvent) => void`      | Handler called when the press is released over the target.                                                      |
-| onPressStart  | `(e: PressEvent) => void`      | Handler called when a press interaction starts.                                                                 |
-| onPressEnd    | `(e: PressEvent) => void`      | Handler called when a press interaction ends, either over the target or when the pointer leaves the target.     |
-| onPressChange | `(isPressed: boolean) => void` | Handler called when the press state changes.                                                                    |
-| onPressUp     | `(e: PressEvent) => void`      | Handler called when a press is released over the target, regardless of whether it started on the target or not. |
-| onKeyDown     | `(e: KeyboardEvent) => void`   | Handler called when a key is pressed.                                                                           |
-| onKeyUp       | `(e: KeyboardEvent) => void`   | Handler called when a key is released.                                                                          |
-| onClick       | `MouseEventHandler`            | The native button click event handler (**Deprecated**) use **onPress** instead.                                 |
+<APITable
+  data={[
+    {
+      attribute: "onAction",
+      type: "() => void",
+      description: "Handler that is called when the listbox item is selected. (Deprecated) pass to Listbox instead.",
+      default: "-"
+    },
+    {
+      attribute: "onPress",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when the press is released over the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressStart",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction starts.",
+      default: "-"
+    },
+    {
+      attribute: "onPressEnd",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction ends, either over the target or when the pointer leaves the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressChange",
+      type: "(isPressed: boolean) => void",
+      description: "Handler called when the press state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onPressUp",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press is released over the target, regardless of whether it started on the target or not.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is released.",
+      default: "-"
+    },
+    {
+      attribute: "onClick",
+      type: "MouseEventHandler",
+      description: "The native button click event handler (Deprecated) use onPress instead.",
+      default: "-"
+    }
+  ]}
+/>
 
 ---
 
diff --git a/apps/docs/content/docs/components/modal.mdx b/apps/docs/content/docs/components/modal.mdx
index 48042c1bef..c17a18d4a2 100644
--- a/apps/docs/content/docs/components/modal.mdx
+++ b/apps/docs/content/docs/components/modal.mdx
@@ -193,33 +193,137 @@ You can customize the `Modal` component by passing custom Tailwind CSS classes t
 
 ### Modal Props
 
-| Attribute                 | Type                                                                                                | Description                                                                                           | Default         |
-| ------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | --------------- |
-| children\*                | `ReactNode`                                                                                         | The content of the modal. It's usually the `ModalContent`.                                            | -               |
-| size                      | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `3xl` \| `4xl` \| `5xl` \| `full`                  | The modal size. This changes the modal `max-width` and `height` (full).                               | `md`            |
-| radius                    | `none` \| `sm` \| `md` \| `lg`                                                                      | The modal border radius.                                                                              | `lg`            |
-| shadow                    | `none` \| `sm` \| `md` \| `lg`                                                                      | The modal shadow.                                                                                     | `lg`            |
-| backdrop                  | `transparent` \| `opaque` \| `blur`                                                                 | The modal backdrop type.                                                                              | `opaque`        |
-| scrollBehavior            | `normal` \| `inside` \| `outside`                                                                   | The modal scroll behavior.                                                                            | `normal`        |
-| placement                 | `auto` \| `top` \| `center` \| `bottom`                                                             | The modal position.                                                                                   | `auto`          |
-| isOpen                    | `boolean`                                                                                           | Whether the modal is open by default (controlled).                                                    | -               |
-| defaultOpen               | `boolean`                                                                                           | Whether the modal is open by default (uncontrolled).                                                  | -               |
-| isDismissable             | `boolean`                                                                                           | Whether the modal can be closed by clicking on the overlay or pressing the <Kbd>Esc</Kbd> key.        | `true`          |
-| isKeyboardDismissDisabled | `boolean`                                                                                           | Whether pressing the <Kbd>Esc</Kbd> key to close the modal should be disabled.                        | `false`         |
-| shouldBlockScroll         | `boolean`                                                                                           | Whether the modal should block the scroll of the page on open.                                        | `true`          |
-| hideCloseButton           | `boolean`                                                                                           | Whether to hide the modal close button.                                                               | `false`         |
-| closeButton               | `ReactNode`                                                                                         | Custom close button to display on top right corner.                                                   | -               |
-| motionProps               | [MotionProps](#motion-props)                                                                        | The props to modify the framer motion animation. Use the `variants` API to create your own animation. |                 |
-| portalContainer           | `HTMLElement`                                                                                       | The container element in which the overlay portal will be placed.                                     | `document.body` |
-| disableAnimation          | `boolean`                                                                                           | Whether the modal should not have animations.                                                         | `false`         |
-| classNames                | `Record<"wrapper"｜ "base"｜ "backdrop"｜ "header" ｜ "body" ｜ "footer" ｜ "closeButton", string>` | Allows to set custom class names for the modal slots.                                                 | -               |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The content of the modal. It's usually the `ModalContent`.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | full",
+      description: "The modal size. This changes the modal `max-width` and `height` (full).",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg",
+      description: "The modal border radius.",
+      default: "lg"
+    },
+    {
+      attribute: "shadow",
+      type: "none | sm | md | lg",
+      description: "The modal shadow.",
+      default: "lg"
+    },
+    {
+      attribute: "backdrop",
+      type: "transparent | opaque | blur",
+      description: "The modal backdrop type.",
+      default: "opaque"
+    },
+    {
+      attribute: "scrollBehavior",
+      type: "normal | inside | outside",
+      description: "The modal scroll behavior.",
+      default: "normal"
+    },
+    {
+      attribute: "placement",
+      type: "auto | top | center | bottom",
+      description: "The modal position.",
+      default: "auto"
+    },
+    {
+      attribute: "isOpen",
+      type: "boolean",
+      description: "Whether the modal is open by default (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultOpen",
+      type: "boolean",
+      description: "Whether the modal is open by default (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "isDismissable",
+      type: "boolean",
+      description: "Whether the modal can be closed by clicking on the overlay or pressing the Esc key.",
+      default: "true"
+    },
+    {
+      attribute: "isKeyboardDismissDisabled",
+      type: "boolean",
+      description: "Whether pressing the Esc key to close the modal should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "shouldBlockScroll",
+      type: "boolean",
+      description: "Whether the modal should block the scroll of the page on open.",
+      default: "true"
+    },
+    {
+      attribute: "hideCloseButton",
+      type: "boolean",
+      description: "Whether to hide the modal close button.",
+      default: "false"
+    },
+    {
+      attribute: "closeButton",
+      type: "ReactNode",
+      description: "Custom close button to display on top right corner.",
+      default: "-"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The props to modify the framer motion animation. Use the `variants` API to create your own animation.",
+      default: "-"
+    },
+    {
+      attribute: "portalContainer",
+      type: "HTMLElement",
+      description: "The container element in which the overlay portal will be placed.",
+      default: "document.body"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the modal should not have animations.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'wrapper' | 'base' | 'backdrop' | 'header' | 'body' | 'footer' | 'closeButton', string>",
+      description: "Allows to set custom class names for the modal slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Modal Events
 
-| Attribute    | Type                        | Description                                                 |
-| ------------ | --------------------------- | ----------------------------------------------------------- |
-| onOpenChange | `(isOpen: boolean) => void` | Handler that is called when the modal's open state changes. |
-| onClose      | `() => void`                | Handler that is called when the modal is closed.            |
+<APITable
+  data={[
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the modal's open state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the modal is closed.",
+      default: "-"
+    }
+  ]}
+/>
 
 <Spacer y={4} />
 
diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index e949056967..4c8612baf0 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -260,79 +260,241 @@ When the `NavbarItem` is active, it will have a `data-active` attribute. You can
 
 ### Navbar Props
 
-| Attribute            | Type                                                                                                                | Description                                                                                                                                         | Default       |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
-| children\*           | `ReactNode[]`                                                                                                       | The children to render. Usually navbar elements such as `NavbarBrand`, `NavbarContent` and `NavbarItem`                                             | -             |
-| height               | `string` \| `number`                                                                                                | The height of the navbar.                                                                                                                           | `4rem` (64px) |
-| position             | `static` \| `sticky`                                                                                                | The position of the navbar.                                                                                                                         | `sticky`      |
-| maxWidth             | `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `full`                                                                     | The max width of the navbar wrapper.                                                                                                                | `lg`          |
-| parentRef            | `React.RefObject<HTMLElement>`                                                                                      | The parent element where the navbar is placed within. This is used to determine the scroll position and whether the navbar should be hidden or not. | `window`      |
-| isBordered           | `boolean`                                                                                                           | Whether the navbar should have a bottom border or not.                                                                                              | `false`       |
-| isBlurred            | `boolean`                                                                                                           | Whether the navbar should have a blur effect or not.                                                                                                | `true`        |
-| isMenuOpen           | `boolean`                                                                                                           | Indicates if the navbar menu is open. (controlled)                                                                                                  | `false`       |
-| isMenuDefaultOpen    | `boolean`                                                                                                           | Indicates if the navbar menu is open by default. (uncontrolled)                                                                                     | `false`       |
-| shouldHideOnScroll   | `boolean`                                                                                                           | Indicates if the navbar should hide on scroll.                                                                                                      | `false`       |
-| motionProps          | [MotionProps](#motion-props)                                                                                        | The motion props to control the `visible` / `hidden` animation. This motion is only available if the `shouldHideOnScroll` prop is set to `true`.   | -             |
-| disableScrollHandler | `boolean`                                                                                                           | Whether the navbar parent scroll event should be listened to or not.                                                                                | `false`       |
-| disableAnimation     | `boolean`                                                                                                           | Whether the navbar menu animation should be disabled or not.                                                                                        | `false`       |
-| classNames           | `Record<"base"｜ "wrapper"｜ "brand"｜ "content"｜ "item"｜ "toggle"｜ "toggleIcon"｜ "menu"｜ "menuItem", string>` | Allows to set custom class names for the navbar slots.                                                                                              | -             |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render. Usually navbar elements such as NavbarBrand, NavbarContent and NavbarItem",
+      default: "-"
+    },
+    {
+      attribute: "height",
+      type: "string | number",
+      description: "The height of the navbar.",
+      default: "4rem (64px)"
+    },
+    {
+      attribute: "position",
+      type: "static | sticky",
+      description: "The position of the navbar.",
+      default: "sticky"
+    },
+    {
+      attribute: "maxWidth",
+      type: "sm | md | lg | xl | 2xl | full",
+      description: "The max width of the navbar wrapper.",
+      default: "lg"
+    },
+    {
+      attribute: "parentRef",
+      type: "React.RefObject<HTMLElement>",
+      description: "The parent element where the navbar is placed within. This is used to determine the scroll position and whether the navbar should be hidden or not.",
+      default: "window"
+    },
+    {
+      attribute: "isBordered",
+      type: "boolean",
+      description: "Whether the navbar should have a bottom border or not.",
+      default: "false"
+    },
+    {
+      attribute: "isBlurred",
+      type: "boolean",
+      description: "Whether the navbar should have a blur effect or not.",
+      default: "true"
+    },
+    {
+      attribute: "isMenuOpen",
+      type: "boolean",
+      description: "Indicates if the navbar menu is open. (controlled)",
+      default: "false"
+    },
+    {
+      attribute: "isMenuDefaultOpen",
+      type: "boolean",
+      description: "Indicates if the navbar menu is open by default. (uncontrolled)",
+      default: "false"
+    },
+    {
+      attribute: "shouldHideOnScroll",
+      type: "boolean",
+      description: "Indicates if the navbar should hide on scroll.",
+      default: "false"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The motion props to control the visible / hidden animation. This motion is only available if the shouldHideOnScroll prop is set to true.",
+      default: "-"
+    },
+    {
+      attribute: "disableScrollHandler",
+      type: "boolean",
+      description: "Whether the navbar parent scroll event should be listened to or not.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the navbar menu animation should be disabled or not.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'base' | 'wrapper' | 'brand' | 'content' | 'item' | 'toggle' | 'toggleIcon' | 'menu' | 'menuItem', string>",
+      description: "Allows to set custom class names for the navbar slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Navbar Events
 
-| Attribute              | Type                         | Description                                                                                                                                                                            |
-| ---------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| onMenuOpenChange       | `(isOpen: boolean) => void`  | Handler that is called when the navbar menu open state changes.                                                                                                                        |
-| onScrollPositionChange | `(position: number) => void` | Handler that is called when the navbar parent element is scrolled. This event is only dispatched if `disableScrollHandler` is set to `false` or `shouldHideOnScroll` is set to `true`. |
+<APITable
+  data={[
+    {
+      attribute: "onMenuOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the navbar menu open state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onScrollPositionChange",
+      type: "(position: number) => void",
+      description: "Handler that is called when the navbar parent element is scrolled. This event is only dispatched if disableScrollHandler is set to false or shouldHideOnScroll is set to true.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### NavbarContent Props
 
-| Attribute  | Type                         | Description                                                                                             | Default |
-| ---------- | ---------------------------- | ------------------------------------------------------------------------------------------------------- | ------- |
-| children\* | `ReactNode[]`                | The children to render. Usually navbar elements such as `NavbarBrand`, `NavbarContent` and `NavbarItem` | -       |
-| justify    | `start` \| `center` \| `end` | The justify content of the navbar content. It takes into account the correct space distribution.        | `start` |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render. Usually navbar elements such as NavbarBrand, NavbarContent and NavbarItem",
+      default: "-"
+    },
+    {
+      attribute: "justify",
+      type: "start | center | end",
+      description: "The justify content of the navbar content. It takes into account the correct space distribution.",
+      default: "start"
+    }
+  ]}
+/>
 
 ### NavbarItem Props
 
-| Attribute | Type        | Description                                | Default |
-| --------- | ----------- | ------------------------------------------ | ------- |
-| children  | `ReactNode` | The children to render as the navbar item. | -       |
-| isActive  | `boolean`   | Whether the navbar item is active or not.  | `false` |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The children to render as the navbar item.",
+      default: "-"
+    },
+    {
+      attribute: "isActive",
+      type: "boolean",
+      description: "Whether the navbar item is active or not.",
+      default: "false"
+    }
+  ]}
+/>
 
 ### NavbarMenuToggle Props
 
-| Attribute       | Type                                                                  | Description                                                           | Default                        |
-| --------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------ |
-| icon            | `ReactNode` \| `(isOpen: boolean \| undefined) => ReactNode \| null;` | The icon to render as the navbar menu toggle.                         | -                              |
-| isSelected      | `boolean`                                                             | Whether the navbar menu toggle is selected. (controlled)              | `false`                        |
-| defaultSelected | `boolean`                                                             | Whether the navbar menu toggle is selected by default. (uncontrolled) | `false`                        |
-| srOnlyText      | `string`                                                              | The text to be used by screen readers.                                | `open`/`close` navigation menu |
+<APITable
+  data={[
+    {
+      attribute: "icon",
+      type: "ReactNode | ((isOpen: boolean | undefined) => ReactNode | null)",
+      description: "The icon to render as the navbar menu toggle.",
+      default: "-"
+    },
+    {
+      attribute: "isSelected",
+      type: "boolean",
+      description: "Whether the navbar menu toggle is selected. (controlled)",
+      default: "false"
+    },
+    {
+      attribute: "defaultSelected",
+      type: "boolean",
+      description: "Whether the navbar menu toggle is selected by default. (uncontrolled)",
+      default: "false"
+    },
+    {
+      attribute: "srOnlyText",
+      type: "string",
+      description: "The text to be used by screen readers.",
+      default: "open/close navigation menu"
+    }
+  ]}
+/>
 
 ### NavbarMenuToggle Events
 
-| Attribute | Type                        | Description                                                    |
-| --------- | --------------------------- | -------------------------------------------------------------- |
-| onChange  | `(isOpen: boolean) => void` | Handler that is called when the navbar menu toggle is pressed. |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the navbar menu toggle is pressed.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### NavbarMenu Props
 
-| Attribute       | Type                         | Description                                                                                                                                  | Default         |
-| --------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
-| children\*      | `ReactNode[]`                | The children to render as the navbar menu. Usually a list of `NavbarMenuItem` components.                                                    | -               |
-| portalContainer | `HTMLElement`                | The container element in which the navbar menu overlay portal will be placed.                                                                | `document.body` |
-| motionProps     | [MotionProps](#motion-props) | The motion props to control the `open` / `close` animation. This motion is only available if the `disableAnimation` prop is set to `false`. | -               |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render as the navbar menu. Usually a list of NavbarMenuItem components.",
+      default: "-"
+    },
+    {
+      attribute: "portalContainer",
+      type: "HTMLElement",
+      description: "The container element in which the navbar menu overlay portal will be placed.",
+      default: "document.body"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The motion props to control the open / close animation. This motion is only available if the disableAnimation prop is set to false.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### NavbarMenuItem Props
 
-| Attribute | Type        | Description                              | Default |
-| --------- | ----------- | ---------------------------------------- | ------- |
-| children  | `ReactNode` | The children to render as the menu item. | -       |
-| isActive  | `boolean`   | Whether the menu item is active or not.  | `false` |
-
-> **Note**: The rest of the navbar components such as `NavbarMenuItem` and `NavbarBrand` have the same props as the `li` element.
-
-### Navbar types
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The children to render as the menu item.",
+      default: "-"
+    },
+    {
+      attribute: "isActive",
+      type: "boolean",
+      description: "Whether the menu item is active or not.",
+      default: "false"
+    }
+  ]}
+/>
 
-#### Motion Props
+### Types
 
 ```ts
 export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/
diff --git a/apps/docs/content/docs/components/pagination.mdx b/apps/docs/content/docs/components/pagination.mdx
index 4997f4aba2..ddd1c69c9d 100644
--- a/apps/docs/content/docs/components/pagination.mdx
+++ b/apps/docs/content/docs/components/pagination.mdx
@@ -176,34 +176,143 @@ your own implementation.
 
 ### Pagination Props
 
-| Attribute              | Type                                                                                                                          | Description                                                              | Default   |
-| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | --------- |
-| variant                | `flat` \| `bordered` \| `light` \| `faded`                                                                                    | The pagination variant.                                                  | `flat`    |
-| color                  | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                   | The pagination color theme.                                              | `default` |
-| size                   | `sm` \| `md` \| `lg`                                                                                                          | The pagination size.                                                     | `md`      |
-| radius                 | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                      | The pagination border radius.                                            | `xl`      |
-| total                  | `number`                                                                                                                      | The total number of pages.                                               | `1`       |
-| dotsJump               | `number`                                                                                                                     | The number of pages that are added or subtracted on the '...' button.    | `5`       |
-| initialPage            | `number`                                                                                                                      | The initial page. (uncontrolled)                                         | `1`       |
-| page                   | `number`                                                                                                                      | The current page. (controlled)                                           | -         |
-| siblings               | `number`                                                                                                                      | The number of pages to show before and after the current page.           | `1`       |
-| boundaries             | `number`                                                                                                                      | The number of pages to show at the beginning and end of the pagination.  | `1`       |
-| loop                   | `boolean`                                                                                                                     | Whether the pagination should be looped.                                 | `false`   |
-| isCompact              | `boolean`                                                                                                                     | Whether the pagination should have a compact style.                      | `false`   |
-| isDisabled             | `boolean`                                                                                                                     | Whether the pagination is disabled.                                      | `false`   |
-| showShadow             | `boolean`                                                                                                                     | Whether the pagination cursor should have a shadow.                      | `false`   |
-| showControls           | `boolean`                                                                                                                     | Whether the pagination should have controls.                             | `false`   |
-| disableCursorAnimation | `boolean`                                                                                                                     | Whether the pagination cursor should be hidden.                          | `false`   |
-| renderItem             | [PaginationItemProps](#pagination-item-props)                                                                                 | The pagination item render function.                                     | -         |
-| getItemAriaLabel       | `(page: string) => string`                                                                                                    | A function that allows you to customize the pagination items aria-label. | -         |
-| disableAnimation       | `boolean`                                                                                                                     | Whether the pagination cursor should be animated.                        | `false`   |
-| classNames             | `Record<"base"｜ "wrapper" ｜ "prev"｜ "next" ｜ "item" ｜ "cursor" ｜ "forwardIcon" ｜ "ellipsis" ｜ "chevronNext", string>` | Allows to set custom class names for the pagination slots.               | -         |
+<APITable
+  data={[
+    {
+      attribute: "variant",
+      type: "flat | bordered | light | faded",
+      description: "The pagination variant.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The pagination color theme.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The pagination size.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The pagination border radius.",
+      default: "xl"
+    },
+    {
+      attribute: "total",
+      type: "number",
+      description: "The total number of pages.",
+      default: "1"
+    },
+    {
+      attribute: "dotsJump",
+      type: "number",
+      description: "The number of pages that are added or subtracted on the '...' button.",
+      default: "5"
+    },
+    {
+      attribute: "initialPage",
+      type: "number",
+      description: "The initial page. (uncontrolled)",
+      default: "1"
+    },
+    {
+      attribute: "page",
+      type: "number",
+      description: "The current page. (controlled)",
+      default: "-"
+    },
+    {
+      attribute: "siblings",
+      type: "number",
+      description: "The number of pages to show before and after the current page.",
+      default: "1"
+    },
+    {
+      attribute: "boundaries",
+      type: "number",
+      description: "The number of pages to show at the beginning and end of the pagination.",
+      default: "1"
+    },
+    {
+      attribute: "loop",
+      type: "boolean",
+      description: "Whether the pagination should be looped.",
+      default: "false"
+    },
+    {
+      attribute: "isCompact",
+      type: "boolean",
+      description: "Whether the pagination should have a compact style.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the pagination is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "showShadow",
+      type: "boolean",
+      description: "Whether the pagination cursor should have a shadow.",
+      default: "false"
+    },
+    {
+      attribute: "showControls",
+      type: "boolean",
+      description: "Whether the pagination should have controls.",
+      default: "false"
+    },
+    {
+      attribute: "disableCursorAnimation",
+      type: "boolean",
+      description: "Whether the pagination cursor should be hidden.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the pagination cursor should be animated.",
+      default: "false"
+    },
+    {
+      attribute: "renderItem",
+      type: "PaginationItemProps",
+      description: "The pagination item render function.",
+      default: "-"
+    },
+    {
+      attribute: "getItemAriaLabel",
+      type: "(page: string) => string",
+      description: "A function that allows you to customize the pagination items aria-label.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'base' | 'wrapper' | 'prev' | 'next' | 'item' | 'cursor' | 'forwardIcon' | 'ellipsis' | 'chevronNext', string>",
+      description: "Allows to set custom class names for the pagination slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Pagination Events
 
-| Attribute | Type                     | Description                                                     |
-| --------- | ------------------------ | --------------------------------------------------------------- |
-| onChange  | `(page: number) => void` | Handler that is called when the pagination active page changes. |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(page: number) => void",
+      description: "Handler that is called when the pagination active page changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 ---
 
diff --git a/apps/docs/content/docs/components/popover.mdx b/apps/docs/content/docs/components/popover.mdx
index 75eff29313..5f169afc0f 100644
--- a/apps/docs/content/docs/components/popover.mdx
+++ b/apps/docs/content/docs/components/popover.mdx
@@ -148,64 +148,211 @@ You can customize the `Popover` component by passing custom Tailwind CSS classes
 
 ### Popover Props
 
-| Attribute                 | Type                                                                        | Description                                                                                                                                                  | Default         |
-| ------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- |
-| children\*                | `ReactNode[]`                                                               | The content of the popover. It's usually the `PopoverTrigger` and `PopoverContent`.                                                                          | -               |
-| size                      | `sm` \| `md` \| `lg`                                                        | The popover content font size.                                                                                                                               | `md`            |
-| color                     | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The popover color theme.                                                                                                                                     | `default`       |
-| radius                    | `none` \| `sm` \| `md` \| `lg` \| `full`                                    | The popover border radius.                                                                                                                                   | `lg`            |
-| shadow                    | `none` \| `sm` \| `md` \| `lg`                                              | The popover shadow.                                                                                                                                          | `lg`            |
-| backdrop                  | `transparent` \| `opaque` \| `blur`                                         | The popover backdrop type.                                                                                                                                   | `transparent`   |
-| placement                 | [PopoverPlacement](#popover-placement)                                      | The placement of the popover relative to its trigger reference.                                                                                              | `bottom`        |
-| state                     | `OverlayTriggerState`                                                       | The controlled state of the popover. See [Overlay States](https://react-spectrum.adobe.com/react-stately/useOverlayTriggerState.html#useoverlaytriggerstate) | -               |
-| isOpen                    | `boolean`                                                                   | Whether the popover is open by default (controlled).                                                                                                         | -               |
-| defaultOpen               | `boolean`                                                                   | Whether the popover is open by default (uncontrolled).                                                                                                       | -               |
-| offset(px)                | `number`                                                                    | The distance or margin between the reference and popper. It is used internally to create an offset modifier.                                                 | `7`             |
-| containerPadding(px)      | `number`                                                                    | The placement padding that should be applied between the element and its surrounding container.                                                              | `12`            |
-| crossOffset(px)           | `number`                                                                    | The additional offset applied along the cross axis between the element and its anchor element.                                                               | `0`             |
-| triggerType               | `dialog` \| `menu` \| `listbox` \| `tree` \| `grid`;                        | Type of popover that is opened by the trigger.                                                                                                               | `dialog`        |
-| showArrow                 | `boolean`                                                                   | Whether the popover should have an arrow.                                                                                                                    | `false`         |
-| shouldFlip                | `boolean`                                                                   | Whether the popover should change its placement and flip when it's about to overflow its boundary area.                                                      | `true`          |
-| triggerScaleOnOpen        | `boolean`                                                                   | Whether the trigger should scale down when the popover is open.                                                                                              | `true`          |
-| shouldBlockScroll         | `boolean`                                                                   | Whether the popover should block the scroll outside the popover.                                                                                             | `true`          |
-| shouldCloseOnScroll       | `boolean`                                                                   | Wheather the popover should close on scroll                                                                                                    | `false`         |
-| isKeyboardDismissDisabled | `boolean`                                                                   | Whether pressing the escape key to close the popover should be disabled.                                                                                     | `false`         |
-| shouldCloseOnBlur         | `boolean`                                                                   | Whether the popover should close when focus is lost or moves outside it.                                                                                     | `false`         |
-| motionProps               | [MotionProps](#motion-props)                                                | The props to modify the framer motion animation. Use the `variants` API to create your own animation.                                                        |                 |
-| portalContainer           | `HTMLElement`                                                               | The container element in which the overlay portal will be placed.                                                                                            | `document.body` |
-| updatePositionDeps        | `any[]`                                                                     | The dependencies to force the popover position update.                                                                                                       | `[]`            |
-| triggerRef                | `RefObject<HTMLElement>`                                                    | The ref for the element which the popover positions itself with respect to.                                                                                  | -               |
-| scrollRef                 | `RefObject<HTMLElement>`                                                    | A ref for the scrollable region within the popover.                                                                                                          | `overlayRef`    |
-| disableAnimation          | `boolean`                                                                   | Whether the popover is animated.                                                                                                                             | `false`         |
-| classNames                | `Record<"base"｜ "trigger"｜ "backdrop"｜ "content", string>`               | Allows to set custom class names for the popover slots.                                                                                                      | -               |
-
-<Spacer y={1} />
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The content of the popover. It's usually the PopoverTrigger and PopoverContent.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The popover content font size.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The popover color theme.",
+      default: "default"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The popover border radius.",
+      default: "lg"
+    },
+    {
+      attribute: "shadow",
+      type: "none | sm | md | lg",
+      description: "The popover shadow.",
+      default: "lg"
+    },
+    {
+      attribute: "backdrop",
+      type: "transparent | opaque | blur",
+      description: "The popover backdrop type.",
+      default: "transparent"
+    },
+    {
+      attribute: "placement",
+      type: "PopoverPlacement",
+      description: "The placement of the popover relative to its trigger reference.",
+      default: "bottom"
+    },
+    {
+      attribute: "state",
+      type: "OverlayTriggerState",
+      description: "The controlled state of the popover.",
+      default: "-"
+    },
+    {
+      attribute: "isOpen",
+      type: "boolean",
+      description: "Whether the popover is open by default (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultOpen",
+      type: "boolean",
+      description: "Whether the popover is open by default (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "offset",
+      type: "number",
+      description: "The distance or margin between the reference and popper.",
+      default: "7"
+    },
+    {
+      attribute: "containerPadding",
+      type: "number",
+      description: "The placement padding between the element and its surrounding container.",
+      default: "12"
+    },
+    {
+      attribute: "crossOffset",
+      type: "number",
+      description: "The additional offset applied along the cross axis between the element and its anchor element.",
+      default: "0"
+    },
+    {
+      attribute: "triggerType",
+      type: "dialog | menu | listbox | tree | grid",
+      description: "Type of popover that is opened by the trigger.",
+      default: "dialog"
+    },
+    {
+      attribute: "showArrow",
+      type: "boolean",
+      description: "Whether the popover should have an arrow.",
+      default: "false"
+    },
+    {
+      attribute: "shouldFlip",
+      type: "boolean",
+      description: "Whether the popover should change its placement and flip when it's about to overflow.",
+      default: "true"
+    },
+    {
+      attribute: "triggerScaleOnOpen",
+      type: "boolean",
+      description: "Whether the trigger should scale down when the popover is open.",
+      default: "true"
+    },
+    {
+      attribute: "shouldBlockScroll",
+      type: "boolean",
+      description: "Whether the popover should block the scroll outside the popover.",
+      default: "true"
+    },
+    {
+      attribute: "shouldCloseOnScroll",
+      type: "boolean",
+      description: "Whether the popover should close on scroll.",
+      default: "false"
+    },
+    {
+      attribute: "isKeyboardDismissDisabled",
+      type: "boolean",
+      description: "Whether pressing the escape key to close the popover should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "shouldCloseOnBlur",
+      type: "boolean",
+      description: "Whether the popover should close when focus is lost or moves outside it.",
+      default: "false"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The props to modify the framer motion animation.",
+      default: "-"
+    },
+    {
+      attribute: "portalContainer",
+      type: "HTMLElement",
+      description: "The container element in which the overlay portal will be placed.",
+      default: "document.body"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the popover is animated.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'base' | 'trigger' | 'backdrop' | 'content', string>",
+      description: "Allows to set custom class names for the popover slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Popover Events
 
-| Attribute                    | Type                        | Description                                                                                                                                                                                                                                                                                               |
-| ---------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| onOpenChange                 | `(isOpen: boolean) => void` | Handler that is called when the popover's open state changes.                                                                                                                                                                                                                                             |
-| shouldCloseOnInteractOutside | `(e: HTMLElement) => void`  | When user interacts with the argument element outside of the popover ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the popover. By default, onClose will always be called on interaction outside the overlay ref. |
-| onClose                      | `() => void`                | Handler that is called when the popover should close.                                                                                                                                                                                                                                                     |
-
-<Spacer y={2} />
+<APITable
+  data={[
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the popover's open state changes.",
+      default: "-"
+    },
+    {
+      attribute: "shouldCloseOnInteractOutside",
+      type: "(e: HTMLElement) => void",
+      description: "When user interacts with the argument element outside of the popover ref, return true if onClose should be called.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the popover should close.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### PopoverTrigger Props
 
-| Attribute  | Type        | Description                                                                                                                                                                | Default |
-| ---------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| children\* | `ReactNode` | The popover trigger component, ensure the children passed is focusable. Users can tab to it using their keyboard, and it can take a ref. It is critical for accessibility. | -       |
-
-<Spacer y={2} />
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The popover trigger component, ensure the children passed is focusable.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### PopoverContent Props
 
-| Attribute | Type        | Description                                                | Default |
-| --------- | ----------- | ---------------------------------------------------------- | ------- |
-| children  | `ReactNode` | The content that is displayed when the trigger is pressed. | -       |
-
-<Spacer y={2} />
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content that is displayed when the trigger is pressed.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Popover types
 
diff --git a/apps/docs/content/docs/components/progress.mdx b/apps/docs/content/docs/components/progress.mdx
index 04f4a2b19a..bbc6172745 100644
--- a/apps/docs/content/docs/components/progress.mdx
+++ b/apps/docs/content/docs/components/progress.mdx
@@ -122,20 +122,97 @@ You can customize the `Progress` component by passing custom Tailwind CSS classe
 
 ### Progress Props
 
-| Attribute        | Type                                                                                                                    | Description                                                | Default              |
-| ---------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | -------------------- |
-| label            | `ReactNode`                                                                                                             | The content to display as the label.                       | -                    |
-| size             | `sm` \| `md` \| `lg`                                                                                                    | The size of the indicator.                                 | `md`                 |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                             | The color of the indicator.                                | `primary`            |
-| radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                | The progress border radius.                                | `full`               |
-| value            | `number`                                                                                                                | The current value (controlled).                            | -                    |
-| valueLabel       | `ReactNode`                                                                                                             | The content to display as the value's label (e.g. 1 of 4). | -                    |
-| minValue         | `number`                                                                                                                | The smallest value allowed for the input.                  | `0`                  |
-| maxValue         | `number`                                                                                                                | The largest value allowed for the input.                   | `100`                |
-| formatOptions    | [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) | The options to format the value.                           | `{style: 'percent'}` |
-| isIndeterminate  | `boolean`                                                                                                               | Whether the progress is indeterminate.                     | `false`              |
-| isStriped        | `boolean`                                                                                                               | Whether the progress is striped.                           | `false`              |
-| showValueLabel   | `boolean`                                                                                                               | Whether to show the value label.                           | `true`               |
-| isDisabled       | `boolean`                                                                                                               | Whether the progress is disabled.                          | `false`              |
-| disableAnimation | `boolean`                                                                                                               | Whether to disable the animation.                          | `false`              |
-| classNames       | `Record<"base"｜"labelWrapper"｜"label"｜"track"｜"value"｜"track"｜"indicator", string>`                               | Allows to set custom class names for the progress slots.   | -                    |
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the indicator.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the indicator.",
+      default: "primary"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The progress border radius.",
+      default: "full"
+    },
+    {
+      attribute: "value",
+      type: "number",
+      description: "The current value (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "valueLabel",
+      type: "ReactNode",
+      description: "The content to display as the value's label (e.g. 1 of 4).",
+      default: "-"
+    },
+    {
+      attribute: "minValue",
+      type: "number",
+      description: "The smallest value allowed for the input.",
+      default: "0"
+    },
+    {
+      attribute: "maxValue",
+      type: "number",
+      description: "The largest value allowed for the input.",
+      default: "100"
+    },
+    {
+      attribute: "formatOptions",
+      type: "Intl.NumberFormat",
+      description: "The options to format the value.",
+      default: "{style: 'percent'}"
+    },
+    {
+      attribute: "isIndeterminate",
+      type: "boolean",
+      description: "Whether the progress is indeterminate.",
+      default: "false"
+    },
+    {
+      attribute: "isStriped",
+      type: "boolean",
+      description: "Whether the progress is striped.",
+      default: "false"
+    },
+    {
+      attribute: "showValueLabel",
+      type: "boolean",
+      description: "Whether to show the value label.",
+      default: "true"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the progress is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'base' | 'labelWrapper' | 'label' | 'track' | 'value' | 'indicator', string>",
+      description: "Allows to set custom class names for the progress slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/radio-group.mdx b/apps/docs/content/docs/components/radio-group.mdx
index 33ee12628c..379936689a 100644
--- a/apps/docs/content/docs/components/radio-group.mdx
+++ b/apps/docs/content/docs/components/radio-group.mdx
@@ -147,47 +147,213 @@ In case you need to customize the radio group even further, you can use the `use
 
 ### RadioGroup Props
 
-| Attribute          | Type                                                                        | Description                                                                                                                                                                                                             | Default    |
-| ------------------ | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| children           | `ReactNode` \| `ReactNode[]`                                                | The list of radio elements.                                                                                                                                                                                             | -          |
-| label              | `ReactNode`                                                                 | The label of the radio group.                                                                                                                                                                                           | -          |
-| size               | `sm` \| `md` \| `lg`                                                        | The size of the radios.                                                                                                                                                                                                 | `md`       |
-| color              | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the radios.                                                                                                                                                                                                | `primary`  |
-| orientation        | `horizontal` \| `vertical`                                                  | The orientation of the radio group.                                                                                                                                                                                     | `vertical` |
-| name               | `string`                                                                    | The name of the RadioGroup, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons).                                                       | -          |
-| value              | `string[]`                                                                  | The current selected value. (controlled).                                                                                                                                                                               | -          |
-| defaultValue       | `string[]`                                                                  | The default selected value. (uncontrolled).                                                                                                                                                                             | -          |
-| description        | `ReactNode`                                                                 | Radio group description .                                                                                                                                                                                               | -          |
-| errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                       | Radio group error message.                                                                                                                                                                                              | -          |
-| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`            | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -          |
-| validationBehavior | `native` \| `aria`                                                                                                                    | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`     |
-| isDisabled         | `boolean`                                                                   | Whether the radio group is disabled.                                                                                                                                                                                    | `false`    |
-| isRequired         | `boolean`                                                                   | Whether user checkboxes are required on the input before form submission.                                                                                                                                               | `false`    |
-| isReadOnly         | `boolean`                                                                   | Whether the checkboxes can be selected but not changed by the user.                                                                                                                                                     | -          |
-| isInvalid          | `boolean`                                                                   | Whether the radio group is invalid.                                                                                                                                                                                     | `false`    |
-| validationState    | `valid` \| `invalid`                                                        | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                                                                                  | `false`    |
-| disableAnimation   | `boolean`                                                                   | Whether the animation should be disabled.                                                                                                                                                                               | `false`    |
-| classNames         | `Record<"base"｜ "wrapper"｜ "label", string>`                              | Allows to set custom class names for the radio group slots.                                                                                                                                                             | -          |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode | ReactNode[]", 
+      description: "The list of radio elements.",
+      default: "-"
+    },
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The label of the radio group.",
+      default: "-"
+    },
+    {
+      attribute: "size", 
+      type: "sm | md | lg",
+      description: "The size of the radios.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the radios.",
+      default: "primary"
+    },
+    {
+      attribute: "orientation",
+      type: "horizontal | vertical",
+      description: "The orientation of the radio group.",
+      default: "vertical"
+    },
+    {
+      attribute: "name",
+      type: "string",
+      description: "The name of the RadioGroup, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons).",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "string[]",
+      description: "The current selected value. (controlled)",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "string[]", 
+      description: "The default selected value. (uncontrolled)",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "Radio group description.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | ((v: ValidationResult) => ReactNode)",
+      description: "Radio group error message.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: string) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.",
+      default: "aria"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the radio group is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean", 
+      description: "Whether user checkboxes are required on the input before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the checkboxes can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the radio group is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "validationState",
+      type: "valid | invalid",
+      description: "Whether the inputs should display its \"valid\" or \"invalid\" visual styling. (Deprecated) use isInvalid instead.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the animation should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\" | \"wrapper\" | \"label\", string>",
+      description: "Allows to set custom class names for the radio group slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### RadioGroup Events
 
-| Attribute     | Type                                  | Description                                                                                                                         |
-| ------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| onChange      | `React.ChangeEvent<HTMLInputElement>` | Handler that is called when the element's value changes. You can pull out the new value by accessing `event.target.value` (string). |
-| onValueChange | `((value: string) => void)`           | Handler that is called when the value changes.                                                                                      |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "React.ChangeEvent<HTMLInputElement>",
+      description: "Handler that is called when the element's value changes. You can pull out the new value by accessing event.target.value (string).",
+      default: "-"
+    },
+    {
+      attribute: "onValueChange",
+      type: "((value: string) => void)",
+      description: "Handler that is called when the value changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Radio Props
 
-| Attribute        | Type                                                                                           | Description                                                                                    | Default   |
-| ---------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | --------- |
-| children         | `ReactNode`                                                                                    | The label of the radio.                                                                        | -         |
-| label            | `ReactNode`                                                                                    | The label of the radio.                                                                        | -         |
-| size             | `sm` \| `md` \| `lg`                                                                           | The size of the radio.                                                                         | `md`      |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                    | The color of the radio.                                                                        | `primary` |
-| description      | `ReactNode`                                                                                    | A description for the field. Provides a hint such as specific requirements for what to choose. | -         |
-| isDisabled       | `boolean`                                                                                      | Whether the radio is disabled.                                                                 | `false`   |
-| isRequired       | `boolean`                                                                                      | Whether user checkboxes are required on the input before form submission.                      | `false`   |
-| isReadOnly       | `boolean`                                                                                      | Whether the checkboxes can be selected but not changed by the user.                            | -         |
-| isInvalid        | `boolean`                                                                                      | Whether the radio is invalid. This is based on the radio group `validationState` prop.        | `false`   |
-| disableAnimation | `boolean`                                                                                      | Whether the animation should be disabled.                                                      | `false`   |
-| classNames       | `Record<"base"｜ "wrapper"｜ "labelWrapper" ｜ "label" ｜ "control" ｜ "description", string>` | Allows to set custom class names for the radio slots.                                          | -         |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The label of the radio.",
+      default: "-"
+    },
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The label of the radio.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the radio.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the radio.",
+      default: "primary"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the field. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the radio is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user checkboxes are required on the input before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the checkboxes can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the radio is invalid. This is based on the radio group validationState prop.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the animation should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\" | \"wrapper\" | \"labelWrapper\" | \"label\" | \"control\" | \"description\", string>",
+      description: "Allows to set custom class names for the radio slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/range-calendar.mdx b/apps/docs/content/docs/components/range-calendar.mdx
index b1521053b4..1028e80249 100644
--- a/apps/docs/content/docs/components/range-calendar.mdx
+++ b/apps/docs/content/docs/components/range-calendar.mdx
@@ -207,43 +207,191 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 
 ### RangeCalendar Props
 
-| Attribute                 | Type                                                                                                                                                                                                                                                                                                                                                                                          | Description                                                                                                                                                                               | Default                           |   |
-|---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|---|
-| value                     | `RangeValue`                                                                                                                                                                                                                                                                                                                                                                                   | null`                                                                                                                                                                                     | The current value (controlled).   | - |
-| defaultValue              | `RangeValue`                                                                                                                                                                                                                                                                                                                                                                                   | null`                                                                                                                                                                                     | The default value (uncontrolled). | - |
-| minValue                  | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The minimum allowed date that a user may select.                                                                                                                                          | -                                 |   |
-| maxValue                  | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The maximum allowed date that a user may select.                                                                                                                                          | -                                 |   |
-| color                     | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                                                                                                                                                                                                                                                   | The color of the time input.                                                                                                                                                              | `default`                         |   |
-| visibleMonths             | `number`                                                                                                                                                                                                                                                                                                                                                                                      | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop.                                   | `1`                               |   |
-| focusedValue              | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | Controls the currently focused date within the calendar.                                                                                                                                  | -                                 |   |
-| defaultFocusedValue       | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The date that is focused when the calendar first mounts (uncountrolled).                                                                                                                  | -                                 |   |
-| calendarWidth             | `number` \| `string`                                                                                                                                                                                                                                                                                                                                                                          | The width to be applied to the calendar component. This value is multiplied by the `visibleMonths` number to determine the total width of the calendar.                                   | `256`                             |   |
-| pageBehavior              | `PageBehavior`                                                                                                                                                                                                                                                                                                                                                                                | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.                                       | `visible`                         |   |
-| weekdayStyle              | `"narrow" \|"short" \| "long" \| undefined`                                                                                                                                                                                                                                                                                                                                                   | The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name.                                                                    | `narrow`                          |   |
-| showMonthAndYearPickers   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the label should be crossed out.                                                                                                                                                  | `false`             |
-| allowsNonContiguousRanges | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.                                              | `false`                           |   |
-| isDisabled                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar is disabled.                                                                                                                                                         | `false`                           |   |
-| isReadOnly                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar value is immutable.                                                                                                                                                  | `false`                           |   |
-| isInvalid                 | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the current selection is invalid according to application logic.                                                                                                                  | -                                 |   |
-| autoFocus                 | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to automatically focus the calendar when it mounts.                                                                                                                               | `false`                           |   |
-| showHelper                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to show the description or error message.                                                                                                                                         | `false`                           |   |
-| showShadow                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to show the shadow in the selected dates.                                                                                                                                         | `false`                           |   |
-| topContent                | `ReactNode`                                                                                                                                                                                                                                                                                                                                                                                   | Custom content to be included in the top of the calendar.                                                                                                                                 | -                                 |   |
-| bottomContent             | `ReactNode`                                                                                                                                                                                                                                                                                                                                                                                   | Custom content to be included in the bottom of the calendar.                                                                                                                              | -                                 |   |
-| isDateUnavailable         | `(date: DateValue) => boolean`                                                                                                                                                                                                                                                                                                                                                                | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                                                  | -                                 |   |
-| createCalendar            | `(calendar: SupportedCalendars) => Calendar \| null`                                                                                                                                                                                                                                                                                                                                          | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all<br> calendars`               |   |
-| errorMessage              | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                                                                                                                                                                                                                                                             | An error message for the field.                                                                                                                                                           | -                                 |   |
-| validate                  | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                                                                                                                                                                                                     | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -                                 |   |
-| hideDisabledDates         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to hide the disabled or invalid dates.                                                                                                                                            | `false`                           |   |
-| disableAnimation          | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to disable the animation of the calendar.                                                                                                                                         | `false`                           |   |
-| classNames                | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots.                                                                                                                                  | -                                 |   |
+<APITable
+  data={[
+    {
+      attribute: "value",
+      type: "RangeValue",
+      description: "The current value (controlled).",
+      default: "null"
+    },
+    {
+      attribute: "defaultValue",
+      type: "RangeValue",
+      description: "The default value (uncontrolled).",
+      default: "null"
+    },
+    {
+      attribute: "minValue",
+      type: "DateValue",
+      description: "The minimum allowed date that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "maxValue", 
+      type: "DateValue",
+      description: "The maximum allowed date that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the time input.",
+      default: "default"
+    },
+    {
+      attribute: "visibleMonths",
+      type: "number",
+      description: "The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the showMonthAndYearPickers prop.",
+      default: "1"
+    },
+    {
+      attribute: "focusedValue",
+      type: "DateValue",
+      description: "Controls the currently focused date within the calendar.",
+      default: "-"
+    },
+    {
+      attribute: "defaultFocusedValue",
+      type: "DateValue", 
+      description: "The date that is focused when the calendar first mounts (uncountrolled).",
+      default: "-"
+    },
+    {
+      attribute: "calendarWidth",
+      type: "number | string",
+      description: "The width to be applied to the calendar component. This value is multiplied by the visibleMonths number to determine the total width of the calendar.",
+      default: "256"
+    },
+    {
+      attribute: "pageBehavior",
+      type: "PageBehavior",
+      description: "Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.",
+      default: "visible"
+    },
+    {
+      attribute: "weekdayStyle",
+      type: "narrow | short | long",
+      description: "The style of weekday names to display in the calendar grid header.",
+      default: "narrow"
+    },
+    {
+      attribute: "showMonthAndYearPickers",
+      type: "boolean",
+      description: "Whether to show month and year pickers.",
+      default: "false"
+    },
+    {
+      attribute: "allowsNonContiguousRanges",
+      type: "boolean",
+      description: "When combined with isDateUnavailable, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the calendar is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the calendar value is immutable.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the current selection is invalid according to application logic.",
+      default: "-"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether to automatically focus the calendar when it mounts.",
+      default: "false"
+    },
+    {
+      attribute: "showHelper",
+      type: "boolean",
+      description: "Whether to show the description or error message.",
+      default: "false"
+    },
+    {
+      attribute: "showShadow",
+      type: "boolean",
+      description: "Whether to show the shadow in the selected dates.",
+      default: "false"
+    },
+    {
+      attribute: "topContent",
+      type: "ReactNode",
+      description: "Custom content to be included in the top of the calendar.",
+      default: "-"
+    },
+    {
+      attribute: "bottomContent",
+      type: "ReactNode",
+      description: "Custom content to be included in the bottom of the calendar.",
+      default: "-"
+    },
+    {
+      attribute: "isDateUnavailable",
+      type: "(date: DateValue) => boolean",
+      description: "Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.",
+      default: "-"
+    },
+    {
+      attribute: "createCalendar",
+      type: "(calendar: SupportedCalendars) => Calendar | null",
+      description: "This function helps to reduce the bundle size by providing a custom calendar system.",
+      default: "all calendars"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | (v: ValidationResult) => ReactNode",
+      description: "An error message for the field.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: { inputValue: string, selectedKey: React.Key }) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values.",
+      default: "-"
+    },
+    {
+      attribute: "hideDisabledDates",
+      type: "boolean",
+      description: "Whether to hide the disabled or invalid dates.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation of the calendar.",
+      default: "false"
+    }
+  ]}
+/>
 
 ### RangeCalendar Events
 
-| Attribute              | Type                            | Description                                                                                                                              |
-| ---------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| onFocusChange          | `(date: CalendarDate) => void`  | Handler that is called when the focused date changes.                                                                                    |
-| onChange               | `(value: RangeValue<DateValue> \| null) => void`  | Handler that is called when the value changes.                                                                                           |
+<APITable
+  data={[
+    {
+      attribute: "onFocusChange",
+      type: "(date: CalendarDate) => void",
+      description: "Handler that is called when the focused date changes.",
+      default: "-"
+    },
+    {
+      attribute: "onChange",
+      type: "(value: RangeValue<DateValue> | null) => void",
+      description: "Handler that is called when the value changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 #### Supported Calendars
 
diff --git a/apps/docs/content/docs/components/scroll-shadow.mdx b/apps/docs/content/docs/components/scroll-shadow.mdx
index 7f377b0937..b4fad53dfc 100644
--- a/apps/docs/content/docs/components/scroll-shadow.mdx
+++ b/apps/docs/content/docs/components/scroll-shadow.mdx
@@ -70,22 +70,61 @@ a specific position.
 
 ## API
 
-### ShadowScroll Props
-
-| Attribute     | Type                                                | Description                                     | Default    |
-| ------------- | --------------------------------------------------- | ----------------------------------------------- | ---------- |
-| size          | `number`                                            | The shadow size in pixels.                      | `40`       |
-| offset        | `number`                                            | The scroll offset to show the shadow in pixels. | `0`        |
-| hideScrollBar | `boolean`                                           | Whether to hide the scrollbar or not.           | `false`    |
-| orientation   | `horizontal` \| `vertical`                          | The scroll orientation.                         | `vertical` |
-| isEnabled     | `boolean`                                           | Whether the shadow is enabled or not.           | `true`     |
-| visibility    | [ScrollShadowVisibility](#scroll-shadow-visibility) | The shadow visibility. (controlled)             | `auto`     |
-
-### ShadowScroll Events
-
-| Attribute          | Type                                           | Description                                          |
-| ------------------ | ---------------------------------------------- | ---------------------------------------------------- |
-| onVisibilityChange | `(visibility: ScrollShadowVisibility) => void` | Callback invoked when the shadow visibility changes. |
+### ScrollShadow Props
+
+<APITable
+  data={[
+    {
+      attribute: "size",
+      type: "number",
+      description: "The shadow size in pixels.",
+      default: "40"
+    },
+    {
+      attribute: "offset",
+      type: "number", 
+      description: "The scroll offset to show the shadow in pixels.",
+      default: "0"
+    },
+    {
+      attribute: "hideScrollBar",
+      type: "boolean",
+      description: "Whether to hide the scrollbar or not.",
+      default: "false"
+    },
+    {
+      attribute: "orientation",
+      type: "horizontal | vertical",
+      description: "The scroll orientation.",
+      default: "vertical"
+    },
+    {
+      attribute: "isEnabled",
+      type: "boolean",
+      description: "Whether the shadow is enabled or not.",
+      default: "true"
+    },
+    {
+      attribute: "visibility",
+      type: "ScrollShadowVisibility",
+      description: "The shadow visibility. (controlled)",
+      default: "auto"
+    }
+  ]}
+/>
+
+### ScrollShadow Events
+
+<APITable
+  data={[
+    {
+      attribute: "onVisibilityChange",
+      type: "(visibility: ScrollShadowVisibility) => void",
+      description: "Callback invoked when the shadow visibility changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 <Spacer y={2} />
 
diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx
index 55b476c101..4721b2a327 100644
--- a/apps/docs/content/docs/components/select.mdx
+++ b/apps/docs/content/docs/components/select.mdx
@@ -354,55 +354,269 @@ the popover and listbox components.
 
 ### Select Props
 
-| Attribute                   | Type                                                                                                                                                                                                                   | Description                                                                                                            | Default            |
-| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| children\*                  | `ReactNode[]`                                                                                                                                                                                                          | The children to render. Usually a list of `SelectItem` and `SelectSection` elements.                                   | -                  |
-| items                       | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)                                                                                                                 | Item objects in the select. (dynamic)                                                                                  | -                  |
-| selectionMode               | `single` \| `multiple`                                                                                                                                                                                                 | The type of selection that is allowed in the collection.                                                               | -                  |
-| selectedKeys                | `all` \| `Iterable<React.Key>`                                                                                                                                                                                                | The currently selected keys in the collection (controlled).                                                            | -                  |
-| disabledKeys                | `Iterable<React.Key>`                                                                                                                                                                                                | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.                | -                  |
-| defaultSelectedKeys         | `all` \| `Iterable<React.Key>`                                                                                                                                                                                                 | The initial selected keys in the collection (uncontrolled).                                                            | -                  |
-| variant                     | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                                                                                        | The variant of the select.                                                                                             | `flat`             |
-| color                       | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                                                                            | The color of the select.                                                                                               | `default`          |
-| size                        | `sm` \| `md` \| `lg`                                                                                                                                                                                                   | The size of the select.                                                                                                | `md`               |
-| radius                      | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                                                                                               | The radius of the select.                                                                                              | -                  |
-| placeholder                 | `string`                                                                                                                                                                                                               | The placeholder of the select.                                                                                         | `Select an option` |
-| labelPlacement              | `inside` \| `outside` \| `outside-left`                                                                                                                                                                                | The position of the label.                                                                                             | `inside`           |
-| label                       | `ReactNode`                                                                                                                                                                                                            | The content to display as the label.                                                                                   | -                  |
-| description                 | `ReactNode`                                                                                                                                                                                                            | A description for the select. Provides a hint such as specific requirements for what to choose.                        | -                  |
-| errorMessage                | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                                                                                                                                  | An error message for the select.                                                                                       | -                  |
-| startContent                | `ReactNode`                                                                                                                                                                                                            | Element to be rendered in the left side of the select.                                                                 | -                  |
-| endContent                  | `ReactNode`                                                                                                                                                                                                            | Element to be rendered in the right side of the select.                                                                | -                  |
-| selectorIcon                | `ReactNode`                                                                                                                                                                                                            | Element to be rendered as the selector icon.                                                                           | -                  |
-| scrollRef                   | `React.RefObject<HTMLElement>`                                                                                                                                                                                         | A ref to the scrollable element.                                                                                       | -                  |
-| spinnerRef                  | `React.RefObject<HTMLElement>`                                                                                                                                                                                         | A ref to the spinner element.                                                                                          | -                  |
-| fullWidth                   | `boolean`                                                                                                                                                                                                              | Whether the select should take up the width of its parent.                                                             | `true`             |
-| isOpen                      | `boolean`                                                                                                                                                                                                              | Whether the select is open by default (controlled).                                                                    | -                  |
-| defaultOpen                 | `boolean`                                                                                                                                                                                                              | Whether the select is open by default (uncontrolled).                                                                  | -                  |
-| isRequired                  | `boolean`                                                                                                                                                                                                              | Whether user select is required on the select before form submission.                                                  | `false`            |
-| isDisabled                  | `boolean`                                                                                                                                                                                                              | Whether the select is disabled.                                                                                        | `false`            |
-| isMultiline                 | `boolean`                                                                                                                                                                                                              | Whether the select should allow multiple lines of text.                                                                | `false`            |
-| isInvalid                   | `boolean`                                                                                                                                                                                                              | Whether the select is invalid.                                                                                         | `false`            |
-| validationState             | `valid` \| `invalid`                                                                                                                                                                                                   | Whether the select should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | -                  |
-| showScrollIndicators        | `boolean`                                                                                                                                                                                                              | Whether the select should show scroll indicators when the listbox is scrollable.                                       | `true`             |
-| autoFocus                   | `boolean`                                                                                                                                                                                                              | Whether the select should be focused on the first mount.                                                               | `false`            |
-| disallowEmptySelection      | `boolean`                                                                                                                                                                                                              | Whether the collection allows empty selection.                                                                         | `false`            |
-| disableAnimation            | `boolean`                                                                                                                                                                                                              | Whether the select should be animated.                                                                                 | `true`             |
-| disableSelectorIconRotation | `boolean`                                                                                                                                                                                                              | Whether the select should disable the rotation of the selector icon.                                                   | `false`            |
-| popoverProps                | [PopoverProps](/docs/components/popover#api)                                                                                                                                                                           | Props to be passed to the popover component.                                                                           | -                  |
-| listboxProps                | [ListboxProps](/docs/components/listbox#api)                                                                                                                                                                           | Props to be passed to the listbox component.                                                                           | -                  |
-| scrollShadowProps           | [ScrollShadowProps](/docs/components/scroll-shadow#api)                                                                                                                                                                | Props to be passed to the scroll shadow component.                                                                     | -                  |
-| classNames                  | `Record<"base"｜ "label"｜ "trigger"｜ "mainWrapper" ｜ "innerWrapper"｜ "selectorIcon" ｜ "value" ｜ "listboxWrapper"｜ "listbox" ｜ "popoverContent" ｜ "helperWrapper" ｜ "description" ｜ "errorMessage", string>` | Allows to set custom class names for the Select slots.                                                                 | -                  |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render. Usually a list of SelectItem and SelectSection elements.",
+      default: "-"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "Item objects in the select. (dynamic)",
+      default: "-"
+    },
+    {
+      attribute: "selectionMode",
+      type: "single | multiple",
+      description: "The type of selection that is allowed in the collection.",
+      default: "-"
+    },
+    {
+      attribute: "selectedKeys",
+      type: "all | Iterable<React.Key>",
+      description: "The currently selected keys in the collection (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "disabledKeys",
+      type: "Iterable<React.Key>",
+      description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelectedKeys",
+      type: "all | Iterable<React.Key>",
+      description: "The initial selected keys in the collection (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the select.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the select.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the select.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the select.",
+      default: "-"
+    },
+    {
+      attribute: "placeholder",
+      type: "string",
+      description: "The placeholder of the select.",
+      default: "Select an option"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the select. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | ((v: ValidationResult) => ReactNode)",
+      description: "An error message for the select.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the left side of the select.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode", 
+      description: "Element to be rendered in the right side of the select.",
+      default: "-"
+    },
+    {
+      attribute: "selectorIcon",
+      type: "ReactNode",
+      description: "Element to be rendered as the selector icon.",
+      default: "-"
+    },
+    {
+      attribute: "scrollRef",
+      type: "React.RefObject<HTMLElement>",
+      description: "A ref to the scrollable element.",
+      default: "-"
+    },
+    {
+      attribute: "spinnerRef",
+      type: "React.RefObject<HTMLElement>",
+      description: "A ref to the spinner element.",
+      default: "-"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the select should take up the width of its parent.",
+      default: "true"
+    },
+    {
+      attribute: "isOpen",
+      type: "boolean",
+      description: "Whether the select is open by default (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultOpen",
+      type: "boolean",
+      description: "Whether the select is open by default (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user select is required on the select before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the select is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isMultiline",
+      type: "boolean",
+      description: "Whether the select should allow multiple lines of text.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the select is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "validationState",
+      type: "valid | invalid",
+      description: "Whether the select should display its \"valid\" or \"invalid\" visual styling. (Deprecated) use isInvalid instead.",
+      default: "-"
+    },
+    {
+      attribute: "showScrollIndicators",
+      type: "boolean",
+      description: "Whether the select should show scroll indicators when the listbox is scrollable.",
+      default: "true"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether the select should be focused on the first mount.",
+      default: "false"
+    },
+    {
+      attribute: "disallowEmptySelection",
+      type: "boolean",
+      description: "Whether the collection allows empty selection.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the select should be animated.",
+      default: "true"
+    },
+    {
+      attribute: "disableSelectorIconRotation",
+      type: "boolean",
+      description: "Whether the select should disable the rotation of the selector icon.",
+      default: "false"
+    },
+    {
+      attribute: "popoverProps",
+      type: "PopoverProps",
+      description: "Props to be passed to the popover component.",
+      default: "-"
+    },
+    {
+      attribute: "listboxProps",
+      type: "ListboxProps",
+      description: "Props to be passed to the listbox component.",
+      default: "-"
+    },
+    {
+      attribute: "scrollShadowProps",
+      type: "ScrollShadowProps",
+      description: "Props to be passed to the scroll shadow component.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\"｜ \"label\"｜ \"trigger\"｜ \"mainWrapper\" ｜ \"innerWrapper\"｜ \"selectorIcon\" ｜ \"value\" ｜ \"listboxWrapper\"｜ \"listbox\" ｜ \"popoverContent\" ｜ \"helperWrapper\" ｜ \"description\" ｜ \"errorMessage\", string>",
+      description: "Allows to set custom class names for the Select slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Select Events
 
-| Attribute         | Type                                          | Description                                                                          |
-| ----------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
-| onClose           | `() => void`                                  | Callback fired when the select popover is closed.                                    |
-| onOpenChange      | `(isOpen: boolean) => void`                   | Callback fired when the select popover is opened or closed.                          |
-| onSelectionChange | `(keys: "all" \| Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void`                 | Callback fired when the selected keys change.                                        |
-| onChange          | `React.ChangeEvent<HTMLSelectElement>`        | Native select change event, fired when the selected value changes.                   |
-| renderValue       | [RenderValueFunction](#render-value-function) | Function to render the value of the select. It renders the selected item by default. |
+<APITable
+  data={[
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Callback fired when the select popover is closed.",
+      default: "-"
+    },
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Callback fired when the select popover is opened or closed.",
+      default: "-"
+    },
+    {
+      attribute: "onSelectionChange",
+      type: "(keys: \"all\" | Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void",
+      description: "Callback fired when the selected keys change.",
+      default: "-"
+    },
+    {
+      attribute: "onChange",
+      type: "React.ChangeEvent<HTMLSelectElement>",
+      description: "Native select change event, fired when the selected value changes.",
+      default: "-"
+    },
+    {
+      attribute: "renderValue",
+      type: "RenderValueFunction",
+      description: "Function to render the value of the select. It renders the selected item by default.",
+      default: "-"
+    }
+  ]}
+/>
 
 ---
 
diff --git a/apps/docs/content/docs/components/skeleton.mdx b/apps/docs/content/docs/components/skeleton.mdx
index c21aec8818..9f772a21bb 100644
--- a/apps/docs/content/docs/components/skeleton.mdx
+++ b/apps/docs/content/docs/components/skeleton.mdx
@@ -74,9 +74,31 @@ You can use the `isLoaded` prop to stop the skeleton animation and show the chil
 
 ### Skeleton Props
 
-| Attribute        | Type                                | Description                                              | Default |
-| ---------------- | ----------------------------------- | -------------------------------------------------------- | ------- |
-| children         | `ReactNode`                         | The content of the skeleton.                             | -       |
-| isLoaded         | `boolean`                           | Whether the skeleton is loaded.                          | `false` |
-| disableAnimation | `boolean`                           | Whether to disable the animations.                       | `false` |
-| classNames       | `Record<"base"｜"content", string>` | Allows to set custom class names for the skeleton slots. | -       |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content of the skeleton.",
+      default: "-"
+    },
+    {
+      attribute: "isLoaded", 
+      type: "boolean",
+      description: "Whether the skeleton is loaded.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean", 
+      description: "Whether to disable the animations.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\" | \"content\", string>",
+      description: "Allows to set custom class names for the skeleton slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/slider.mdx b/apps/docs/content/docs/components/slider.mdx
index ec9b5f853a..4ebe0ebad3 100644
--- a/apps/docs/content/docs/components/slider.mdx
+++ b/apps/docs/content/docs/components/slider.mdx
@@ -249,51 +249,216 @@ You can customize the `Slider` component by passing custom Tailwind CSS classes
 
 ### Slider Props
 
-| Attribute                 | Type                                                                                                                                                                             | Description                                                                                                                                                   | Default      |
-| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
-| label                     | `ReactNode`                                                                                                                                                                      | The content to display as the label.                                                                                                                          | -            |
-| name                      | `string`                                                                                                                                                                         | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). | -            |
-| size                      | `sm` \| `md` \| `lg`                                                                                                                                                             | The size of the Slider filler and thumb.                                                                                                                      | `md`         |
-| color                     | `foreground` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                                   | The color of the filler and thumb.                                                                                                                            | `primary`    |
-| radius                    | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                                                         | The Slider's thumbs border radius.                                                                                                                            | `full`       |
-| step                      | `number`                                                                                                                                                                         | The Slider's step value.                                                                                                                                      | `1`          |
-| value                     | `number`                                                                                                                                                                         | The current value (controlled).                                                                                                                               | -            |
-| defaultValue              | `number`                                                                                                                                                                         | The default value (uncontrolled).                                                                                                                             | -            |
-| minValue                  | `number`                                                                                                                                                                         | The slider's minimum value.                                                                                                                                   | `0`          |
-| maxValue                  | `number`                                                                                                                                                                         | The slider's maximum value.                                                                                                                                   | `100`        |
-| orientation               | `horizontal` \| `vertical`                                                                                                                                                       | The orientation of the Slider.                                                                                                                                | `horizontal` |
-| fillOffset                | `number`                                                                                                                                                                         | The offset from which to start the fill.                                                                                                                      | -            |
-| showSteps                 | `boolean`                                                                                                                                                                        | Whether to show the steps indicators.                                                                                                                         | `false`      |
-| showTooltip               | `boolean`                                                                                                                                                                        | Whether to show a tooltip with the current thumb value when the user hovers or drags the thumb.                                                               | `false`      |
-| marks                     | [SliderStepMarks](#slider-step-marks)                                                                                                                                            | The marks to display on the Slider's steps.                                                                                                                   | -            |
-| startContent              | `ReactNode`                                                                                                                                                                      | The content to display at the beginning of the Slider.                                                                                                        | -            |
-| endContent                | `ReactNode`                                                                                                                                                                      | The content to display at the end of the Slider.                                                                                                              | -            |
-| formatOptions             | [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)                                                          | The options to format the value.                                                                                                                              | -            |
-| tooltipValueFormatOptions | [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)                                                          | The options to format the tooltip value. By default, it uses the same options as `formatOptions`.                                                             | -            |
-| tooltipProps              | [TooltipProps](/docs/components/tooltip)                                                                                                                                         | The props to pass to the thumbs's tooltip.                                                                                                                    | -            |
-| showOutline               | `boolean`                                                                                                                                                                        | Whether to show a small outline around the thumbs.                                                                                                            | `false`      |
-| hideValue                 | `boolean`                                                                                                                                                                        | Whether to hide the Slider value.                                                                                                                             | `false`      |
-| hideThumb                 | `boolean`                                                                                                                                                                        | Whether to hide all the Slider thumbs.                                                                                                                        | `false`      |
-| disableThumbScale         | `boolean`                                                                                                                                                                        | Whether to disable the thumb scale animation.                                                                                                                 | `false`      |
-| isDisabled                | `boolean`                                                                                                                                                                        | Whether the whole Slider is disabled.                                                                                                                         | `false`      |
-| disableAnimation          | `boolean`                                                                                                                                                                        | Whether to disable the Slider animations.                                                                                                                     | `false`      |
-| classNames                | `Record<"base"｜"labelWrapper"｜"label"｜ "value" ｜ "step" ｜ "mark" ｜ "trackWrapper" ｜ "track"｜ "output" ｜ "filler" ｜ "thumb" ｜ "startContent" ｜ "endContent", string>` | Allows to set custom class names for the Slider slots.                                                                                                        | -            |
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "name",
+      type: "string", 
+      description: "The name of the input element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the Slider filler and thumb.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "foreground | primary | secondary | success | warning | danger",
+      description: "The color of the filler and thumb.",
+      default: "primary"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The Slider's thumbs border radius.",
+      default: "full"
+    },
+    {
+      attribute: "step",
+      type: "number",
+      description: "The Slider's step value.",
+      default: "1"
+    },
+    {
+      attribute: "value",
+      type: "number",
+      description: "The current value (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "number",
+      description: "The default value (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "minValue",
+      type: "number",
+      description: "The slider's minimum value.",
+      default: "0"
+    },
+    {
+      attribute: "maxValue",
+      type: "number",
+      description: "The slider's maximum value.",
+      default: "100"
+    },
+    {
+      attribute: "orientation",
+      type: "horizontal | vertical",
+      description: "The orientation of the Slider.",
+      default: "horizontal"
+    },
+    {
+      attribute: "fillOffset",
+      type: "number",
+      description: "The offset from which to start the fill.",
+      default: "-"
+    },
+    {
+      attribute: "showSteps",
+      type: "boolean",
+      description: "Whether to show the steps indicators.",
+      default: "false"
+    },
+    {
+      attribute: "showTooltip",
+      type: "boolean",
+      description: "Whether to show a tooltip with the current thumb value when the user hovers or drags the thumb.",
+      default: "false"
+    },
+    {
+      attribute: "marks",
+      type: "SliderStepMarks",
+      description: "The marks to display on the Slider's steps.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The content to display at the beginning of the Slider.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "The content to display at the end of the Slider.",
+      default: "-"
+    },
+    {
+      attribute: "formatOptions",
+      type: "Intl.NumberFormat",
+      description: "The options to format the value.",
+      default: "-"
+    },
+    {
+      attribute: "tooltipValueFormatOptions",
+      type: "Intl.NumberFormat",
+      description: "The options to format the tooltip value.",
+      default: "-"
+    },
+    {
+      attribute: "tooltipProps",
+      type: "TooltipProps",
+      description: "The props to pass to the thumbs's tooltip.",
+      default: "-"
+    },
+    {
+      attribute: "showOutline",
+      type: "boolean",
+      description: "Whether to show a small outline around the thumbs.",
+      default: "false"
+    },
+    {
+      attribute: "hideValue",
+      type: "boolean",
+      description: "Whether to hide the Slider value.",
+      default: "false"
+    },
+    {
+      attribute: "hideThumb",
+      type: "boolean",
+      description: "Whether to hide all the Slider thumbs.",
+      default: "false"
+    },
+    {
+      attribute: "disableThumbScale",
+      type: "boolean",
+      description: "Whether to disable the thumb scale animation.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the whole Slider is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the Slider animations.",
+      default: "false"
+    }
+  ]}
+/>
 
 ### Slider Functions
 
-| Name        | Type                                                                     | Description                                                                                    |
-| ----------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
-| getValue    | `(value: SliderValue) => string`                                         | A function to format the value. Overrides default formatted number.                            |
-| renderLabel | `(props: DOMAttributes<HTMLLabelElement>) => ReactNode`                  | A function to render the label.                                                                |
-| renderValue | `(props: DOMAttributes<HTMLOutputElement>) => ReactNode`                 | A function to render the value.                                                                |
-| renderThumb | `(props: DOMAttributes<HTMLDivElement> & {index?: number}) => ReactNode` | A function to render the thumbs. The `index` prop will tell you which thumb is being rendered. |
+<APITable
+  data={[
+    {
+      attribute: "getValue",
+      type: "(value: SliderValue) => string",
+      description: "A function to format the value. Overrides default formatted number.",
+      default: "-"
+    },
+    {
+      attribute: "renderLabel",
+      type: "(props: DOMAttributes<HTMLLabelElement>) => ReactNode",
+      description: "A function to render the label.",
+      default: "-"
+    },
+    {
+      attribute: "renderValue",
+      type: "(props: DOMAttributes<HTMLOutputElement>) => ReactNode",
+      description: "A function to render the value.",
+      default: "-"
+    },
+    {
+      attribute: "renderThumb",
+      type: "(props: DOMAttributes<HTMLDivElement> & {index?: number}) => ReactNode",
+      description: "A function to render the thumbs. The index prop will tell you which thumb is being rendered.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Slider Events
 
-| Name        | Type                           | Description                                                                  |
-| ----------- | ------------------------------ | ---------------------------------------------------------------------------- |
-| onChange    | `(value: SliderValue) => void` | Callback fired when the value changes.                                       |
-| onChangeEnd | `(value: SliderValue) => void` | Callback fired when the value changes and the user stops dragging the thumb. |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(value: SliderValue) => void",
+      description: "Callback fired when the value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onChangeEnd",
+      type: "(value: SliderValue) => void",
+      description: "Callback fired when the value changes and the user stops dragging the thumb.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Types
 
diff --git a/apps/docs/content/docs/components/snippet.mdx b/apps/docs/content/docs/components/snippet.mdx
index e149ee98c5..9776a25a1f 100644
--- a/apps/docs/content/docs/components/snippet.mdx
+++ b/apps/docs/content/docs/components/snippet.mdx
@@ -98,27 +98,116 @@ You can customize the copy and copied icons by using the `copyIcon` and `checkIc
 
 ### Snippet Props
 
-| Attribute        | Type                                                                            | Description                                                                                    | Default |
-| ---------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------- |
-| children         | `ReactNode` \| `ReactNode[]`                                                    | The content of the snippet.                                                                    | -       |
-| size             | `sm` \| `md` \| `lg`                                                            | The size of the snippet.                                                                       | `md`    |
-| radius           | `none` \| `sm` \| `md` \| `lg`                                                  | The radius of the snippet.                                                                     | `lg`    |
-| symbol           | `string` \| `ReactNode`                                                         | The symbol to show before the snippet.                                                         | `$`     |
-| timeout          | `number`                                                                        | The time in milliseconds to wait before resetting the clipboard.                                | `2000`  |
-| codeString       | `string`                                                                        | The code string to copy. if `codeString` is passed, it will be copied instead of the children. | -       |
-| tooltipProps     | [TooltipProps](/docs/components/tooltip#tooltip-props)                          | The props of the tooltip.                                                                      | -       |
-| copyIcon         | `ReactNode`                                                                     | The copy icon.                                                                                 | -       |
-| checkIcon        | `ReactNode`                                                                     | The check icon.                                                                                | -       |
-| disableTooltip   | `boolean`                                                                       | Whether to disable the tooltip.                                                                | `false` |
-| disableCopy      | `boolean`                                                                       | Whether to disable the copy button.                                                            | `false` |
-| hideCopyButton   | `boolean`                                                                       | Whether to hide the copy button.                                                               | `false` |
-| hideSymbol       | `boolean`                                                                       | Whether to hide the symbol.                                                                    | `false` |
-| copyButtonProps  | [ButtonProps](/docs/components/button#button-props)                             | The props of the copy button.                                                                  | -       |
-| disableAnimation | `boolean`                                                                       | Whether to disable the animations.                                                             | `false` |
-| classNames       | `Record<"base"｜"content"｜"pre"｜"symbol"｜"copyButton"｜"checkIcon", string>` | Allows to set custom class names for the snippet slots.                                        | -       |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode | ReactNode[]",
+      description: "The content of the snippet.",
+      default: "-"
+    },
+    {
+      attribute: "size", 
+      type: "sm | md | lg",
+      description: "The size of the snippet.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg",
+      description: "The radius of the snippet.",
+      default: "lg"
+    },
+    {
+      attribute: "symbol",
+      type: "string | ReactNode",
+      description: "The symbol to show before the snippet.",
+      default: "$"
+    },
+    {
+      attribute: "timeout",
+      type: "number",
+      description: "The time in milliseconds to wait before resetting the clipboard.",
+      default: "2000"
+    },
+    {
+      attribute: "codeString",
+      type: "string",
+      description: "The code string to copy. if codeString is passed, it will be copied instead of the children.",
+      default: "-"
+    },
+    {
+      attribute: "tooltipProps",
+      type: "TooltipProps",
+      description: "The props of the tooltip.",
+      default: "-"
+    },
+    {
+      attribute: "copyIcon",
+      type: "ReactNode",
+      description: "The copy icon.",
+      default: "-"
+    },
+    {
+      attribute: "checkIcon",
+      type: "ReactNode", 
+      description: "The check icon.",
+      default: "-"
+    },
+    {
+      attribute: "disableTooltip",
+      type: "boolean",
+      description: "Whether to disable the tooltip.",
+      default: "false"
+    },
+    {
+      attribute: "disableCopy",
+      type: "boolean",
+      description: "Whether to disable the copy button.",
+      default: "false"
+    },
+    {
+      attribute: "hideCopyButton",
+      type: "boolean",
+      description: "Whether to hide the copy button.",
+      default: "false"
+    },
+    {
+      attribute: "hideSymbol",
+      type: "boolean",
+      description: "Whether to hide the symbol.",
+      default: "false"
+    },
+    {
+      attribute: "copyButtonProps",
+      type: "ButtonProps",
+      description: "The props of the copy button.",
+      default: "-"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animations.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'base' | 'content' | 'pre' | 'symbol' | 'copyButton' | 'checkIcon', string>",
+      description: "Allows to set custom class names for the snippet slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Snippet Events
 
-| Attribute | Type                                   | Description                                     |
-| --------- | -------------------------------------- | ----------------------------------------------- |
-| onCopy    | `(value: string ｜ string[]) => void;` | Handler that is called when the code is copied. |
+<APITable
+  data={[
+    {
+      attribute: "onCopy",
+      type: "(value: string | string[]) => void",
+      description: "Handler that is called when the code is copied.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/spacer.mdx b/apps/docs/content/docs/components/spacer.mdx
index 70703c1ae8..636da747fd 100644
--- a/apps/docs/content/docs/components/spacer.mdx
+++ b/apps/docs/content/docs/components/spacer.mdx
@@ -50,12 +50,24 @@ Spacer is a component used to add space between components.
 
 ### Spacer Props
 
-| Attribute | Type             | Description      | Default |
-| --------- | ---------------- | ---------------- | ------- |
-| x         | [Space](#spaces) | The x axis space | `1`     |
-| y         | [Space](#spaces) | The y axis space | `1`     |
+<APITable
+  data={[
+    {
+      attribute: "x",
+      type: "Space",
+      description: "The x axis space",
+      default: "1"
+    },
+    {
+      attribute: "y", 
+      type: "Space",
+      description: "The y axis space",
+      default: "1"
+    }
+  ]}
+/>
 
-### Spaces
+### Types
 
 ```ts
 type Space = 0 | "px" | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
diff --git a/apps/docs/content/docs/components/spinner.mdx b/apps/docs/content/docs/components/spinner.mdx
index e8980b0d7b..2a7dd59ad9 100644
--- a/apps/docs/content/docs/components/spinner.mdx
+++ b/apps/docs/content/docs/components/spinner.mdx
@@ -72,12 +72,39 @@ Spinner express an unspecified wait time or display the length of a process.
 
 ## API
 
-### Circular Progress Props
-
-| Attribute  | Type                                                                        | Description                                             | Default   |
-| ---------- | --------------------------------------------------------------------------- | ------------------------------------------------------- | --------- |
-| label      | `string`                                                                    | The content to display as the label.                    | -         |
-| size       | `sm` \| `md` \| `lg`                                                        | The size of the spinner circles.                        | `md`      |
-| color      | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the spinner circles.                       | `primary` |
-| labelColor | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the label.                                 | `default` |
-| classNames | `Record<"base"｜"wrapper"｜"circle1"｜"circle2"｜"label", string>`          | Allows to set custom class names for the spinner slots. | -         |
+### Spinner Props
+
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "string",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "size", 
+      type: "sm | md | lg",
+      description: "The size of the spinner circles.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the spinner circles.",
+      default: "primary"
+    },
+    {
+      attribute: "labelColor",
+      type: "default | primary | secondary | success | warning | danger", 
+      description: "The color of the label.",
+      default: "default"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\"｜\"wrapper\"｜\"circle1\"｜\"circle2\"｜\"label\", string>",
+      description: "Allows to set custom class names for the spinner slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/switch.mdx b/apps/docs/content/docs/components/switch.mdx
index 91f0d5fe6f..e0cb784da6 100644
--- a/apps/docs/content/docs/components/switch.mdx
+++ b/apps/docs/content/docs/components/switch.mdx
@@ -135,30 +135,119 @@ In case you need to customize the switch even further, you can use the `useSwitc
 
 ### Switch Props
 
-| Attribute        | Type                                                                                                       | Description                                                         | Default   |
-| ---------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | --------- |
-| children         | `ReactNode`                                                                                                | The label of the switch.                                            | -         |
-| value            | `string`                                                                                                   | The value of the input element, used when submitting an HTML form.  | -         |
-| name             | `string`                                                                                                   | The name of the input element, used when submitting an HTML form.   | -         |
-| size             | `sm` \| `md` \| `lg`                                                                                       | The size of the switch.                                             | `md`      |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                | The color of the switch.                                            | `primary` |
-| thumbIcon        | [ThumbIconProps](#switch-icon-props)                                                                       | The icon to be displayed when the switch is checked.                | -         |
-| startContent     | `ReactNode`                                                                                                | The icon to be displayed at the start of the switch.                | -         |
-| endContent       | `ReactNode`                                                                                                | The icon to be displayed at the end of the switch.                  | -         |
-| isSelected       | `boolean`                                                                                                  | Whether the element should be selected (controlled).                | -         |
-| defaultSelected  | `boolean`                                                                                                  | Whether the element should be selected (uncontrolled).              | -         |
-| isRequired       | `boolean`                                                                                                  | Whether user input is required on the input before form submission. | `false`   |
-| isReadOnly       | `boolean`                                                                                                  | Whether the input can be selected but not changed by the user.      | -         |
-| isDisabled       | `boolean`                                                                                                  | Whether the switch is disabled.                                     | `false`   |
-| disableAnimation | `boolean`                                                                                                  | Whether the animation should be disabled.                           | `false`   |
-| classNames       | `Record<"base"｜ "wrapper"｜ "thumb"｜ "label" ｜ "startContent" ｜ "endContent" ｜ "thumbIcon" , string>` | Allows to set custom class names for the switch slots.              | -         |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The label of the switch.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "string",
+      description: "The value of the input element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "name",
+      type: "string", 
+      description: "The name of the input element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the switch.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the switch.",
+      default: "primary"
+    },
+    {
+      attribute: "thumbIcon",
+      type: "ThumbIconProps",
+      description: "The icon to be displayed when the switch is checked.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The icon to be displayed at the start of the switch.",
+      default: "-"
+    },
+    {
+      attribute: "endContent", 
+      type: "ReactNode",
+      description: "The icon to be displayed at the end of the switch.",
+      default: "-"
+    },
+    {
+      attribute: "isSelected",
+      type: "boolean",
+      description: "Whether the element should be selected (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelected",
+      type: "boolean",
+      description: "Whether the element should be selected (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user input is required on the input before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the input can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the switch is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the animation should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\"｜ \"wrapper\"｜ \"thumb\"｜ \"label\" ｜ \"startContent\" ｜ \"endContent\" ｜ \"thumbIcon\" , string>",
+      description: "Allows to set custom class names for the switch slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Switch Events
 
-| Attribute     | Type                                  | Description                                                                                                                                              |
-| ------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| onChange      | `React.ChangeEvent<HTMLInputElement>` | Handler that is called when the element's selection state changes. You can pull out the new checked state by accessing `event.target.checked` (boolean). |
-| onValueChange | `(isSelected: boolean) => void`       | Handler that is called when the element's selection state changes.                                                                                       |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "React.ChangeEvent<HTMLInputElement>",
+      description: "Handler that is called when the element's selection state changes. You can pull out the new checked state by accessing event.target.checked (boolean).",
+      default: "-"
+    },
+    {
+      attribute: "onValueChange",
+      type: "(isSelected: boolean) => void",
+      description: "Handler that is called when the element's selection state changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Types
 
diff --git a/apps/docs/content/docs/components/table.mdx b/apps/docs/content/docs/components/table.mdx
index f496a12e57..1ea4d1bd08 100644
--- a/apps/docs/content/docs/components/table.mdx
+++ b/apps/docs/content/docs/components/table.mdx
@@ -425,108 +425,395 @@ You can customize the `Table` component by passing custom Tailwind CSS classes t
 
 ### Table Props
 
-| Attribute                     | Type                                                                                                                                                          | Description                                                                                                  | Default     |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ----------- |
-| children\*                    | `ReactNode[]`                                                                                                                                                 | The elements that make up the table. Includes the `TableHeader`, `TableBody`, `TableColumn`, and `TableRow`. | -           |
-| color                         | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                   | Color of the selected rows, and checkboxes.                                                                  | `default`   |
-| layout                        | `auto` \| `fixed`                                                                                                                                             | Defines the layout of the table.                                                                             | `auto`      |
-| radius                        | `none` \| `sm` \| `md` \| `lg`                                                                                                                                | The border-radius of the table.                                                                              | `lg`        |
-| shadow                        | `none` \| `sm` \| `md` \| `lg`                                                                                                                                | The shadow size of the table.                                                                                | `sm`        |
-| hideHeader                    | `boolean`                                                                                                                                                     | Whether to hide the table header.                                                                            | `false`     |
-| isStriped                     | `boolean`                                                                                                                                                     | Whether to apply striped rows in the table.                                                                  | `false`     |
-| isCompact                     | `boolean`                                                                                                                                                     | Whether to apply compact style to the table.                                                                 | `false`     |
-| isHeaderSticky                | `boolean`                                                                                                                                                     | Whether to make the table header sticky.                                                                     | `false`     |
-| fullWidth                     | `boolean`                                                                                                                                                     | Whether to make the table full width.                                                                        | `true`      |
-| removeWrapper                 | `boolean`                                                                                                                                                     | Whether the table base container should not be rendered.                                                     | `false`     |
-| BaseComponent                 | `React.ComponentType<any>`                                                                                                                                    | A custom wrapper component for the table.                                                                    | `div`       |
-| topContent                    | `ReactNode`                                                                                                                                                   | Provides content to include a component in the top of the table.                                             | -           |
-| bottomContent                 | `ReactNode`                                                                                                                                                   | Provides content to include a component in the bottom of the table.                                          | -           |
-| topContentPlacement           | `inside` \| `outside`                                                                                                                                         | Where to place the `topContent` component.                                                                   | `inside`    |
-| bottomContentPlacement        | `inside` \| `outside`                                                                                                                                         | Where to place the `bottomContent` component.                                                                | `inside`    |
-| showSelectionCheckboxes       | `boolean`                                                                                                                                                     | Whether the row selection checkboxes should be displayed.                                                    | -           |
-| sortDescriptor                | [SortDescriptor](#sort-descriptor)                                                                                                                            | The current sorted column and direction.                                                                     | -           |
-| selectedKeys                  | [Selection](#selection)                                                                                                                                       | The currently selected keys in the collection (controlled).                                                  | -           |
-| defaultSelectedKeys           | [Selection](#selection)                                                                                                                                       | The initial selected keys in the collection (uncontrolled).                                                  | -           |
-| disabledKeys                  | [Selection](#selection)                                                                                                                                       | A set of keys for rows that are disabled.                                                                    | -           |
-| disallowEmptySelection        | `boolean`                                                                                                                                                     | Whether the collection allows empty selection.                                                               | -           |
-| selectionMode                 | `single` \| `multiple` \| `none`                                                                                                                              | The type of selection that is allowed in the collection.                                                     | `none`      |
-| selectionBehavior             | `toggle` \| `replace`                                                                                                                                         | How multiple selection should behave in the collection.                                                      | `toggle`    |
-| disabledBehavior              | `selection` \| `all`                                                                                                                                          | Whether `disabledKeys` applies to all interactions, or only selection.                                       | `selection` |
-| allowDuplicateSelectionEvents | `boolean`                                                                                                                                                     | Whether `onSelectionChange` should fire even if the new set of keys is the same as the last.                 | -           |
-| disableAnimation              | `boolean`                                                                                                                                                     | Whether to disable the table and checkbox animations.                                                        | `false`     |
-| checkboxesProps               | [CheckboxProps](/docs/components/checkbox/#checkbox-props)                                                                                                    | Props to be passed to the checkboxes.                                                                        | -           |
-| classNames                    | `Record<"base" ｜ "table" ｜ "thead" ｜ "tbody" ｜ "tfoot" ｜ "emptyWrapper" ｜ "loadingWrapper" ｜ "wrapper" ｜ "tr" ｜ "th" ｜ "td" ｜ "sortIcon", string>` | Allows to set custom class names for the dropdown item slots.                                                | -           |
-| isKeyboardNavigationDisabled  | `boolean`                                                                                                                                                     | Whether to disable keyboard navigations or not.                                                              | `false`     |
-### Table Events
-
-| Attribute         | Type                                  | Description                                                         |
-| ----------------- | ------------------------------------- | ------------------------------------------------------------------- |
-| onRowAction       | `(key: React.Key) => void`            | Handler that is called when a user performs an action on the row.   |
-| onCellAction      | `(key: react.Key) => void`            | Handler that is called when a user performs an action on the cell.  |
-| onSelectionChange | `(keys: Selection) => any`            | Handler that is called when the selection changes.                  |
-| onSortChange      | `(descriptor: SortDescriptor) => any` | Handler that is called when the sorted column or direction changes. |
-
-<Spacer y={2} />
-
-#### TableHeader Props
-
-| Attribute  | Type          | Description                                                                                                 | Default |
-| ---------- | ------------- | ----------------------------------------------------------------------------------------------------------- | ------- |
-| children\* | `ReactNode[]` | A list of Column(s) or a function. If the latter, a list of columns must be provided using the columns prop | -       |
-| columns    | `T[]`         | A list of table columns.                                                                                    | -       |
-
-<Spacer y={2} />
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The elements that make up the table. Includes the TableHeader, TableBody, TableColumn, and TableRow.",
+      default: "-"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "Color of the selected rows, and checkboxes.",
+      default: "default"
+    },
+    {
+      attribute: "layout",
+      type: "auto | fixed",
+      description: "Defines the layout of the table.",
+      default: "auto"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg",
+      description: "The border-radius of the table.",
+      default: "lg"
+    },
+    {
+      attribute: "shadow",
+      type: "none | sm | md | lg",
+      description: "The shadow size of the table.",
+      default: "sm"
+    },
+    {
+      attribute: "hideHeader",
+      type: "boolean",
+      description: "Whether to hide the table header.",
+      default: "false"
+    },
+    {
+      attribute: "isStriped",
+      type: "boolean",
+      description: "Whether to apply striped rows in the table.",
+      default: "false"
+    },
+    {
+      attribute: "isCompact",
+      type: "boolean", 
+      description: "Whether to apply compact style to the table.",
+      default: "false"
+    },
+    {
+      attribute: "isHeaderSticky",
+      type: "boolean",
+      description: "Whether to make the table header sticky.",
+      default: "false"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether to make the table full width.",
+      default: "true"
+    },
+    {
+      attribute: "removeWrapper",
+      type: "boolean",
+      description: "Whether the table base container should not be rendered.",
+      default: "false"
+    },
+    {
+      attribute: "BaseComponent",
+      type: "React.ComponentType<any>",
+      description: "A custom wrapper component for the table.",
+      default: "div"
+    },
+    {
+      attribute: "topContent",
+      type: "ReactNode",
+      description: "Provides content to include a component in the top of the table.",
+      default: "-"
+    },
+    {
+      attribute: "bottomContent",
+      type: "ReactNode", 
+      description: "Provides content to include a component in the bottom of the table.",
+      default: "-"
+    },
+    {
+      attribute: "topContentPlacement",
+      type: "inside | outside",
+      description: "Where to place the topContent component.",
+      default: "inside"
+    },
+    {
+      attribute: "bottomContentPlacement",
+      type: "inside | outside",
+      description: "Where to place the bottomContent component.",
+      default: "inside"
+    },
+    {
+      attribute: "showSelectionCheckboxes",
+      type: "boolean",
+      description: "Whether the row selection checkboxes should be displayed.",
+      default: "-"
+    },
+    {
+      attribute: "sortDescriptor",
+      type: "SortDescriptor",
+      description: "The current sorted column and direction.",
+      default: "-"
+    },
+    {
+      attribute: "selectedKeys",
+      type: "Selection",
+      description: "The currently selected keys in the collection (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelectedKeys",
+      type: "Selection",
+      description: "The initial selected keys in the collection (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "disabledKeys",
+      type: "Selection",
+      description: "A set of keys for rows that are disabled.",
+      default: "-"
+    },
+    {
+      attribute: "disallowEmptySelection",
+      type: "boolean",
+      description: "Whether the collection allows empty selection.",
+      default: "-"
+    },
+    {
+      attribute: "selectionMode",
+      type: "single | multiple | none",
+      description: "The type of selection that is allowed in the collection.",
+      default: "none"
+    },
+    {
+      attribute: "selectionBehavior",
+      type: "toggle | replace",
+      description: "How multiple selection should behave in the collection.",
+      default: "toggle"
+    },
+    {
+      attribute: "disabledBehavior",
+      type: "selection | all",
+      description: "Whether disabledKeys applies to all interactions, or only selection.",
+      default: "selection"
+    },
+    {
+      attribute: "allowDuplicateSelectionEvents",
+      type: "boolean",
+      description: "Whether onSelectionChange should fire even if the new set of keys is the same as the last.",
+      default: "-"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the table and checkbox animations.",
+      default: "false"
+    },
+    {
+      attribute: "checkboxesProps",
+      type: "CheckboxProps",
+      description: "Props to be passed to the checkboxes.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'base' | 'table' | 'thead' | 'tbody' | 'tfoot' | 'emptyWrapper' | 'loadingWrapper' | 'wrapper' | 'tr' | 'th' | 'td' | 'sortIcon', string>",
+      description: "Allows to set custom class names for the dropdown item slots.",
+      default: "-"
+    },
+    {
+      attribute: "isKeyboardNavigationDisabled",
+      type: "boolean",
+      description: "Whether to disable keyboard navigations or not.",
+      default: "false"
+    }
+  ]}
+/>
 
-#### TableColumn Props
+### Table Events
 
-| Attribute     | Type                         | Description                                                                                            | Default |
-| ------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------ | ------- |
-| children\*    | `ReactNode`                  | Static child columns or content to render as the column header                                         | -       |
-| align         | `start` \| `center` \| `end` | The alignment of the column's contents relative to its allotted width                                  | `start` |
-| hideHeader    | `boolean`                    | Whether the column should hide its header text                                                         | `false` |
-| allowsSorting | `boolean`                    | Whether the column allows sorting                                                                      | -       |
-| isRowHeader   | `boolean`                    | Whether a column is a row header and should be announced by assistive technology during row navigation | -       |
-| textValue     | `string`                     | A string representation of the column's contents, used for accessibility announcements                 | -       |
-| width         | `string` \| `number`         | The width of the column                                                                                | -       |
-| minWidth      | `string` \| `number`         | The minimum width of the column                                                                        | -       |
-| maxWidth      | `string` \| `number`         | The maximum width of the column                                                                        | -       |
+<APITable
+  data={[
+    {
+      attribute: "onRowAction",
+      type: "(key: React.Key) => void",
+      description: "Handler that is called when a user performs an action on the row.",
+      default: "-"
+    },
+    {
+      attribute: "onCellAction",
+      type: "(key: React.Key) => void",
+      description: "Handler that is called when a user performs an action on the cell.",
+      default: "-"
+    },
+    {
+      attribute: "onSelectionChange",
+      type: "(keys: Selection) => any",
+      description: "Handler that is called when the selection changes.",
+      default: "-"
+    },
+    {
+      attribute: "onSortChange",
+      type: "(descriptor: SortDescriptor) => any",
+      description: "Handler that is called when the sorted column or direction changes.",
+      default: "-"
+    }
+  ]}
+/>
 
-<Spacer y={2} />
+### TableHeader Props
+
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "A list of Column(s) or a function. If the latter, a list of columns must be provided using the columns prop",
+      default: "-"
+    },
+    {
+      attribute: "columns",
+      type: "T[]",
+      description: "A list of table columns.",
+      default: "-"
+    }
+  ]}
+/>
 
-#### TableBody Props
+### TableColumn Props
+
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "Static child columns or content to render as the column header",
+      default: "-"
+    },
+    {
+      attribute: "align",
+      type: "start | center | end",
+      description: "The alignment of the column's contents relative to its allotted width",
+      default: "start"
+    },
+    {
+      attribute: "hideHeader",
+      type: "boolean",
+      description: "Whether the column should hide its header text",
+      default: "false"
+    },
+    {
+      attribute: "allowsSorting",
+      type: "boolean",
+      description: "Whether the column allows sorting",
+      default: "-"
+    },
+    {
+      attribute: "isRowHeader",
+      type: "boolean",
+      description: "Whether a column is a row header and should be announced by assistive technology during row navigation",
+      default: "-"
+    },
+    {
+      attribute: "textValue",
+      type: "string",
+      description: "A string representation of the column's contents, used for accessibility announcements",
+      default: "-"
+    },
+    {
+      attribute: "width",
+      type: "string | number",
+      description: "The width of the column",
+      default: "-"
+    },
+    {
+      attribute: "minWidth",
+      type: "string | number",
+      description: "The minimum width of the column",
+      default: "-"
+    },
+    {
+      attribute: "maxWidth",
+      type: "string | number",
+      description: "The maximum width of the column",
+      default: "-"
+    }
+  ]}
+/>
 
-| Attribute      | Type                                                          | Description                                                                                   | Default |
-| -------------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ------- |
-| children\*     | `RowElement` \| `RowElement[]` \| `((item: T) => RowElement)` | The contents of the table body. Supports static items or a function for dynamic rendering     | -       |
-| items          | `Iterable<T>`                                                 | A list of row objects in the table body used when dynamically rendering rows                  | -       |
-| isLoading      | `boolean`                                                     | Whether the table body is loading.                                                            | -       |
-| loadingState   | [LoadingState](#loading-state)                                | Handler that is called when more items should be loaded, e.g. while scrolling near the bottom | -       |
-| loadingContent | `ReactNode`                                                   | Content to display while loading more items                                                   | -       |
-| emptyContent   | `ReactNode`                                                   | Content to display when there are no items in the table body                                  | -       |
+### TableBody Props
+
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "RowElement | RowElement[] | ((item: T) => RowElement)",
+      description: "The contents of the table body. Supports static items or a function for dynamic rendering",
+      default: "-"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "A list of row objects in the table body used when dynamically rendering rows",
+      default: "-"
+    },
+    {
+      attribute: "isLoading",
+      type: "boolean",
+      description: "Whether the table body is loading.",
+      default: "-"
+    },
+    {
+      attribute: "loadingState",
+      type: "LoadingState",
+      description: "Handler that is called when more items should be loaded, e.g. while scrolling near the bottom",
+      default: "-"
+    },
+    {
+      attribute: "loadingContent",
+      type: "ReactNode",
+      description: "Content to display while loading more items",
+      default: "-"
+    },
+    {
+      attribute: "emptyContent",
+      type: "ReactNode",
+      description: "Content to display when there are no items in the table body",
+      default: "-"
+    }
+  ]}
+/>
 
 ### TableBody Events
 
-| Attribute  | Type        | Description                                                                  |
-| ---------- | ----------- | ---------------------------------------------------------------------------- |
-| onLoadMore | `() => any` | A list of row objects in the table body used when dynamically rendering rows |
-
-<Spacer y={2} />
-
-#### TableRow Props
-
-| Attribute  | Type                                               | Description                                                                     | Default |
-| ---------- | -------------------------------------------------- | ------------------------------------------------------------------------------- | ------- |
-| children\* | `CellElement` \| `CellElement[]` \| `CellRenderer` | Rendered contents of the row or row child items                                 | -       |
-| textValue  | `string`                                           | A string representation of the row's contents, used for features like typeahead | -       |
-
-<Spacer y={2} />
+<APITable
+  data={[
+    {
+      attribute: "onLoadMore",
+      type: "() => any",
+      description: "A list of row objects in the table body used when dynamically rendering rows",
+      default: "-"
+    }
+  ]}
+/>
 
-#### TableCell Props
+### TableRow Props
+
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "CellElement | CellElement[] | CellRenderer",
+      description: "Rendered contents of the row or row child items",
+      default: "-"
+    },
+    {
+      attribute: "textValue",
+      type: "string",
+      description: "A string representation of the row's contents, used for features like typeahead",
+      default: "-"
+    }
+  ]}
+/>
 
-| Attribute  | Type        | Description                                                                     | Default |
-| ---------- | ----------- | ------------------------------------------------------------------------------- | ------- |
-| children\* | `ReactNode` | The contents of the cell                                                        | -       |
-| textValue  | `string`    | A string representation of the row's contents, used for features like typeahead | -       |
+### TableCell Props
+
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The contents of the cell",
+      default: "-"
+    },
+    {
+      attribute: "textValue",
+      type: "string",
+      description: "A string representation of the row's contents, used for features like typeahead",
+      default: "-"
+    }
+  ]}
+/>
 
 ---
 
diff --git a/apps/docs/content/docs/components/tabs.mdx b/apps/docs/content/docs/components/tabs.mdx
index e097008f79..69e9702f99 100644
--- a/apps/docs/content/docs/components/tabs.mdx
+++ b/apps/docs/content/docs/components/tabs.mdx
@@ -243,53 +243,213 @@ You can customize the `Tabs` component by passing custom Tailwind CSS classes to
 
 ### Tabs Props
 
-| Attribute              | Type                                                                                                   | Description                                                                                                  | Default     |
-| ---------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ----------- |
-| children\*             | `ReactNode` \| `((item: T) => ReactElement)`                                                           | The list of tabs.                                                                                            | -           |
-| variant                | `solid` \| `bordered` \| `light` \| `underlined`                                                       | The tabs appearance style.                                                                                   | `solid`     |
-| color                  | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                            | The tabs color theme.                                                                                        | `default`   |
-| size                   | `sm` \| `md` \| `lg`                                                                                   | The tabs size.                                                                                               | `md`        |
-| radius                 | `none` \| `sm` \| `md` \| `lg` \| `full`                                                               | The tabs border radius.                                                                                      | -           |
-| fullWidth              | `boolean`                                                                                              | Whether the tabs should take the full width of its parent.                                                   | `false`     |
-| items                  | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | The list of tabs (dynamic).                                                                                  | -           |
-| disabledKeys           | `React.Key[]`                                                                                          | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.      | -           |
-| selectedKey            | `React.Key`                                                                                            | The key for the currently selected item.                                                                     | -           |
-| defaultSelectedKey     | `React.Key`                                                                                            | The key for the initially selected item.                                                                     | -           |
-| shouldSelectOnPressUp  | `boolean`                                                                                              | Whether the tabs selection should occur on press up instead of press down.                                   | `true`      |
-| keyboardActivation     | `automatic` \| `manual`                                                                                | Whether tabs are activated automatically on focus or manually.                                               | `automatic` |
-| motionProps            | [MotionProps](#motion-props)                                                                           | The props to modify the cursor framer motion animation. Use the `variants` API to create your own animation. | -           |
-| disableCursorAnimation | `boolean`                                                                                              | Whether the cursor should be hidden.                                                                         | `false`     |
-| isDisabled             | `boolean`                                                                                              | Whether the tab list should be disabled.                                                                     | `false`     |
-| disableAnimation       | `boolean`                                                                                              | Whether the tab list should be animated.                                                                     | `false`     |
-| classNames             | `Record<"base"｜ "tabList"｜ "tab"｜ "tabContent"｜ "cursor" ｜ "panel", string>`                      | Allows to set custom class names for the card slots.                                                         | -           |
-| placement            | `top` \| `bottom` \| `start` \| `end`                                                                  | The position of the tabs.                                                                                    | `top`       |
-| isVertical             | `boolean`                                                                                              | Whether the tabs are vertical.                                                                               | `false`     |
-| destroyInactiveTabPanel | `boolean`                     | Whether to destroy inactive tab panel when switching tabs. Inactive tab panels are inert and cannot be interacted with.                                                          | `true`  |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode | ((item: T) => ReactElement)",
+      description: "The list of tabs.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "solid | bordered | light | underlined",
+      description: "The tabs appearance style.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The tabs color theme.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The tabs size.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The tabs border radius.",
+      default: "-"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the tabs should take the full width of its parent.",
+      default: "false"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "The list of tabs (dynamic).",
+      default: "-"
+    },
+    {
+      attribute: "disabledKeys",
+      type: "React.Key[]",
+      description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+      default: "-"
+    },
+    {
+      attribute: "selectedKey",
+      type: "React.Key",
+      description: "The key for the currently selected item.",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelectedKey",
+      type: "React.Key",
+      description: "The key for the initially selected item.",
+      default: "-"
+    },
+    {
+      attribute: "shouldSelectOnPressUp",
+      type: "boolean",
+      description: "Whether the tabs selection should occur on press up instead of press down.",
+      default: "true"
+    },
+    {
+      attribute: "keyboardActivation",
+      type: "automatic | manual",
+      description: "Whether tabs are activated automatically on focus or manually.",
+      default: "automatic"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The props to modify the cursor framer motion animation. Use the variants API to create your own animation.",
+      default: "-"
+    },
+    {
+      attribute: "disableCursorAnimation",
+      type: "boolean",
+      description: "Whether the cursor should be hidden.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the tab list should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the tab list should be animated.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\"｜ \"tabList\"｜ \"tab\"｜ \"tabContent\"｜ \"cursor\" ｜ \"panel\", string>",
+      description: "Allows to set custom class names for the card slots.",
+      default: "-"
+    },
+    {
+      attribute: "placement",
+      type: "top | bottom | start | end",
+      description: "The position of the tabs.",
+      default: "top"
+    },
+    {
+      attribute: "isVertical",
+      type: "boolean", 
+      description: "Whether the tabs are vertical.",
+      default: "false"
+    },
+    {
+      attribute: "destroyInactiveTabPanel",
+      type: "boolean",
+      description: "Whether to destroy inactive tab panel when switching tabs. Inactive tab panels are inert and cannot be interacted with.",
+      default: "true"
+    }
+  ]}
+/>
 
 ### Tabs Events
 
-| Attribute         | Type                      | Description                                        |
-| ----------------- | ------------------------- | -------------------------------------------------- |
-| onSelectionChange | `(key: React.Key) => any` | Handler that is called when the selection changes. |
+<APITable
+  data={[
+    {
+      attribute: "onSelectionChange",
+      type: "(key: React.Key) => any",
+      description: "Handler that is called when the selection changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Tab Props
 
-| Attribute               | Type                          | Description                                                                                                                                                                      | Default |
-|-------------------------|-------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------|
-| tabRef                  | `RefObject<HTMLButtonElement>`| A ref to the tab item.                                                                                                                                                           | -       |
-| children\*              | `ReactNode`                   | The content of the tab.                                                                                                                                                          | -       |
-| title                   | `ReactNode`                   | The title of the tab.                                                                                                                                                            | -       |
-| titleValue              | `string`                      | A string representation of the item's contents. Use this when the `title` is not readable.                                                                                       | -       |
-| href                    | `string`                      | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                   | -       |
-| target                  | `HTMLAttributeAnchorTarget`   | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                   | -       |
-| rel                     | `string`                      | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                  | -       |
-| download                | `boolean` \| `string`         | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). | -       |
-| ping                    | `string`                      | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                   | -       |
-| referrerPolicy          | `HTMLAttributeReferrerPolicy` | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                 | -       |
-| shouldSelectOnPressUp   | `boolean`                     | Whether the tab selection should occur on press up instead of press down.                                                                                                        | -       |
-
-#### Motion Props
-
-```ts
-export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/
-```
+<APITable
+  data={[
+    {
+      attribute: "tabRef",
+      type: "RefObject<HTMLButtonElement>",
+      description: "A ref to the tab item.",
+      default: "-"
+    },
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The content of the tab.",
+      default: "-"
+    },
+    {
+      attribute: "title",
+      type: "ReactNode",
+      description: "The title of the tab.",
+      default: "-"
+    },
+    {
+      attribute: "titleValue",
+      type: "string",
+      description: "A string representation of the item's contents. Use this when the title is not readable.",
+      default: "-"
+    },
+    {
+      attribute: "href",
+      type: "string",
+      description: "A URL to link to. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "target",
+      type: "HTMLAttributeAnchorTarget",
+      description: "The target window for the link. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "rel",
+      type: "string",
+      description: "The relationship between the linked resource and the current page. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "download",
+      type: "boolean | string",
+      description: "Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "ping",
+      type: "string",
+      description: "A space-separated list of URLs to ping when the link is followed. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "referrerPolicy",
+      type: "HTMLAttributeReferrerPolicy",
+      description: "How much of the referrer to send when following the link. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "shouldSelectOnPressUp",
+      type: "boolean",
+      description: "Whether the tab selection should occur on press up instead of press down.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/textarea.mdx b/apps/docs/content/docs/components/textarea.mdx
index 4c3725770b..8b0edc7b67 100644
--- a/apps/docs/content/docs/components/textarea.mdx
+++ b/apps/docs/content/docs/components/textarea.mdx
@@ -147,43 +147,212 @@ You can use the `value` and `onValueChange` properties to control the input valu
 
 ### Textarea Props
 
-| Attribute          | Type                                                                                                               | Description                                                                                                                                                                                                                                             | Default   |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| children           | `ReactNode`                                                                                                        | The content of the textarea.                                                                                                                                                                                                                            | -         |
-| minRows            | `number`                                                                                                           | The minimum number of rows to display.                                                                                                                                                                                                                  | `3`       |
-| maxRows            | `number`                                                                                                           | Maximum number of rows up to which the textarea can grow.                                                                                                                                                                                               | `8`       |
-| cacheMeasurements  | `boolean`                                                                                                          | Reuse previously computed measurements when computing height of textarea.                                                                                                                                                                               | `false`   |
-| variant            | `flat` \| `bordered` \| `faded` \| `underlined`                                                                    | The variant of the textarea.                                                                                                                                                                                                                            | `flat`    |
-| color              | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                        | The color of the textarea.                                                                                                                                                                                                                              | `default` |
-| size               | `sm`\|`md`\|`lg`                                                                                                   | The size of the textarea.                                                                                                                                                                                                                               | `md`      |
-| radius             | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                           | The radius of the textarea.                                                                                                                                                                                                                             | -         |
-| label              | `ReactNode`                                                                                                        | The content to display as the label.                                                                                                                                                                                                                    | -         |
-| value              | `string`                                                                                                           | The current value of the textarea (controlled).                                                                                                                                                                                                         | -         |
-| defaultValue       | `string`                                                                                                           | The default value of the textarea (uncontrolled).                                                                                                                                                                                                       | -         |
-| placeholder        | `string`                                                                                                           | The placeholder of the textarea.                                                                                                                                                                                                                        | -         |
-| startContent       | `ReactNode`                                                                                                        | Element to be rendered in the left side of the input.                                                                                                                                                                                                   | -         |
-| endContent         | `ReactNode`                                                                                                        | Element to be rendered in the right side of the input.                                                                                                                                                                                                  | -         |
-| description        | `ReactNode`                                                                                                        | A description for the textarea. Provides a hint such as specific requirements for what to choose.                                                                                                                                                       | -         |
-| errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                              | An error message for the textarea.                                                                                                                                                                                                                      | -         |
-| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                  | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop. | -         |
-| validationBehavior | `native` \| `aria`                                                                                                 | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.                                                                                          | `aria`    |
-| labelPlacement     | `inside` \| `outside` \| `outside-left`                                                                            | The position of the label.                                                                                                                                                                                                                              | `inside`  |
-| fullWidth          | `boolean`                                                                                                          | Whether the textarea should take up the width of its parent.                                                                                                                                                                                            | `true`    |
-| isRequired         | `boolean`                                                                                                          | Whether user input is required on the textarea before form submission.                                                                                                                                                                                  | `false`   |
-| isReadOnly         | `boolean`                                                                                                          | Whether the textarea can be selected but not changed by the user.                                                                                                                                                                                       |           |
-| isDisabled         | `boolean`                                                                                                          | Whether the textarea is disabled.                                                                                                                                                                                                                       | `false`   |
-| isClearable        | `boolean`                                                                                                          | Whether the textarea should have a clear button.                                                                                                                                                                                                        | `false`   |
-| isInvalid          | `boolean`                                                                                                          | Whether the textarea is invalid.                                                                                                                                                                                                                        | `false`   |
-| validationState    | `valid` \| `invalid`                                                                                               | Whether the textarea should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                                                                                                                | -         |
-| disableAutosize    | `boolean`                                                                                                          | Whether the textarea auto vertically resize should be disabled.                                                                                                                                                                                         | `false`   |
-| disableAnimation   | `boolean`                                                                                                          | Whether the textarea should be animated.                                                                                                                                                                                                                | `false`   |
-| classNames         | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper" ｜ "input" ｜ "description" ｜ "errorMessage", string>` | Allows to set custom class names for the checkbox slots.                                                                                                                                                                                                | -         |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content of the textarea.",
+      default: "-"
+    },
+    {
+      attribute: "minRows",
+      type: "number",
+      description: "The minimum number of rows to display.",
+      default: "3"
+    },
+    {
+      attribute: "maxRows",
+      type: "number", 
+      description: "Maximum number of rows up to which the textarea can grow.",
+      default: "8"
+    },
+    {
+      attribute: "cacheMeasurements",
+      type: "boolean",
+      description: "Reuse previously computed measurements when computing height of textarea.",
+      default: "false"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the textarea.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the textarea.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the textarea.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the textarea.",
+      default: "-"
+    },
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "string",
+      description: "The current value of the textarea (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "string",
+      description: "The default value of the textarea (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "placeholder",
+      type: "string",
+      description: "The placeholder of the textarea.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the left side of the input.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the right side of the input.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the textarea. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | ((v: ValidationResult) => ReactNode)",
+      description: "An error message for the textarea.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: string) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation or ARIA.",
+      default: "aria"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the textarea should take up the width of its parent.",
+      default: "true"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user input is required on the textarea before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the textarea can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the textarea is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isClearable",
+      type: "boolean",
+      description: "Whether the textarea should have a clear button.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the textarea is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "validationState",
+      type: "valid | invalid",
+      description: "Whether the textarea should display its \"valid\" or \"invalid\" visual styling. (Deprecated) use isInvalid instead.",
+      default: "-"
+    },
+    {
+      attribute: "disableAutosize",
+      type: "boolean",
+      description: "Whether the textarea auto vertically resize should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the textarea should be animated.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\" | \"label\" | \"inputWrapper\" | \"innerWrapper\" | \"input\" | \"description\" | \"errorMessage\", string>",
+      description: "Allows to set custom class names for the checkbox slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Input Events
 
-| Attribute      | Type                                                    | Description                                                                                                                         |
-| -------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| onChange       | `React.ChangeEvent <HTMLInputElement>`                  | Handler that is called when the element's value changes. You can pull out the new value by accessing `event.target.value` (string). |
-| onValueChange  | `(value: string) => void`                               | Handler that is called when the element's value changes.                                                                            |
-| onClear        | `() => void`                                            | Handler that is called when the clear button is clicked.                                                                            |
-| onHeightChange | `(height: number, meta: { rowHeight: number }) => void` | Handler that is called when the height of the textarea changes.                                                                     |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "React.ChangeEvent<HTMLInputElement>",
+      description: "Handler that is called when the element's value changes. You can pull out the new value by accessing event.target.value (string).",
+      default: "-"
+    },
+    {
+      attribute: "onValueChange",
+      type: "(value: string) => void",
+      description: "Handler that is called when the element's value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onClear",
+      type: "() => void",
+      description: "Handler that is called when the clear button is clicked.",
+      default: "-"
+    },
+    {
+      attribute: "onHeightChange",
+      type: "(height: number, meta: { rowHeight: number }) => void",
+      description: "Handler that is called when the height of the textarea changes.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/time-input.mdx b/apps/docs/content/docs/components/time-input.mdx
index 24c4ac0b05..38417e377d 100644
--- a/apps/docs/content/docs/components/time-input.mdx
+++ b/apps/docs/content/docs/components/time-input.mdx
@@ -209,43 +209,206 @@ By default, `TimeInput` displays times in either 12 or 24 hour hour format depen
 
 ### TimeInput Props
 
-| Attribute               | Type                                                                                                                                               | Description                                                                                                                                                        | Default   |
-| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- |
-| label                   | `ReactNode`                                                                                                                                        | The content to display as the label.                                                                                                                               | -         |
-| name                    | `string`                                                                                                                                           | The name of the time input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). | -         |
-| value                   | `TimeValue \|  null`                                                                                                                               | The current value (controlled).                                                                                                                                    | -         |
-| defaultValue            | `TimeValue \|  null`                                                                                                                               | The default value (uncontrolled).                                                                                                                                  | -         |
-| variant                 | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                    | The variant of the time input.                                                                                                                                     | `flat`    |
-| color                   | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                        | The color of the time input.                                                                                                                                       | `default` |
-| size                    | `sm` \| `md` \| `lg`                                                                                                                               | The size of the time input.                                                                                                                                        | `md`      |
-| radius                  | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                           | The radius of the time input.                                                                                                                                      | -         |
-| hourCycle               | `12 \| 24`                                                                                                                                         | Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.                                                          | -         |
-| granularity             | `'hour' \| 'minute' \| 'second'`                                                                                                                   | Determines the smallest unit that is displayed in the time picker.                                                                                                 | `minute`  |
-| hideTimeZone            | `boolean`                                                                                                                                          | Whether to hide the time zone abbreviation.                                                                                                                        | -         |
-| labelPlacement          | `inside` \| `outside` \| `outside-left`                                                                                                            | The position of the label.                                                                                                                                         | `inside`  |
-| shouldForceLeadingZeros | `boolean`                                                                                                                                          | Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale.                                                       | `true`    |
-| placeholderValue        | `TimeValue`                                                                                                                                        | A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults to 12:00 AM or 00:00 depending on the hour cycle.       | -         |
-| minValue                | `TimeValue`                                                                                                                                        | The minimum allowed time that a user may select.                                                                                                                   | -         |
-| maxValue                | `TimeValue`                                                                                                                                        | The maximum allowed time that a user may select.                                                                                                                   | -         |
-| isDisabled              | `boolean`                                                                                                                                          | Whether the time input is disabled.                                                                                                                                | -         |
-| isReadOnly              | `boolean`                                                                                                                                          | Whether the time input can be selected but not changed by the user.                                                                                                | -         |
-| isRequired              | `boolean`                                                                                                                                          | Whether user time input is required on the time input before form submission.                                                                                      | -         |
-| isInvalid               | `boolean`                                                                                                                                          | Whether the time input is invalid.                                                                                                                                 | -         |
-| autoFocus               | `boolean`                                                                                                                                          | Whether the element should receive focus on render.                                                                                                                | -         |
-| description             | `ReactNode`                                                                                                                                        | A description for the field. Provides a hint such as specific requirements for what to choose.                                                                     | -         |
-| errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                  | An error message for the field.                                                                                                                                    | -         |
-| validate                | `(value: MappedTimeValue<TimeValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                                               | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -         |
-| validationBehavior      | `native` \| `aria`                                                                                                                                 | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.     | `aria`    |
-| disableAnimation        | `boolean`                                                                                                                                          | Whether to disable the animation of the time input.                                                                                                                | -         |
-| classNames              | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper" ｜ "segment" ｜ "helperWrapper" ｜ "input" ｜ "description" ｜ "errorMessage", string>` | Allows to set custom class names for the time input slots.                                                                                                           | -         |
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "name",
+      type: "string",
+      description: "The name of the time input element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "TimeValue | null",
+      description: "The current value (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "TimeValue | null",
+      description: "The default value (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the time input.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the time input.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the time input.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the time input.",
+      default: "-"
+    },
+    {
+      attribute: "hourCycle",
+      type: "12 | 24",
+      description: "Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.",
+      default: "-"
+    },
+    {
+      attribute: "granularity",
+      type: "hour | minute | second",
+      description: "Determines the smallest unit that is displayed in the time picker.",
+      default: "minute"
+    },
+    {
+      attribute: "hideTimeZone",
+      type: "boolean",
+      description: "Whether to hide the time zone abbreviation.",
+      default: "-"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "shouldForceLeadingZeros",
+      type: "boolean",
+      description: "Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale.",
+      default: "true"
+    },
+    {
+      attribute: "placeholderValue",
+      type: "TimeValue",
+      description: "A placeholder time that influences the format of the placeholder shown when no value is selected.",
+      default: "-"
+    },
+    {
+      attribute: "minValue",
+      type: "TimeValue",
+      description: "The minimum allowed time that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "maxValue",
+      type: "TimeValue",
+      description: "The maximum allowed time that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the time input is disabled.",
+      default: "-"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the time input can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user time input is required on the time input before form submission.",
+      default: "-"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the time input is invalid.",
+      default: "-"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether the element should receive focus on render.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the field. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | (v: ValidationResult) => ReactNode",
+      description: "An error message for the field.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: MappedTimeValue<TimeValue>) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation or ARIA.",
+      default: "aria"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation of the time input.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\" | \"label\" | \"inputWrapper\" | \"innerWrapper\" | \"segment\" | \"helperWrapper\" | \"input\" | \"description\" | \"errorMessage\", string>",
+      description: "Allows to set custom class names for the time input slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### TimeInput Events
 
-| Attribute     | Type                                          | Description                                                     |
-| ------------- | --------------------------------------------- | --------------------------------------------------------------- |
-| onFocus       | `(e: FocusEvent<Target>) => void`             | Handler that is called when the element receives focus.         |
-| onBlur        | `(e: FocusEvent<Target>) => void`             | Handler that is called when the element loses focus.            |
-| onFocusChange | `(isFocused: boolean) => void`                | Handler that is called when the element's focus status changes. |
-| onKeyDown     | `(e: KeyboardEvent) => void`                  | Handler that is called when a key is pressed.                   |
-| onKeyUp       | `(e: KeyboardEvent) => void`                  | Handler that is called when a key is released.                  |
-| onChange      | `(value: MappedTimeValue<TimeValue>) => void` | Handler that is called when the value changes.                  |
+<APITable
+  data={[
+    {
+      attribute: "onFocus",
+      type: "(e: FocusEvent<Target>) => void",
+      description: "Handler that is called when the element receives focus."
+    },
+    {
+      attribute: "onBlur",
+      type: "(e: FocusEvent<Target>) => void",
+      description: "Handler that is called when the element loses focus."
+    },
+    {
+      attribute: "onFocusChange",
+      type: "(isFocused: boolean) => void",
+      description: "Handler that is called when the element's focus status changes."
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is pressed."
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is released."
+    },
+    {
+      attribute: "onChange",
+      type: "(value: MappedTimeValue<TimeValue>) => void",
+      description: "Handler that is called when the value changes."
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/tooltip.mdx b/apps/docs/content/docs/components/tooltip.mdx
index 8bcb0ba78e..3ef41a00da 100644
--- a/apps/docs/content/docs/components/tooltip.mdx
+++ b/apps/docs/content/docs/components/tooltip.mdx
@@ -126,47 +126,197 @@ You can customize the `Tooltip` component by passing custom Tailwind CSS classes
 
 ### Tooltip Props
 
-| Attribute                 | Type                                                                        | Description                                                                                                  | Default         |
-| ------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | --------------- |
-| children\*                | `ReactNode[]`                                                               | The children to render. Usually a trigger element.                                                           | -               |
-| content                   | `ReactNode`                                                                 | The content to render inside the tooltip.                                                                    | -               |
-| size                      | `sm` \| `md` \| `lg`                                                        | The tooltip size. This change the `content` font size.                                                       | `md`            |
-| color                     | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The tooltip color theme.                                                                                     | `default`       |
-| radius                    | `none` \| `sm` \| `md` \| `lg` \| `full`                                    | The tooltip border radius.                                                                                   | `md`            |
-| shadow                    | `none` \| `sm` \| `md` \| `lg`                                              | The tooltip shadow.                                                                                          | `sm`            |
-| placement                 | [TooltipPlacement](#tooltip-placement)                                      | The placement of the tooltip relative to its trigger reference.                                              | `top`           |
-| delay                     | `number`                                                                    | The delay in milliseconds before the tooltip opens.                                                          | `0`           |
-| closeDelay                | `number`                                                                    | The delay in milliseconds before the tooltip closes.                                                         | `500`             |
-| isOpen                    | `boolean`                                                                   | Whether the tooltip is open by default (controlled).                                                         | -               |
-| defaultOpen               | `boolean`                                                                   | Whether the tooltip is open by default (uncontrolled).                                                       | -               |
-| offset(px)                | `number`                                                                    | The distance or margin between the reference and popper. It is used internally to create an offset modifier. | `7`             |
-| containerPadding(px)      | `number`                                                                    | The placement padding that should be applied between the element and its surrounding container.              | `12`            |
-| crossOffset(px)           | `number`                                                                    | The additional offset applied along the cross axis between the element and its anchor element.               | `0`             |
-| showArrow                 | `boolean`                                                                   | Whether the tooltip should have an arrow.                                                                    | `false`         |
-| shouldFlip                | `boolean`                                                                   | Whether the tooltip should change its placement and flip when it's about to overflow its boundary area.      | `true`          |
-| triggerScaleOnOpen        | `boolean`                                                                   | Whether the trigger should scale down when the tooltip is open.                                              | `true`          |
-| shouldBlockScroll         | `boolean`                                                                   | Whether to block scrolling outside the tooltip.                                                              | `true`          |
-| isKeyboardDismissDisabled | `boolean`                                                                   | Whether pressing the escape key to close the tooltip should be disabled.                                     | `false`         |
-| isDismissable             | `boolean`                                                                   | Whether to close the overlay when the user interacts outside it.                                             | `false`         |
-| shouldCloseOnBlur         | `boolean`                                                                   | Whether the tooltip should close when focus is lost or moves outside it.                                     | `true`          |
-| motionProps               | [MotionProps](#motion-props)                                                | The props to modify the framer motion animation. Use the `variants` API to create your own animation.        | -               |
-| portalContainer           | `HTMLElement`                                                               | The container element in which the overlay portal will be placed.                                            | `document.body` |
-| updatePositionDeps        | `any[]`                                                                     | The dependencies to force the tooltip position update.                                                       | `[]`            |
-| isDisabled                | `boolean`                                                                   | Whether the tooltip is disabled.                                                                             | `false`         |
-| disableAnimation          | `boolean`                                                                   | Whether the tooltip is animated.                                                                             | `false`         |
-| classNames                | `Record<"base"｜"content", string>`                                           | Allows to set custom class names for the tooltip slots.                                                      | -               |
-
-<Spacer y={1} />
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render. Usually a trigger element.",
+      default: "-"
+    },
+    {
+      attribute: "content",
+      type: "ReactNode",
+      description: "The content to render inside the tooltip.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The tooltip size. This change the content font size.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The tooltip color theme.",
+      default: "default"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The tooltip border radius.",
+      default: "md"
+    },
+    {
+      attribute: "shadow",
+      type: "none | sm | md | lg",
+      description: "The tooltip shadow.",
+      default: "sm"
+    },
+    {
+      attribute: "placement",
+      type: "TooltipPlacement",
+      description: "The placement of the tooltip relative to its trigger reference.",
+      default: "top"
+    },
+    {
+      attribute: "delay",
+      type: "number",
+      description: "The delay in milliseconds before the tooltip opens.",
+      default: "0"
+    },
+    {
+      attribute: "closeDelay",
+      type: "number",
+      description: "The delay in milliseconds before the tooltip closes.",
+      default: "500"
+    },
+    {
+      attribute: "isOpen",
+      type: "boolean",
+      description: "Whether the tooltip is open by default (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultOpen",
+      type: "boolean",
+      description: "Whether the tooltip is open by default (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "offset",
+      type: "number",
+      description: "The distance or margin between the reference and popper. It is used internally to create an offset modifier.",
+      default: "7"
+    },
+    {
+      attribute: "containerPadding",
+      type: "number",
+      description: "The placement padding that should be applied between the element and its surrounding container.",
+      default: "12"
+    },
+    {
+      attribute: "crossOffset",
+      type: "number",
+      description: "The additional offset applied along the cross axis between the element and its anchor element.",
+      default: "0"
+    },
+    {
+      attribute: "showArrow",
+      type: "boolean",
+      description: "Whether the tooltip should have an arrow.",
+      default: "false"
+    },
+    {
+      attribute: "shouldFlip",
+      type: "boolean",
+      description: "Whether the tooltip should change its placement and flip when it's about to overflow its boundary area.",
+      default: "true"
+    },
+    {
+      attribute: "triggerScaleOnOpen",
+      type: "boolean",
+      description: "Whether the trigger should scale down when the tooltip is open.",
+      default: "true"
+    },
+    {
+      attribute: "shouldBlockScroll",
+      type: "boolean",
+      description: "Whether to block scrolling outside the tooltip.",
+      default: "true"
+    },
+    {
+      attribute: "isKeyboardDismissDisabled",
+      type: "boolean",
+      description: "Whether pressing the escape key to close the tooltip should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isDismissable",
+      type: "boolean",
+      description: "Whether to close the overlay when the user interacts outside it.",
+      default: "false"
+    },
+    {
+      attribute: "shouldCloseOnBlur",
+      type: "boolean",
+      description: "Whether the tooltip should close when focus is lost or moves outside it.",
+      default: "true"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The props to modify the framer motion animation. Use the variants API to create your own animation.",
+      default: "-"
+    },
+    {
+      attribute: "portalContainer",
+      type: "HTMLElement",
+      description: "The container element in which the overlay portal will be placed.",
+      default: "document.body"
+    },
+    {
+      attribute: "updatePositionDeps",
+      type: "any[]",
+      description: "The dependencies to force the tooltip position update.",
+      default: "[]"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the tooltip is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the tooltip is animated.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\"｜\"content\", string>",
+      description: "Allows to set custom class names for the tooltip slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Tooltip Events
 
-| Attribute                    | Type                        | Description                                                                                                                                                                                                                                                                                               |
-| ---------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| onOpenChange                 | `(isOpen: boolean) => void` | Handler that is called when the tooltip's open state changes.                                                                                                                                                                                                                                             |
-| shouldCloseOnInteractOutside | `(e: HTMLElement) => void`  | When user interacts with the argument element outside of the tooltip ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the tooltip. By default, onClose will always be called on interaction outside the overlay ref. |
-| onClose                      | `() => void`                | Handler that is called when the tooltip should close.                                                                                                                                                                                                                                                     |
-
-<Spacer y={2} />
+<APITable
+  data={[
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the tooltip's open state changes.",
+      default: "-"
+    },
+    {
+      attribute: "shouldCloseOnInteractOutside",
+      type: "(e: HTMLElement) => void",
+      description: "When user interacts with the argument element outside of the tooltip ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the tooltip. By default, onClose will always be called on interaction outside the overlay ref.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the tooltip should close.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Tooltip types
 
diff --git a/apps/docs/content/docs/components/user.mdx b/apps/docs/content/docs/components/user.mdx
index 2f04436e75..ba6b4254db 100644
--- a/apps/docs/content/docs/components/user.mdx
+++ b/apps/docs/content/docs/components/user.mdx
@@ -72,10 +72,37 @@ Display user information with avatar and name.
 
 ### User Props
 
-| Attribute   | Type                                                          | Description                                                                                | Default |
-| ----------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------- |
-| name        | `string`                                                      | The name of the user.                                                                      | -       |
-| description | `ReactNode`                                                   | The description component.                                                                 | -       |
-| isFocusable | `boolean`                                                     | Whether the user is focusable. This is useful when using `Dropdown` or similar components. | `false` |
-| avatarProps | [AvatarProps](/docs/components/avatar#avatar-props)           | The avatar component props. The `name` is passed by default.                               | -       |
-| classNames  | `Record<"base"｜ "wrapper"｜ "name"｜ "description", string>` | Allows to set custom class names for the user slots.                                       | -       |
+<APITable
+  data={[
+    {
+      attribute: "name",
+      type: "string",
+      description: "The name of the user.",
+      default: "-"
+    },
+    {
+      attribute: "description", 
+      type: "ReactNode",
+      description: "The description component.",
+      default: "-"
+    },
+    {
+      attribute: "isFocusable",
+      type: "boolean", 
+      description: "Whether the user is focusable. This is useful when using `Dropdown` or similar components.",
+      default: "false"
+    },
+    {
+      attribute: "avatarProps",
+      type: "AvatarProps",
+      description: "The avatar component props. The `name` is passed by default.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<\"base\" | \"wrapper\" | \"name\" | \"description\", string>",
+      description: "Allows to set custom class names for the user slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css
index f17f8eee5d..82a31e6132 100644
--- a/apps/docs/styles/globals.css
+++ b/apps/docs/styles/globals.css
@@ -68,17 +68,17 @@ z-index: 0;
     --code-highlighted-word3-bg-active: 116 223 162;
     --code-highlighted-word3-text: 209 244 224;
     /* sandpack + prism */
-    --code-string: 152 195 121;
+    --code-string: 83, 224, 192;
     --code-class: 145 180 213;
-    --code-punctuation: 220 220 220;
-    --code-number: 229 192 123;
+    --code-punctuation: 83, 224, 192;
+    --code-number: 83, 224, 192;
     --code-added: 116 223 162;
     --code-line-number: 212 212 216;
     --code-faded-line: 113 113 122;
     --code-comment: 113 113 122;
     --code-keyword: 198 120 221;
     --code-function: 97 175 239;
-    --code-tag: 224 108 117;
+    --code-tag: 83, 224, 192;
     --code-attr-name: 145 180 213;
     --code-language-javascript: 145 180 213;
   }
diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js
index d3a3b8df21..87f063a323 100644
--- a/apps/docs/tailwind.config.js
+++ b/apps/docs/tailwind.config.js
@@ -332,7 +332,7 @@ module.exports = {
       themes: {
         light: {
           colors: {
-            "code-background": "#363449",
+            "code-background": "#1c1e27",
             strong: "#ff4ecd",
             "code-mdx": "#ff4ecd",
           },
@@ -340,7 +340,7 @@ module.exports = {
         dark: {
           colors: {
             strong: "#06B7DB",
-            "code-background": "#0D0B0B",
+            "code-background": "#1c1e27",
             "code-mdx": "#06B7DB",
           },
         },

From 68f48cdf5f7778aff18f4e0a479d22ea63a42494 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 30 Nov 2024 19:03:52 -0300
Subject: [PATCH 3/3] Feat/doc improvements (#4196)

* feat: documentation improvements

* fix: alert api

* fix: copy button
---
 .../components/code-demo/react-live-demo.tsx  |  11 +-
 .../content/docs/components/accordion.mdx     | 340 +++++++++++++++---
 2 files changed, 293 insertions(+), 58 deletions(-)

diff --git a/apps/docs/components/docs/components/code-demo/react-live-demo.tsx b/apps/docs/components/docs/components/code-demo/react-live-demo.tsx
index a93b90cfb8..48e74a5aaa 100644
--- a/apps/docs/components/docs/components/code-demo/react-live-demo.tsx
+++ b/apps/docs/components/docs/components/code-demo/react-live-demo.tsx
@@ -44,8 +44,11 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
   const content = (
     <>
       {files?.[DEFAULT_FILE] && (
-        <div className="absolute top-[-24px] right-[-8px]">
-          <CopyButton className="text-zinc-400" value={files?.[DEFAULT_FILE]} />
+        <div className="absolute top-[-28px] right-[-8px]">
+          <CopyButton
+            className="opacity-0 group-hover/code-demo:opacity-100 transition-opacity text-zinc-400"
+            value={files?.[DEFAULT_FILE]}
+          />
         </div>
       )}
       <LivePreview
@@ -70,12 +73,12 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
           color={gradientColor}
           to="top-right"
         >
-          <div className="max-w-full py-4 px-2 w-full h-full scrollbar-hide overflow-x-scroll">
+          <div className="group/code-demo max-w-full py-4 px-2 w-full h-full scrollbar-hide overflow-x-scroll">
             {content}
           </div>
         </GradientBox>
       ) : (
-        <BgGridContainer className={className}>{content}</BgGridContainer>
+        <BgGridContainer className={clsx(className, "group/code-demo")}>{content}</BgGridContainer>
       )}
     </LiveProvider>
   );
diff --git a/apps/docs/content/docs/components/accordion.mdx b/apps/docs/content/docs/components/accordion.mdx
index a607ceece0..48532229c0 100644
--- a/apps/docs/content/docs/components/accordion.mdx
+++ b/apps/docs/content/docs/components/accordion.mdx
@@ -189,69 +189,301 @@ Here's an example of how to customize the accordion styles:
 
 ### Accordion Props
 
-| Attribute                 | Type                                            | Description                                                                                             | Default  |
-| ------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------- |
-| children                  | `ReactNode` \| `ReactNode[]`                    | The contents of the collection. Usually the array of `AccordionItem`                                    |          |
-| variant                   | `light` \| `shadow` \| `bordered` \| `splitted` | The accordion appearance style.                                                                         | `light`  |
-| selectionMode             | `none` \| `single` \| `multiple`                | The type of selection that is allowed in the collection.                                                |          |
-| selectionBehavior         | `toggle` \| `replace`                           | The accordion selection behavior.                                                                       | `toggle` |
-| isCompact                 | `boolean`                                       | Whether all Accordion items should be smaller.                                                          | `false`  |
-| isDisabled                | `boolean`                                       | Whether the Accordion items are disabled.                                                               |          |
-| showDivider               | `boolean`                                       | Whether to display a divider at the bottom of the each accordion item.                                  | `true`   |
-| dividerProps              | [DividerProps](/docs/components/divider)        | The divider component props.                                                                            | -        |
-| hideIndicator             | `boolean`                                       | Whether the Accordion items indicator is hidden.                                                        |          |
-| disableAnimation          | `boolean`                                       | Whether the Accordion items open/close animation is disabled.                                           |          |
-| disableIndicatorAnimation | `boolean`                                       | Whether the Accordion items indicator animation is disabled.                                            |          |
-| disallowEmptySelection    | `boolean`                                       | Whether the collection allows empty selection.                                                          |          |
-| keepContentMounted        | `boolean`                                       | Whether the Accordion items content should be always mounted.                                           | `false`  |
-| fullWidth                 | `boolean`                                       | Whether the accordion should take up the full width of its parent container.                            | `true`   |
-| motionProps               | `MotionProps`                                   | The motion properties of the Accordion.                                                                 |          |
-| disabledKeys              | `React.Key[]`                                   | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |          |
-| itemClasses               | [Classnames](#accordion-item-classnames)        | The accordion items classNames.                                                                         |          |
-| selectedKeys              | `all` \| `React.Key[]`                          | The currently selected keys in the collection (controlled).                                             |          |
-| defaultSelectedKeys       | `all` \| `React.Key[]`                          | The initial selected keys in the collection (uncontrolled).                                             |          |
-| disabledKeys              | `React.Key[]`                                   | The currently disabled keys in the collection (controlled).                                             |          |
+<APITable 
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode | ReactNode[]",
+      description: "The contents of the collection. Usually the array of AccordionItem",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "light | shadow | bordered | splitted",
+      description: "The accordion appearance style.",
+      default: "light"
+    },
+    {
+      attribute: "selectionMode", 
+      type: "none | single | multiple",
+      description: "The type of selection that is allowed in the collection.",
+      default: "-"
+    },
+    {
+      attribute: "selectionBehavior",
+      type: "toggle | replace",
+      description: "The accordion selection behavior.",
+      default: "toggle"
+    },
+    {
+      attribute: "isCompact",
+      type: "boolean",
+      description: "Whether all Accordion items should be smaller.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean", 
+      description: "Whether the Accordion items are disabled.",
+      default: "false"
+    },
+    {
+      attribute: "showDivider",
+      type: "boolean",
+      description: "Whether to display a divider at the bottom of the each accordion item.",
+      default: "true"
+    },
+    {
+      attribute: "dividerProps",
+      type: "DividerProps",
+      description: "The divider component props.",
+      default: "-"
+    },
+    {
+      attribute: "hideIndicator",
+      type: "boolean",
+      description: "Whether the Accordion items indicator is hidden.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the Accordion items open/close animation is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableIndicatorAnimation",
+      type: "boolean",
+      description: "Whether the Accordion items indicator animation is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disallowEmptySelection",
+      type: "boolean",
+      description: "Whether the collection allows empty selection.",
+      default: "false"
+    },
+    {
+      attribute: "keepContentMounted",
+      type: "boolean",
+      description: "Whether the Accordion items content should be always mounted.",
+      default: "false"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the accordion should take up the full width of its parent container.",
+      default: "true"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The motion properties of the Accordion.",
+      default: "-"
+    },
+    {
+      attribute: "disabledKeys",
+      type: "React.Key[]",
+      description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+      default: "-"
+    },
+    {
+      attribute: "itemClasses",
+      type: "AccordionItemClassnames",
+      description: "The accordion items classNames.",
+      default: "-"
+    },
+    {
+      attribute: "selectedKeys",
+      type: "all | React.Key[]",
+      description: "The currently selected keys in the collection (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelectedKeys",
+      type: "all | React.Key[]",
+      description: "The initial selected keys in the collection (uncontrolled).",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Accordion Events
 
-| Attribute         | Type                                     | Description                                        |
-| ----------------- | ---------------------------------------- | -------------------------------------------------- |
-| onSelectionChange | `(keys: "all" ｜ Set<React.Key>) => any` | Handler that is called when the selection changes. |
+<APITable
+  data={[
+    {
+      attribute: "onSelectionChange",
+      type: "(keys: \"all\" | Set<React.Key>) => any",
+      description: "Handler that is called when the selection changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Accordion Item Props
 
-| Attribute                 | Type                                              | Description                                                                                                                  | Default |
-|---------------------------|---------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------|---------|
-| children                  | `ReactNode` \| `string`                           | The content of the component.                                                                                                |         |
-| title                     | `ReactNode` \| `string`                           | The accordion item title.                                                                                                    |         |
-| subtitle                  | `ReactNode` \| `string`                           | The accordion item subtitle.                                                                                                 |         |
-| indicator                 | [IndicatorProps](#accordion-item-indicator-props) | The accordion item `expanded` indicator, usually an arrow icon.                                                              |         |
-| startContent              | `ReactNode`                                       | The accordion item start content, usually an icon or avatar.                                                                 |         |
-| motionProps               | [MotionProps](#motion-props)                      | The props to modify the framer motion animation. Use the `variants` API to create your own animation.                        |         |
-| isCompact                 | `boolean`                                         | Whether the AccordionItem is compact.                                                                                        | `false` |
-| isDisabled                | `boolean`                                         | The current disabled status.                                                                                                 | `false` |
-| keepContentMounted        | `boolean`                                         | Whether the AccordionItem content is kept mounted when closed.                                                               | `false` |
-| hideIndicator             | `boolean`                                         | Whether the AccordionItem indicator is hidden.                                                                               | `false` |
-| disableAnimation          | `boolean`                                         | Whether the AccordionItem animation is disabled.                                                                             | `false` |
-| disableIndicatorAnimation | `boolean`                                         | Whether the AccordionItem indicator animation is disabled.                                                                   | `false` |
-| HeadingComponent          | `React.ElementType`                               | Customizable heading tag for Web accessibility. Use headings to describe content and use them consistently and semantically. | `h2`    |
-| classNames                | [Classnames](#accordion-item-classnames)          | Allows to set custom class names for the accordion item slots.                                                               | -       |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode | string",
+      description: "The content of the component.",
+      default: "-"
+    },
+    {
+      attribute: "title",
+      type: "ReactNode | string",
+      description: "The accordion item title.",
+      default: "-"
+    },
+    {
+      attribute: "subtitle",
+      type: "ReactNode | string",
+      description: "The accordion item subtitle.",
+      default: "-"
+    },
+    {
+      attribute: "indicator",
+      type: "IndicatorProps",
+      description: "The accordion item expanded indicator, usually an arrow icon.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The accordion item start content, usually an icon or avatar.",
+      default: "-"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The props to modify the framer motion animation. Use the variants API to create your own animation.",
+      default: "-"
+    },
+    {
+      attribute: "isCompact",
+      type: "boolean",
+      description: "Whether the AccordionItem is compact.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "The current disabled status.",
+      default: "false"
+    },
+    {
+      attribute: "keepContentMounted",
+      type: "boolean",
+      description: "Whether the AccordionItem content is kept mounted when closed.",
+      default: "false"
+    },
+    {
+      attribute: "hideIndicator",
+      type: "boolean",
+      description: "Whether the AccordionItem indicator is hidden.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the AccordionItem animation is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableIndicatorAnimation",
+      type: "boolean",
+      description: "Whether the AccordionItem indicator animation is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "HeadingComponent",
+      type: "React.ElementType",
+      description: "Customizable heading tag for Web accessibility. Use headings to describe content and use them consistently and semantically.",
+      default: "h2"
+    },
+    {
+      attribute: "classNames",
+      type: "AccordionItemClassnames",
+      description: "Allows to set custom class names for the accordion item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Accordion Item Events
 
-| Attribute     | Type                           | Description                                                                                                     |
-| ------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------- |
-| onFocus       | `(e: FocusEvent) => void`      | Handler that is called when the element receives focus.                                                         |
-| onBlur        | `(e: FocusEvent) => void`      | Handler that is called when the element loses focus.                                                            |
-| onFocusChange | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes.                                                 |
-| onKeyDown     | `(e: KeyboardEvent) => void`   | Handler that is called when a key is pressed.                                                                   |
-| onKeyUp       | `(e: KeyboardEvent) => void`   | Handler that is called when a key is released.                                                                  |
-| onPress       | `(e: PressEvent) => void`      | Handler called when the press is released over the target.                                                      |
-| onPressStart  | `(e: PressEvent) => void`      | Handler called when a press interaction starts.                                                                 |
-| onPressEnd    | `(e: PressEvent) => void`      | Handler called when a press interaction ends, either over the target or when the pointer leaves the target.     |
-| onPressChange | `(isPressed: boolean) => void` | Handler called when the press state changes.                                                                    |
-| onPressUp     | `(e: PressEvent) => void`      | Handler called when a press is released over the target, regardless of whether it started on the target or not. |
-| onClick       | `MouseEventHandler`            | The native button click event handler (**Deprecated**) use **onPress** instead.                                 |
+<APITable
+  data={[
+    {
+      attribute: "onFocus",
+      type: "(e: FocusEvent) => void",
+      description: "Handler that is called when the element receives focus.",
+      default: "-"
+    },
+    {
+      attribute: "onBlur",
+      type: "(e: FocusEvent) => void",
+      description: "Handler that is called when the element loses focus.",
+      default: "-"
+    },
+    {
+      attribute: "onFocusChange",
+      type: "(isFocused: boolean) => void",
+      description: "Handler that is called when the element's focus status changes.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is released.",
+      default: "-"
+    },
+    {
+      attribute: "onPress",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when the press is released over the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressStart",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction starts.",
+      default: "-"
+    },
+    {
+      attribute: "onPressEnd",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction ends, either over the target or when the pointer leaves the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressChange",
+      type: "(isPressed: boolean) => void",
+      description: "Handler called when the press state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onPressUp",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press is released over the target, regardless of whether it started on the target or not.",
+      default: "-"
+    },
+    {
+      attribute: "onClick",
+      type: "MouseEventHandler",
+      description: "The native button click event handler (Deprecated) use onPress instead.",
+      default: "-"
+    }
+  ]}
+/>
 
 ---