Components Index

Generation Script: This file is generated from script(s): tools/scripts/generate-docs-guide-components-index.js.
Purpose: Aggregate inventory of repository components from snippets/components for docs-guide maintenance.
Run when: Components are added, removed, renamed, or their exported signatures change under snippets/components.
Important: Do not manually edit this file; run node tools/scripts/generate-docs-guide-components-index.js --write.

Content

Content components provide code, data, and response-format helpers for documentation pages.

code.jsx

CodeComponent

component

Props: filename, icon, language, highlight, expandable, wrap, lines, codeString, placeholderValue
Defaults: filename="", icon="terminal", language="", highlight="", expandable=false, wrap=true, lines=true, codeString="", placeholderValue=""

import { CodeComponent } from "/snippets/components/content/code.jsx";

<CodeComponent
  filename={""}
  icon={"terminal"}
  language={""}
  highlight={""}
  expandable={false}
  wrap={true}
  lines={true}
  codeString={""}
  placeholderValue={""}
/>

CodeSection

component

Props: fields
Defaults: fields={}

import { CodeSection } from "/snippets/components/content/code.jsx";

<CodeSection
  fields={{}}
/>

ComplexCodeBlock

component

Props: filename, icon, language, highlight, codeString, placeholderValue, wrap, lines, preNote, postNote
Defaults: codeString="", placeholderValue="", wrap=true, lines=true, preNote=null, postNote=null

import { ComplexCodeBlock } from "/snippets/components/content/code.jsx";

<ComplexCodeBlock
  filename={"<value>"}
  icon={"<value>"}
  language={"<value>"}
  highlight={"<value>"}
  codeString={""}
  placeholderValue={""}
  wrap={true}
  lines={true}
  preNote={null}
  postNote={null}
/>

CustomCodeBlock

component

Props: filename, icon, language, highlight, codeString, placeholderValue, wrap, lines, preNote, postNote, output
Defaults: codeString="", placeholderValue="", wrap=true, lines=true, preNote="", postNote="", output=""

import { CustomCodeBlock } from "/snippets/components/content/code.jsx";

<CustomCodeBlock
  filename={"<value>"}
  icon={"<value>"}
  language={"<value>"}
  highlight={"<value>"}
  codeString={""}
  placeholderValue={""}
  wrap={true}
  lines={true}
  preNote={""}
  postNote={""}
  output={""}
/>

data.jsx

BlogCard

component

Props: title, content, href, author, datePosted, excerpt, icon, authorIcon, dateIcon, cta, img
Defaults: author="Livepeer Team", datePosted=null, excerpt=null, icon="book-open", authorIcon="user-pen", dateIcon="calendar", cta="Read More", img=null

import { BlogCard } from "/snippets/components/content/data.jsx";

<BlogCard
  title={"<value>"}
  content={"<value>"}
  href={"<value>"}
  author={"Livepeer Team"}
  datePosted={null}
  excerpt={null}
  icon={"book-open"}
  authorIcon={"user-pen"}
  dateIcon={"calendar"}
  cta={"Read More"}
  img={null}
/>

BlogDataLayout

component

Props: items, limit
Defaults: items=[]

import { BlogDataLayout } from "/snippets/components/content/data.jsx";

<BlogDataLayout
  items={[]}
  limit={0}
/>

CardBlogDataLayout

component

Props: items, limit
Defaults: items=[]

import { CardBlogDataLayout } from "/snippets/components/content/data.jsx";

<CardBlogDataLayout
  items={[]}
  limit={0}
/>

CardColumnsPostLayout

component

Props: cols, items, limit
Defaults: cols=2, items=[]

import { CardColumnsPostLayout } from "/snippets/components/content/data.jsx";

<CardColumnsPostLayout
  cols={2}
  items={[]}
  limit={0}
/>

CardInCardLayout

component

Props: items, limit
Defaults: items=[]

import { CardInCardLayout } from "/snippets/components/content/data.jsx";

<CardInCardLayout
  items={[]}
  limit={0}
/>

ColumnsBlogCardLayout

component

Props: items, cols, limit
Defaults: items=[], cols=2

import { ColumnsBlogCardLayout } from "/snippets/components/content/data.jsx";

<ColumnsBlogCardLayout
  items={[]}
  cols={2}
  limit={0}
/>

DiscordAnnouncements

component

Props: items, limit
Defaults: items=[]

import { DiscordAnnouncements } from "/snippets/components/content/data.jsx";

<DiscordAnnouncements
  items={[]}
  limit={0}
/>

ForumLatestLayout

component

Props: items, limit
Defaults: items=[]

import { ForumLatestLayout } from "/snippets/components/content/data.jsx";

<ForumLatestLayout
  items={[]}
  limit={0}
/>

LumaEvents

component

Props: data, limit, type
Defaults: type="upcoming"

import { LumaEvents } from "/snippets/components/content/data.jsx";

<LumaEvents
  data={{}}
  limit={0}
  type={"upcoming"}
/>

PostCard

component

Props: title, content, href, author, datePosted, replyCount, icon, authorIcon, dateIcon, cta, img
Defaults: author="Unknown", datePosted=null, replyCount=null, icon="book-open", authorIcon="user-pen", dateIcon="calendar", cta="Read More", img=null

import { PostCard } from "/snippets/components/content/data.jsx";

<PostCard
  title={"<value>"}
  content={"<value>"}
  href={"<value>"}
  author={"Unknown"}
  datePosted={null}
  replyCount={null}
  icon={"book-open"}
  authorIcon={"user-pen"}
  dateIcon={"calendar"}
  cta={"Read More"}
  img={null}
/>

external-content.jsx

ExternalContent

component

Props: repoName, githubUrl, maxHeight, icon, children
Defaults: maxHeight="1000px", icon="github"

import { ExternalContent } from "/snippets/components/content/external-content.jsx";

<ExternalContent
  repoName={"<value>"}
  githubUrl={"<value>"}
  maxHeight={"1000px"}
  icon={"github"}
/>

math.jsx

MathBlock

component

Props: latex, className, ariaLabel
Defaults: className=""

import { MathBlock } from "/snippets/components/content/math.jsx";

<MathBlock
  latex={"<value>"}
  className={""}
  ariaLabel={"<value>"}
/>

MathInline

component

Props: latex, className, ariaLabel
Defaults: className=""

import { MathInline } from "/snippets/components/content/math.jsx";

<MathInline
  latex={"<value>"}
  className={""}
  ariaLabel={"<value>"}
/>

release.jsx

LatestVersion

component

Props: version
Defaults: None

import { LatestVersion } from "/snippets/components/content/release.jsx";

<LatestVersion
  version={"<value>"}
/>

responseField.jsx

CustomResponseField

component

Props: description
Defaults: None

import { CustomResponseField } from "/snippets/components/content/responseField.jsx";

<CustomResponseField
  description={"<value>"}
/>

ResponseFieldAccordion

component

Props: fields
Defaults: fields={}

import { ResponseFieldAccordion } from "/snippets/components/content/responseField.jsx";

<ResponseFieldAccordion
  fields={{}}
/>

ResponseFieldExpandable

component

Props: fields
Defaults: fields={}

import { ResponseFieldExpandable } from "/snippets/components/content/responseField.jsx";

<ResponseFieldExpandable
  fields={{}}
/>

ResponseFieldGroup

component

Props: component, fields
Defaults: component="accordion", fields={}

import { ResponseFieldGroup } from "/snippets/components/content/responseField.jsx";

<ResponseFieldGroup
  component={"accordion"}
  fields={{}}
/>

ValueResponseField

component

Props: description, post, label, line, children
Defaults: post=null, label="value", line=true

import { ValueResponseField } from "/snippets/components/content/responseField.jsx";

<ValueResponseField
  description={"<value>"}
  post={null}
  label={"value"}
  line={true}
/>

Display

Display components handle media, embeds, quotes, and visual presentation patterns.

CardCarousel.jsx

CardCarousel

component

Props: children, visibleCount, gap, showDots, style
Defaults: visibleCount=3, gap="1.5rem", showDots=true

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

<CardCarousel
  visibleCount={3}
  gap={"1.5rem"}
  showDots={true}
  style={{}}
/>

containers.mdx

TabsContainer

component

Props: children
Defaults: None

import { TabsContainer } from "/snippets/components/display/containers.mdx";

<TabsContainer />

customCards.jsx

CustomCardTitle

component

Props: icon, title, style
Defaults: None

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

<CustomCardTitle
  icon={"<value>"}
  title={"<value>"}
  style={{}}
/>

DisplayCard

component

Props: icon, title, style, background, children
Defaults: background='var(--card-background)'

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

<DisplayCard
  icon={"<value>"}
  title={"<value>"}
  style={{}}
  background={'var(--card-background)'}
/>

WidthCard

component

Props: width, children
Defaults: width='80%'

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

<WidthCard
  width={'80%'}
/>

embed.jsx

EmbedMarkdown

component

Props: url
Defaults: None

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

<EmbedMarkdown
  url={"<value>"}
/>

MarkdownEmbed

component

Props: url
Defaults: None

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

<MarkdownEmbed
  url={"<value>"}
/>

TwitterTimeline

component

Props: No explicit props detected from signature.
Defaults: No explicit defaults detected.

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

<TwitterTimeline />

embed.mdx

PdfEmbed

component

Props: title, src, height, width
Defaults: height="700px", width="100%"

import { PdfEmbed } from "/snippets/components/display/embed.mdx";

<PdfEmbed
  title={"<value>"}
  src={"<value>"}
  height={"700px"}
  width={"100%"}
/>

frameMode.jsx

Divider

component

Props: color, margin, opacity
Defaults: margin="1.5rem 0", opacity=0.2

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

<Divider
  color={"<value>"}
  margin={"1.5rem 0"}
  opacity={0.2}
/>

component

Props: children, icon, iconSize, iconColor, align, gap
Defaults: iconSize=32, align="left", gap="0.75rem"

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

<H1
  icon={"<value>"}
  iconSize={32}
  iconColor={"<value>"}
  align={"left"}
  gap={"0.75rem"}
/>

component

Props: children, icon, iconSize, iconColor, align, gap
Defaults: iconSize=28, align="left", gap="0.75rem"

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

<H2
  icon={"<value>"}
  iconSize={28}
  iconColor={"<value>"}
  align={"left"}
  gap={"0.75rem"}
/>

component

Props: children, icon, iconSize, iconColor, align, gap
Defaults: iconSize=24, align="left", gap="0.5rem"

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

<H3
  icon={"<value>"}
  iconSize={24}
  iconColor={"<value>"}
  align={"left"}
  gap={"0.5rem"}
/>

component

Props: children, icon, iconSize, iconColor, align, gap
Defaults: iconSize=20, align="left", gap="0.5rem"

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

<H4
  icon={"<value>"}
  iconSize={20}
  iconColor={"<value>"}
  align={"left"}
  gap={"0.5rem"}
/>

component

Props: children, icon, iconSize, iconColor, align, gap
Defaults: iconSize=18, align="left", gap="0.5rem"

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

<H5
  icon={"<value>"}
  iconSize={18}
  iconColor={"<value>"}
  align={"left"}
  gap={"0.5rem"}
/>

component

Props: children, icon, iconSize, iconColor, align, gap
Defaults: iconSize=16, align="left", gap="0.5rem"

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

<H6
  icon={"<value>"}
  iconSize={16}
  iconColor={"<value>"}
  align={"left"}
  gap={"0.5rem"}
/>

component

Props: children, icon, iconSize, iconColor, align, gap
Defaults: iconSize=16, align="left", gap="0.5rem"

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

<P
  icon={"<value>"}
  iconSize={16}
  iconColor={"<value>"}
  align={"left"}
  gap={"0.5rem"}
/>

PageHeader

component

Props: title, subtitle, description, children, titleColor, subtitleColor, descriptionColor
Defaults: None

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

<PageHeader
  title={"<value>"}
  subtitle={"<value>"}
  description={"<value>"}
  titleColor={"<value>"}
  subtitleColor={"<value>"}
  descriptionColor={"<value>"}
/>

image.jsx

Image

component

Props: src, alt, caption, icon, hint, fullwidth
Defaults: fullwidth=true

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

<Image
  src={"<value>"}
  alt={"<value>"}
  caption={"<value>"}
  icon={"<value>"}
  hint={"<value>"}
  fullwidth={true}
/>

LinkImage

component

Props: src, alt, caption, icon, hint, href
Defaults: None

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

<LinkImage
  src={"<value>"}
  alt={"<value>"}
  caption={"<value>"}
  icon={"<value>"}
  hint={"<value>"}
  href={"<value>"}
/>

quote.jsx

FrameQuote

component

Props: children, author, source, href, frame, align, borderColor, img, spacing
Defaults: frame=true, align='right', spacing=true

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

<FrameQuote
  author={"<value>"}
  source={"<value>"}
  href={"<value>"}
  frame={true}
  align={'right'}
  borderColor={"<value>"}
  img={"<value>"}
  spacing={true}
/>

Quote

component

Props: children
Defaults: None

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

<Quote />

showcaseCards.jsx

ShowcaseCards

component

Props: items, limit, pageSize
Defaults: items=[], limit=null, pageSize=10

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

<ShowcaseCards
  items={[]}
  limit={null}
  pageSize={10}
/>

socialLinks.jsx

Props: size, gap, justify, color
Defaults: size=20, gap="0.75rem", justify="center"

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

<SocialLinks
  size={20}
  gap={"0.75rem"}
  justify={"center"}
  color={"<value>"}
/>

video.jsx

CardVideo

component

Props: embedUrl, title, style
Defaults: None

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

<CardVideo
  embedUrl={"<value>"}
  title={"<value>"}
  style={{}}
/>

LinkedInEmbed

component

Props: embedUrl, title, hint, caption, height
Defaults: title="Embedded post", hint="", height="399"

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

<LinkedInEmbed
  embedUrl={"<value>"}
  title={"Embedded post"}
  hint={""}
  caption={"<value>"}
  height={"399"}
/>

ShowcaseVideo

component

Props: src, title, subtitle
Defaults: None

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

<ShowcaseVideo
  src={"<value>"}
  title={"<value>"}
  subtitle={"<value>"}
/>

TitledVideo

component

Props: src, title, subtitle, arrow, borderRadius, style
Defaults: arrow=false, borderRadius="12px", style={}

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

<TitledVideo
  src={"<value>"}
  title={"<value>"}
  subtitle={"<value>"}
  arrow={false}
  borderRadius={"12px"}
  style={{}}
/>

Video

component

Props: src, title, author, caption, href, controls, autoPlay, loop, muted, children
Defaults: title="", author="", href="", controls=true, autoPlay=false, loop=false, muted=false

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

<Video
  src={"<value>"}
  title={""}
  author={""}
  caption={"<value>"}
  href={""}
  controls={true}
  autoPlay={false}
  loop={false}
  muted={false}
/>

YouTubeVideo

component

Props: embedUrl, title, author, hint, caption
Defaults: title="", author="", hint=""

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

<YouTubeVideo
  embedUrl={"<value>"}
  title={""}
  author={""}
  hint={""}
  caption={"<value>"}
/>

YouTubeVideoData

component

Props: items, limit, cols
Defaults: items=[], cols=2

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

<YouTubeVideoData
  items={[]}
  limit={0}
  cols={2}
/>

YouTubeVideoDownload

component

Props: embedUrl, title, hint, caption
Defaults: caption=""

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

<YouTubeVideoDownload
  embedUrl={"<value>"}
  title={"<value>"}
  hint={"<value>"}
  caption={""}
/>

zoomable-diagram.jsx

ScrollableDiagram

component

Props: children, title, maxHeight, minWidth, showControls
Defaults: title="", maxHeight="500px", minWidth="100%", showControls=false

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

<ScrollableDiagram
  title={""}
  maxHeight={"500px"}
  minWidth={"100%"}
  showControls={false}
/>

Domain

Domain components package feature-specific UI blocks used by dedicated documentation domains.

04_GATEWAYS/callouts.jsx

FfmpegWarning

component

Props: No explicit props detected from signature.
Defaults: No explicit defaults detected.

import { FfmpegWarning } from "/snippets/components/domain/04_GATEWAYS/callouts.jsx";

<FfmpegWarning />

GatewayOffChainWarning

component

Props: No explicit props detected from signature.
Defaults: No explicit defaults detected.

import { GatewayOffChainWarning } from "/snippets/components/domain/04_GATEWAYS/callouts.jsx";

<GatewayOffChainWarning />

GatewayOnChainTTestnetNote

component

Props: No explicit props detected from signature.
Defaults: No explicit defaults detected.

import { GatewayOnChainTTestnetNote } from "/snippets/components/domain/04_GATEWAYS/callouts.jsx";

<GatewayOnChainTTestnetNote />

GatewayOnChainWarning

component

Props: No explicit props detected from signature.
Defaults: No explicit defaults detected.

import { GatewayOnChainWarning } from "/snippets/components/domain/04_GATEWAYS/callouts.jsx";

<GatewayOnChainWarning />

OrchAddrNote

component

Props: No explicit props detected from signature.
Defaults: No explicit defaults detected.

import { OrchAddrNote } from "/snippets/components/domain/04_GATEWAYS/callouts.jsx";

<OrchAddrNote />

TestVideoDownload

component

Props: children
Defaults: None

import { TestVideoDownload } from "/snippets/components/domain/04_GATEWAYS/callouts.jsx";

<TestVideoDownload />

04_GATEWAYS/quickstartTabs.jsx

QuickStartSteps

component

Props: dataSource
Defaults: None

import { QuickStartSteps } from "/snippets/components/domain/04_GATEWAYS/quickstartTabs.jsx";

<QuickStartSteps
  dataSource={{}}
/>

QuickStartTabs

component

Props: offchainSteps, onchainSteps
Defaults: None

import { QuickStartTabs } from "/snippets/components/domain/04_GATEWAYS/quickstartTabs.jsx";

