Layout

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 layout.

Back to Component Library

Return to the generated component library landing page.

Containers and arrangements that define spacing, grouping, and page flow. This category currently contains 31 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
AccordionGroupList	`composite`	`stable`	`/snippets/components/layout/accordionGroupList.jsx`	Renders a configurable number of empty accordion sections for scaffold examples.
AccordionLayout	`composite`	`stable`	`/snippets/components/layout/text.jsx`	Accordion Layout layout component for arranging documentation content without MDX inline styles.
BasicList	`composite`	`stable`	`/snippets/components/layout/lists.jsx`	Basic List layout component for arranging documentation content without MDX inline styles.
BorderedBox	`composite`	`stable`	`/snippets/components/layout/containers.jsx`	Bordered Box layout component for arranging documentation content without MDX inline styles.
CardCarousel	`composite`	`stable`	`/snippets/components/layout/card-carousel.jsx`	Card Carousel layout component for arranging documentation content without MDX inline styles.
CenteredContainer	`composite`	`stable`	`/snippets/components/layout/containers.jsx`	Centered Container layout component for arranging documentation content without MDX inline styles.
DisplayCard	`composite`	`stable`	`/snippets/components/layout/customCards.jsx`	--------
DynamicTable	`composite`	`stable`	`/snippets/components/layout/table.jsx`	Dynamic Table layout component for arranging documentation content without MDX inline styles.
FlexContainer	`composite`	`stable`	`/snippets/components/layout/layout.jsx`	Flex Container layout component for arranging documentation content without MDX inline styles.
FullWidthContainer	`composite`	`stable`	`/snippets/components/layout/containers.jsx`	Full Width Container layout component for arranging documentation content without MDX inline styles.
GridContainer	`composite`	`stable`	`/snippets/components/layout/layout.jsx`	Grid Container layout component for arranging documentation content without MDX inline styles.
IconList	`composite`	`stable`	`/snippets/components/layout/lists.jsx`	Icon List layout component for arranging documentation content without MDX inline styles.
InlineImageCard	`composite`	`stable`	`/snippets/components/layout/customCards.jsx`	Renders the inline image card component
InteractiveCard	`composite`	`stable`	`/snippets/components/layout/showcase-cards.jsx`	Interactive Card layout component for arranging documentation content without MDX inline styles.
InteractiveCards	`composite`	`stable`	`/snippets/components/layout/showcase-cards.jsx`	Interactive Cards layout component for arranging documentation content without MDX inline styles.
ListSteps	`composite`	`stable`	`/snippets/components/layout/list-steps.jsx`	List Steps layout component for arranging documentation content without MDX inline styles.
QuadGrid	`composite`	`stable`	`/snippets/components/layout/quad-grid.jsx`	Quad Grid layout component for arranging documentation content without MDX inline styles.
ScrollBox	`composite`	`stable`	`/snippets/components/layout/cards.jsx`	Scroll Box layout component for arranging documentation content without MDX inline styles.
SearchTable	`composite`	`stable`	`/snippets/components/layout/search-table.jsx`	Search Table layout component for arranging documentation content without MDX inline styles.
ShowcaseCards	`composite`	`stable`	`/snippets/components/layout/showcase-cards.jsx`	Showcase Cards layout component for arranging documentation content without MDX inline styles.
Spacer	`composite`	`stable`	`/snippets/components/layout/layout.jsx`	Spacer layout component for arranging documentation content without MDX inline styles.
StepLinkList	`composite`	`stable`	`/snippets/components/layout/lists.jsx`	Step Link List layout component for arranging documentation content without MDX inline styles.
StepList	`composite`	`stable`	`/snippets/components/layout/lists.jsx`	Step List layout component for arranging documentation content without MDX inline styles.
StyledStep	`composite`	`stable`	`/snippets/components/layout/steps.jsx`	Styled Step layout component for arranging documentation content without MDX inline styles.
StyledSteps	`composite`	`stable`	`/snippets/components/layout/steps.jsx`	Styled Steps layout component for arranging documentation content without MDX inline styles.
StyledTable	`composite`	`stable`	`/snippets/components/layout/tables.jsx`	Styled Table layout component for arranging documentation content without MDX inline styles.
TableCell	`composite`	`stable`	`/snippets/components/layout/tables.jsx`	Table Cell layout component for arranging documentation content without MDX inline styles.
TableRow	`composite`	`stable`	`/snippets/components/layout/tables.jsx`	Table Row layout component for arranging documentation content without MDX inline styles.
UpdateLinkList	`composite`	`stable`	`/snippets/components/layout/lists.jsx`	Update Link List layout component for arranging documentation content without MDX inline styles.
UpdateList	`composite`	`stable`	`/snippets/components/layout/lists.jsx`	Update List layout component for arranging documentation content without MDX inline styles.
WidthCard	`composite`	`stable`	`/snippets/components/layout/customCards.jsx`	Renders the width card component

