Components pages docs offsite overhaul

content/components/accordion-groups.mdx

@@ -18,6 +18,8 @@ Simply add `<AccordionGroup>` around your existing `<Accordion>` components.
     }
     ```
 
+    Check out the [Accordion](/content/components/accordions) docs for all the supported props.
+
   </Accordion>
 
   <Accordion title="FAQ with Icon" icon="alien-8bit">
@@ -44,6 +46,7 @@ Simply add `<AccordionGroup>` around your existing `<Accordion>` components.
     }
     ```
 
+    Check out the [Accordion](/content/components/accordions) docs for all the supported props.
   </Accordion>
 
   <Accordion title="FAQ with Icon" icon="alien-8bit">
@@ -58,4 +61,6 @@ Simply add `<AccordionGroup>` around your existing `<Accordion>` components.
 
 </RequestExample>
 
-`AccordionGroup` does not have any props.
+## Props
+
+`<AccordionGroup>` does not have any props.

content/components/accordions.mdx

@@ -1,22 +1,35 @@
 ---
 title: "Accordions"
-description: "A dropdown component to toggle content"
+description: "A dropdown component to toggle content visibility"
 icon: "square-caret-down"
 ---
 
 <Accordion title="I am an Accordion.">
-  You can put any content in here. Check out
-  [AccordionGroup](/content/components/accordion-groups) if you want to group
-  multiple Accordions into a single display.
+  You can put any content in here, including other components, like code:
+   ```java HelloWorld.java
+    class HelloWorld {
+        public static void main(String[] args) {
+            System.out.println("Hello, World!");
+        }
+    }
+    ```
 </Accordion>
 
 <RequestExample>
 
-```jsx Accordion Example
+````jsx Accordion Example
 <Accordion title="I am an Accordion.">
-  You can put any content in here.
+  You can put any content in here, including other components, like code:
+
+   ```java HelloWorld.java
+    class HelloWorld {
+        public static void main(String[] args) {
+            System.out.println("Hello, World!");
+        }
+    }
+  ```
 </Accordion>
-```
+````
 
 </RequestExample>
 
@@ -35,10 +48,13 @@ icon: "square-caret-down"
 </ResponseField>
 
 <ResponseField name="icon" type="string or svg">