<QuickStartTabs
  offchainSteps={"<value>"}
  onchainSteps={"<value>"}
/>

SHARED/HeroGif.jsx

Starfield

component

Props: density
Defaults: density=1.1

import { Starfield } from "/snippets/components/domain/SHARED/HeroGif.jsx";

<Starfield
  density={1.1}
/>

SHARED/Portals.jsx

HeroContentContainer

component

Props: children
Defaults: None

import { HeroContentContainer } from "/snippets/components/domain/SHARED/Portals.jsx";

<HeroContentContainer />

HeroImageBackgroundComponent

component

Props: children
Defaults: None

import { HeroImageBackgroundComponent } from "/snippets/components/domain/SHARED/Portals.jsx";

<HeroImageBackgroundComponent />

HeroOverviewContent

component

Props: children
Defaults: None

import { HeroOverviewContent } from "/snippets/components/domain/SHARED/Portals.jsx";

<HeroOverviewContent />

HeroSectionContainer

component

Props: children, minHeight
Defaults: minHeight="fit-content"

import { HeroSectionContainer } from "/snippets/components/domain/SHARED/Portals.jsx";

<HeroSectionContainer
  minHeight={"fit-content"}
/>

LogoHeroContainer

component

Props: src, alt, width, margin, imgHeight, imgWidth, objectFit, children
Defaults: src="/snippets/assets/logos/Livepeer-Logo-Full-Theme.svg", alt="Livepeer Logo", width="100%", margin="1rem auto 0 auto", imgHeight="20px", imgWidth="auto", objectFit="contain"

import { LogoHeroContainer } from "/snippets/components/domain/SHARED/Portals.jsx";

<LogoHeroContainer
  src={"/snippets/assets/logos/Livepeer-Logo-Full-Theme.svg"}
  alt={"Livepeer Logo"}
  width={"100%"}
  margin={"1rem auto 0 auto"}
  imgHeight={"20px"}
  imgWidth={"auto"}
  objectFit={"contain"}
/>

PortalCardsHeader

component

Props: children, title
Defaults: None

import { PortalCardsHeader } from "/snippets/components/domain/SHARED/Portals.jsx";

<PortalCardsHeader
  title={"<value>"}
/>

PortalContentContainer

component

Props: children
Defaults: None

import { PortalContentContainer } from "/snippets/components/domain/SHARED/Portals.jsx";

<PortalContentContainer />

PortalHeroContent

component

Props: zIndex, subtitle, subtitleIcon, description, refCardLink, overview, divider, callout, titleColor, subtitleColor, children
Defaults: zIndex=true, subtitle="Build - Explore - Create", subtitleIcon="/snippets/assets/logos/Livepeer-Logo-Symbol-Green-Theme.svg", divider=true, callout=null

import { PortalHeroContent } from "/snippets/components/domain/SHARED/Portals.jsx";

<PortalHeroContent
  zIndex={true}
  subtitle={"Build - Explore - Create"}
  subtitleIcon={"/snippets/assets/logos/Livepeer-Logo-Symbol-Green-Theme.svg"}
  description={"<value>"}
  refCardLink={"<value>"}
  overview={"<value>"}
  divider={true}
  callout={null}
  titleColor={"<value>"}
  subtitleColor={"<value>"}
/>

PortalSectionHeader

component

Props: children, title, icon
Defaults: None

import { PortalSectionHeader } from "/snippets/components/domain/SHARED/Portals.jsx";

<PortalSectionHeader
  title={"<value>"}
  icon={"<value>"}
/>

RefCardContainer

component

Props: children
Defaults: None

import { RefCardContainer } from "/snippets/components/domain/SHARED/Portals.jsx";

<RefCardContainer />

SHARED/previewCallouts.jsx

ComingSoonCallout

component

Props: type
Defaults: type="page"

import { ComingSoonCallout } from "/snippets/components/domain/SHARED/previewCallouts.jsx";

<ComingSoonCallout
  type={"page"}
/>

PreviewCallout

component

Props: No explicit props detected from signature.
Defaults: No explicit defaults detected.

import { PreviewCallout } from "/snippets/components/domain/SHARED/previewCallouts.jsx";

<PreviewCallout />

ReviewCallout

component

Props: No explicit props detected from signature.
Defaults: No explicit defaults detected.

import { ReviewCallout } from "/snippets/components/domain/SHARED/previewCallouts.jsx";

<ReviewCallout />

Integrations

Integration components connect docs pages to external APIs and third-party datasets.

coingecko.jsx

CoinGeckoExchanges

component