Component Reference

AccordionGroupList

Use AccordionGroupList when you need renders a configurable number of empty accordion sections for scaffold examples.. Best suited for tutorial, reference page types. Source description: Renders a configurable number of empty accordion sections for scaffold examples. Import path

import { AccordionGroupList } from '/snippets/components/layout/accordionGroupList.jsx'

Metadata

Content affinity: tutorial, reference
Dependencies: AccordionGroup, Accordion
Data source: none
Last meaningful change: 2026-03-11
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | num | number | 1 | No | Number of placeholder accordion sections to render. |

Code example

<AccordionGroupList num={3} />

AccordionLayout

Use AccordionLayout when you need accordion Layout layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Accordion Layout layout component for arranging documentation content without MDX inline styles. Import path

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

Metadata

Content affinity: overview, tutorial, reference
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/about/mental-model.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. |

Code example

<AccordionLayout>Example content</AccordionLayout>

BasicList

Use BasicList when you need basic List layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Basic List layout component for arranging documentation content without MDX inline styles. Import path

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

Metadata

Content affinity: overview, tutorial, reference
Dependencies: StepLinkList, StepList, UpdateLinkList
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/home/primer.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | listItems | any | “ | Yes | list Items prop. |

Code example

<BasicList listItems={[]} />

BorderedBox

Use BorderedBox when you need bordered Box layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Bordered Box layout component for arranging documentation content without MDX inline styles. Import path

import { BorderedBox } from '/snippets/components/layout/containers.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: CenteredContainer, FullWidthContainer
Data source: none
Last meaningful change: 2026-03-15
Breaking change risk: high
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/community/livepeer-community/community-guidelines.mdx, v2/developers/build/workload-fit.mdx, v2/developers/developer-journey.mdx, v2/developers/opportunities/bug-bounties.mdx, v2/developers/opportunities/grants-and-programmes.mdx, v2/developers/opportunities/oss-contributions.mdx, and 40 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | variant | string | "default" | No | variant prop. | | padding | string | "1rem" | No | padding prop. | | borderRadius | string | "8px" | No | border Radius prop. | | accentBar | string | "" | No | Optional accent border token applied to the left edge. | | style | object | {} | No | style prop. |

Code example

<BorderedBox>Example content</BorderedBox>

CardCarousel

Use CardCarousel when you need card Carousel layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Card Carousel layout component for arranging documentation content without MDX inline styles. Import path

import { CardCarousel } from '/snippets/components/layout/card-carousel.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `visibleCount` | `number` | `3` | No | visible Count prop. | | `gap` | `string` | `"1.5rem"` | No | gap prop. | | `showDots` | `boolean` | `true` | No | show Dots prop. | | `style` | `any` | | Yes | style prop. |

Code example

<CardCarousel style="example">Example content</CardCarousel>

CenteredContainer

Use CenteredContainer when you need centered Container layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Centered Container layout component for arranging documentation content without MDX inline styles. Import path

import { CenteredContainer } from '/snippets/components/layout/containers.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: BorderedBox, FullWidthContainer
Data source: none
Last meaningful change: 2026-03-15
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/gateways/concepts/architecture.mdx, v2/gateways/concepts/business-model.mdx, v2/gateways/concepts/capabilities.mdx, v2/gateways/concepts/role.mdx, v2/gateways/guides/advanced-operations/scaling.mdx, v2/gateways/guides/deployment-details/setup-requirements.mdx, and 10 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | maxWidth | string | "800px" | No | max Width prop. | | padding | string | "0" | No | padding prop. | | preset | string | "default" | No | Named width/layout preset for common documentation patterns. | | width | string | "" | No | Explicit width override. | | minWidth | string | "" | No | Explicit min-width override. | | marginRight | string | "" | No | Optional right margin override. | | marginBottom | string | "" | No | Optional bottom margin override. | | textAlign | string | "" | No | Optional text alignment override. | | style | object | {} | No | style prop. |

