> ## Documentation Index
> Fetch the complete documentation index at: https://na-36-changelog-go-livepeer-2026-05-18.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrators

> Fetches, embeds, or binds to external data – feeds, embeds, video, APIs.

<Note>
  **Generation Script**: This file is generated from script(s): `operations/scripts/generators/components/documentation/generate-component-docs.js`. <br />
  **Purpose**: Generated component-library MDX pages derived from docs-guide/config/component-registry.json. <br />
  **Run when**: Component governance metadata, registry outputs, or published component-library templates change. <br />
  **Important**: Do not manually edit this file; run `node operations/scripts/generators/components/documentation/generate-component-docs.js --fix --template-only --category integrators`. <br />
</Note>

<Card title="Back to Component Library" icon="arrow-left" href="/v2/resources/documentation-guide/component-library" arrow>
  Return to the generated component library landing page.
</Card>

## Integrators

Fetches, embeds, or binds to external data – feeds, embeds, video, APIs.

This category currently contains **18** governed export(s).

### Decision Tree Excerpt

1. Fetches, embeds, or binds to external/third-party data? → `integrators/`
2. Part of the page's outer structure, typically used once? → `scaffolding/`
3. Takes content and presents it in a formatted way? → `displays/`
4. Exists to hold, group, or arrange other things? → `wrappers/`
5. Single visual piece – no wrapping, no arranging, no fetching? → `elements/`

### Summary Table

| Component             | Status         | Import path                                                 | Description                                                                      |
| --------------------- | -------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------- |
| BlogCard              | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Blog post card with scrollable content, metadata, and CTA.                       |
| BlogDataLayout        | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Single-column BlogCard stack.                                                    |
| CardBlogDataLayout    | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Grid layout rendering BlogCards from an items array.                             |
| CardColumnsPostLayout | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Multi-column PostCard layout.                                                    |
| CardInCardLayout      | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | PostCards rendered inside Card wrappers.                                         |
| CoinGeckoExchanges    | `stable`       | `/snippets/components/integrators/feeds/Coingecko.jsx`      | Sortable table of exchanges listing a token. Keyboard-accessible sort headers.   |
| ColumnsBlogCardLayout | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Multi-column BlogCard layout using Mintlify Columns.                             |
| DiscordAnnouncements  | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Discord announcement feed with parsed markdown content. Sanitised HTML.          |
| ExternalContent       | `stable`       | `/snippets/components/integrators/embeds/DataEmbed.jsx`     | Fetches and renders external markdown with scrollable container and source link. |
| ForumLatestLayout     | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Latest forum topics with banner image and topic cards.                           |
| LatestVersion         | `experimental` | `/snippets/components/integrators/feeds/Release.jsx`        | Displays the latest release version string from automation data.                 |
| LumaEvents            | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Upcoming/past event cards from Luma calendar data.                               |
| MarkdownEmbed         | `stable`       | `/snippets/components/integrators/embeds/DataEmbed.jsx`     | Fetches and renders remote markdown content.                                     |
| PdfEmbed              | `stable`       | `/snippets/components/integrators/embeds/DataEmbed.jsx`     | Embeds a PDF in a framed iframe with caption.                                    |
| PostCard              | `stable`       | `/snippets/components/integrators/blog/BlogCards.jsx`       | Post card with gradient header, scrollable content, and metadata.                |
| ShowcaseCards         | `experimental` | `/snippets/components/displays/cards/Cards.jsx`             | Paginated project showcase with search, filtering, and media cards.              |
| TwitterTimeline       | `stable`       | `/snippets/components/integrators/embeds/DataEmbed.jsx`     | Embeds a Twitter/X timeline feed widget via iframe.                              |
| YouTubeVideoData      | `stable`       | `/snippets/components/integrators/video-data/VideoData.jsx` | Renders YouTube video data with video embed and metadata columns.                |

## Component Reference

### BlogCard

Use **BlogCard** when you need blog post card with scrollable content, metadata, and CTA.. Accepts: {any} title, {any} content, {any} href, {string} author, {any} datePosted, {any} excerpt, {any} readingTime, {string} icon, {string} authorIcon, {string} dateIcon, {string} cta, {any} img, {string} className, {object} style, ...rest.
Source description: Blog post card with scrollable content, metadata, and CTA.
**Import path**