Props: coinId
Defaults: coinId="arbitrum"

import { CoinGeckoExchanges } from "/snippets/components/integrations/coingecko.jsx";

<CoinGeckoExchanges
  coinId={"arbitrum"}
/>

Layout

Layout components provide reusable structure primitives for organizing page content.

api-base-urls-table.mdx

ApiBaseUrlsTable

component

Props: urls
Defaults: None

import { ApiBaseUrlsTable } from "/snippets/components/layout/api-base-urls-table.mdx";

<ApiBaseUrlsTable
  urls={"<value>"}
/>

cards.jsx

ScrollBox

component

Props: children, maxHeight, showHint, ariaLabel, style
Defaults: maxHeight=300, showHint=true, ariaLabel="Scrollable content"

import { ScrollBox } from "/snippets/components/layout/cards.jsx";

<ScrollBox
  maxHeight={300}
  showHint={true}
  ariaLabel={"Scrollable content"}
  style={{}}
/>

lists.jsx

BasicList

component

Props: listItems
Defaults: None

import { BasicList } from "/snippets/components/layout/lists.jsx";

<BasicList
  listItems={[]}
/>

IconList

component

Props: listItems
Defaults: None

import { IconList } from "/snippets/components/layout/lists.jsx";

<IconList
  listItems={[]}
/>

StepLinkList

component

Props: listItems
Defaults: None

import { StepLinkList } from "/snippets/components/layout/lists.jsx";

<StepLinkList
  listItems={[]}
/>

StepList

component

Props: listItems
Defaults: None

import { StepList } from "/snippets/components/layout/lists.jsx";

<StepList
  listItems={[]}
/>

UpdateLinkList

component

Props: listItems
Defaults: None

import { UpdateLinkList } from "/snippets/components/layout/lists.jsx";

<UpdateLinkList
  listItems={[]}
/>

UpdateList

component

Props: listItems
Defaults: None

import { UpdateList } from "/snippets/components/layout/lists.jsx";

<UpdateList
  listItems={[]}
/>

ListSteps.jsx

ListSteps

component

Props: listItems, stepsConfig
Defaults: None

import { ListSteps } from "/snippets/components/layout/ListSteps.jsx";

<ListSteps
  listItems={[]}
  stepsConfig={{}}
/>

quadGrid.jsx

QuadGrid

component

Props: children, icon, iconSize, iconColor, spinDuration
Defaults: icon="arrows-spin", iconSize=50, iconColor="var(--accent)", spinDuration="10s"

import { QuadGrid } from "/snippets/components/layout/quadGrid.jsx";

<QuadGrid
  icon={"arrows-spin"}
  iconSize={50}
  iconColor={"var(--accent)"}
  spinDuration={"10s"}
/>

SearchTable.jsx

SearchTable

component

Props: TableComponent, tableTitle, headerList, itemsList, monospaceColumns, margin, searchPlaceholder, searchColumns, categoryColumn
Defaults: TableComponent=null, tableTitle=null, headerList=[], itemsList=[], monospaceColumns=[], searchPlaceholder='Search...', searchColumns=[], categoryColumn='Category'

import { SearchTable } from "/snippets/components/layout/SearchTable.jsx";

<SearchTable
  TableComponent={null}
  tableTitle={null}
  headerList={[]}
  itemsList={[]}
  monospaceColumns={[]}
  margin={"<value>"}
  searchPlaceholder={'Search...'}
  searchColumns={[]}
  categoryColumn={'Category'}
/>

steps.jsx

StyledStep

component

Props: title, icon, titleSize, children
Defaults: titleSize="h3"

import { StyledStep } from "/snippets/components/layout/steps.jsx";

<StyledStep
  title={"<value>"}
  icon={"<value>"}
  titleSize={"h3"}
/>

StyledSteps

component

Props: children, iconColor, titleColor, lineColor, iconSize
Defaults: iconSize="24px"

import { StyledSteps } from "/snippets/components/layout/steps.jsx";

<StyledSteps
  iconColor={"<value>"}
  titleColor={"<value>"}
  lineColor={"<value>"}
  iconSize={"24px"}
/>

table.jsx

DynamicTable

component

Props: tableTitle, headerList, itemsList, monospaceColumns, margin
Defaults: tableTitle=null, headerList=[], itemsList=[], monospaceColumns=[]

import { DynamicTable } from "/snippets/components/layout/table.jsx";

<DynamicTable
  tableTitle={null}
  headerList={[]}
  itemsList={[]}
  monospaceColumns={[]}
  margin={"<value>"}
/>

text.jsx

AccordionLayout

component

Props: children
Defaults: None

import { AccordionLayout } from "/snippets/components/layout/text.jsx";

<AccordionLayout />

Primitives

Primitive components are foundational UI building blocks reused across the docs system.

a11y.jsx

FocusableScrollRegions

component

Props: selectors
Defaults: selectors=DEFAULT_SELECTORS

import { FocusableScrollRegions } from "/snippets/components/primitives/a11y.jsx";

<FocusableScrollRegions
  selectors={DEFAULT_SELECTORS}
/>

buttons.jsx

BasicBtn

component

Props: No explicit props detected from signature.
Defaults: No explicit defaults detected.

import { BasicBtn } from "/snippets/components/primitives/buttons.jsx";

<BasicBtn />

DownloadButton

component

Props: label, icon, downloadLink, rightIcon, border
Defaults: label='Download', icon='download', rightIcon='', border=false

import { DownloadButton } from "/snippets/components/primitives/buttons.jsx";

<DownloadButton
  label={'Download'}
  icon={'download'}
  downloadLink={"<value>"}
  rightIcon={''}
  border={false}
/>

containers.jsx

BorderedBox

component

Props: children, variant, padding, borderRadius, style
Defaults: variant="default", padding="1rem", borderRadius="8px", style={}

import { BorderedBox } from "/snippets/components/primitives/containers.jsx";

<BorderedBox
  variant={"default"}
  padding={"1rem"}
  borderRadius={"8px"}
  style={{}}
/>

CenteredContainer

component

Props: children, maxWidth, padding, style
Defaults: maxWidth="800px", padding="0", style={}

import { CenteredContainer } from "/snippets/components/primitives/containers.jsx";

<CenteredContainer
  maxWidth={"800px"}
  padding={"0"}
  style={{}}
/>

FullWidthContainer

component

Props: children, backgroundColor, style
Defaults: style={}

import { FullWidthContainer } from "/snippets/components/primitives/containers.jsx";

<FullWidthContainer
  backgroundColor={"<value>"}
  style={{}}
/>

divider.jsx

CustomDivider

component

Props: color, middleText, style
Defaults: color="var(--border)", middleText="", style={}

import { CustomDivider } from "/snippets/components/primitives/divider.jsx";

<CustomDivider
  color={"var(--border)"}
  middleText={""}
  style={{}}
/>

icons.jsx

LivepeerIcon

component

Props: size, color
Defaults: size=16

import { LivepeerIcon } from "/snippets/components/primitives/icons.jsx";

<LivepeerIcon
  size={16}
  color={"<value>"}
/>

LivepeerIconFlipped

component

Props: No explicit props detected from signature.
Defaults: No explicit defaults detected.

import { LivepeerIconFlipped } from "/snippets/components/primitives/icons.jsx";

<LivepeerIconFlipped />

LivepeerIconOld

component

Props: No explicit props detected from signature.
Defaults: No explicit defaults detected.

import { LivepeerIconOld } from "/snippets/components/primitives/icons.jsx";

<LivepeerIconOld />

LivepeerSVG

component

Props: size
Defaults: size=24

import { LivepeerSVG } from "/snippets/components/primitives/icons.jsx";

<LivepeerSVG
  size={24}
/>

layout.jsx

FlexContainer

component

Props: children, direction, gap, align, justify, wrap, style
Defaults: direction="row", gap="1rem", align="flex-start", justify="flex-start", wrap=false, style={}

import { FlexContainer } from "/snippets/components/primitives/layout.jsx";

<FlexContainer
  direction={"row"}
  gap={"1rem"}
  align={"flex-start"}
  justify={"flex-start"}
  wrap={false}
  style={{}}
/>

GridContainer

component

Props: children, columns, gap, style
Defaults: gap="1rem", style={}

import { GridContainer } from "/snippets/components/primitives/layout.jsx";

<GridContainer
  columns={[]}
  gap={"1rem"}
  style={{}}
/>

Spacer

component

Props: size, direction
Defaults: size="1rem", direction="vertical"

import { Spacer } from "/snippets/components/primitives/layout.jsx";

<Spacer
  size={"1rem"}
  direction={"vertical"}
/>

links.jsx

BlinkingIcon

component

Props: icon, size, color
Defaults: icon="terminal", size=16

import { BlinkingIcon } from "/snippets/components/primitives/links.jsx";

<BlinkingIcon
  icon={"terminal"}
  size={16}
  color={"<value>"}
/>

BlinkingTerminal

component

Props: No explicit props detected from signature.
Defaults: No explicit defaults detected.

import { BlinkingTerminal } from "/snippets/components/primitives/links.jsx";