Code example

<CenteredContainer>Example content</CenteredContainer>

DisplayCard

Use DisplayCard when you need --------. Best suited for universal page types. Source description: -------- Import path

import { DisplayCard } from '/snippets/components/layout/customCards.jsx'

Metadata

Content affinity: universal
Dependencies: InlineImageCard, WidthCard
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: @livepeer/docs-team
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/community/livepeer-community/community-guidelines.mdx, v2/developers/opportunities/bug-bounties.mdx, v2/developers/opportunities/grants-and-programmes.mdx, v2/developers/opportunities/oss-contributions.mdx, v2/developers/opportunities/overview.mdx, v2/developers/opportunities/rfps-and-proposals.mdx, and 4 more page(s) 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. | | `background` | `string` | `'var(--card-background)'` | No | Background used by the component. | | `children` | `React.ReactNode` | | Yes | Content rendered inside the component. |

Code example

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

DynamicTable

Use DynamicTable when you need dynamic Table layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Dynamic Table layout component for arranging documentation content without MDX inline styles. Import path

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

Metadata

Content affinity: overview, tutorial, reference
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/about/livepeer-network/interfaces.mdx, v2/about/livepeer-network/job-lifecycle.mdx, v2/about/livepeer-network/marketplace.mdx, v2/about/livepeer-network/technical-architecture.mdx, v2/about/livepeer-protocol/core-mechanisms.mdx, v2/about/livepeer-protocol/livepeer-token.mdx, and 20 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | tableTitle | any | null | No | table Title prop. | | headerList | Array | [ | No | ] - header List prop. | | itemsList | Array | [ | No | ] - items List prop. | | monospaceColumns | Array | [ | No | ] - monospace Columns prop. | | margin | any | “ | Yes | margin prop. |

Code example

<DynamicTable margin="example" />

FlexContainer

Use FlexContainer when you need flex Container layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Flex Container layout component for arranging documentation content without MDX inline styles. Import path

import { FlexContainer } from '/snippets/components/layout/layout.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: GridContainer, Spacer
Data source: none
Last meaningful change: 2026-03-11
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/community/livepeer-community/community-guidelines.mdx, v2/developers/build/workload-fit.mdx, v2/gateways/quickstart/gateway-setup.mdx, v2/gateways/setup/run-a-gateway.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | direction | string | "row" | No | direction prop. | | gap | string | "1rem" | No | gap prop. | | align | string | "flex-start" | No | align prop. | | justify | string | "flex-start" | No | justify prop. | | wrap | boolean | false | No | wrap prop. | | marginTop | string | "" | No | Optional top margin override. | | marginBottom | string | "" | No | Optional bottom margin override. | | style | object | {} | No | style prop. |

Code example

<FlexContainer>Example content</FlexContainer>

FullWidthContainer

Use FullWidthContainer when you need full Width Container layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Full Width Container layout component for arranging documentation content without MDX inline styles. Import path

import { FullWidthContainer } from '/snippets/components/layout/containers.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: BorderedBox, CenteredContainer
Data source: none
Last meaningful change: 2026-03-15
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `backgroundColor` | `any` | | Yes | background Color prop. | | style | object | {} | No | style prop. |

Code example

<FullWidthContainer backgroundColor="example">Example content</FullWidthContainer>

GridContainer

Use GridContainer when you need grid Container layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Grid Container layout component for arranging documentation content without MDX inline styles. Import path

import { GridContainer } from '/snippets/components/layout/layout.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: FlexContainer, Spacer
Data source: none
Last meaningful change: 2026-03-11
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `columns` | `any` | | Yes | columns prop. | | gap | string | "1rem" | No | gap prop. | | style | object | {} | No | style prop. |

Code example

<GridContainer columns="example">Example content</GridContainer>

IconList

Use IconList when you need icon List layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Icon List layout component for arranging documentation content without MDX inline styles. Import path

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

Metadata

Content affinity: overview, tutorial, reference
Dependencies: StepLinkList, StepList, UpdateLinkList
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/home/primer.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | listItems | any | “ | Yes | list Items prop. |

Code example

<IconList listItems={[]} />

InlineImageCard

Use InlineImageCard when you need renders the inline image card component. Best suited for universal page types. Source description: Renders the inline image card component Import path

