Primitives

Generation Script: This file is generated from script(s): tools/scripts/generate-component-docs.js.
Purpose: Generated component-library MDX pages derived from docs-guide/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 tools/scripts/generate-component-docs.js --fix --template-only --category primitives.

Back to Component Library

Return to the generated component library landing page.

Standalone visual atoms used across authored documentation. This category currently contains 30 governed export(s).

Decision Tree Excerpt

Bound to an external data source or automation pipeline? data/
Only makes sense on frame-mode or portal pages? page-structure/
Accepts children and arranges them spatially? layout/
Formats or renders content for the reader? content/
Otherwise: primitives/

Summary Table

Component	Tier	Status	Import path	Description
AccordionTitleWithArrow	`primitive`	`stable`	`/snippets/components/primitives/text.jsx`	Accordion Title With Arrow primitive used in authored documentation and component-library examples.
BasicBtn	`primitive`	`stable`	`/snippets/components/primitives/buttons.jsx`	Basic Btn primitive used in authored documentation and component-library examples.
BlinkingIcon	`primitive`	`stable`	`/snippets/components/primitives/links.jsx`	Displays an icon with a smooth blinking animation (fades between full and 30% opacity).
BlinkingTerminal	`primitive`	`deprecated`	`/snippets/components/primitives/links.jsx`	Blinking Terminal primitive used in authored documentation and component-library examples.
CardTitleTextWithArrow	`primitive`	`stable`	`/snippets/components/primitives/text.jsx`	Card Title Text With Arrow primitive used in authored documentation and component-library examples.
ComingSoonCallout	`primitive`	`stable`	`/snippets/components/primitives/previewCallouts.jsx`	Renders the coming soon callout component
CopyText	`primitive`	`stable`	`/snippets/components/primitives/text.jsx`	Copy Text primitive used in authored documentation and component-library examples.
CustomCallout	`primitive`	`stable`	`/snippets/components/primitives/links.jsx`	Displays a styled callout box with an icon and custom colors.
CustomCardTitle	`primitive`	`stable`	`/snippets/components/primitives/customCardTitle.jsx`	Renders the custom card title component
CustomDivider	`primitive`	`stable`	`/snippets/components/primitives/divider.jsx`	Custom Divider primitive used in authored documentation and component-library examples.
DoubleIconLink	`primitive`	`stable`	`/snippets/components/primitives/links.jsx`	Displays a link with an icon on the left and right, plus optional text prefix.
DownloadButton	`primitive`	`stable`	`/snippets/components/primitives/buttons.jsx`	Download Button primitive used in authored documentation and component-library examples.
FocusableScrollRegions	`primitive`	`stable`	`/snippets/components/primitives/a11y.jsx`	Focusable Scroll Regions primitive used in authored documentation and component-library examples.
GotoCard	`primitive`	`stable`	`/snippets/components/primitives/links.jsx`	Wraps content in a Card component with a link, icon, and optional CTA.
GotoLink	`primitive`	`stable`	`/snippets/components/primitives/links.jsx`	Displays a link with an icon, typically used for internal navigation.
Image	`primitive`	`stable`	`/snippets/components/primitives/image.jsx`	Image primitive used in authored documentation and component-library examples.
LinkArrow	`primitive`	`stable`	`/snippets/components/primitives/links.jsx`	Link Arrow primitive used in authored documentation and component-library examples.
LinkImage	`primitive`	`stable`	`/snippets/components/primitives/image.jsx`	Link Image primitive used in authored documentation and component-library examples.
LivepeerIcon	`primitive`	`stable`	`/snippets/components/primitives/icons.jsx`	Livepeer Icon primitive used in authored documentation and component-library examples.
LivepeerIconFlipped	`primitive`	`stable`	`/snippets/components/primitives/icons.jsx`	Livepeer Icon Flipped primitive used in authored documentation and component-library examples.
LivepeerIconOld	`primitive`	`stable`	`/snippets/components/primitives/icons.jsx`	Livepeer Icon Old primitive used in authored documentation and component-library examples.
LivepeerSVG	`primitive`	`stable`	`/snippets/components/primitives/icons.jsx`	Livepeer SVG primitive used in authored documentation and component-library examples.
MathBlock	`primitive`	`stable`	`/snippets/components/primitives/math.jsx`	Math Block primitive used in authored documentation and component-library examples.
MathInline	`primitive`	`stable`	`/snippets/components/primitives/math.jsx`	Math Inline primitive used in authored documentation and component-library examples.
PreviewCallout	`primitive`	`stable`	`/snippets/components/primitives/previewCallouts.jsx`	Renders the preview callout component
ReviewCallout	`primitive`	`stable`	`/snippets/components/primitives/previewCallouts.jsx`	Renders the review callout component
SocialLinks	`primitive`	`stable`	`/snippets/components/primitives/socialLinks.jsx`	Renders the social links component
Spacer	`primitive`	`stable`	`/snippets/components/primitives/spacer.jsx`	Provides consistent spacing without requiring inline styles or empty divs in MDX files
Subtitle	`primitive`	`stable`	`/snippets/components/primitives/text.jsx`	Subtitle primitive used in authored documentation and component-library examples.
TipWithArrow	`primitive`	`stable`	`/snippets/components/primitives/links.jsx`	Similar to CustomCallout but includes an arrow icon in the top-right corner.

