Layout Components

Back to Component Library

Return to the main component library index

Card Components

ScrollBox

A scrollable container for use inside Card components. Provides a scrollable area with optional max height and scroll hint. Import:

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

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Content to display inside the scroll area
`maxHeight`	`number\|string`	`300`	No	Maximum height before scrolling (px or CSS value)
`showHint`	`boolean`	`true`	No	Whether to show “Scroll for more” hint
`style`	`object`	-	No	Additional styles

Examples:

Live Example
Code

Scrollable Content

<Card title="Gaming">
  <ScrollBox maxHeight={200} showHint={true}>
    <p>Long content here...</p>
  </ScrollBox>
</Card>

List Components

StepList

Renders a list of items as Steps. Displays an array of items using the Steps/Step components. Import:

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

Props:

Prop	Type	Default	Required	Description
`listItems`	`Array`	-	Yes	Array of step objects
`listItems[].title`	`string`	-	Yes	Step title
`listItems[].icon`	`string`	-	No	Optional icon name
`listItems[].content`	`ReactNode`	-	Yes	Step content

Examples:

Code

// StepList - use Steps/Step directly for now
<Steps>
  <Step title="Install" icon="download">
    Run npm install
  </Step>
  <Step title="Configure" icon="gear">
    Set up your config
  </Step>
</Steps>

StepLinkList

Renders a list of steps with navigation links. Similar to StepList but each step contains a GotoLink component. Import:

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

Props:

Prop	Type	Default	Required	Description
`listItems`	`Array`	-	Yes	Array of step objects with links
`listItems[].title`	`string`	-	Yes	Step title
`listItems[].icon`	`string`	-	No	Optional icon name
`listItems[].content`	`string`	-	Yes	Link label text
`listItems[].link`	`string`	-	Yes	Relative path for the link

BasicList, IconList, UpdateList, UpdateLinkList

Placeholder components for list functionality. Currently return empty fragments (non-functional). Note: These are placeholder components and currently non-functional.

Step Components

StyledSteps

A customizable Steps component with color and styling support. Wraps the standard Steps component with custom CSS styling. Import:

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

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Step components to render
`iconColor`	`string`	`"#18794E"`	No	Background color for step icons
`titleColor`	`string`	theme-aware	No	Color for step titles
`lineColor`	`string`	theme-aware	No	Color for the connecting line between steps
`iconSize`	`string`	`"24px"`	No	Size of the step icons (currently unused)

Examples:

Code

<StyledSteps iconColor="#00cc88" titleColor="#00cc88">
  <StyledStep title="Install" icon="download">
    Run npm install.
  </StyledStep>
</StyledSteps>

StyledStep

A wrapper for the Step component with customizable title size. Designed to be used within StyledSteps. Import:

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

Props:

Prop	Type	Default	Required	Description
`title`	`string`	-	Yes	The title of the step
`icon`	`string`	-	No	Icon name to display
`titleSize`	`string`	`"h3"`	No	HTML heading size for the title (e.g., “h1”, “h2”, “h3”)
`children`	`ReactNode`	-	Yes	Content to display in the step

Table Components

DynamicTable

A reusable table component with site-consistent styling. Renders a table with headers and data rows, with optional monospace columns. Import:

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

Props:

Prop	Type	Default	Required	Description
`tableTitle`	`string`	`null`	No	Optional title to display above the table
`headerList`	`Array<string>`	`[]`	Yes	Array of strings for column headers
`itemsList`	`Array<Object>`	`[]`	Yes	Array of objects where keys match headerList values
`monospaceColumns`	`Array<number>`	`[]`	No	Array of column indices (0-based) to render in monospace
`margin`	`string`	-	No	Optional CSS margin override (e.g., “0”, “1rem 0”)

Examples:

Live Example
Code

Network Endpoints

Network	Endpoint	Status

<DynamicTable
  headerList={["Network", "Endpoint", "Status"]}
  itemsList={[
    { Network: "Mainnet", Endpoint: "https://livepeer.network", Status: "Active" }
  ]}
  monospaceColumns={[1]}
  margin="1rem 0"
/>

Grid Components

QuadGrid

A 2-column grid layout with an animated spinning icon in the center. Useful for displaying four items in a grid with a decorative center element. Import:

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

Props:

Prop	Type	Default	Required	Description
`children`	`ReactNode`	-	Yes	Four child elements to display in grid
`icon`	`string`	`"arrows-spin"`	No	Icon name to display in center
`iconSize`	`number`	`50`	No	Size of the center icon
`iconColor`	`string`	`"var(--accent)"`	No	Color of the center icon
`spinDuration`	`string`	`"10s"`	No	Animation duration for spinning icon

Examples:

Live Example
Code

Item 1

Content 1

Item 2

Content 2

Item 3

Content 3

Item 4

Content 4

<QuadGrid icon="arrows-spin" iconSize={50}>
  <Card title="Item 1">Content 1</Card>
  <Card title="Item 2">Content 2</Card>
  <Card title="Item 3">Content 3</Card>
  <Card title="Item 4">Content 4</Card>
</QuadGrid>

Next: Integration Components

Continue to Integration Components →

Home

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

Card Components

ScrollBox

Scrollable Content

List Components

StepList

StepLinkList

BasicList, IconList, UpdateList, UpdateLinkList

Step Components

StyledSteps

StyledStep

Table Components

DynamicTable

Grid Components

QuadGrid

Item 1

Item 2

Item 3

Item 4

Next: Integration Components

Home

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

​Card Components

​ScrollBox

Scrollable Content

​List Components

​StepList

​StepLinkList

​BasicList, IconList, UpdateList, UpdateLinkList

​Step Components

​StyledSteps

​StyledStep

​Table Components

​DynamicTable

​Grid Components

​QuadGrid

Item 1

Item 2

Item 3

Item 4

Next: Integration Components

Card Components

ScrollBox

List Components

StepList

StepLinkList

BasicList, IconList, UpdateList, UpdateLinkList

Step Components

StyledSteps

StyledStep

Table Components

DynamicTable

Grid Components

QuadGrid