import { InlineImageCard } from '/snippets/components/layout/customCards.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: composite
@usedIn: v2/resources/media-kit.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | React.ReactNode | | Yes | Content rendered inside the component. | | `imgProps` | `object` | | Yes | Img props used by the component. | | imgStyle | object | | Yes | Img style used by the component. | | `cardProps` | `object` | | Yes | Card props used by the component. | | style | object | “ | Yes | Style used by the component. |

Code example

<InlineImageCard imgProps={{}} imgStyle={{}} cardProps={{}} />

InteractiveCard

Use InteractiveCard when you need interactive Card layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Interactive Card layout component for arranging documentation content without MDX inline styles. Import path

import { InteractiveCard } from '/snippets/components/layout/showcase-cards.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | mediaSrc | string | "" | No | media Src prop. | | logo | string | "" | No | logo prop. | | title | string | "Untitled project" | No | title prop. | | subtitle | string | "" | No | subtitle prop. | | description | string | "" | No | description prop. | | href | string | "#" | No | href prop. | | categoryTags | Array | [ | No | ] - category Tags prop. | | productTags | Array | [ | No | ] - product Tags prop. | | links | Array | [ | No | ] - links prop. | | style | any | | Yes | style prop. | | `cardProps` | `any` | | Yes | card Props prop. |

Code example

<InteractiveCard />

InteractiveCards

Use InteractiveCards when you need interactive Cards layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Interactive Cards layout component for arranging documentation content without MDX inline styles. Import path

import { InteractiveCards } from '/snippets/components/layout/showcase-cards.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: InteractiveCard
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | items | Array | [ | No | ] - items prop. |

Code example

<InteractiveCards />

ListSteps

Use ListSteps when you need list Steps layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: List Steps layout component for arranging documentation content without MDX inline styles. Import path

import { ListSteps } from '/snippets/components/layout/list-steps.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: none Props No documented props.

Code example

<ListSteps />

QuadGrid

Use QuadGrid when you need quad Grid layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Quad Grid layout component for arranging documentation content without MDX inline styles. Import path

import { QuadGrid } from '/snippets/components/layout/quad-grid.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/about/livepeer-overview.mdx, v2/home/about-livepeer/ecosystem.mdx, v2/home/about-livepeer/vision.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | icon | string | "arrows-spin" | No | icon prop. | | iconSize | number | 50 | No | icon Size prop. | | iconColor | string | "var(--accent)" | No | icon Color prop. | | spinDuration | string | "10s" | No | spin Duration prop. |

Code example

<QuadGrid>Example content</QuadGrid>

ScrollBox

Use ScrollBox when you need scroll Box layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Scroll Box layout component for arranging documentation content without MDX inline styles. Import path

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

Metadata

Content affinity: overview, tutorial, reference
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/home/solutions/showcase.mdx, v2/home/solutions/verticals.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `maxHeight` | `number` | `300` | No | max Height prop. | | `showHint` | `boolean` | `true` | No | show Hint prop. | | `ariaLabel` | `string` | `"Scrollable content"` | No | aria Label prop. | | `style` | `any` | | Yes | style prop. |

Code example

<ScrollBox style="example">Example content</ScrollBox>

SearchTable

Use SearchTable when you need search Table layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Search Table layout component for arranging documentation content without MDX inline styles. Import path

import { SearchTable } from '/snippets/components/layout/search-table.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | TableComponent | any | null | No | Table Component prop. | | tableTitle | any | null | No | table Title prop. | | headerList | Array | [ | No | ] - header List prop. | | itemsList | Array | [ | No | ] - items List prop. | | monospaceColumns | Array | [ | No | ] - monospace Columns prop. | | margin | any | “ | Yes | margin prop. | | searchPlaceholder | string | 'Search...' | No | search Placeholder prop. | | searchColumns | Array | [ | No | ] - search Columns prop. | | categoryColumn | string | 'Category' | No | category Column prop. |

Code example

<SearchTable margin="example" />

ShowcaseCards

Use ShowcaseCards when you need showcase Cards layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Showcase Cards layout component for arranging documentation content without MDX inline styles. Import path

import { ShowcaseCards } from '/snippets/components/layout/showcase-cards.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: InteractiveCard
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/home/solutions/showcase.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | items | Array | [ | No | ] - items prop. | | limit | any | null | No | limit prop. | | pageSize | number | 10 | No | page Size prop. |

Code example

<ShowcaseCards />

Spacer

