Integrators

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

node operations/scripts/generators/components/documentation/generate-component-docs.js --fix --template-only --category integrators

Back to Component Library

Return to the generated component library landing page.

Fetches, embeds, or binds to external data – feeds, embeds, video, APIs. This category currently contains 18 governed export(s).

Decision Tree Excerpt

Fetches, embeds, or binds to external/third-party data? → integrators/
Part of the page’s outer structure, typically used once? → scaffolding/
Takes content and presents it in a formatted way? → displays/
Exists to hold, group, or arrange other things? → wrappers/
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: title, content, href, author, datePosted, excerpt, readingTime, icon, authorIcon, dateIcon, cta, img, className, style, …rest. Source description: Blog post card with scrollable content, metadata, and CTA. Import path

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. |

BlogDataLayout

Use BlogDataLayout when you need single-column BlogCard stack.. Accepts: items, limit, className, style, …rest. Source description: Single-column BlogCard stack. Import path

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. |

CardBlogDataLayout

Use CardBlogDataLayout when you need grid layout rendering BlogCards from an items array.. Accepts: items, limit, className, style, …rest. Source description: Grid layout rendering BlogCards from an items array. Import path

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. |

CardColumnsPostLayout

Use CardColumnsPostLayout when you need multi-column PostCard layout.. Accepts: cols, items, limit, className, style, …rest. Source description: Multi-column PostCard layout. Import path

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. |

CardInCardLayout

Use CardInCardLayout when you need postCards rendered inside Card wrappers.. Accepts: items, limit, className, style, …rest. Source description: PostCards rendered inside Card wrappers. Import path

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. |

CoinGeckoExchanges

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

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. |

ColumnsBlogCardLayout

Use ColumnsBlogCardLayout when you need multi-column BlogCard layout using Mintlify Columns.. Accepts: items, cols, limit, className, style, …rest. Source description: Multi-column BlogCard layout using Mintlify Columns. Import path

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. |

DiscordAnnouncements

Use DiscordAnnouncements when you need discord announcement feed with parsed markdown content. Sanitised HTML.. Accepts: items, limit, className, style, …rest. Source description: Discord announcement feed with parsed markdown content. Sanitised HTML. Import path

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. |

ExternalContent

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

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. |

ForumLatestLayout

Use ForumLatestLayout when you need latest forum topics with banner image and topic cards.. Accepts: items, limit, className, style, …rest. Source description: Latest forum topics with banner image and topic cards. Import path

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. |

LatestVersion

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

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. |

LumaEvents

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

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. |

MarkdownEmbed

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

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. |

PdfEmbed

Use PdfEmbed when you need embeds a PDF in a framed iframe with caption.. Accepts: title, src, height, width, className, style, …rest. Source description: Embeds a PDF in a framed iframe with caption. Import path

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. |

PostCard

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

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. |

ShowcaseCards

Use ShowcaseCards when you need paginated project showcase with search, filtering, and media cards.. Accepts: items, limit, pageSize, className, style, …rest. Source description: Paginated project showcase with search, filtering, and media cards. Import path

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. |

TwitterTimeline

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

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. |

YouTubeVideoData

Use YouTubeVideoData when you need renders YouTube video data with video embed and metadata columns.. Accepts: items, limit, cols, className, style, …rest. Source description: Renders YouTube video data with video embed and metadata columns. Import path

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. |

Documentation Guide

Technical References

Compendium

Changelogs

Help Center

Guides

Integrators

Back to Component Library

Integrators

Decision Tree Excerpt

Summary Table

Component Reference

BlogCard

BlogDataLayout

CardBlogDataLayout

CardColumnsPostLayout

CardInCardLayout

CoinGeckoExchanges

ColumnsBlogCardLayout

DiscordAnnouncements

ExternalContent

ForumLatestLayout

LatestVersion

LumaEvents

MarkdownEmbed

PdfEmbed

PostCard

ShowcaseCards

TwitterTimeline

YouTubeVideoData

Documentation Guide

Technical References

Compendium

Changelogs

Help Center

Guides

Back to Component Library

​Integrators

​Decision Tree Excerpt

​Summary Table

​Component Reference

​BlogCard

​BlogDataLayout

​CardBlogDataLayout

​CardColumnsPostLayout

​CardInCardLayout

​CoinGeckoExchanges

​ColumnsBlogCardLayout

​DiscordAnnouncements

​ExternalContent

​ForumLatestLayout

​LatestVersion

​LumaEvents

​MarkdownEmbed

​PdfEmbed

​PostCard

​ShowcaseCards

​TwitterTimeline

​YouTubeVideoData

Integrators

Decision Tree Excerpt

Summary Table

Component Reference

BlogCard

BlogDataLayout

CardBlogDataLayout

CardColumnsPostLayout

CardInCardLayout

CoinGeckoExchanges

ColumnsBlogCardLayout

DiscordAnnouncements

ExternalContent

ForumLatestLayout

LatestVersion

LumaEvents

MarkdownEmbed

PdfEmbed

PostCard

ShowcaseCards

TwitterTimeline

YouTubeVideoData