Skip to main content
Generation Script: This file is generated from script(s): operations/scripts/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/generate-component-docs.js --fix --template-only --category integrators.

Back to Component Library

Return to the generated component library landing page.

​
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

ComponentStatusImport pathDescription
BlogCardstable/snippets/components/integrators/blog/Data.jsxBlog post card with scrollable content, metadata, and CTA.
BlogDataLayoutstable/snippets/components/integrators/blog/Data.jsxSingle-column BlogCard stack.
CardBlogDataLayoutstable/snippets/components/integrators/blog/Data.jsxGrid layout rendering BlogCards from an items array.
CardColumnsPostLayoutstable/snippets/components/integrators/blog/Data.jsxMulti-column PostCard layout.
CardInCardLayoutstable/snippets/components/integrators/blog/Data.jsxPostCards rendered inside Card wrappers.
CoinGeckoExchangesstable/snippets/components/integrators/feeds/Coingecko.jsxSortable table of exchanges listing a token. Keyboard-accessible sort headers.
ColumnsBlogCardLayoutstable/snippets/components/integrators/blog/Data.jsxMulti-column BlogCard layout using Mintlify Columns.
DiscordAnnouncementsstable/snippets/components/integrators/blog/Data.jsxDiscord announcement feed with parsed markdown content. Sanitised HTML.
ExternalContentstable/snippets/components/integrators/embeds/ExternalContent.jsxFetches and renders external markdown with scrollable container and source link.
ForumLatestLayoutstable/snippets/components/integrators/blog/Data.jsxLatest forum topics with banner image and topic cards.
LatestVersionexperimental/snippets/components/integrators/feeds/Release.jsxDisplays the latest release version string from automation data.
LumaEventsstable/snippets/components/integrators/blog/Data.jsxUpcoming/past event cards from Luma calendar data.
MarkdownEmbedstable/snippets/components/integrators/embeds/DataEmbed.jsxFetches and renders remote markdown content.
PdfEmbedstable/snippets/components/integrators/embeds/DataEmbed.jsxEmbeds a PDF in a framed iframe with caption.
PostCardstable/snippets/components/integrators/blog/Data.jsxPost card with gradient header, scrollable content, and metadata.
ShowcaseCardsexperimental/snippets/components/integrators/feeds/ShowcaseCards.jsxPaginated project showcase with search, filtering, and media cards.
TwitterTimelinestable/snippets/components/integrators/embeds/DataEmbed.jsxEmbeds a Twitter/X timeline feed widget via iframe.
YouTubeVideoDatastable/snippets/components/integrators/video-data/VideoData.jsxRenders 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/Data.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/Data.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/Data.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/Data.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/Data.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/Data.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/Data.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/ExternalContent.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/Data.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/Data.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/Data.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/integrators/feeds/ShowcaseCards.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. |
Last modified on March 30, 2026