Use Spacer when you need layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Spacer layout component for arranging documentation content without MDX inline styles. Import path

import { Spacer } from '/snippets/components/layout/layout.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: FlexContainer, GridContainer
Data source: none
Last meaningful change: 2026-03-11
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | size | string | "1rem" | No | size prop. | | direction | string | "vertical" | No | direction prop. |

Code example

<Spacer />

StepLinkList

Use StepLinkList when you need step Link List layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Step Link List layout component for arranging documentation content without MDX inline styles. Import path

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

Metadata

Content affinity: overview, tutorial, reference
Dependencies: StepList, UpdateLinkList
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/home/primer.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | listItems | any | “ | Yes | list Items prop. |

Code example

<StepLinkList listItems={[]} />

StepList

Use StepList when you need step List layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Step List layout component for arranging documentation content without MDX inline styles. Import path

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

Metadata

Content affinity: overview, tutorial, reference
Dependencies: StepLinkList, UpdateLinkList
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/home/primer.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | listItems | any | “ | Yes | list Items prop. |

Code example

<StepList listItems={[]} />

StyledStep

Use StyledStep when you need styled Step layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Styled Step layout component for arranging documentation content without MDX inline styles. Import path

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

Metadata

Content affinity: overview, tutorial, reference
Dependencies: StyledSteps
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/developers/_archive/ai-pipelines-byoc-old.mdx, v2/gateways/run-a-gateway/configure/ai-configuration.mdx, v2/gateways/run-a-gateway/connect/discover-offerings.mdx, v2/gateways/run-a-gateway/install/docker-install.mdx, v2/gateways/run-a-gateway/install/linux-install.mdx, v2/gateways/run-a-gateway/install/windows-install.mdx, and 12 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | title | any | | Yes | title prop. | | `icon` | `any` | | Yes | icon prop. | | titleSize | string | "h3" | No | title Size prop. | | children | any | “ | Yes | children prop. |

Code example

<StyledStep title="example" icon="example">Example content</StyledStep>

StyledSteps

Use StyledSteps when you need styled Steps layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Styled Steps layout component for arranging documentation content without MDX inline styles. Import path

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

Metadata

Content affinity: overview, tutorial, reference
Dependencies: StyledStep
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/developers/_archive/ai-pipelines-byoc-old.mdx, v2/gateways/run-a-gateway/configure/ai-configuration.mdx, v2/gateways/run-a-gateway/connect/discover-offerings.mdx, v2/gateways/run-a-gateway/install/docker-install.mdx, v2/gateways/run-a-gateway/install/linux-install.mdx, v2/gateways/run-a-gateway/install/windows-install.mdx, and 12 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `iconColor` | `any` | | Yes | icon Color prop. | | titleColor | any | | Yes | title Color prop. | | `lineColor` | `any` | | Yes | line Color prop. | | iconSize | string | "24px" | No | icon Size prop. |

Code example

<StyledSteps iconColor="example" titleColor="example">Example content</StyledSteps>

StyledTable

Use StyledTable when you need styled Table layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Styled Table layout component for arranging documentation content without MDX inline styles. Import path

import { StyledTable } from '/snippets/components/layout/tables.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: TableCell, TableRow
Data source: none
Last meaningful change: 2026-03-11
Breaking change risk: high
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/developers/_archive/ai-pipelines-overview-old.mdx, v2/developers/_archive/livepeer-real-time-video/video-streaming-on-livepeer/video-streaming-101.mdx, v2/developers/_archive/quickstart-video-101.mdx, v2/gateways/_contextData_/new/gateways-new/guides/gateway-operator-opportunities.mdx, v2/gateways/_contextData_/new/gateways-new/resources/api-reference/AI-API/ai.mdx, v2/gateways/_contextData_/new/gateways-new/setup/requirements/setup.mdx, and 48 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | variant | string | "default" | No | variant prop. | | style | object | {} | No | style prop. |

Code example

<StyledTable>Example content</StyledTable>

TableCell

Use TableCell when you need table Cell layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Table Cell layout component for arranging documentation content without MDX inline styles. Import path

