Back to Component Library Return to the main component library index
Card Components
Card Components 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 childrenReactNode- Yes Content to display inside the scroll area maxHeightnumber|string300No Maximum height before scrolling (px or CSS value) showHintbooleantrueNo Whether to show “Scroll for more” hint styleobject- No Additional styles
Examples: < Card title = "Gaming" > < ScrollBox maxHeight = { 200 } showHint = { true } > < p > Long content here... </ p > </ ScrollBox > </ Card >
List Components
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 listItemsArray- Yes Array of step objects listItems[].titlestring- Yes Step title listItems[].iconstring- No Optional icon name listItems[].contentReactNode- Yes Step content
Examples: // 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 listItemsArray- Yes Array of step objects with links listItems[].titlestring- Yes Step title listItems[].iconstring- No Optional icon name listItems[].contentstring- Yes Link label text listItems[].linkstring- 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
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 childrenReactNode- Yes Step components to render iconColorstring"#18794E"No Background color for step icons titleColorstringtheme-aware No Color for step titles lineColorstringtheme-aware No Color for the connecting line between steps iconSizestring"24px"No Size of the step icons (currently unused)
Examples: < 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 titlestring- Yes The title of the step iconstring- No Icon name to display titleSizestring"h3"No HTML heading size for the title (e.g., “h1”, “h2”, “h3”) childrenReactNode- Yes Content to display in the step
Table Components
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 tableTitlestringnullNo Optional title to display above the table headerListArray<string>[]Yes Array of strings for column headers itemsListArray<Object>[]Yes Array of objects where keys match headerList values monospaceColumnsArray<number>[]No Array of column indices (0-based) to render in monospace marginstring- No Optional CSS margin override (e.g., “0”, “1rem 0”)
Examples: < DynamicTable headerList = { [ "Network" , "Endpoint" , "Status" ] } itemsList = { [ { Network: "Mainnet" , Endpoint: "https://livepeer.network" , Status: "Active" } ] } monospaceColumns = { [ 1 ] } margin = "1rem 0" />
Grid Components
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 childrenReactNode- Yes Four child elements to display in grid iconstring"arrows-spin"No Icon name to display in center iconSizenumber50No Size of the center icon iconColorstring"var(--accent)"No Color of the center icon spinDurationstring"10s"No Animation duration for spinning icon
Examples: < 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 →
Last modified on February 18, 2026
Card Components