<BlinkingTerminal />

CustomCallout

component

Props: children, icon, color, iconSize, textSize, textColor
Defaults: icon="lightbulb", iconSize=16, textSize="0.875rem"

import { CustomCallout } from "/snippets/components/primitives/links.jsx";

<CustomCallout
  icon={"lightbulb"}
  color={"<value>"}
  iconSize={16}
  textSize={"0.875rem"}
  textColor={"<value>"}
/>

DoubleIconLink

component

Props: label, href, text, iconLeft, iconRight
Defaults: label="", href="#", text="", iconLeft="github", iconRight="arrow-up-right"

import { DoubleIconLink } from "/snippets/components/primitives/links.jsx";

<DoubleIconLink
  label={""}
  href={"#"}
  text={""}
  iconLeft={"github"}
  iconRight={"arrow-up-right"}
/>

GotoCard

component

Props: label, relativePath, icon, text, cta
Defaults: cta=""

import { GotoCard } from "/snippets/components/primitives/links.jsx";

<GotoCard
  label={"<value>"}
  relativePath={"<value>"}
  icon={"<value>"}
  text={"<value>"}
  cta={""}
/>

GotoLink

component

Props: label, relativePath, text, icon
Defaults: text="", icon="arrow-turn-down-right"

import { GotoLink } from "/snippets/components/primitives/links.jsx";

<GotoLink
  label={"<value>"}
  relativePath={"<value>"}
  text={""}
  icon={"arrow-turn-down-right"}
/>

LinkArrow

component

Props: href, label, description, newline, borderColor
Defaults: newline=true

import { LinkArrow } from "/snippets/components/primitives/links.jsx";

<LinkArrow
  href={"<value>"}
  label={"<value>"}
  description={"<value>"}
  newline={true}
  borderColor={"<value>"}
/>

TipWithArrow

component

Props: children, icon, arrowIcon, color, iconSize, arrowSize
Defaults: icon="lightbulb", arrowIcon="arrow-up-right", iconSize=16, arrowSize=16

import { TipWithArrow } from "/snippets/components/primitives/links.jsx";

<TipWithArrow
  icon={"lightbulb"}
  arrowIcon={"arrow-up-right"}
  color={"<value>"}
  iconSize={16}
  arrowSize={16}
/>

tables.jsx

StyledTable

component

Props: children, variant, style
Defaults: variant="default", style={}

import { StyledTable } from "/snippets/components/primitives/tables.jsx";

<StyledTable
  variant={"default"}
  style={{}}
/>

TableCell

component

Props: children, align, header, style
Defaults: align="left", header=false, style={}

import { TableCell } from "/snippets/components/primitives/tables.jsx";

<TableCell
  align={"left"}
  header={false}
  style={{}}
/>

TableRow

component

Props: children, header, hover, style
Defaults: header=false, hover=false, style={}

import { TableRow } from "/snippets/components/primitives/tables.jsx";

<TableRow
  header={false}
  hover={false}
  style={{}}
/>

text.jsx

AccordionTitleWithArrow

component

Props: text, children, color
Defaults: color="var(--text)"

import { AccordionTitleWithArrow } from "/snippets/components/primitives/text.jsx";

<AccordionTitleWithArrow
  text={"<value>"}
  color={"var(--text)"}
/>

CardTitleTextWithArrow

component

Props: children
Defaults: None

import { CardTitleTextWithArrow } from "/snippets/components/primitives/text.jsx";

<CardTitleTextWithArrow />

CopyText

component

Props: text, label
Defaults: None

import { CopyText } from "/snippets/components/primitives/text.jsx";

<CopyText
  text={"<value>"}
  label={"<value>"}
/>

Subtitle

component

Props: style, text, children
Defaults: style={}

import { Subtitle } from "/snippets/components/primitives/text.jsx";

<Subtitle
  style={{}}
  text={"<value>"}
/>

Lookup Table

Search by category, page path, or component name.

Home

Documentation Guide

Livepeer Concepts

Developer References

Gateway References

Orchestrator References

LPT & Delegator References

Community Resources

Partner Resources

Help Center

Technical References

Changelog

Content

Display

Domain

Integrations

Layout

Primitives

Lookup Table

Home

Documentation Guide

Livepeer Concepts

Developer References

Gateway References

Orchestrator References

LPT & Delegator References

Community Resources

Partner Resources

Help Center

Technical References

Changelog

​Content

​Display

​Domain

​Integrations

​Layout

​Primitives

​Lookup Table

Content

Display

Domain

Integrations

Layout

Primitives

Lookup Table