Component Reference

AccordionTitleWithArrow

Use AccordionTitleWithArrow when you need accordion Title With Arrow primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Accordion Title With Arrow primitive used in authored documentation and component-library examples. Import path

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

Metadata

Content affinity: universal
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/about/livepeer-protocol/core-mechanisms.mdx, v2/about/livepeer-protocol/governance-model.mdx, v2/about/livepeer-protocol/livepeer-token.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | text | any | | Yes | text prop. | | `children` | `any` | | Yes | children prop. | | color | string | "var(--text)" | No | color prop. |

Code example

<AccordionTitleWithArrow text="example">Example content</AccordionTitleWithArrow>

BasicBtn

Use BasicBtn when you need basic Btn primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Basic Btn primitive used in authored documentation and component-library examples. Import path

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

Metadata

Content affinity: universal
Dependencies: DownloadButton
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: none Props No documented props.

Code example

<BasicBtn />

BlinkingIcon

Use BlinkingIcon when you need displays an icon with a smooth blinking animation (fades between full and 30% opacity).. Best suited for universal page types. Source description: Displays an icon with a smooth blinking animation (fades between full and 30% opacity). Import path

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

Metadata

Content affinity: universal
Dependencies: BlinkingTerminal, CustomCallout, DoubleIconLink, GotoCard, GotoLink, LinkArrow, TipWithArrow
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers/portal.mdx, v2/gateways/gateways-portal.mdx, v2/gateways/run-a-gateway/configure/ai-configuration.mdx, v2/gateways/run-a-gateway/requirements/on-chain setup/on-chain.mdx, and 6 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | icon | string | "terminal" | No | Icon name to display | | size | number | 16 | No | Size of the icon in pixels | | color | string | “ | Yes | Color of the icon (defaults to theme accent) |

Code example

<BlinkingIcon color="example" />

BlinkingTerminal

Use BlinkingTerminal when you need blinking Terminal primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Blinking Terminal primitive used in authored documentation and component-library examples. Import path

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

Metadata

Content affinity: universal
Dependencies: BlinkingIcon, CustomCallout, DoubleIconLink, GotoCard, GotoLink, LinkArrow, TipWithArrow
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: deprecated
Tier: primitive
@usedIn: none

Deprecation note: BlinkingTerminal is deprecated and should not be used for new content. See BlinkingIcon. Props No documented props. Code example

<BlinkingTerminal />

CardTitleTextWithArrow

Use CardTitleTextWithArrow when you need card Title Text With Arrow primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Card Title Text With Arrow primitive used in authored documentation and component-library examples. Import path

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

