Back to Component Library Return to the main component library index
Code Components
Code Components CustomCodeBlock Advanced code block with placeholder replacement, pre/post notes, and optional expandable output section.
Import: import { CustomCodeBlock } from "/snippets/components/content/code.jsx" ;
Props: Prop Type Default Required Description filenamestring- No Name of the file to display in header iconstring- No Icon to display in header languagestring- No Programming language for syntax highlighting highlightstring- No Line numbers/ranges to highlight (e.g., “1-3,5”) codeStringstring""No The code content to display placeholderValuestring""No Value to replace with wrapbooleantrueNo Whether to wrap long lines linesbooleantrueNo Whether to show line numbers preNotestring""No Note to display before code block postNotestring""No Note to display after code block outputobject- No Optional output configuration output.codeStringstring- No Output code content output.filenamestring- No Output filename output.iconstring- No Output icon output.languagestring- No Output language
Examples: Basic
With Placeholder
Code
const apiKey = 'your-key-here';
Add this to your configuration file
const API_KEY = 'your-api-key-here';
< CustomCodeBlock filename = "example.js" language = "javascript" codeString = "const apiKey = 'your-key';" preNote = "Configuration example" postNote = "Remember to keep your API key secure" />
CodeComponent Simple code block wrapper component.
Import: import { CodeComponent } from "/snippets/components/content/code.jsx" ;
Props: Accepts standard CodeBlock props (language, filename, icon, etc.)Note: This is a wrapper around Mintlify’s CodeBlock component.ComplexCodeBlock Advanced code block with multiple features including placeholder replacement and output sections.
Import: import { ComplexCodeBlock } from "/snippets/components/content/code.jsx" ;
Props: Similar to CustomCodeBlock with additional complexity handling.CodeSection Section wrapper for organizing multiple code blocks.
Import: import { CodeSection } from "/snippets/components/content/code.jsx" ;
Props: Prop Type Default Required Description childrenReactNode- Yes Code blocks to display
External Content
External Content ExternalContent Reusable component for displaying external GitHub content with header and scrollable container.
Import: import { ExternalContent } from "/snippets/components/content/external-content.jsx" ;
Props: Prop Type Default Required Description repoNamestring- Yes Repository name (e.g., “livepeer/awesome-livepeer”) githubUrlstring- Yes Full GitHub repository URL maxHeightstring"1000px"No Maximum height of scrollable container iconstring"github"No Icon to display in header childrenReactNode- Yes Content to display (typically imported MDX)
Examples: External content from the Livepeer documentation repository.
Automatically styled container Link to GitHub source import MyContent from '/snippets/external/my-content.mdx' < ExternalContent repoName = "livepeer/awesome-livepeer" githubUrl = "https://github.com/livepeer/awesome-livepeer" maxHeight = "800px" > < MyContent /> </ ExternalContent >
API Response Fields
API Response Fields ValueResponseField ResponseField wrapper that displays a value with optional label and line styling.
Import: import { ValueResponseField } from "/snippets/components/content/responseField.jsx" ;
Props: Prop Type Default Required Description descriptionstring|function- No Description text or function that returns description postanynullNo Value to display after description labelstring"value"No Label for the value linebooleantrueNo Whether to show bottom border line childrenReactNode- No Additional content ...propsobject- No Additional ResponseField props (name, type, default, required, etc.)
CustomResponseField ResponseField wrapper that hides the bottom divider.
Import: import { CustomResponseField } from "/snippets/components/content/responseField.jsx" ;
Props: Prop Type Default Required Description descriptionstring- No Description text ...propsobject- No All ResponseField props (name, type, default, required, post, etc.)
ResponseFieldExpandable Groups multiple response fields in an expandable section.
Import: import { ResponseFieldExpandable } from "/snippets/components/content/responseField.jsx" ;
Props: Prop Type Default Required Description fieldsArray|Object{}No Array or object of field definitions ...propsobject- No Expandable component props (title, etc.)
ResponseFieldAccordion Groups multiple response fields in an accordion component.
Import: import { ResponseFieldAccordion } from "/snippets/components/content/responseField.jsx" ;
Props: Prop Type Default Required Description fieldsArray|Object{}No Array or object of field definitions ...propsobject- No Accordion component props (title, etc.)
ResponseFieldGroup Wrapper that chooses accordion or expandable layout at runtime.
Import: import { ResponseFieldGroup } from "/snippets/components/content/responseField.jsx" ;
Props: Prop Type Default Required Description componentstring"accordion"No Component type: “accordion” or “expandable” fieldsArray|Object{}No Array or object of field definitions ...propsobject- No Component props (title, etc.)
Data Display Components
Data Display Components BlogCard Card component specifically designed for blog posts with reading time and excerpt support.
Import: import { BlogCard } from "/snippets/components/content/data.jsx" ;
Props: Prop Type Default Required Description titlestring- Yes The title of the blog post contentstring- Yes HTML content to display hrefstring- Yes Link URL for the blog post authorstring"Livepeer Team"No Author name datePostedstringnullNo Publication date excerptstringnullNo Short excerpt (use if linking to external blog) readingTimenumbernullNo Estimated reading time in minutes iconstring"book-open"No Icon for the card ctastring"Read More"No Call-to-action button text imgstringnullNo Optional image URL
PostCard Card component for displaying forum posts or articles with author, date, and metadata.
Import: import { PostCard } from "/snippets/components/content/data.jsx" ;
Props: Prop Type Default Required Description titlestring- Yes The title of the post contentstring- Yes HTML content to display hrefstring- Yes Link URL for the card authorstring"Unknown"No Author name datePostedstringnullNo Date the post was published iconstring"book-open"No Icon to display on the card ctastring"Read More"No Call-to-action button text imgstringnullNo Optional image URL for the card
CardBlogDataLayout Layout component for displaying multiple BlogCards in a vertical layout.
Import: import { CardBlogDataLayout } from "/snippets/components/content/data.jsx" ;
Props: Prop Type Default Required Description itemsArray[]No Array of BlogCard props objects limitnumber- No Optional limit on number of items
ColumnsBlogCardLayout Layout component for displaying multiple BlogCards in columns.
Import: import { ColumnsBlogCardLayout } from "/snippets/components/content/data.jsx" ;
Props: Prop Type Default Required Description itemsArray[]No Array of BlogCard props objects colsnumber2No Number of columns limitnumber- No Optional limit on number of items
CardColumnsPostLayout Layout component for displaying multiple PostCards in columns.
Import: import { CardColumnsPostLayout } from "/snippets/components/content/data.jsx" ;
Props: Prop Type Default Required Description colsnumber2No Number of columns to display itemsArray[]No Array of PostCard props objects limitnumber- No Optional limit on number of items
DiscordAnnouncements Displays Discord announcements from discordAnnouncementsData.jsx.
Import: import { DiscordAnnouncements } from "/snippets/components/content/data.jsx" ;
Props: Prop Type Default Required Description itemsArray[]No Array of announcement objects limitnumber- No Optional limit on number of announcements
Note: Requires data from snippets/automations/discord/discordAnnouncementsData.jsxLumaEvents Displays Luma events from lumaEventsData.jsx.
Import: import { LumaEvents } from "/snippets/components/content/data.jsx" ;
Props: Prop Type Default Required Description dataObject- Yes Event data object with upcoming and past arrays limitnumber- No Optional limit on number of events typestring"upcoming"No Type of events: “upcoming”, “past”, or “all”
Note: Requires data from snippets/automations/luma/lumaEventsData.jsx
Version Components
Version Components LatestVersion Wrapper for GitHub action which fetches most recent release version of go-livepeer.
Import: import { LatestVersion } from "/snippets/components/content/release.jsx" ;
Props: Prop Type Default Required Description versionstring- Yes Version string (typically from GitHub action)
Next: Layout Components Continue to Layout Components →
Last modified on February 18, 2026
Code Components