-  A [Font Awesome icon](https://fontawesome.com/icons), [Lucide icon](https://lucide.dev/icons), or SVG code
+  A [Font Awesome icon](https://fontawesome.com/icons), [Lucide
+  icon](https://lucide.dev/icons), or SVG code
 </ResponseField>
 
 <ResponseField name="iconType" type="string">
   One of "regular", "solid", "light", "thin", "sharp-solid", "duotone", or
   "brands"
 </ResponseField>
+
+Use [AccordionGroup](/content/components/accordion-groups) to create a group of Accordions.

content/components/callouts.mdx

@@ -4,7 +4,9 @@
 icon: 'circle-exclamation'
 ---
 
+Callouts can be styled as a Note, Warning, Info, Tip, or Check:
+
 ### Note Callouts
 
 <Note>This adds a note in the content</Note>
 
@@ -12,7 +14,7 @@
 <Note>This adds a note in the content</Note>
 ```
 
 ### Warning Callouts
 
 <Warning>This raises a warning to watch out for</Warning>
 
@@ -20,7 +22,7 @@
 <Warning>This raises a warning to watch out for</Warning>
 ```
 
 ### Info Callouts
 
 <Info>This draws attention to important information</Info>
 
@@ -28,7 +30,7 @@
 <Info>This draws attention to important information</Info>
 ```
 
 ### Tip Callouts
 
 <Tip>This suggests a helpful tip</Tip>
 
@@ -36,7 +38,7 @@
 <Tip>This suggests a helpful tip</Tip>
 ```
 
 ### Check Callouts
 
 <Check>This brings us a checked status</Check>
 

content/components/card-groups.mdx

@@ -4,20 +4,20 @@
 icon: 'rectangles-mixed'
 ---
 
-The `CardGroup` component lets you group multiple `Card` components together. It's most often used to put multiple cards on the same column.
+The `CardGroup` component lets you group multiple `Card` components together. It's most often used to put multiple cards in a grid, by specifying the number of grid columns.
 
 <CardGroup cols={2}>
   <Card title="First Card" icon="square-1">
     Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
   </Card>
   <Card title="Second Card" icon="square-2">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
   </Card>
   <Card title="Third Card" icon="square-3">
     Ut enim ad minim veniam, quis nostrud exercitation ullamco
   </Card>
   <Card title="Fourth Card" icon="square-4">
     Excepteur sint occaecat cupidatat non proident
   </Card>
 </CardGroup>
 

content/components/cards.mdx

@@ -17,39 +17,69 @@ icon: "rectangle"
   </Card>
   ```
 
-  ```jsx Image Card Example
-  <Card title="Image Card" img="/images/card-with-image.png">
-    Here is an example of a card with an image
-  </Card>
-  ```
-</RequestExample>
-
+```jsx Image Card Example
+<Card title="Image Card" img="/images/card-with-image.png">
+  Here is an example of a card with an image
+</Card>
+```
 
+</RequestExample>
 
 ### Horizontal Card
 
-Add a `horizontal` property to a card to make it horizontally displayed.
+Add a `horizontal` property to make it horizontally displayed.
 
 <Card title="Horizontal Card" icon="text-size" horizontal>
   Here is an example of a horizontal card
 </Card>
 
 ### Image Card
 
-Add an `img` property to a card to display an image on the top of the card.
+Add an `img` property to display an image on the top of the card.
 
 <Card title="Image Card" img="https://mintlify-assets.b-cdn.net/yosemite.jpg">
   Here is an example of a card with an image
 </Card>
 
+### Link Card
+
+You can customize the CTA and whether or not to display the arrow on the card. By default, the arrow will only show for external links.
+
+<Card
+  title="Link card"
+  icon="link"
+  href="/content/components/card-groups"
+  arrow="true"
+  cta="Click here"
+>
+  This is how you use a card with an icon and a link. Clicking on this card
+  brings you to the Card Group page.
+</Card>
+
+<RequestExample>
+  ```jsx Card Example
+  <Card
+    title="Link card"
+    icon="link"
+    href="/content/components/card-groups"
+    arrow="true"
+    cta="Click here"
+  >
+    This is how you use a card with an icon and a link. Clicking on this card
+    brings you to the Card Group page.
+  </Card>
+  ```
+</RequestExample>
+
 ## Props
 
 <ResponseField name="title" type="string" required>
   The title of the card
 </ResponseField>
 
 <ResponseField name="icon" type="string or svg">
-  A [Font Awesome icon](https://fontawesome.com/icons), [Lucide icon](https://lucide.dev/icons), or SVG code in `icon={}`
+  A [Font Awesome icon](https://fontawesome.com/icons), [Lucide
+  icon](https://lucide.dev/icons), or SVG code in `icon={}`
 </ResponseField>
 
 <ResponseField name="iconType" type="string">
@@ -70,4 +100,12 @@ Add an `img` property to a card to display an image on the top of the card.
 
 <ResponseField name="img" type="string">
   The url or local path to an image to display on the top of the card
-</ResponseField>
+</ResponseField>
+
+<ResponseField name="cta" type="string">
+  Label for the action button
+</ResponseField>
+
+<ResponseField name="arrow" type="boolean">
+  Enable or disable the link arrow icon
+</ResponseField>

content/components/icons.mdx

@@ -26,11 +26,11 @@ The icon will be placed inline when used in a paragraph.
 ## Props
 
 <ResponseField name="icon" type="string" required>
-  A [Font Awesome](https://fontawesome.com/icons) icon
+  A [Font Awesome](https://fontawesome.com/icons) or [Lucide](https://lucide.dev/icons) icon
 </ResponseField>
 
 <ResponseField name="iconType" type="string">
-  One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`
+  One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands` (only for [Font Awesome](https://fontawesome.com/icons) icons).
 </ResponseField>
 
 <ResponseField name="color" type="string">

content/components/responses.mdx

@@ -10,24 +10,20 @@ The `<ResponseField>` component is designed to define the return values of an AP
   A response field example
 </ResponseField>
 
-<RequestExample>
-
-```jsx ResponseField Example
+```jsx
 <ResponseField name="response" type="string" required>
   A response field example
 </ResponseField>
 ```
 
-</RequestExample>
-
 ## Props
 
 <ResponseField name="name" type="string" required>
   The name of the response value.
 </ResponseField>
 
 <ResponseField name="type" type="string" required>
-  Expected type of the response value
+  Expected type of the response value - this can be any arbitrary string.
 </ResponseField>
 
 <ResponseField name="default" type="string">
@@ -37,3 +33,15 @@ The `<ResponseField>` component is designed to define the return values of an AP
 <ResponseField name="required" type="boolean">
   Show "required" beside the field name.
 </ResponseField>
+
+<ResponseField name="deprecated" type="boolean">
+  Whether a field is deprecated or not.
+</ResponseField>
+
+<ResponseField name="pre" type="string[]">
+  Labels that are shown before the name of the field
+</ResponseField>
+
+<ResponseField name="post" type="string[]">
+  Labels that are shown after the name of the field
+</ResponseField>

content/components/reusable-components.mdx

@@ -0,0 +1,65 @@
+---
+title: "Reusable Components"
+description: "Reusable, custom component snippets"
+icon: "recycle"
+---
+
+Much like custom content [snippets](/reusable-snippets) that can be added in MDX files, you can add reusable components as snippets.
+
+## Creating a reusable React component
+
+1. Inside your snippet file, create a component that takes in props by exporting your component in the form of an arrow function.
+
+```typescript snippets/custom-component.mdx
+export const MyComponent = ({ title }) => (
+  <div>
+    <h1>{title}</h1>
+    <p>... snippet content ...</p>
+  </div>
+);
+```
+
+<Warning>
+  MDX does not compile inside the body of an arrow function. Stick to HTML
+  syntax when you can or use a default export if you need to use MDX inside of your component.
+</Warning>
+
+2. Import the snippet into your destination file and pass in the props
+
+```typescript destination-file.mdx
+---
+title: My title
+description: My Description
+---
+
+import { MyComponent } from '/snippets/custom-component.mdx';
+
+Lorem ipsum dolor sit amet.
+
+<MyComponent title={'Custom title'} />
+```
+
+
+## Client-Side Content
+
+By default, Mintlify employs server-side rendering, generating content
+at build time. For client-side content loading, ensure to verify the
+`document` object's availability before initiating the rendering process.
+
+```typescript snippets/client-component.mdx
+{/* `setTimeout` simulates a React.useEffect, which is called after the component is mounted. */}
+export const ClientComponent = () => {
+  if (typeof document === "undefined") {
+    return null;
+  } else {
+    setTimeout(() => {
+      const clientComponent = document.getElementById("client-component");
+      if (clientComponent) {
+        clientComponent.innerHTML = "Hello, client-side component!";
+      }
+    }, 1);
+
+    return <div id="client-component"></div>
+  }
+}
+```

content/components/tabs.mdx

@@ -1,14 +1,22 @@
 ---
-title: 'Tabs'
-description: 'Toggle content using the Tabs component'
-icon: 'window-restore'
+title: "Tabs"
+description: "Toggle content using the Tabs component"
+icon: "window-restore"
 ---
 
-You can add any number of tabs.
+You can add any number of tabs, and other components inside of tabs.
 
 <Tabs>
   <Tab title="First Tab">
     ☝️ Welcome to the content that you can only see inside the first Tab.
+    You can add any number of components inside of tabs.
+    ```java HelloWorld.java
+      class HelloWorld {
+          public static void main(String[] args) {
+              System.out.println("Hello, World!");
+          }
+      }
+    ```
   </Tab>
   <Tab title="Second Tab">
     ✌️ Here's content that's only inside the second Tab.
@@ -20,10 +28,17 @@ You can add any number of tabs.
 
 <RequestExample>
 
-```jsx Tabs Example
+````jsx Tabs Example
 <Tabs>
   <Tab title="First Tab">
     ☝️ Welcome to the content that you can only see inside the first Tab.
+    ```java HelloWorld.java
+      class HelloWorld {
+          public static void main(String[] args) {
+              System.out.println("Hello, World!");
+          }
+      }
+    ```
   </Tab>
   <Tab title="Second Tab">
     ✌️ Here's content that's only inside the second Tab.
@@ -32,7 +47,7 @@ You can add any number of tabs.
     💪 Here's content that's only inside the third Tab.
   </Tab>
 </Tabs>
-```
+````
 
 </RequestExample>
 

docs.json

@@ -202,6 +202,12 @@
               "content/components/update"
             ]
           },
+          {
+            "group": "Custom Components",
+            "pages": [
+              "content/components/reusable-components"
+            ]
+          },
           {
             "group": "API Components",
             "pages": [