Metadata

Content affinity: universal
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/about/livepeer-protocol/core-mechanisms.mdx, v2/about/livepeer-protocol/governance-model.mdx, v2/about/livepeer-protocol/livepeer-token.mdx, v2/about/livepeer-protocol/overview.mdx, v2/about/livepeer-protocol/technical-architecture.mdx, v2/about/livepeer-protocol/treasury.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `cardProps` | `any` | | Yes | card Props prop. |

Code example

<CardTitleTextWithArrow cardProps="example">Example content</CardTitleTextWithArrow>

ComingSoonCallout

Use ComingSoonCallout when you need renders the coming soon callout component. Best suited for changelog page types. Source description: Renders the coming soon callout component Import path

import { ComingSoonCallout } from '/snippets/components/primitives/previewCallouts.jsx'

Metadata

Content affinity: changelog
Dependencies: PreviewCallout, ReviewCallout
Data source: none
Last meaningful change: 2026-03-09
Breaking change risk: low
Owner: @livepeer/docs-team
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/resources/changelog/migration-guide.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | type | string | "page" | No | Type used by the component. |

Code example

<ComingSoonCallout />

CopyText

Use CopyText when you need copy Text primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Copy Text primitive used in authored documentation and component-library examples. Import path

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

Metadata

Content affinity: universal
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/about/resources/blockchain-contracts.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | text | any | | Yes | text prop. | | `label` | `any` | | Yes | label prop. |

Code example

<CopyText text="example" label="example" />

CustomCallout

Use CustomCallout when you need displays a styled callout box with an icon and custom colors.. Best suited for universal page types. Source description: Displays a styled callout box with an icon and custom colors. Import path

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

Metadata

Content affinity: universal
Dependencies: BlinkingIcon, BlinkingTerminal, DoubleIconLink, GotoCard, GotoLink, LinkArrow, TipWithArrow
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/gateways/run-a-gateway/connect/connect-with-offerings.mdx, v2/gateways/run-a-gateway/publish/connect-with-offerings.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | React.ReactNode | | Yes | Content to display in the callout | | `icon` | `string` | `"lightbulb"` | No | Icon name to display | | `color` | `string` | | Yes | Primary color for icon, border, and background (defaults to theme accent) | | iconSize | number | 16 | No | Size of the icon in pixels | | textSize | string | "0.875rem" | No | Font size for the text content | | textColor | string | “ | Yes | Text color (defaults to match icon color) |

Code example

<CustomCallout color="example" textColor="example">Example content</CustomCallout>

CustomCardTitle

Use CustomCardTitle when you need renders the custom card title component. Best suited for landing page types. Source description: Renders the custom card title component Import path

import { CustomCardTitle } from '/snippets/components/primitives/customCardTitle.jsx'

Metadata

Content affinity: landing
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: @livepeer/docs-team
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/home/about-livepeer/benefits.mdx, v2/home/primer.mdx, v2/internal/overview/docs-philosophy.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | icon | string | | Yes | Icon configuration used by the component. | | `title` | `React.ReactNode` | | Yes | Title text rendered by the component. | | style | object | “ | Yes | Style used by the component. |

Code example

<CustomCardTitle icon="sparkles" title="Example" style={{}} />

CustomDivider

Use CustomDivider when you need custom Divider primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Custom Divider primitive used in authored documentation and component-library examples. Import path

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

Metadata

Content affinity: universal
Dependencies: none
Data source: none
Last meaningful change: 2026-03-11
Breaking change risk: high
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/about/livepeer-protocol/core-mechanisms.mdx, v2/about/livepeer-protocol/governance-model.mdx, v2/about/livepeer-protocol/livepeer-token.mdx, v2/about/livepeer-protocol/overview.mdx, v2/about/livepeer-protocol/technical-architecture.mdx, v2/about/livepeer-protocol/treasury.mdx, and 126 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | color | string | "var(--border)" | No | color prop. | | middleText | string | "" | No | middle Text prop. | | spacing | string | "default" | No | Named spacing preset for authored page layouts. | | style | object | {} | No | style prop. |

