Skip to main content
Generation Script: This file is generated from script(s): operations/scripts/generate-component-docs.js.
Purpose: Generated component-library MDX pages derived from docs-guide/config/component-registry.json.
Run when: Component governance metadata, registry outputs, or published component-library templates change.
Important: Do not manually edit this file; run node operations/scripts/generate-component-docs.js --fix --template-only --category elements.

Back to Component Library

Return to the generated component library landing page.

​
Elements

Standalone visual atoms — icons, text, links, callouts, math, spacing, images. This category currently contains 27 governed export(s).

​
Decision Tree Excerpt

  1. Fetches, embeds, or binds to external/third-party data? → integrators/
  2. Part of the page’s outer structure, typically used once? → scaffolding/
  3. Takes content and presents it in a formatted way? → displays/
  4. Exists to hold, group, or arrange other things? → wrappers/
  5. Single visual piece — no wrapping, no arranging, no fetching? → elements/

​
Summary Table

ComponentStatusImport pathDescription
AccordionTitleWithArrowstable/snippets/components/elements/text/Text.jsxAccordion header text with trailing arrow icon.
BlinkingIconstable/snippets/components/elements/links/Links.jsxAnimated icon with pulsing opacity. Respects prefers-reduced-motion.
BlinkingTerminalstable/snippets/components/elements/links/Links.jsxPreset blinking terminal icon (alias for BlinkingIcon with terminal defaults).
CardTitleTextWithArrowstable/snippets/components/elements/text/Text.jsxCard title with trailing arrow icon for navigation indication.
ComingSoonCalloutstable/snippets/components/elements/callouts/PreviewCallouts.jsxBanner indicating a feature or page is coming soon, with links to related resources.
CopyTextstable/snippets/components/elements/text/Text.jsxText with a click-to-copy button that copies content to clipboard.
CustomCalloutstable/snippets/components/elements/links/Links.jsxStyled callout box with icon, custom colour, and child content.
CustomCardTitlestable/snippets/components/elements/text/CustomCardTitle.jsxCard title row with icon and text, using flexbox alignment.
CustomDividerstable/snippets/components/elements/spacing/Divider.jsxThemed horizontal divider with optional centre text and Livepeer logo accents.
DoubleIconLinkstable/snippets/components/elements/links/Links.jsxInline link with icons on both sides.
DownloadButtonstable/snippets/components/elements/buttons/Buttons.jsxLazy-loaded download button with icon that renders on viewport intersection.
FocusableScrollRegionsstable/snippets/components/elements/a11y/A11y.jsxMakes scroll regions keyboard-focusable by adding tabindex to matching selectors.
GotoCardstable/snippets/components/elements/links/Links.jsxCard-style navigation link wrapping Mintlify Card component.
GotoLinkstable/snippets/components/elements/links/Links.jsxInline navigation link with icon prefix and label.
Imagestable/snippets/components/elements/images/Image.jsxFramed image with optional caption and full-width toggle.
LinkArrowstable/snippets/components/elements/links/Links.jsxExternal link with arrow icon, optional description, and line break control.
LinkImagestable/snippets/components/elements/images/Image.jsxClickable framed image that opens a URL in a new tab.
LivepeerIconstable/snippets/components/elements/icons/Icons.jsxTheme-aware Livepeer icon with CSS custom property colour adaptation.
LivepeerSVGstable/snippets/components/elements/icons/Icons.jsxInline Livepeer logo as SVG with currentColor fill.
MathBlockstable/snippets/components/elements/math/Math.jsxRenders LaTeX as a block-level math expression using KaTeX.
MathInlinestable/snippets/components/elements/math/Math.jsxRenders LaTeX as inline math using KaTeX.
PreviewCalloutstable/snippets/components/elements/callouts/PreviewCallouts.jsxBanner indicating content is in preview/draft state with feedback links.
ReviewCalloutstable/snippets/components/elements/callouts/PreviewCallouts.jsxBanner indicating content is under review with status links.
SocialLinksstable/snippets/components/elements/social/SocialLinks.jsxRow of icon-only social media links with tooltips and aria-labels.
Spacerstable/snippets/components/elements/spacing/Spacer.jsxEmpty spacer div with configurable size and direction.
Subtitlestable/snippets/components/elements/text/Text.jsxStyled subtitle text with configurable colour, size, and alignment.
TipWithArrowstable/snippets/components/elements/links/Links.jsxCallout box with tip icon and corner arrow indicator.

​
Component Reference

​
AccordionTitleWithArrow

Use AccordionTitleWithArrow when you need accordion header text with trailing arrow icon.. Accepts: children, style, className, …rest. Source description: Accordion header text with trailing arrow icon. Import path 
import { AccordionTitleWithArrow } from '/snippets/components/elements/text/Text.jsx'
Metadata
  • Status: stable
  • Accepts: children, style, className, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | text | any | | Yes | text prop. | | `children` | `any` | | Yes | children prop. | | color | string | "var(--text)" | No | color prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |
Code example 
<AccordionTitleWithArrow text="example">Example content</AccordionTitleWithArrow>

​
BlinkingIcon

Use BlinkingIcon when you need animated icon with pulsing opacity. Respects prefers-reduced-motion.. Accepts: style, className, …rest. Source description: Animated icon with pulsing opacity. Respects prefers-reduced-motion. Import path 
import { BlinkingIcon } from '/snippets/components/elements/links/Links.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: none 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) | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |
Code example 
<BlinkingIcon color="example" />

​
BlinkingTerminal

Use BlinkingTerminal when you need preset blinking terminal icon (alias for BlinkingIcon with terminal defaults).. Accepts: style, className, …rest. Source description: Preset blinking terminal icon (alias for BlinkingIcon with terminal defaults). Import path 
import { BlinkingTerminal } from '/snippets/components/elements/links/Links.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: none Props No documented props.
Code example 
<BlinkingTerminal />

​
CardTitleTextWithArrow

Use CardTitleTextWithArrow when you need card title with trailing arrow icon for navigation indication.. Accepts: children, style, className, …cardProps. Source description: Card title with trailing arrow icon for navigation indication. Import path 
import { CardTitleTextWithArrow } from '/snippets/components/elements/text/Text.jsx'
Metadata
  • Status: stable
  • Accepts: children, style, className, ...cardProps
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `cardProps` | `any` | | Yes | card Props prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |
Code example 
<CardTitleTextWithArrow cardProps="example">Example content</CardTitleTextWithArrow>

​
ComingSoonCallout

Use ComingSoonCallout when you need banner indicating a feature or page is coming soon, with links to related resources.. Accepts: style, className, …rest. Source description: Banner indicating a feature or page is coming soon, with links to related resources. Import path 
import { ComingSoonCallout } from '/snippets/components/elements/callouts/PreviewCallouts.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | type | string | "page" | No | Type used by the component. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |
Code example 
<ComingSoonCallout />

​
CopyText

Use CopyText when you need text with a click-to-copy button that copies content to clipboard.. Accepts: style, className, …rest. Source description: Text with a click-to-copy button that copies content to clipboard. Import path 
import { CopyText } from '/snippets/components/elements/text/Text.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | text | any | | Yes | text prop. | | `label` | `any` | | Yes | label prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |
Code example 
<CopyText text="example" label="example" />

​
CustomCallout

Use CustomCallout when you need styled callout box with icon, custom colour, and child content.. Accepts: children, style, className, …rest. Source description: Styled callout box with icon, custom colour, and child content. Import path 
import { CustomCallout } from '/snippets/components/elements/links/Links.jsx'
Metadata
  • Status: stable
  • Accepts: children, style, className, ...rest
  • Data source: none 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) | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |
Code example 
<CustomCallout color="example" textColor="example">Example content</CustomCallout>

​
CustomCardTitle

Use CustomCardTitle when you need card title row with icon and text, using flexbox alignment.. Accepts: style, className, …rest. Source description: Card title row with icon and text, using flexbox alignment. Import path 
import { CustomCardTitle } from '/snippets/components/elements/text/CustomCardTitle.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: none 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 | {} | No | Inline style overrides. | | className | string | "" | No | CSS class name. |
Code example 
<CustomCardTitle icon="sparkles" title="Example" style={{}} />

​
CustomDivider

Use CustomDivider when you need themed horizontal divider with optional centre text and Livepeer logo accents.. Accepts: style, className, …rest. Source description: Themed horizontal divider with optional centre text and Livepeer logo accents. Import path 
import { CustomDivider } from '/snippets/components/elements/spacing/Divider.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: none 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. | | className | string | '' | No | Optional CSS class override. |
Code example 
<CustomDivider />
Use DoubleIconLink when you need inline link with icons on both sides.. Accepts: style, className, …rest. Source description: Inline link with icons on both sides. Import path 
import { DoubleIconLink } from '/snippets/components/elements/links/Links.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: none 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 | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |
Code example 
<DoubleIconLink />

​
DownloadButton

Use DownloadButton when you need lazy-loaded download button with icon that renders on viewport intersection.. Accepts: style, className, …rest. Source description: Lazy-loaded download button with icon that renders on viewport intersection. Import path 
import { DownloadButton } from '/snippets/components/elements/buttons/Buttons.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: none 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. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |
Code example 
<DownloadButton downloadLink="example" />

​
FocusableScrollRegions

Use FocusableScrollRegions when you need makes scroll regions keyboard-focusable by adding tabindex to matching selectors.. Accepts: selectors. Source description: Makes scroll regions keyboard-focusable by adding tabindex to matching selectors. Import path 
import { FocusableScrollRegions } from '/snippets/components/elements/a11y/A11y.jsx'
Metadata
  • Status: stable
  • Accepts: selectors
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | selectors | any | “ | Yes | selectors prop. |
Code example 
<FocusableScrollRegions selectors="example" />

​
GotoCard

Use GotoCard when you need card-style navigation link wrapping Mintlify Card component.. Accepts: style, className, …props. Source description: Card-style navigation link wrapping Mintlify Card component. Import path 
import { GotoCard } from '/snippets/components/elements/links/Links.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...props
  • Data source: none 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. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |
Code example 
<GotoCard label="example" relativePath="example" />
Use GotoLink when you need inline navigation link with icon prefix and label.. Accepts: style, className, …rest. Source description: Inline navigation link with icon prefix and label. Import path 
import { GotoLink } from '/snippets/components/elements/links/Links.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: none 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 | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |
Code example 
<GotoLink label="example" relativePath="example" />

​
Image

Use Image when you need framed image with optional caption and full-width toggle.. Accepts: style, className, …rest. Source description: Framed image with optional caption and full-width toggle. Import path 
import { Image } from '/snippets/components/elements/images/Image.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: 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. | | fullwidth | boolean | true | No | fullwidth prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |
Code example 
<Image src="example" alt="example" />

​
LinkArrow

Use LinkArrow when you need external link with arrow icon, optional description, and line break control.. Accepts: style, className, …rest. Source description: External link with arrow icon, optional description, and line break control. Import path 
import { LinkArrow } from '/snippets/components/elements/links/Links.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: none 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. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |
Code example 
<LinkArrow href="example" label="example" />

​
LinkImage

Use LinkImage when you need clickable framed image that opens a URL in a new tab.. Accepts: style, className, …rest. Source description: Clickable framed image that opens a URL in a new tab. Import path 
import { LinkImage } from '/snippets/components/elements/images/Image.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: 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. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |
Code example 
<LinkImage src="example" alt="example" />

​
LivepeerIcon

Use LivepeerIcon when you need theme-aware Livepeer icon with CSS custom property colour adaptation.. Accepts: …props. Source description: Theme-aware Livepeer icon with CSS custom property colour adaptation. Import path 
import { LivepeerIcon } from '/snippets/components/elements/icons/Icons.jsx'
Metadata
  • Status: stable
  • Accepts: ...props
  • Data source: none 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" />

​
LivepeerSVG

Use LivepeerSVG when you need inline Livepeer logo as SVG with currentColor fill.. Accepts: …props. Source description: Inline Livepeer logo as SVG with currentColor fill. Import path 
import { LivepeerSVG } from '/snippets/components/elements/icons/Icons.jsx'
Metadata
  • Status: stable
  • Accepts: ...props
  • Data source: 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 renders LaTeX as a block-level math expression using KaTeX.. Accepts: style, className, …rest. Source description: Renders LaTeX as a block-level math expression using KaTeX. Import path 
import { MathBlock } from '/snippets/components/elements/math/Math.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | latex | any | | Yes | latex prop. | | `className` | `string` | `""` | No | class Name prop. | | `ariaLabel` | `any` | | Yes | aria Label prop. | | style | object | {} | No | Optional inline style override. |
Code example 
<MathBlock latex="example" ariaLabel="example" />

​
MathInline

Use MathInline when you need renders LaTeX as inline math using KaTeX.. Accepts: style, className, …rest. Source description: Renders LaTeX as inline math using KaTeX. Import path 
import { MathInline } from '/snippets/components/elements/math/Math.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | latex | any | | Yes | latex prop. | | `className` | `string` | `""` | No | class Name prop. | | `ariaLabel` | `any` | | Yes | aria Label prop. | | style | object | {} | No | Optional inline style override. |
Code example 
<MathInline latex="example" ariaLabel="example" />

​
PreviewCallout

Use PreviewCallout when you need banner indicating content is in preview/draft state with feedback links.. Accepts: style, className, …rest. Source description: Banner indicating content is in preview/draft state with feedback links. Import path 
import { PreviewCallout } from '/snippets/components/elements/callouts/PreviewCallouts.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |
Code example 
<PreviewCallout />

​
ReviewCallout

Use ReviewCallout when you need banner indicating content is under review with status links.. Accepts: style, className, …rest. Source description: Banner indicating content is under review with status links. Import path 
import { ReviewCallout } from '/snippets/components/elements/callouts/PreviewCallouts.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |
Code example 
<ReviewCallout />
Use SocialLinks when you need row of icon-only social media links with tooltips and aria-labels.. Accepts: style, className, …rest. Source description: Row of icon-only social media links with tooltips and aria-labels. Import path 
import { SocialLinks } from '/snippets/components/elements/social/SocialLinks.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: 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. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |
Code example 
<SocialLinks color="value" />

​
Spacer

Use Spacer when you need empty spacer div with configurable size and direction.. Accepts: style, className, …rest. Source description: Empty spacer div with configurable size and direction. Import path 
import { Spacer } from '/snippets/components/elements/spacing/Spacer.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: 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. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |
Code example 
<Spacer />

​
Subtitle

Use Subtitle when you need styled subtitle text with configurable colour, size, and alignment.. Accepts: children, style, className, …rest. Source description: Styled subtitle text with configurable colour, size, and alignment. Import path 
import { Subtitle } from '/snippets/components/elements/text/Text.jsx'
Metadata
  • Status: stable
  • Accepts: children, style, className, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | style | object | {} | No | style prop. | | text | any | | Yes | text prop. | | `children` | `any` | | Yes | children prop. | | className | string | '' | No | Optional CSS class override. |
Code example 
<Subtitle text="example">Example content</Subtitle>

​
TipWithArrow

Use TipWithArrow when you need callout box with tip icon and corner arrow indicator.. Accepts: children, style, className, …rest. Source description: Callout box with tip icon and corner arrow indicator. Import path 
import { TipWithArrow } from '/snippets/components/elements/links/Links.jsx'
Metadata
  • Status: stable
  • Accepts: children, style, className, ...rest
  • Data source: none 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 | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |
Code example 
<TipWithArrow color="example">Example content</TipWithArrow>
Last modified on March 30, 2026