Display Components - Livepeer Docs

Back to Component Library

Return to the main component library index

Video Components

YouTubeVideo

Embeds a YouTube video with optional caption and author attribution. Displays a YouTube video in a responsive iframe within a Frame component. Import:

import { YouTubeVideo } from "/snippets/components/display/video.jsx";

Props:

Prop	Type	Default	Required	Description
`embedUrl`	`string`	-	Yes	YouTube embed URL (e.g., “https://www.youtube.com/embed/VIDEO_ID”)
`title`	`string`	`""`	No	Video title for accessibility and caption display
`author`	`string`	`""`	No	Author name to display in caption
`hint`	`string`	`""`	No	Optional hint text to display
`caption`	`string`	-	No	Custom caption (overrides author/title format)

Examples:

Code

<YouTubeVideo embedUrl="https://www.youtube.com/embed/VIDEO_ID" />

<YouTubeVideo 
  embedUrl="https://www.youtube.com/embed/VIDEO_ID"
  author="Livepeer"
  title="Video Title"
  hint="Click to play"
/>

Note: YouTubeVideo currently unavailable due to component bug. See component-bugs.md for details.

Video

Self-hosted video component with Frame wrapper. Displays a self-hosted video file within a Frame component. Import:

import { Video } from "/snippets/components/display/video.jsx";

Props:

Prop	Type	Default	Required	Description
`src`	`string`	-	Yes	Path to the video file (e.g., “/snippets/assets/media/videos/demo.mp4”)
`title`	`string`	`""`	No	Video title for accessibility
`author`	`string`	`""`	No	Author name to display with microphone icon
`caption`	`string`	-	No	Optional caption text (if author provided, styled with icon)
`href`	`string`	`""`	No	Optional link URL for author
`controls`	`boolean`	`true`	No	Whether to show video controls
`autoPlay`	`boolean`	`false`	No	Whether to autoplay the video
`loop`	`boolean`	`false`	No	Whether to loop the video
`muted`	`boolean`	`false`	No	Whether to mute the video
`children`	`ReactNode`	-	No	Optional children to render inside Frame

Examples:

Basic
Autoplay Loop
With Author
Code

<Video src="/snippets/assets/media/videos/demo.mp4" title="Demo Video" />

<Video 
  src="/snippets/assets/media/videos/demo.mp4" 
  autoPlay
  muted
  loop
  author="Author Name"
  title="Video Title"
/>

TitledVideo

A video component with an overlay title. Displays a looping video with an optional title overlay and styled border. Import:

import { TitledVideo } from "/snippets/components/display/video.jsx";

Props:

Prop	Type	Default	Required	Description
`src`	`string`	-	Yes	Video source URL
`title`	`string`	-	No	Title text to overlay on the video
`subtitle`	`string`	-	No	Subtitle text to overlay
`arrow`	`boolean`	`false`	No	Whether to show arrow indicator
`borderRadius`	`string`	`"12px"`	No	Border radius of the video
`style`	`object`	`{}`	No	Additional styles for the container

Examples:

With Title
Code

Daydream Demo

<TitledVideo
  src="/snippets/assets/media/videos/demo.mp4"
  title="Demo Title"
  subtitle="Subtitle text"
  arrow={true}
/>

ShowcaseVideo

Showcase video component with custom styling for showcase pages. Import:

import { ShowcaseVideo } from "/snippets/components/display/video.jsx";

Props: Same as TitledVideo (uses TitledVideo internally with showcase-specific styling)

CardVideo

YouTube video embedded in a Card component. Displays a YouTube video within a Card component with a title caption below. Import:

import { CardVideo } from "/snippets/components/display/video.jsx";

Props:

Prop	Type	Default	Required	Description
`embedUrl`	`string`	-	Yes	YouTube embed URL
`title`	`string`	-	Yes	Video title to display below the video
`style`	`object`	-	No	Additional styles

Examples:

Code

<CardVideo
  embedUrl="https://www.youtube.com/embed/VIDEO_ID"
  title="Video Title"
/>

Note: CardVideo currently unavailable due to component bug. See component-bugs.md for details.

LinkedInEmbed

Embeds a LinkedIn post with optional caption and hint. Follows LinkedIn’s official embed requirements. Import:

import { LinkedInEmbed } from "/snippets/components/display/video.jsx";

Props:

Prop	Type	Default	Required	Description
`embedUrl`	`string`	-	Yes	LinkedIn embed URL (should include ?compact=1)
`title`	`string`	`"Embedded post"`	No	Post title for accessibility
`hint`	`string`	`""`	No	Optional hint text
`caption`	`string`	-	No	Optional caption text
`height`	`string`	`"399"`	No	Height of the embed iframe

Examples:

Code

<LinkedInEmbed
  embedUrl="https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7387171661868933120?compact=1"
  title="Livepeer Update"
  caption="Latest news from the Livepeer team"
  height="500"
/>

YouTubeVideoData

Renders YouTube videos from youtubeData.jsx format. Converts YouTube watch URLs to embed URLs and displays them in a grid. Import:

import { YouTubeVideoData } from "/snippets/components/display/video.jsx";

Props:

Prop	Type	Default	Required	Description
`items`	`Array`	`[]`	No	Array of video objects from youtubeData.jsx
`limit`	`number`	-	No	Optional limit on number of videos
`cols`	`number`	`2`	No	Number of columns for grid layout

Note: Requires data from snippets/automations/youtube/youtubeData.jsx

YouTubeVideoDownload

Placeholder for YouTube video with download functionality. Currently non-functional (deprecated). Note: This component is deprecated. Use YouTubeVideo instead.

Image Components

Image

Image component with Frame wrapper. Displays an image within a Frame component with optional caption and hint. Import:

import { Image } from "/snippets/components/display/image.jsx";

Props:

Prop	Type	Default	Required	Description
`src`	`string`	-	Yes	Image source URL
`alt`	`string`	-	Yes	Alt text for accessibility
`caption`	`string`	-	No	Optional caption to display below the image
`icon`	`string`	-	No	Icon name (currently unused)
`hint`	`string`	-	No	Optional hint text
`fullwidth`	`boolean`	`true`	No	Whether to display image at full width

Examples:

Basic
With Caption
Code

<Image 
  src="/images/diagram.png" 
  alt="System Diagram"
  caption="Figure 1: Architecture"
/>

LinkImage

Clickable image that opens in a new tab. Displays an image within a Frame component that links to a URL. Import:

import { LinkImage } from "/snippets/components/display/image.jsx";

Props:

Prop	Type	Default	Required	Description
`src`	`string`	-	Yes	Image source URL
`alt`	`string`	-	Yes	Alt text for accessibility
`caption`	`string`	-	No	Optional caption to display below the image
`icon`	`string`	-	No	Icon name (currently unused)
`hint`	`string`	-	No	Optional hint text
`href`	`string`	-	Yes	URL to navigate to when image is clicked

Examples:

Example
Code

<LinkImage 
  src="/images/preview.png" 
  alt="Preview"
  href="/images/full-diagram.png"
  caption="Click to view full size"
/>

Embed Components

MarkdownEmbed

Fetches and renders markdown content from a URL. Dynamically fetches markdown content from a remote URL and renders it. Import:

import { MarkdownEmbed } from "/snippets/components/display/embed.jsx";

Props:

Prop	Type	Default	Required	Description
`url`	`string`	-	Yes	URL of the markdown file to fetch and display

Examples:

Code

<MarkdownEmbed url="https://raw.githubusercontent.com/user/repo/main/README.md" />

EmbedMarkdown

Alias for MarkdownEmbed. Alternative name for the same component. Import:

import { EmbedMarkdown } from "/snippets/components/display/embed.jsx";

TwitterTimeline

Embeds a Twitter/X timeline using an iframe widget. Import:

import { TwitterTimeline } from "/snippets/components/display/embed.jsx";

Props: None (uses hardcoded widget URL) Examples:

Code

<TwitterTimeline />

Quote Components

Quote

Simple quote component with styled border and italic text. Import:

import { Quote } from "/snippets/components/display/quote.jsx";

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Quote content

Examples:

Basic
Code

“Livepeer is the future of decentralized video infrastructure.”

<Quote>
  "Your quote text here"
</Quote>

FrameQuote

Quote component with Frame wrapper, optional author, source, and image. Import:

import { FrameQuote } from "/snippets/components/display/quote.jsx";

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Quote content
`author`	`string`	-	No	Author name
`source`	`string`	-	No	Source name
`href`	`string`	-	No	Link URL for source
`frame`	`boolean`	`true`	No	Whether to wrap in Frame
`align`	`string`	`"right"`	No	Alignment: “left”, “center”, “right”
`borderColor`	`string`	-	No	Border color
`img`	`object`	-	No	Image object with `src` and `alt`

Examples:

With Author
Code

“Livepeer enables decentralized video streaming at scale.”

Doug Petkanics

Livepeer Blog

<FrameQuote 
  author="Author Name" 
  source="Source Name"
  href="https://example.com"
  align="center"
>
  "Quote text here"
</FrameQuote>

Carousel & Showcase

Carousel & Showcase Components

CardCarousel

Renders a simple carousel that paginates through a fixed number of cards. Import:

import { CardCarousel } from "/snippets/components/display/CardCarousel.jsx";

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Card elements to display
`visibleCount`	`number`	`3`	No	Number of cards to show per view
`gap`	`string\|number`	`"1.5rem"`	No	Gap between cards (CSS value)
`showDots`	`boolean`	`true`	No	Whether to show page indicator dots
`style`	`object`	-	No	Container style overrides

Examples:

Code

<CardCarousel visibleCount={3}>
  <Card title="Card 1">Content 1</Card>
  <Card title="Card 2">Content 2</Card>
  <Card title="Card 3">Content 3</Card>
  <Card title="Card 4">Content 4</Card>
</CardCarousel>

ShowcaseCards

Interactive showcase cards component with search, filtering, and pagination. Import:

import { ShowcaseCards } from "/snippets/components/display/showcaseCards.jsx";

Props:

Prop	Type	Default	Required	Description
`items`	`Array`	`[]`	No	Array of showcase item objects
`limit`	`number`	`null`	No	Optional limit on number of items
`pageSize`	`number`	`10`	No	Number of items per page

Item Object Structure:

title - Card title
subtitle - Card subtitle
description - Card description
href - Link URL
categoryTags - Array of category strings
productTags - Array of product strings
mediaSrc - Image/video source
mediaType - “image” or “video”
logo - Logo image URL
links - Array of link objects

Examples:

Code

const items = [
  {
    title: "Project Name",
    subtitle: "Subtitle",
    description: "Description",
    href: "/project",
    categoryTags: ["Apps"],
    productTags: ["Livepeer"],
    mediaSrc: "/images/project.png",
    mediaType: "image"
  }
];

<ShowcaseCards items={items} limit={10} pageSize={6} />

Diagram Components

ScrollableDiagram

Interactive diagram viewer with zoom controls (25%-200%) and scrollable pan support. Import:

import { ScrollableDiagram } from "/snippets/components/display/zoomable-diagram.jsx";

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Diagram or content to display
`title`	`string`	`""`	No	Optional title to display above the diagram
`maxHeight`	`string`	`"500px"`	No	Maximum height of the scrollable container
`minWidth`	`string`	`"100%"`	No	Minimum width of the content area

Examples:

Basic
Code

<ScrollableDiagram title="System Architecture" maxHeight="600px">
  <img src="/diagrams/architecture.png" alt="Architecture" />
</ScrollableDiagram>

Social Components

SocialLinks

Social media icon links for Livepeer. Displays a row of social media icon links with official brand colors. Import:

import { SocialLinks } from "/snippets/components/display/socialLinks.jsx";

Props:

Prop	Type	Default	Required	Description
`size`	`number`	`20`	No	Icon size
`gap`	`string`	`"0.75rem"`	No	Gap between icons
`justify`	`string`	`"center"`	No	Justify content: “center”, “flex-start”, “flex-end”
`color`	`string`	-	No	Override color for all icons

Examples:

Default
Custom
Code

<SocialLinks />
<SocialLinks size={24} justify="flex-start" />

Frame Mode Components

Components for use in Mintlify frame mode pages. These provide styled headings and text that work properly when mode: frame is set in frontmatter.

PageHeader

Full page header component with title, subtitle, description, and divider. Import:

import { PageHeader } from "/snippets/components/display/frameMode.jsx";

Props:

Prop	Type	Default	Required	Description
`title`	`string`	-	Yes	Main title text
`subtitle`	`string`	-	No	Subtitle text
`description`	`string`	-	No	Description text
`titleColor`	`string`	`"var(--hero-text)"`	No	Title color
`subtitleColor`	`string`	`"var(--accent)"`	No	Subtitle color
`descriptionColor`	`string`	-	No	Description color
`children`	`ReactNode`	-	No	Additional content

Examples:

Basic
Code

<PageHeader 
  title="Page Title"
  subtitle="Subtitle"
  description="Description"
/>

H1, H2, H3, H4, H5, H6

Custom heading components for frame mode with optional icons. Import:

import { H1, H2, H3, H4, H5, H6 } from "/snippets/components/display/frameMode.jsx";

Props (all headings):

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Heading text
`icon`	`string`	-	No	Icon name or path to theme-aware SVG
`iconSize`	`number`	varies	No	Size of icon (H1: 32, H2: 28, H3: 24, H4: 20, H5: 18, H6: 16)
`iconColor`	`string`	`"var(--accent)"`	No	Icon color
`align`	`string`	`"left"`	No	Text alignment: “left”, “center”, “right”
`gap`	`string`	varies	No	Gap between icon and text

Examples:

Headings
Code

<H1 icon="rocket">Main Title</H1>
<H2 icon="star" align="center">Section Title</H2>
<H3>Subsection</H3>

P

Custom paragraph component for frame mode with optional icon. Import:

import { P } from "/snippets/components/display/frameMode.jsx";

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Paragraph text
`icon`	`string`	-	No	Icon name or path
`iconSize`	`number`	`16`	No	Icon size
`iconColor`	`string`	theme-aware	No	Icon color
`align`	`string`	`"left"`	No	Text alignment
`gap`	`string`	`"0.5rem"`	No	Gap between icon and text

Examples:

Code

// P component with icon currently unavailable due to component bug
// Use P without icon prop, or see component-bugs.md for details
<P align="center">Centered text</P>

Divider

Horizontal divider line for frame mode. Renders a horizontal rule with proper styling. Import:

import { Divider } from "/snippets/components/display/frameMode.jsx";

Props:

Prop	Type	Default	Required	Description
`color`	`string`	`"var(--border)"`	No	Custom color for the divider
`margin`	`string`	`"1.5rem 0"`	No	Vertical margin
`opacity`	`number`	`0.2`	No	Opacity of the divider

Examples:

Example
Code

<Divider />
<Divider margin="2rem 0" opacity={0.5} />

Next: Content Components

Continue to Content Components →

Home

Documentation Guide

Livepeer Concepts

Developer References

Gateway References

Orchestrator References

LPT & Delegator References

Community Resources

Partner Resources

Help Center

Technical References

Changelog

Back to Component Library

​Video Components

​YouTubeVideo

​Video

​TitledVideo

​ShowcaseVideo

​CardVideo

​LinkedInEmbed

​YouTubeVideoData

​YouTubeVideoDownload

​Image Components

​Image

​LinkImage

​Embed Components

​MarkdownEmbed

​EmbedMarkdown

​TwitterTimeline

​Quote Components

​Quote

​FrameQuote

​Carousel & Showcase Components

​CardCarousel

​ShowcaseCards

​Diagram Components

​ScrollableDiagram

​Social Components

​SocialLinks

​Frame Mode Components

​PageHeader

​H1, H2, H3, H4, H5, H6

​P

​Divider

Next: Content Components

Video Components

YouTubeVideo

Video

TitledVideo

ShowcaseVideo

CardVideo

LinkedInEmbed

YouTubeVideoData

YouTubeVideoDownload

Image Components

Image

LinkImage

Embed Components

MarkdownEmbed

EmbedMarkdown

TwitterTimeline

Quote Components

Quote

FrameQuote

Carousel & Showcase Components

CardCarousel

ShowcaseCards

Diagram Components

ScrollableDiagram

Social Components

SocialLinks

Frame Mode Components

PageHeader

H1, H2, H3, H4, H5, H6

P

Divider