Code example

<CustomDivider />

DoubleIconLink

Use DoubleIconLink when you need displays a link with an icon on the left and right, plus optional text prefix.. Best suited for universal page types. Source description: Displays a link with an icon on the left and right, plus optional text prefix. Import path

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

Metadata

Content affinity: universal
Dependencies: BlinkingIcon, BlinkingTerminal, CustomCallout, GotoCard, GotoLink, LinkArrow, TipWithArrow
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/gateways/_contextData_/docker-install.mdx, v2/gateways/about/architecture.mdx, v2/gateways/quickstart/gateway-setup.mdx, v2/gateways/references/configuration-flags.mdx, v2/gateways/run-a-gateway/configure/ai-configuration.mdx, v2/gateways/run-a-gateway/configure/dual-configuration.mdx, and 9 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | label | string | "" | No | Link text/label | | href | string | "#" | No | Link URL | | text | string | "" | No | Optional text to display before the link | | iconLeft | string | "github" | No | Icon to display on the left | | iconRight | string | "arrow-up-right" | No | Icon to display on the right |

Code example

<DoubleIconLink />

DownloadButton

Use DownloadButton when you need download Button primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Download Button primitive used in authored documentation and component-library examples. Import path

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

Metadata

Content affinity: universal
Dependencies: BasicBtn
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/gateways/quickstart/gateway-setup.mdx, v2/gateways/run-a-gateway/install/linux-install.mdx, v2/internal/overview/docs-philosophy.mdx, v2/resources/media-kit.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | label | string | 'Download' | No | label prop. | | icon | string | 'download' | No | icon prop. | | downloadLink | any | “ | Yes | download Link prop. | | rightIcon | string | '' | No | right Icon prop. | | border | boolean | false | No | border prop. |

Code example

<DownloadButton downloadLink="example" />

FocusableScrollRegions

Use FocusableScrollRegions when you need focusable Scroll Regions primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Focusable Scroll Regions primitive used in authored documentation and component-library examples. Import path

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

Metadata

Content affinity: universal
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/resources/documentation-guide/style-guide.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | selectors | any | “ | Yes | selectors prop. |

Code example

<FocusableScrollRegions selectors="example" />

GotoCard

Use GotoCard when you need wraps content in a Card component with a link, icon, and optional CTA.. Best suited for universal page types. Source description: Wraps content in a Card component with a link, icon, and optional CTA. Import path

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

Metadata

Content affinity: universal
Dependencies: BlinkingIcon, BlinkingTerminal, CustomCallout, DoubleIconLink, GotoLink, LinkArrow, TipWithArrow
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/about/livepeer-network/marketplace.mdx, v2/about/livepeer-network/technical-architecture.mdx, v2/about/livepeer-protocol/technical-architecture.mdx, v2/developers/_archive/ai-inference-overview-old.mdx, v2/developers/_archive/ai-inference-workload-fit-old.mdx, v2/developers/_archive/ai-pipelines-byoc-old.mdx, and 16 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | label | string | | Yes | Card title | | `relativePath` | `string` | | Yes | Relative URL path | | icon | string | | Yes | Icon to display (defaults to "arrow-turn-down-right") | | `text` | `React.ReactNode` | | Yes | Card content | | cta | string | "" | No | Call-to-action button text | | props | any | “ | Yes | props prop. |

Code example

<GotoCard label="example" relativePath="example" />

GotoLink

Use GotoLink when you need displays a link with an icon, typically used for internal navigation.. Best suited for universal page types. Source description: Displays a link with an icon, typically used for internal navigation. Import path

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

Metadata

Content affinity: universal
Dependencies: BlinkingIcon, BlinkingTerminal, CustomCallout, DoubleIconLink, GotoCard, LinkArrow, TipWithArrow
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/about/livepeer-network/interfaces.mdx, v2/about/livepeer-network/marketplace.mdx, v2/about/livepeer-network/technical-architecture.mdx, v2/about/livepeer-protocol/technical-architecture.mdx, v2/developers/_archive/ai-inference-overview-old.mdx, v2/developers/_archive/ai-inference-workload-fit-old.mdx, and 15 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | label | string | | Yes | Link text/label | | `relativePath` | `string` | | Yes | Relative URL path | | text | string | "" | No | Optional text to display before the link | | icon | string | "arrow-turn-down-right" | No | Icon to display |

Code example

<GotoLink label="example" relativePath="example" />

Image

Use Image when you need primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Image primitive used in authored documentation and component-library examples. Import path

import { Image } from '/snippets/components/primitives/image.jsx'

Metadata

Content affinity: universal
Dependencies: LinkImage
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/about/livepeer-protocol/technical-architecture.mdx, v2/about/resources/blockchain-contracts.mdx, v2/community/livepeer-community/community-guidelines.mdx, v2/home/about-livepeer/benefits.mdx, v2/home/about-livepeer/evolution.mdx, v2/home/about-livepeer/vision.mdx, and 1 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | src | any | | Yes | src prop. | | `alt` | `any` | | Yes | alt prop. | | caption | any | | Yes | caption prop. | | `icon` | `any` | | Yes | icon prop. | | hint | any | “ | Yes | hint prop. | | fullwidth | boolean | true | No | fullwidth prop. |

Code example

<Image src="example" alt="example" />

LinkArrow

Use LinkArrow when you need link Arrow primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Link Arrow primitive used in authored documentation and component-library examples. Import path

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

Metadata

Content affinity: universal
Dependencies: BlinkingIcon, BlinkingTerminal, CustomCallout, DoubleIconLink, GotoCard, GotoLink, TipWithArrow
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/about/livepeer-overview.mdx, v2/about/livepeer-protocol/governance-model.mdx, v2/about/livepeer-protocol/livepeer-token.mdx, v2/about/livepeer-protocol/overview.mdx, v2/about/resources/blockchain-contracts.mdx, v2/community/livepeer-community/trending-topics.mdx, and 16 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | href | any | | Yes | href prop. | | `label` | `any` | | Yes | label prop. | | description | any | | Yes | description prop. | | `newline` | `boolean` | `true` | No | newline prop. | | `borderColor` | `any` | | Yes | border Color prop. |

Code example

<LinkArrow href="example" label="example" />

LinkImage

Use LinkImage when you need link Image primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Link Image primitive used in authored documentation and component-library examples. Import path

import { LinkImage } from '/snippets/components/primitives/image.jsx'

Metadata

Content affinity: universal
Dependencies: Image
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | src | any | | Yes | src prop. | | `alt` | `any` | | Yes | alt prop. | | caption | any | | Yes | caption prop. | | `icon` | `any` | | Yes | icon prop. | | hint | any | | Yes | hint prop. | | `href` | `any` | | Yes | href prop. |

Code example

<LinkImage src="example" alt="example" />

LivepeerIcon

Use LivepeerIcon when you need livepeer Icon primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Livepeer Icon primitive used in authored documentation and component-library examples. Import path

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

Metadata

Content affinity: universal
Dependencies: LivepeerIconFlipped, LivepeerIconOld, LivepeerSVG
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/home/mission-control.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | size | number | 16 | No | size prop. | | color | any | | Yes | color prop. | | `props` | `any` | | Yes | props prop. |

Code example

<LivepeerIcon color="example" props="example" />

LivepeerIconFlipped

Use LivepeerIconFlipped when you need livepeer Icon Flipped primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Livepeer Icon Flipped primitive used in authored documentation and component-library examples. Import path

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

Metadata

Content affinity: universal
Dependencies: LivepeerIcon, LivepeerIconOld, LivepeerSVG
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | props | any | “ | Yes | props prop. |

Code example

<LivepeerIconFlipped props="example" />

LivepeerIconOld

Use LivepeerIconOld when you need livepeer Icon Old primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Livepeer Icon Old primitive used in authored documentation and component-library examples. Import path

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

Metadata

Content affinity: universal
Dependencies: LivepeerIcon, LivepeerIconFlipped, LivepeerSVG
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | props | any | “ | Yes | props prop. |

Code example

<LivepeerIconOld props="example" />

LivepeerSVG

Use LivepeerSVG when you need livepeer SVG primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Livepeer SVG primitive used in authored documentation and component-library examples. Import path

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

Metadata

Content affinity: universal
Dependencies: LivepeerIcon, LivepeerIconFlipped, LivepeerIconOld
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | size | number | 24 | No | size prop. | | props | any | “ | Yes | props prop. |

Code example

<LivepeerSVG props="example" />

MathBlock

Use MathBlock when you need math Block primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Math Block primitive used in authored documentation and component-library examples. Import path

import { MathBlock } from '/snippets/components/primitives/math.jsx'

Metadata

Content affinity: universal
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/lpt/about/mechanics.mdx, v2/lpt/about/overview.mdx, v2/lpt/about/tokenomics.mdx, v2/lpt/delegation/about-delegators.mdx, v2/lpt/delegation/delegation-guide.mdx, v2/lpt/delegation/overview.mdx, and 6 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | latex | any | | Yes | latex prop. | | `className` | `string` | `""` | No | class Name prop. | | `ariaLabel` | `any` | | Yes | aria Label prop. |

Code example

<MathBlock latex="example" ariaLabel="example" />

MathInline

Use MathInline when you need math Inline primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Math Inline primitive used in authored documentation and component-library examples. Import path

import { MathInline } from '/snippets/components/primitives/math.jsx'

Metadata

Content affinity: universal
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/lpt/about/mechanics.mdx, v2/lpt/about/overview.mdx, v2/lpt/about/tokenomics.mdx, v2/lpt/delegation/about-delegators.mdx, v2/lpt/delegation/delegation-guide.mdx, v2/lpt/delegation/overview.mdx, and 6 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | latex | any | | Yes | latex prop. | | `className` | `string` | `""` | No | class Name prop. | | `ariaLabel` | `any` | | Yes | aria Label prop. |

Code example

<MathInline latex="example" ariaLabel="example" />

PreviewCallout

Use PreviewCallout when you need renders the preview callout component. Best suited for universal page types. Source description: Renders the preview callout component Import path

import { PreviewCallout } from '/snippets/components/primitives/previewCallouts.jsx'

Metadata

Content affinity: universal
Dependencies: ComingSoonCallout, ReviewCallout
Data source: none
Last meaningful change: 2026-03-09
Breaking change risk: low
Owner: @livepeer/docs-team
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/developers/ai-inference-on-livepeer/overview.mdx, v2/developers/ai-inference-on-livepeer/workload-fit.mdx, v2/developers/livepeer-real-time-video/video-streaming-on-livepeer/video-streaming-101.mdx, v2/developers/quickstart/video/video-streaming-101.mdx, v2/orchestrators/setup/publish-offerings.mdx, v2/resources/concepts/brief-history-of-video.mdx, and 1 more page(s) Props No documented props.

Code example

<PreviewCallout />

ReviewCallout

Use ReviewCallout when you need renders the review callout component. Best suited for universal page types. Source description: Renders the review callout component Import path

import { ReviewCallout } from '/snippets/components/primitives/previewCallouts.jsx'

Metadata

Content affinity: universal
Dependencies: ComingSoonCallout, PreviewCallout
Data source: none
Last meaningful change: 2026-03-09
Breaking change risk: low
Owner: @livepeer/docs-team
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: none Props No documented props.

Code example

<ReviewCallout />

SocialLinks

Use SocialLinks when you need renders the social links component. Best suited for universal page types. Source description: Renders the social links component Import path