```jsx theme={null}
import { BlogCard } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{any} title, {any} content, {any} href, {string} author, {any} datePosted, {any} excerpt, {any} readingTime, {string} icon, {string} authorIcon, {string} dateIcon, {string} cta, {any} img, {string} className, {object} style, ...rest`
* Data source: `automation/blog`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `title` | `any` | ``| Yes | title prop. | | `content` | `any` |`` | Yes | content prop. |
  \| `href` | `any` | \`\` | Yes | href prop. |
  \| `author` | `string` | `"Livepeer Team"` | No | author prop. |
  \| `datePosted` | `any` | `null` | No | date Posted prop. |
  \| `excerpt` | `any` | `null` | No | excerpt prop. |
  \| `readingTime` | `any` | `null` | No | reading Time prop. |
  \| `icon` | `string` | `"book-open"` | No | icon prop. |
  \| `authorIcon` | `string` | `"user-pen"` | No | author Icon prop. |
  \| `dateIcon` | `string` | `"calendar"` | No | date Icon prop. |
  \| `cta` | `string` | `"Read More"` | No | cta prop. |
  \| `img` | `any` | `null` | No | img prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### BlogDataLayout

Use **BlogDataLayout** when you need single-column BlogCard stack.. Accepts: {Array} items, {any} limit, {string} className, {object} style, ...rest.
Source description: Single-column BlogCard stack.
**Import path**

```jsx theme={null}
import { BlogDataLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{Array} items, {any} limit, {string} className, {object} style, ...rest`
* Data source: `automation/blog`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `limit` | `any` | \`\` | Yes | limit prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### CardBlogDataLayout

Use **CardBlogDataLayout** when you need grid layout rendering BlogCards from an items array.. Accepts: {Array} items, {any} limit, {string} className, {object} style, ...rest.
Source description: Grid layout rendering BlogCards from an items array.
**Import path**

```jsx theme={null}
import { CardBlogDataLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{Array} items, {any} limit, {string} className, {object} style, ...rest`
* Data source: `automation/blog`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `limit` | `any` | \`\` | Yes | limit prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### CardColumnsPostLayout

Use **CardColumnsPostLayout** when you need multi-column PostCard layout.. Accepts: {number} cols, {Array} items, {any} limit, {string} className, {object} style, ...rest.
Source description: Multi-column PostCard layout.
**Import path**

```jsx theme={null}
import { CardColumnsPostLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{number} cols, {Array} items, {any} limit, {string} className, {object} style, ...rest`
* Data source: `automation/blog`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `cols` | `number` | `2` | No | cols prop. |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `limit` | `any` | \`\` | Yes | limit prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### CardInCardLayout

Use **CardInCardLayout** when you need postCards rendered inside Card wrappers.. Accepts: {Array} items, {any} limit, {string} className, {object} style, ...rest.
Source description: PostCards rendered inside Card wrappers.
**Import path**

```jsx theme={null}
import { CardInCardLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{Array} items, {any} limit, {string} className, {object} style, ...rest`
* Data source: `automation/blog`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `limit` | `any` | \`\` | Yes | limit prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### CoinGeckoExchanges

Use **CoinGeckoExchanges** when you need sortable table of exchanges listing a token. Keyboard-accessible sort headers.. Accepts: {string} coinId, {string} className, {object} style, ...rest.
Source description: Sortable table of exchanges listing a token. Keyboard-accessible sort headers.
**Import path**

```jsx theme={null}
import { CoinGeckoExchanges } from '/snippets/components/integrators/feeds/Coingecko.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{string} coinId, {string} className, {object} style, ...rest`
* Data source: `CoinGecko API`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `coinId` | `string` | `"arbitrum"` | No | coin Id prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### ColumnsBlogCardLayout

Use **ColumnsBlogCardLayout** when you need multi-column BlogCard layout using Mintlify Columns.. Accepts: {Array} items, {number} cols, {any} limit, {string} className, {object} style, ...rest.
Source description: Multi-column BlogCard layout using Mintlify Columns.
**Import path**

```jsx theme={null}
import { ColumnsBlogCardLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{Array} items, {number} cols, {any} limit, {string} className, {object} style, ...rest`
* Data source: `automation/blog`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `cols` | `number` | `2` | No | cols prop. |
  \| `limit` | `any` | \`\` | Yes | limit prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### DiscordAnnouncements

Use **DiscordAnnouncements** when you need discord announcement feed with parsed markdown content. Sanitised HTML.. Accepts: {Array} items, {any} limit, {string} className, {object} style, ...rest.
Source description: Discord announcement feed with parsed markdown content. Sanitised HTML.
**Import path**

```jsx theme={null}
import { DiscordAnnouncements } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{Array} items, {any} limit, {string} className, {object} style, ...rest`
* Data source: `automation/discord`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `limit` | `any` | \`\` | Yes | limit prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### ExternalContent

Use **ExternalContent** when you need fetches and renders external markdown with scrollable container and source link.. Accepts: {string} repoName, {string} githubUrl, {string} maxHeight, {string} icon, {React.ReactNode} children, {string} className, {object} style, ...rest.
Source description: Fetches and renders external markdown with scrollable container and source link.
**Import path**

```jsx theme={null}
import { ExternalContent } from '/snippets/components/integrators/embeds/DataEmbed.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{string} repoName, {string} githubUrl, {string} maxHeight, {string} icon, {React.ReactNode} children, {string} className, {object} style, ...rest`
* Data source: `fetch(url)`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `repoName` | `string` | ``| Yes | Repo name used by the component. | | `githubUrl` | `string` |`` | Yes | Github url used by the component. |
  \| `maxHeight` | `string` | `"1000px"` | No | Max height used by the component. |
  \| `icon` | `string` | `"github"` | No | Icon configuration used by the component. |
  \| `children` | `React.ReactNode` | \`\` | Yes | Content rendered inside the component. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

<CustomDivider />

### ForumLatestLayout

Use **ForumLatestLayout** when you need latest forum topics with banner image and topic cards.. Accepts: {Array} items, {any} limit, {string} className, {object} style, ...rest.
Source description: Latest forum topics with banner image and topic cards.
**Import path**

```jsx theme={null}
import { ForumLatestLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{Array} items, {any} limit, {string} className, {object} style, ...rest`
* Data source: `automation/forum`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `limit` | `any` | \`\` | Yes | limit prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### LatestVersion

Use **LatestVersion** when you need displays the latest release version string from automation data.. Accepts: {any} version, {string} className, {object} style, ...rest.
Source description: Displays the latest release version string from automation data.
**Import path**

```jsx theme={null}
import { LatestVersion } from '/snippets/components/integrators/feeds/Release.jsx'
```

**Metadata**

* Status: `experimental`
* Accepts: `{any} version, {string} className, {object} style, ...rest`
* Data source: `release-version workflow`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `version` | `any` | \`\` | Yes | version prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### LumaEvents

Use **LumaEvents** when you need upcoming/past event cards from Luma calendar data.. Accepts: {any} data, {any} limit, {string} type, {string} className, {object} style, ...rest.
Source description: Upcoming/past event cards from Luma calendar data.
**Import path**

```jsx theme={null}
import { LumaEvents } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{any} data, {any} limit, {string} type, {string} className, {object} style, ...rest`
* Data source: `Luma API`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `data` | `any` | ``| Yes | data prop. | | `limit` | `any` |`` | Yes | limit prop. |
  \| `type` | `string` | `"upcoming"` | No | type prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### MarkdownEmbed

Use **MarkdownEmbed** when you need fetches and renders remote markdown content.. Accepts: {string} url, {string} className, {object} style, ...rest.
Source description: Fetches and renders remote markdown content.
**Import path**

```jsx theme={null}
import { MarkdownEmbed } from '/snippets/components/integrators/embeds/DataEmbed.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{string} url, {string} className, {object} style, ...rest`
* Data source: `fetch(url)`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `url` | `string` | \`\` | Yes | Destination URL used by the component. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

<CustomDivider />

### PdfEmbed

Use **PdfEmbed** when you need embeds a PDF in a framed iframe with caption.. Accepts: {React.ReactNode} title, {string} src, {string} height, {string} width, {string} className, {object} style, ...rest.
Source description: Embeds a PDF in a framed iframe with caption.
**Import path**

```jsx theme={null}
import { PdfEmbed } from '/snippets/components/integrators/embeds/DataEmbed.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{React.ReactNode} title, {string} src, {string} height, {string} width, {string} className, {object} style, ...rest`
* Data source: `iframe(src)`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `title` | `React.ReactNode` | ``| Yes | Title text rendered by the component. | | `src` | `string` |`` | Yes | Asset or embed source used by the component. |
  \| `height` | `string` | `'700px'` | No | Height used by the component. |
  \| `width` | `string` | `'100%'` | No | Width used by the component. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

<CustomDivider />

### PostCard

Use **PostCard** when you need post card with gradient header, scrollable content, and metadata.. Accepts: {any} title, {any} content, {any} href, {string} author, {any} datePosted, {any} replyCount, {string} icon, {string} authorIcon, {string} dateIcon, {string} cta, {any} img, {string} className, {object} style, ...rest.
Source description: Post card with gradient header, scrollable content, and metadata.
**Import path**

```jsx theme={null}
import { PostCard } from '/snippets/components/integrators/blog/BlogCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{any} title, {any} content, {any} href, {string} author, {any} datePosted, {any} replyCount, {string} icon, {string} authorIcon, {string} dateIcon, {string} cta, {any} img, {string} className, {object} style, ...rest`
* Data source: `automation/blog`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `title` | `any` | ``| Yes | title prop. | | `content` | `any` |`` | Yes | content prop. |
  \| `href` | `any` | \`\` | Yes | href prop. |
  \| `author` | `string` | `"Unknown"` | No | author prop. |
  \| `datePosted` | `any` | `null` | No | date Posted prop. |
  \| `replyCount` | `any` | `null` | No | reply Count prop. |
  \| `icon` | `string` | `"book-open"` | No | icon prop. |
  \| `authorIcon` | `string` | `"user-pen"` | No | author Icon prop. |
  \| `dateIcon` | `string` | `"calendar"` | No | date Icon prop. |
  \| `cta` | `string` | `"Read More"` | No | cta prop. |
  \| `img` | `any` | `null` | No | img prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### ShowcaseCards

Use **ShowcaseCards** when you need paginated project showcase with search, filtering, and media cards.. Accepts: {Array} items, {number} limit, {number} pageSize, {string} className, {object} style, ...rest.
Source description: Paginated project showcase with search, filtering, and media cards.
**Import path**

```jsx theme={null}
import { ShowcaseCards } from '/snippets/components/displays/cards/Cards.jsx'
```

**Metadata**

* Status: `experimental`
* Accepts: `{Array} items, {number} limit, {number} pageSize, {string} className, {object} style, ...rest`
* Data source: `prop (items)`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - Collection data rendered by the component. |
  \| `limit` | `number` | `null` | No | Limit used by the component. |
  \| `pageSize` | `number` | `10` | No | Page size used by the component. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

<CustomDivider />

### TwitterTimeline

Use **TwitterTimeline** when you need embeds a Twitter/X timeline feed widget via iframe.. Accepts: {string} className, {object} style, ...rest.
Source description: Embeds a Twitter/X timeline feed widget via iframe.
**Import path**

```jsx theme={null}
import { TwitterTimeline } from '/snippets/components/integrators/embeds/DataEmbed.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{string} className, {object} style, ...rest`
* Data source: `feed.mikle.com widget`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

<CustomDivider />

### YouTubeVideoData

Use **YouTubeVideoData** when you need renders YouTube video data with video embed and metadata columns.. Accepts: {Array} items, {number} limit, {number} cols, {string} className, {object} style, ...rest.
Source description: Renders YouTube video data with video embed and metadata columns.
**Import path**

```jsx theme={null}
import { YouTubeVideoData } from '/snippets/components/integrators/video-data/VideoData.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `{Array} items, {number} limit, {number} cols, {string} className, {object} style, ...rest`
* Data source: `automation/youtube`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - Collection data rendered by the component. |
  \| `limit` | `number` | \`\` | Yes | Limit used by the component. |
  \| `cols` | `number` | `2` | No | Cols used by the component. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |