Generation Script: This file is generated from script(s):
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
operations/scripts/generators/components/documentation/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/generators/components/documentation/generate-component-docs.js --fix --template-only --category scaffolding. Back to Component Library
Return to the generated component library landing page.
Scaffolding
One-per-page structural skeleton – heroes, portals, frame-mode overrides. This category currently contains 20 governed export(s).Decision Tree Excerpt
- Fetches, embeds, or binds to external/third-party data? →
integrators/ - Part of the page’s outer structure, typically used once? →
scaffolding/ - Takes content and presents it in a formatted way? →
displays/ - Exists to hold, group, or arrange other things? →
wrappers/ - Single visual piece – no wrapping, no arranging, no fetching? →
elements/
Summary Table
| Component | Status | Import path | Description |
|---|---|---|---|
| Divider | stable | /snippets/components/scaffolding/frame-mode/FrameMode.jsx | Horizontal rule divider for frame-mode pages. |
| H1 | stable | /snippets/components/scaffolding/frame-mode/FrameMode.jsx | Heading override with optional icon prefix for frame-mode pages. |
| H2 | stable | /snippets/components/scaffolding/frame-mode/FrameMode.jsx | Heading override with optional icon prefix for frame-mode pages. |
| H3 | stable | /snippets/components/scaffolding/frame-mode/FrameMode.jsx | Heading override with optional icon prefix for frame-mode pages. |
| H4 | stable | /snippets/components/scaffolding/frame-mode/FrameMode.jsx | Heading override with optional icon prefix for frame-mode pages. |
| H5 | stable | /snippets/components/scaffolding/frame-mode/FrameMode.jsx | Heading override with optional icon prefix for frame-mode pages. |
| H6 | stable | /snippets/components/scaffolding/frame-mode/FrameMode.jsx | Heading override with optional icon prefix for frame-mode pages. |
| HeroContentContainer | stable | /snippets/components/scaffolding/portals/Portals.jsx | Centred content container inside hero sections. |
| HeroImageBackgroundComponent | stable | /snippets/components/scaffolding/portals/Portals.jsx | Hero background with image overlay and gradient. |
| HeroOverviewContent | stable | /snippets/components/scaffolding/portals/Portals.jsx | Hero content layout with title, icon, subtitle, and CTA slots. |
| HeroSectionContainer | stable | /snippets/components/scaffolding/portals/Portals.jsx | Full-width hero section wrapper with min-height and gradient background. |
| LogoHeroContainer | stable | /snippets/components/scaffolding/portals/Portals.jsx | Hero banner with centred logo image, title, and subtitle. |
| P | stable | /snippets/components/scaffolding/frame-mode/FrameMode.jsx | Paragraph override with optional icon prefix for frame-mode pages. |
| PageHeader | stable | /snippets/components/scaffolding/frame-mode/FrameMode.jsx | Page-level header with icon, title, and subtitle for frame-mode pages. |
| PortalCardsHeader | stable | /snippets/components/scaffolding/portals/Portals.jsx | Section header with mission label and optional subtitle. |
| PortalContentContainer | stable | /snippets/components/scaffolding/portals/Portals.jsx | Outer container for portal page content below the hero. |
| PortalHeroContent | stable | /snippets/components/scaffolding/portals/Portals.jsx | Hero content with logo, title, tagline, description, and card grid. |
| PortalSectionHeader | stable | /snippets/components/scaffolding/portals/Portals.jsx | Section header with icon, title, and horizontal rule. |
| RefCardContainer | stable | /snippets/components/scaffolding/portals/Portals.jsx | Container for reference cards with configurable column count. |
| Starfield | stable | /snippets/components/scaffolding/heroes/StarfieldCanvas.jsx | Animated canvas starfield background with floating Livepeer logos. Respects prefers-reduced-motion. |
Component Reference
Divider
Use Divider when you need horizontal rule divider for frame-mode pages.. Accepts: colour, margin, opacity, className, style, …rest. Source description: Horizontal rule divider for frame-mode pages. Import path- Status:
stable - Accepts:
{string} color, {string} margin, {number} opacity, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |color|string| “ | Yes | Custom color for the divider (optional, defaults to theme border color) | |margin|string|"1.5rem 0"| No | Vertical margin (default: “1.5rem 0”) | |opacity|string|0.2| No | Opacity of the divider (default: 0.2) | |className|string|""| No | CSS class name. | |style|object|{}| No | Inline style overrides. |
H1
Use H1 when you need heading override with optional icon prefix for frame-mode pages.. Accepts: children, icon, iconSize, iconColor, align, gap, className, style, …rest. Source description: Heading override with optional icon prefix for frame-mode pages. Import path- Status:
stable - Accepts:
{any} children, {any} icon, {number} iconSize, {any} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |children|any|| Yes | children prop. | | `icon` | `any` || Yes | icon prop. | |iconSize|number|32| No | icon Size prop. | |iconColor|any| “ | Yes | icon Color prop. | |align|string|"left"| No | align prop. | |gap|string|"0.75rem"| No | gap prop. | |className|string|""| No | CSS class name. | |style|object|{}| No | Inline style overrides. |
H2
Use H2 when you need heading override with optional icon prefix for frame-mode pages.. Accepts: children, icon, iconSize, iconColor, align, gap, className, style, …rest. Source description: Heading override with optional icon prefix for frame-mode pages. Import path- Status:
stable - Accepts:
{string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |children|string|| Yes | The heading text | | `icon` | `string` || Yes | Optional icon name or path to theme-aware SVG | |iconSize|number|28| No | Size of the icon (default: 28) | |iconColor|string| “ | Yes | Color of the icon (default: theme-aware accent color) | |align|string|"left"| No | Text alignment: “left”, “centre”, “right” (default: “left”) | |gap|string|"0.75rem"| No | Gap between icon and text (default: “0.75rem”) | |className|string|""| No | CSS class name. | |style|object|{}| No | Inline style overrides. |
H3
Use H3 when you need heading override with optional icon prefix for frame-mode pages.. Accepts: children, icon, iconSize, iconColor, align, gap, className, style, …rest. Source description: Heading override with optional icon prefix for frame-mode pages. Import path- Status:
stable - Accepts:
{string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |children|string|| Yes | The heading text | | `icon` | `string` || Yes | Optional icon name or path to theme-aware SVG | |iconSize|number|24| No | Size of the icon (default: 24) | |iconColor|string| “ | Yes | Color of the icon (default: theme-aware accent color) | |align|string|"left"| No | Text alignment: “left”, “centre”, “right” (default: “left”) | |gap|string|"0.5rem"| No | Gap between icon and text (default: “0.5rem”) | |className|string|""| No | CSS class name. | |style|object|{}| No | Inline style overrides. |
H4
Use H4 when you need heading override with optional icon prefix for frame-mode pages.. Accepts: children, icon, iconSize, iconColor, align, gap, className, style, …rest. Source description: Heading override with optional icon prefix for frame-mode pages. Import path- Status:
stable - Accepts:
{string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |children|string|| Yes | The heading text | | `icon` | `string` || Yes | Optional icon name or path to theme-aware SVG | |iconSize|number|20| No | Size of the icon (default: 20) | |iconColor|string| “ | Yes | Color of the icon (default: theme-aware accent color) | |align|string|"left"| No | Text alignment: “left”, “centre”, “right” (default: “left”) | |gap|string|"0.5rem"| No | Gap between icon and text (default: “0.5rem”) | |className|string|""| No | CSS class name. | |style|object|{}| No | Inline style overrides. |
H5
Use H5 when you need heading override with optional icon prefix for frame-mode pages.. Accepts: children, icon, iconSize, iconColor, align, gap, className, style, …rest. Source description: Heading override with optional icon prefix for frame-mode pages. Import path- Status:
stable - Accepts:
{string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |children|string|| Yes | The heading text | | `icon` | `string` || Yes | Optional icon name or path to theme-aware SVG | |iconSize|number|18| No | Size of the icon (default: 18) | |iconColor|string| “ | Yes | Color of the icon (default: theme-aware accent color) | |align|string|"left"| No | Text alignment: “left”, “centre”, “right” (default: “left”) | |gap|string|"0.5rem"| No | Gap between icon and text (default: “0.5rem”) | |className|string|""| No | CSS class name. | |style|object|{}| No | Inline style overrides. |
H6
Use H6 when you need heading override with optional icon prefix for frame-mode pages.. Accepts: children, icon, iconSize, iconColor, align, gap, className, style, …rest. Source description: Heading override with optional icon prefix for frame-mode pages. Import path- Status:
stable - Accepts:
{string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |children|string|| Yes | The heading text | | `icon` | `string` || Yes | Optional icon name or path to theme-aware SVG | |iconSize|number|16| No | Size of the icon (default: 16) | |iconColor|string| “ | Yes | Color of the icon (default: theme-aware accent color) | |align|string|"left"| No | Text alignment: “left”, “centre”, “right” (default: “left”) | |gap|string|"0.5rem"| No | Gap between icon and text (default: “0.5rem”) | |className|string|""| No | CSS class name. | |style|object|{}| No | Inline style overrides. |
HeroContentContainer
Use HeroContentContainer when you need centred content container inside hero sections.. Accepts: children, className, style, …rest. Source description: Centred content container inside hero sections. Import path- Status:
stable - Accepts:
{any} children, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |children|any| “ | Yes | children prop. | |className|string|''| No | Optional CSS class override. | |style|object|{}| No | Optional inline style override. |
HeroImageBackgroundComponent
Use HeroImageBackgroundComponent when you need hero background with image overlay and gradient.. Accepts: children, className, style, …rest. Source description: Hero background with image overlay and gradient. Import path- Status:
stable - Accepts:
{any} children, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |children|any| “ | Yes | children prop. | |className|string|''| No | Optional CSS class override. | |style|object|{}| No | Optional inline style override. |
HeroOverviewContent
Use HeroOverviewContent when you need hero content layout with title, icon, subtitle, and CTA slots.. Accepts: children, className, style, …rest. Source description: Hero content layout with title, icon, subtitle, and CTA slots. Import path- Status:
stable - Accepts:
{any} children, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |children|any| “ | Yes | children prop. | |className|string|''| No | Optional CSS class override. | |style|object|{}| No | Optional inline style override. |
HeroSectionContainer
Use HeroSectionContainer when you need full-width hero section wrapper with min-height and gradient background.. Accepts: children, minHeight, className, style, …rest. Source description: Full-width hero section wrapper with min-height and gradient background. Import path- Status:
stable - Accepts:
{any} children, {string} minHeight, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |children|any| “ | Yes | children prop. | |minHeight|string|"fit-content"| No | min Height prop. | |className|string|''| No | Optional CSS class override. | |style|object|{}| No | Optional inline style override. |
LogoHeroContainer
Use LogoHeroContainer when you need hero banner with centred logo image, title, and subtitle.. Accepts: src, alt, width, margin, imgHeight, imgWidth, objectFit, children, className, style, …rest. Source description: Hero banner with centred logo image, title, and subtitle. Import path- Status:
stable - Accepts:
{string} src, {string} alt, {string} width, {string} margin, {string} imgHeight, {string} imgWidth, {string} objectFit, {any} children, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |src|string|"/snippets/assets/logos/Livepeer-Logo-Full-Theme.svg"| No | src prop. | |alt|string|"Livepeer Logo"| No | alt prop. | |width|string|"100%"| No | width prop. | |margin|string|"1rem auto 0 auto"| No | margin prop. | |imgHeight|string|"20px"| No | img Height prop. | |imgWidth|string|"auto"| No | img Width prop. | |objectFit|string|"contain"| No | object Fit prop. | |children|any| “ | Yes | children prop. | |className|string|''| No | Optional CSS class override. | |style|object|{}| No | Optional inline style override. |
P
Use P when you need paragraph override with optional icon prefix for frame-mode pages.. Accepts: children, icon, iconSize, iconColor, align, gap, className, style, …rest. Source description: Paragraph override with optional icon prefix for frame-mode pages. Import path- Status:
stable - Accepts:
{string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |children|string|| Yes | The paragraph text | | `icon` | `string` || Yes | Optional icon name or path to theme-aware SVG | |iconSize|number|16| No | Size of the icon (default: 16) | |iconColor|string| “ | Yes | Color of the icon (default: theme-aware accent color) | |align|string|"left"| No | Text alignment: “left”, “centre”, “right” (default: “left”) | |gap|string|"0.5rem"| No | Gap between icon and text (default: “0.5rem”) | |className|string|""| No | CSS class name. | |style|object|{}| No | Inline style overrides. |
PageHeader
Use PageHeader when you need page-level header with icon, title, and subtitle for frame-mode pages.. Accepts: title, subtitle, description, children, titleColor, subtitleColor, descriptionColor, className, style, …rest. Source description: Page-level header with icon, title, and subtitle for frame-mode pages. Import path- Status:
stable - Accepts:
{any} title, {any} subtitle, {any} description, {string} children, {any} titleColor, {any} subtitleColor, {any} descriptionColor, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |title|any|| Yes | title prop. | | `subtitle` | `any` || Yes | subtitle prop. | |description|any|| Yes | description prop. | | `children` | `string` || Yes | The heading text | |titleColor|any|| Yes | title Color prop. | | `subtitleColor` | `any` || Yes | subtitle Color prop. | |descriptionColor|any| “ | Yes | description Color prop. | |className|string|""| No | CSS class name. | |style|object|{}| No | Inline style overrides. |
PortalCardsHeader
Use PortalCardsHeader when you need section header with mission label and optional subtitle.. Accepts: children, title, className, style, …rest. Source description: Section header with mission label and optional subtitle. Import path- Status:
stable - Accepts:
{any} children, {any} title, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |children|any|| Yes | children prop. | | `title` | `any` || Yes | title prop. | |className|string|''| No | Optional CSS class override. | |style|object|{}| No | Optional inline style override. |
PortalContentContainer
Use PortalContentContainer when you need outer container for portal page content below the hero.. Accepts: children, className, style, …rest. Source description: Outer container for portal page content below the hero. Import path- Status:
stable - Accepts:
{any} children, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |children|any| “ | Yes | children prop. | |className|string|''| No | Optional CSS class override. | |style|object|{}| No | Optional inline style override. |
PortalHeroContent
Use PortalHeroContent when you need hero content with logo, title, tagline, description, and card grid.. Accepts: zIndex, title, subtitle, subtitleIcon, description, refCardLink, overview, divider, callout, titleColor, subtitleColor, children, className, style, …rest. Source description: Hero content with logo, title, tagline, description, and card grid. Import path- Status:
stable - Accepts:
{boolean} zIndex, {string} title, {string} subtitle, {string} subtitleIcon, {any} description, {any} refCardLink, {any} overview, {boolean} divider, {any} callout, {any} titleColor, {any} subtitleColor, {any} children, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |zIndex|boolean|true| No | z Index prop. | |title|string|"Portal Page"| No | title prop. | |subtitle|string|"Build - Explore - Create"| No | subtitle prop. | |subtitleIcon|string|"/snippets/assets/logos/Livepeer-Logo-Symbol-Green-Theme.svg"| No | subtitle Icon prop. | |description|any|| Yes | description prop. | | `refCardLink` | `any` || Yes | ref Card Link prop. | |overview|any|| Yes | overview prop. | | `divider` | `boolean` | `true` | No | divider prop. | | `callout` | `any` | `null` | No | callout prop. | | `titleColor` | `any` || Yes | title Color prop. | |subtitleColor|any|| Yes | subtitle Color prop. | | `children` | `any` || Yes | children prop. | |className|string|''| No | Optional CSS class override. | |style|object|{}| No | Optional inline style override. |
PortalSectionHeader
Use PortalSectionHeader when you need section header with icon, title, and horizontal rule.. Accepts: children, title, icon, className, style, …rest. Source description: Section header with icon, title, and horizontal rule. Import path- Status:
stable - Accepts:
{any} children, {any} title, {any} icon, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |children|any|| Yes | children prop. | | `title` | `any` || Yes | title prop. | |icon|any| “ | Yes | icon prop. | |className|string|''| No | Optional CSS class override. | |style|object|{}| No | Optional inline style override. |
RefCardContainer
Use RefCardContainer when you need container for reference cards with configurable column count.. Accepts: children, className, style, …rest. Source description: Container for reference cards with configurable column count. Import path- Status:
stable - Accepts:
{any} children, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |children|any| “ | Yes | children prop. | |className|string|''| No | Optional CSS class override. | |style|object|{}| No | Optional inline style override. |
Starfield
Use Starfield when you need animated canvas starfield background with floating Livepeer logos. Respects prefers-reduced-motion.. Accepts: density, className, style, …rest. Source description: Animated canvas starfield background with floating Livepeer logos. Respects prefers-reduced-motion. Import path- Status:
stable - Accepts:
{number} density, {string} className, {object} style, ...rest - Data source:
noneProps | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | |density|number|1.1| No | Density used by the component. | |className|string|""| No | CSS class name. | |style|object|{}| No | Inline style overrides. |