import { SocialLinks } from '/snippets/components/primitives/socialLinks.jsx'

Metadata

Content affinity: universal
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: @livepeer/docs-team
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | size | number | 20 | No | Size used by the component. | | gap | string | "0.75rem" | No | Gap used by the component. | | justify | string | "center" | No | Justify used by the component. | | color | string | “ | Yes | Color used by the component. |

Code example

<SocialLinks color="value" />

Spacer

Use Spacer when you need provides consistent spacing without requiring inline styles or empty divs in MDX files. Best suited for universal page types. Source description: Provides consistent spacing without requiring inline styles or empty divs in MDX files Import path

import { Spacer } from '/snippets/components/primitives/spacer.jsx'

Metadata

Content affinity: universal
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: @livepeer/docs-team
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | size | string | "1rem" | No | Size used by the component. | | direction | string | "vertical" | No | Direction used by the component. |

Code example

<Spacer />

Subtitle

Use Subtitle when you need primitive used in authored documentation and component-library examples.. Best suited for universal page types. Source description: Subtitle primitive used in authored documentation and component-library examples. Import path

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

Metadata

Content affinity: universal
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/about/mental-model.mdx, v2/about/resources/blockchain-contracts.mdx, v2/home/solutions/showcase.mdx, v2/home/solutions/verticals.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | style | object | {} | No | style prop. | | text | any | | Yes | text prop. | | `children` | `any` | | Yes | children prop. |

Code example

<Subtitle text="example">Example content</Subtitle>

TipWithArrow

Use TipWithArrow when you need similar to CustomCallout but includes an arrow icon in the top-right corner.. Best suited for universal page types. Source description: Similar to CustomCallout but includes an arrow icon in the top-right corner. Import path

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

Metadata

Content affinity: universal
Dependencies: BlinkingIcon, BlinkingTerminal, CustomCallout, DoubleIconLink, GotoCard, GotoLink, LinkArrow
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: primitive
@usedIn: v2/gateways/quickstart/gateway-setup.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | React.ReactNode | | Yes | Content to display in the tip | | `icon` | `string` | `"lightbulb"` | No | Main icon to display on the left | | `arrowIcon` | `string` | `"arrow-up-right"` | No | Arrow icon to display in top-right | | `color` | `string` | | Yes | Primary color for icons, border, and background (defaults to theme accent) | | iconSize | number | 16 | No | Size of the main icon in pixels | | arrowSize | number | 16 | No | Size of the arrow icon in pixels |

Code example

<TipWithArrow color="example">Example content</TipWithArrow>

Resources

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

​Primitives

​Decision Tree Excerpt

​Summary Table

​Component Reference

​AccordionTitleWithArrow

​BasicBtn

​BlinkingIcon

​BlinkingTerminal

​CardTitleTextWithArrow

​ComingSoonCallout

​CopyText

​CustomCallout

​CustomCardTitle

​CustomDivider

​DoubleIconLink

​DownloadButton

​FocusableScrollRegions

​GotoCard

​GotoLink

​Image

​LinkArrow

​LinkImage

​LivepeerIcon

​LivepeerIconFlipped

​LivepeerIconOld

​LivepeerSVG

​MathBlock

​MathInline

​PreviewCallout

​ReviewCallout

​SocialLinks

​Spacer

​Subtitle

​TipWithArrow

Primitives

Decision Tree Excerpt

Summary Table

Component Reference

AccordionTitleWithArrow

BasicBtn

BlinkingIcon

BlinkingTerminal

CardTitleTextWithArrow

ComingSoonCallout

CopyText

CustomCallout

CustomCardTitle

CustomDivider

DoubleIconLink

DownloadButton

FocusableScrollRegions

GotoCard

GotoLink

Image

LinkArrow

LinkImage

LivepeerIcon

LivepeerIconFlipped

LivepeerIconOld

LivepeerSVG

MathBlock

MathInline

PreviewCallout

ReviewCallout

SocialLinks

Spacer

Subtitle

TipWithArrow