Integrators

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

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.

Integrators

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

This category currently contains 19 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	Frames external source content with a 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.
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.
RssBlogCard	stable	/snippets/components/integrators/blog/BlogCards.jsx	Blog card for RSS feed data. Matches BlogCard visual quality with icon title, metadata row, scrollable plain text excerpt, and scroll hint. Use for non-Ghost blog sources (Daydream, Streamplace, etc.).
RssBlogCardLayout	stable	/snippets/components/integrators/blog/BlogCards.jsx	Multi-column RssBlogCard layout. Use for RSS blog data (non-Ghost sources).
SolidityEmbed	stable	/snippets/components/integrators/embeds/DataEmbed.jsx	Fetches and renders a remote Solidity file with syntax highlighting inside a styled container. Lazy-loaded.
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.. 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: none
• 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.. Source description: Single-column BlogCard stack. Import path

import { BlogDataLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'

Metadata

• Status: stable
• Accepts: none
• 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.. 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: none
• 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.. Source description: Multi-column PostCard layout. Import path

import { CardColumnsPostLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'

Metadata

• Status: stable
• Accepts: none
• 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.. Source description: PostCards rendered inside Card wrappers. Import path

import { CardInCardLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'

Metadata

• Status: stable
• Accepts: none
• 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.. 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: none
• 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.. Source description: Multi-column BlogCard layout using Mintlify Columns. Import path

import { ColumnsBlogCardLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'

Metadata

• Status: stable
• Accepts: none
• 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.. 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: none
• 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 frames external source content with a scrollable container and source link.. Source description: Frames external source content with a scrollable container and source link. Import path

import { ExternalContent } from '/snippets/components/integrators/embeds/DataEmbed.jsx'

Metadata

• Status: stable
• Accepts: none
• Data source: external source Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | sourceName | string | | No | Source name displayed in the component header. | | `sourceUrl` | `string` | | No | Source URL used by the header link. | | sourceLabel | string | "View source" | No | Label used by the header link. | | repoName | string | | No | Legacy source name alias. | | `githubUrl` | `string` | | No | Legacy source URL alias. | | 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.. 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: none
• 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.. 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: none
• 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.. 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: none
• 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. |

PdfEmbed

Use PdfEmbed when you need embeds a PDF in a framed iframe with caption.. 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: none
• 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.. 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: none
• 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. |

RssBlogCard

Use RssBlogCard when you need blog card for RSS feed data. Matches BlogCard visual quality with icon title, metadata row, scrollable plain text excerpt, and scroll hint. Use for non-Ghost blog sources (Daydream, Streamplace, etc.).. Source description: Blog card for RSS feed data. Matches BlogCard visual quality with icon title, metadata row, scrollable plain text excerpt, and scroll hint. Use for non-Ghost blog sources (Daydream, Streamplace, etc.). Import path

import { RssBlogCard } from '/snippets/components/integrators/blog/BlogCards.jsx'

Metadata

• Status: stable
• Accepts: none
• Data source: automation/rss Props No documented props.

RssBlogCardLayout

Use RssBlogCardLayout when you need multi-column RssBlogCard layout. Use for RSS blog data (non-Ghost sources).. Source description: Multi-column RssBlogCard layout. Use for RSS blog data (non-Ghost sources). Import path

import { RssBlogCardLayout } from '/snippets/components/integrators/blog/BlogCards.jsx'

Metadata

• Status: stable
• Accepts: none
• Data source: automation/rss Props No documented props.

SolidityEmbed

Use SolidityEmbed when you need fetches and renders a remote Solidity file with syntax highlighting inside a styled container. Lazy-loaded.. Source description: Fetches and renders a remote Solidity file with syntax highlighting inside a styled container. Lazy-loaded. Import path

import { SolidityEmbed } from '/snippets/components/integrators/embeds/DataEmbed.jsx'

Metadata

• Status: stable
• Accepts: none
• Data source: fetch(url) — raw GitHub .sol file Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | url | string | | Yes | Raw GitHub URL to the .sol file. | | `title` | `React.ReactNode` | | No | Optional title displayed above the code block. Accepts strings or components. | | filename | string | “ | No | Filename shown on the CodeBlock header. | | maxHeight | string | "500px" | No | Max height of the code container. | | style | object | {} | No | Inline style overrides. | | className | string | "" | No | CSS class name. |

TwitterTimeline

Use TwitterTimeline when you need embeds a Twitter/X timeline feed widget via iframe.. 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: none
• 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.. 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: none
• 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. |