import { TableCell } from '/snippets/components/layout/tables.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: StyledTable, TableRow
Data source: none
Last meaningful change: 2026-03-11
Breaking change risk: high
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/developers/_archive/ai-pipelines-overview-old.mdx, v2/developers/_archive/livepeer-real-time-video/video-streaming-on-livepeer/video-streaming-101.mdx, v2/developers/_archive/quickstart-video-101.mdx, v2/gateways/_contextData_/new/gateways-new/guides/gateway-operator-opportunities.mdx, v2/gateways/_contextData_/new/gateways-new/resources/api-reference/AI-API/ai.mdx, v2/gateways/_contextData_/new/gateways-new/setup/requirements/setup.mdx, and 48 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | align | string | "left" | No | align prop. | | header | boolean | false | No | header prop. | | style | object | {} | No | style prop. |

Code example

<TableCell>Example content</TableCell>

TableRow

Use TableRow when you need table Row layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Table Row layout component for arranging documentation content without MDX inline styles. Import path

import { TableRow } from '/snippets/components/layout/tables.jsx'

Metadata

Content affinity: overview, tutorial, reference
Dependencies: StyledTable, TableCell
Data source: none
Last meaningful change: 2026-03-11
Breaking change risk: high
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/developers/_archive/ai-pipelines-overview-old.mdx, v2/developers/_archive/livepeer-real-time-video/video-streaming-on-livepeer/video-streaming-101.mdx, v2/developers/_archive/quickstart-video-101.mdx, v2/gateways/_contextData_/new/gateways-new/guides/gateway-operator-opportunities.mdx, v2/gateways/_contextData_/new/gateways-new/resources/api-reference/AI-API/ai.mdx, v2/gateways/_contextData_/new/gateways-new/setup/requirements/setup.mdx, and 48 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | header | boolean | false | No | header prop. | | hover | boolean | false | No | hover prop. | | style | object | {} | No | style prop. |

Code example

<TableRow>Example content</TableRow>

UpdateLinkList

Use UpdateLinkList when you need update Link List layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Update Link List layout component for arranging documentation content without MDX inline styles. Import path

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

Metadata

Content affinity: overview, tutorial, reference
Dependencies: StepLinkList, StepList
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/home/primer.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | listItems | any | “ | Yes | list Items prop. |

Code example

<UpdateLinkList listItems={[]} />

UpdateList

Use UpdateList when you need update List layout component for arranging documentation content without MDX inline styles.. Best suited for overview, tutorial, reference page types. Source description: Update List layout component for arranging documentation content without MDX inline styles. Import path

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

Metadata

Content affinity: overview, tutorial, reference
Dependencies: StepLinkList, StepList, UpdateLinkList
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/home/primer.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | listItems | any | “ | Yes | list Items prop. |

Code example

<UpdateList listItems={[]} />

WidthCard

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

import { WidthCard } from '/snippets/components/layout/customCards.jsx'

Metadata

Content affinity: landing
Dependencies: InlineImageCard
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: @livepeer/docs-team
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/gateways/quickstart/gateway-setup.mdx, v2/home/about-livepeer/benefits.mdx, v2/home/about-livepeer/roadmap.mdx, v2/resources/media-kit.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | width | string | '80%' | No | Width used by the component. | | children | React.ReactNode | | Yes | Content rendered inside the component. | | `cardProps` | `object` | | No | Forwarded Card props. |

Code example

<WidthCard>Example</WidthCard>

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

​Layout

​Decision Tree Excerpt

​Summary Table

​Component Reference

​AccordionGroupList

​AccordionLayout

​BasicList

​BorderedBox

​CardCarousel

​CenteredContainer

​DisplayCard

​DynamicTable

​FlexContainer

​FullWidthContainer

​GridContainer

​IconList

​InlineImageCard

​InteractiveCard

​InteractiveCards

​ListSteps

​QuadGrid

​ScrollBox

​SearchTable

​ShowcaseCards

​Spacer

​StepLinkList

​StepList

​StyledStep

​StyledSteps

​StyledTable

​TableCell

​TableRow

​UpdateLinkList

​UpdateList

​WidthCard

Layout

Decision Tree Excerpt

Summary Table

Component Reference

AccordionGroupList

AccordionLayout

BasicList

BorderedBox

CardCarousel

CenteredContainer

DisplayCard

DynamicTable

FlexContainer

FullWidthContainer

GridContainer

IconList

InlineImageCard

InteractiveCard

InteractiveCards

ListSteps

QuadGrid

ScrollBox

SearchTable

ShowcaseCards

Spacer

StepLinkList

StepList

StyledStep

StyledSteps

StyledTable

TableCell

TableRow

UpdateLinkList

UpdateList

WidthCard