docs/docs-guide/indexes/components-index.mdx at main · livepeer/docs

title

Components Index

sidebarTitle

Components Index

description

Aggregate inventory of repository components from snippets/components, generated for docs-guide maintenance.

keywords

livepeer

components index

aggregate inventory

repository

snippets

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

{/* generated-file-banner: generated-file-banner:v1 Generation Script: tools/scripts/generate-docs-guide-components-index.js Purpose: Aggregate inventory of repository components from snippets/components for docs-guide maintenance. Run when: Components are added, removed, renamed, or their exported signatures change under snippets/components. Run command: node tools/scripts/generate-docs-guide-components-index.js --write */}

**Generation Script**: This file is generated from script(s): `tools/scripts/generate-docs-guide-components-index.js`.
**Purpose**: Aggregate inventory of repository components from snippets/components for docs-guide maintenance.
**Run when**: Components are added, removed, renamed, or their exported signatures change under `snippets/components`.
**Important**: Do not manually edit this file; run `node tools/scripts/generate-docs-guide-components-index.js --write`.

Content

Content components provide code, data, and response-format helpers for documentation pages.

**Props**: `filename`, `icon`, `language`, `highlight`, `expandable`, `wrap`, `lines`, `codeString`, `placeholderValue`
**Defaults**: `filename=""`, `icon="terminal"`, `language=""`, `highlight=""`, `expandable=false`, `wrap=true`, `lines=true`, `codeString=""`, `placeholderValue=""`

  <CodeGroup>

import { CodeComponent } from "/snippets/components/content/code.jsx";

<CodeComponent
  filename={""}
  icon={"terminal"}
  language={""}
  highlight={""}
  expandable={false}
  wrap={true}
  lines={true}
  codeString={""}
  placeholderValue={""}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="CodeSection" type="component">
  **Props**: `fields` <br/>
  **Defaults**: `fields={}`

  <CodeGroup>

import { CodeSection } from "/snippets/components/content/code.jsx";

<CodeSection
  fields={{}}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="ComplexCodeBlock" type="component">
  **Props**: `filename`, `icon`, `language`, `highlight`, `codeString`, `placeholderValue`, `wrap`, `lines`, `preNote`, `postNote` <br/>
  **Defaults**: `codeString=""`, `placeholderValue=""`, `wrap=true`, `lines=true`, `preNote=null`, `postNote=null`

  <CodeGroup>

import { ComplexCodeBlock } from "/snippets/components/content/code.jsx";

<ComplexCodeBlock
  filename={"<value>"}
  icon={"<value>"}
  language={"<value>"}
  highlight={"<value>"}
  codeString={""}
  placeholderValue={""}
  wrap={true}
  lines={true}
  preNote={null}
  postNote={null}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="CustomCodeBlock" type="component">
  **Props**: `filename`, `icon`, `language`, `highlight`, `codeString`, `placeholderValue`, `wrap`, `lines`, `preNote`, `postNote`, `output` <br/>
  **Defaults**: `codeString=""`, `placeholderValue=""`, `wrap=true`, `lines=true`, `preNote=""`, `postNote=""`, `output=""`

  <CodeGroup>

import { CustomCodeBlock } from "/snippets/components/content/code.jsx";

<CustomCodeBlock
  filename={"<value>"}
  icon={"<value>"}
  language={"<value>"}
  highlight={"<value>"}
  codeString={""}
  placeholderValue={""}
  wrap={true}
  lines={true}
  preNote={""}
  postNote={""}
  output={""}
/>

  </CodeGroup>
</ResponseField>

**Props**: `title`, `content`, `href`, `author`, `datePosted`, `excerpt`, `icon`, `authorIcon`, `dateIcon`, `cta`, `img`
**Defaults**: `author="Livepeer Team"`, `datePosted=null`, `excerpt=null`, `icon="book-open"`, `authorIcon="user-pen"`, `dateIcon="calendar"`, `cta="Read More"`, `img=null`

  <CodeGroup>

import { BlogCard } from "/snippets/components/content/data.jsx";

<BlogCard
  title={"<value>"}
  content={"<value>"}
  href={"<value>"}
  author={"Livepeer Team"}
  datePosted={null}
  excerpt={null}
  icon={"book-open"}
  authorIcon={"user-pen"}
  dateIcon={"calendar"}
  cta={"Read More"}
  img={null}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="BlogDataLayout" type="component">
  **Props**: `items`, `limit` <br/>
  **Defaults**: `items=[]`

  <CodeGroup>

import { BlogDataLayout } from "/snippets/components/content/data.jsx";

<BlogDataLayout
  items={[]}
  limit={0}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="CardBlogDataLayout" type="component">
  **Props**: `items`, `limit` <br/>
  **Defaults**: `items=[]`

  <CodeGroup>

import { CardBlogDataLayout } from "/snippets/components/content/data.jsx";

<CardBlogDataLayout
  items={[]}
  limit={0}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="CardColumnsPostLayout" type="component">
  **Props**: `cols`, `items`, `limit` <br/>
  **Defaults**: `cols=2`, `items=[]`

  <CodeGroup>

import { CardColumnsPostLayout } from "/snippets/components/content/data.jsx";

<CardColumnsPostLayout
  cols={2}
  items={[]}
  limit={0}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="CardInCardLayout" type="component">
  **Props**: `items`, `limit` <br/>
  **Defaults**: `items=[]`

  <CodeGroup>

import { CardInCardLayout } from "/snippets/components/content/data.jsx";

<CardInCardLayout
  items={[]}
  limit={0}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="ColumnsBlogCardLayout" type="component">
  **Props**: `items`, `cols`, `limit` <br/>
  **Defaults**: `items=[]`, `cols=2`

  <CodeGroup>

import { ColumnsBlogCardLayout } from "/snippets/components/content/data.jsx";

<ColumnsBlogCardLayout
  items={[]}
  cols={2}
  limit={0}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="DiscordAnnouncements" type="component">
  **Props**: `items`, `limit` <br/>
  **Defaults**: `items=[]`

  <CodeGroup>

import { DiscordAnnouncements } from "/snippets/components/content/data.jsx";

<DiscordAnnouncements
  items={[]}
  limit={0}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="ForumLatestLayout" type="component">
  **Props**: `items`, `limit` <br/>
  **Defaults**: `items=[]`

  <CodeGroup>

import { ForumLatestLayout } from "/snippets/components/content/data.jsx";

<ForumLatestLayout
  items={[]}
  limit={0}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="LumaEvents" type="component">
  **Props**: `data`, `limit`, `type` <br/>
  **Defaults**: `type="upcoming"`

  <CodeGroup>

import { LumaEvents } from "/snippets/components/content/data.jsx";

<LumaEvents
  data={{}}
  limit={0}
  type={"upcoming"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="PostCard" type="component">
  **Props**: `title`, `content`, `href`, `author`, `datePosted`, `replyCount`, `icon`, `authorIcon`, `dateIcon`, `cta`, `img` <br/>
  **Defaults**: `author="Unknown"`, `datePosted=null`, `replyCount=null`, `icon="book-open"`, `authorIcon="user-pen"`, `dateIcon="calendar"`, `cta="Read More"`, `img=null`

  <CodeGroup>

import { PostCard } from "/snippets/components/content/data.jsx";

<PostCard
  title={"<value>"}
  content={"<value>"}
  href={"<value>"}
  author={"Unknown"}
  datePosted={null}
  replyCount={null}
  icon={"book-open"}
  authorIcon={"user-pen"}
  dateIcon={"calendar"}
  cta={"Read More"}
  img={null}
/>

  </CodeGroup>
</ResponseField>

**Props**: `repoName`, `githubUrl`, `maxHeight`, `icon`, `children`
**Defaults**: `maxHeight="1000px"`, `icon="github"`

  <CodeGroup>

import { ExternalContent } from "/snippets/components/content/external-content.jsx";

<ExternalContent
  repoName={"<value>"}
  githubUrl={"<value>"}
  maxHeight={"1000px"}
  icon={"github"}
/>

  </CodeGroup>
</ResponseField>

**Props**: `latex`, `className`, `ariaLabel`
**Defaults**: `className=""`

  <CodeGroup>

import { MathBlock } from "/snippets/components/content/math.jsx";

<MathBlock
  latex={"<value>"}
  className={""}
  ariaLabel={"<value>"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="MathInline" type="component">
  **Props**: `latex`, `className`, `ariaLabel` <br/>
  **Defaults**: `className=""`

  <CodeGroup>

import { MathInline } from "/snippets/components/content/math.jsx";

<MathInline
  latex={"<value>"}
  className={""}
  ariaLabel={"<value>"}
/>

  </CodeGroup>
</ResponseField>

**Props**: `version`
**Defaults**: None

  <CodeGroup>

import { LatestVersion } from "/snippets/components/content/release.jsx";

<LatestVersion
  version={"<value>"}
/>

  </CodeGroup>
</ResponseField>

**Props**: `description`
**Defaults**: None

  <CodeGroup>

import { CustomResponseField } from "/snippets/components/content/response-field.jsx";

<CustomResponseField
  description={"<value>"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="ResponseFieldAccordion" type="component">
  **Props**: `fields` <br/>
  **Defaults**: `fields={}`

  <CodeGroup>

import { ResponseFieldAccordion } from "/snippets/components/content/response-field.jsx";

<ResponseFieldAccordion
  fields={{}}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="ResponseFieldExpandable" type="component">
  **Props**: `fields` <br/>
  **Defaults**: `fields={}`

  <CodeGroup>

import { ResponseFieldExpandable } from "/snippets/components/content/response-field.jsx";

<ResponseFieldExpandable
  fields={{}}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="ResponseFieldGroup" type="component">
  **Props**: `component`, `fields` <br/>
  **Defaults**: `component="accordion"`, `fields={}`

  <CodeGroup>

import { ResponseFieldGroup } from "/snippets/components/content/response-field.jsx";

<ResponseFieldGroup
  component={"accordion"}
  fields={{}}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="ValueResponseField" type="component">
  **Props**: `description`, `post`, `label`, `line`, `children` <br/>
  **Defaults**: `post=null`, `label="value"`, `line=true`

  <CodeGroup>

import { ValueResponseField } from "/snippets/components/content/response-field.jsx";

<ValueResponseField
  description={"<value>"}
  post={null}
  label={"value"}
  line={true}
/>

  </CodeGroup>
</ResponseField>

Display

Display components handle media, embeds, quotes, and visual presentation patterns.

**Props**: `children`, `visibleCount`, `gap`, `showDots`, `style`
**Defaults**: `visibleCount=3`, `gap="1.5rem"`, `showDots=true`

  <CodeGroup>

import { CardCarousel } from "/snippets/components/display/card-carousel.jsx";

<CardCarousel
  visibleCount={3}
  gap={"1.5rem"}
  showDots={true}
  style={{}}
/>

  </CodeGroup>
</ResponseField>

**Props**: `children`, `width`, `align`
**Defaults**: `width="fit-content"`, `align="center"`

  <CodeGroup>

import { CalloutContainer } from "/snippets/components/display/containers.mdx";

<CalloutContainer
  width={"fit-content"}
  align={"center"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="CardContentContainer" type="component">
  **Props**: `children`, `align`, `justify`, `gap` <br/>
  **Defaults**: `gap="1rem"`

  <CodeGroup>

import { CardContentContainer } from "/snippets/components/display/containers.mdx";

<CardContentContainer
  align={"<value>"}
  justify={"<value>"}
  gap={"1rem"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="TabsContainer" type="component">
  **Props**: `children` <br/>
  **Defaults**: None

  <CodeGroup>

import { TabsContainer } from "/snippets/components/display/containers.mdx";

<TabsContainer />

  </CodeGroup>
</ResponseField>

**Props**: `icon`, `title`, `style`
**Defaults**: None

  <CodeGroup>

import { CustomCardTitle } from "/snippets/components/display/custom-cards.jsx";

<CustomCardTitle
  icon={"<value>"}
  title={"<value>"}
  style={{}}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="DisplayCard" type="component">
  **Props**: `icon`, `title`, `style`, `background`, `children` <br/>
  **Defaults**: `background='var(--card-background)'`

  <CodeGroup>

import { DisplayCard } from "/snippets/components/display/custom-cards.jsx";

<DisplayCard
  icon={"<value>"}
  title={"<value>"}
  style={{}}
  background={'var(--card-background)'}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="InlineImageCard" type="component">
  **Props**: `children`, `imgProps`, `imgStyle`, `cardProps`, `style` <br/>
  **Defaults**: None

  <CodeGroup>

import { InlineImageCard } from "/snippets/components/display/custom-cards.jsx";

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

  </CodeGroup>
</ResponseField>
<ResponseField name="WidthCard" type="component">
  **Props**: `width`, `children` <br/>
  **Defaults**: `width='80%'`

  <CodeGroup>

import { WidthCard } from "/snippets/components/display/custom-cards.jsx";

<WidthCard
  width={'80%'}
/>

  </CodeGroup>
</ResponseField>

**Props**: `url`
**Defaults**: None

  <CodeGroup>

import { EmbedMarkdown } from "/snippets/components/display/embed.jsx";

<EmbedMarkdown
  url={"<value>"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="MarkdownEmbed" type="component">
  **Props**: `url` <br/>
  **Defaults**: None

  <CodeGroup>

import { MarkdownEmbed } from "/snippets/components/display/embed.jsx";

<MarkdownEmbed
  url={"<value>"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="TwitterTimeline" type="component">
  **Props**: No explicit props detected from signature. <br/>
  **Defaults**: No explicit defaults detected.

  <CodeGroup>

import { TwitterTimeline } from "/snippets/components/display/embed.jsx";

<TwitterTimeline />

  </CodeGroup>
</ResponseField>

**Props**: `title`, `src`, `height`, `width`
**Defaults**: `height="700px"`, `width="100%"`

  <CodeGroup>

import { PdfEmbed } from "/snippets/components/display/embed.mdx";

<PdfEmbed
  title={"<value>"}
  src={"<value>"}
  height={"700px"}
  width={"100%"}
/>

  </CodeGroup>
</ResponseField>

**Props**: `color`, `margin`, `opacity`
**Defaults**: `margin="1.5rem 0"`, `opacity=0.2`

  <CodeGroup>

import { Divider } from "/snippets/components/display/frame-mode.jsx";

<Divider
  color={"<value>"}
  margin={"1.5rem 0"}
  opacity={0.2}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="H1" type="component">
  **Props**: `children`, `icon`, `iconSize`, `iconColor`, `align`, `gap` <br/>
  **Defaults**: `iconSize=32`, `align="left"`, `gap="0.75rem"`

  <CodeGroup>

import { H1 } from "/snippets/components/display/frame-mode.jsx";

<H1
  icon={"<value>"}
  iconSize={32}
  iconColor={"<value>"}
  align={"left"}
  gap={"0.75rem"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="H2" type="component">
  **Props**: `children`, `icon`, `iconSize`, `iconColor`, `align`, `gap` <br/>
  **Defaults**: `iconSize=28`, `align="left"`, `gap="0.75rem"`

  <CodeGroup>

import { H2 } from "/snippets/components/display/frame-mode.jsx";

<H2
  icon={"<value>"}
  iconSize={28}
  iconColor={"<value>"}
  align={"left"}
  gap={"0.75rem"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="H3" type="component">
  **Props**: `children`, `icon`, `iconSize`, `iconColor`, `align`, `gap` <br/>
  **Defaults**: `iconSize=24`, `align="left"`, `gap="0.5rem"`

  <CodeGroup>

import { H3 } from "/snippets/components/display/frame-mode.jsx";

<H3
  icon={"<value>"}
  iconSize={24}
  iconColor={"<value>"}
  align={"left"}
  gap={"0.5rem"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="H4" type="component">
  **Props**: `children`, `icon`, `iconSize`, `iconColor`, `align`, `gap` <br/>
  **Defaults**: `iconSize=20`, `align="left"`, `gap="0.5rem"`

  <CodeGroup>

import { H4 } from "/snippets/components/display/frame-mode.jsx";

<H4
  icon={"<value>"}
  iconSize={20}
  iconColor={"<value>"}
  align={"left"}
  gap={"0.5rem"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="H5" type="component">
  **Props**: `children`, `icon`, `iconSize`, `iconColor`, `align`, `gap` <br/>
  **Defaults**: `iconSize=18`, `align="left"`, `gap="0.5rem"`

  <CodeGroup>

import { H5 } from "/snippets/components/display/frame-mode.jsx";

<H5
  icon={"<value>"}
  iconSize={18}
  iconColor={"<value>"}
  align={"left"}
  gap={"0.5rem"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="H6" type="component">
  **Props**: `children`, `icon`, `iconSize`, `iconColor`, `align`, `gap` <br/>
  **Defaults**: `iconSize=16`, `align="left"`, `gap="0.5rem"`

  <CodeGroup>

import { H6 } from "/snippets/components/display/frame-mode.jsx";

<H6
  icon={"<value>"}
  iconSize={16}
  iconColor={"<value>"}
  align={"left"}
  gap={"0.5rem"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="P" type="component">
  **Props**: `children`, `icon`, `iconSize`, `iconColor`, `align`, `gap` <br/>
  **Defaults**: `iconSize=16`, `align="left"`, `gap="0.5rem"`

  <CodeGroup>

import { P } from "/snippets/components/display/frame-mode.jsx";

<P
  icon={"<value>"}
  iconSize={16}
  iconColor={"<value>"}
  align={"left"}
  gap={"0.5rem"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="PageHeader" type="component">
  **Props**: `title`, `subtitle`, `description`, `children`, `titleColor`, `subtitleColor`, `descriptionColor` <br/>
  **Defaults**: None

  <CodeGroup>

import { PageHeader } from "/snippets/components/display/frame-mode.jsx";

<PageHeader
  title={"<value>"}
  subtitle={"<value>"}
  description={"<value>"}
  titleColor={"<value>"}
  subtitleColor={"<value>"}
  descriptionColor={"<value>"}
/>

  </CodeGroup>
</ResponseField>

**Props**: `src`, `alt`, `caption`, `icon`, `hint`, `fullwidth`
**Defaults**: `fullwidth=true`

  <CodeGroup>

import { Image } from "/snippets/components/display/image.jsx";

<Image
  src={"<value>"}
  alt={"<value>"}
  caption={"<value>"}
  icon={"<value>"}
  hint={"<value>"}
  fullwidth={true}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="LinkImage" type="component">
  **Props**: `src`, `alt`, `caption`, `icon`, `hint`, `href` <br/>
  **Defaults**: None

  <CodeGroup>

import { LinkImage } from "/snippets/components/display/image.jsx";

<LinkImage
  src={"<value>"}
  alt={"<value>"}
  caption={"<value>"}
  icon={"<value>"}
  hint={"<value>"}
  href={"<value>"}
/>

  </CodeGroup>
</ResponseField>

**Props**: `children`, `author`, `source`, `href`, `frame`, `align`, `borderColor`, `img`, `spacing`
**Defaults**: `frame=true`, `align='right'`, `spacing=true`

  <CodeGroup>

import { FrameQuote } from "/snippets/components/display/quote.jsx";

<FrameQuote
  author={"<value>"}
  source={"<value>"}
  href={"<value>"}
  frame={true}
  align={'right'}
  borderColor={"<value>"}
  img={"<value>"}
  spacing={true}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="Quote" type="component">
  **Props**: `children` <br/>
  **Defaults**: None

  <CodeGroup>

import { Quote } from "/snippets/components/display/quote.jsx";

<Quote />

  </CodeGroup>
</ResponseField>

**Props**: `items`, `limit`, `pageSize`
**Defaults**: `items=[]`, `limit=null`, `pageSize=10`

  <CodeGroup>

import { ShowcaseCards } from "/snippets/components/display/showcase-cards.jsx";

<ShowcaseCards
  items={[]}
  limit={null}
  pageSize={10}
/>

  </CodeGroup>
</ResponseField>

**Props**: `size`, `gap`, `justify`, `color`
**Defaults**: `size=20`, `gap="0.75rem"`, `justify="center"`

  <CodeGroup>

import { SocialLinks } from "/snippets/components/display/social-links.jsx";

<SocialLinks
  size={20}
  gap={"0.75rem"}
  justify={"center"}
  color={"<value>"}
/>

  </CodeGroup>
</ResponseField>

**Props**: `embedUrl`, `title`, `style`
**Defaults**: None

  <CodeGroup>

import { CardVideo } from "/snippets/components/display/video.jsx";

<CardVideo
  embedUrl={"<value>"}
  title={"<value>"}
  style={{}}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="LinkedInEmbed" type="component">
  **Props**: `embedUrl`, `title`, `hint`, `caption`, `height` <br/>
  **Defaults**: `title="Embedded post"`, `hint=""`, `height="399"`

  <CodeGroup>

import { LinkedInEmbed } from "/snippets/components/display/video.jsx";

<LinkedInEmbed
  embedUrl={"<value>"}
  title={"Embedded post"}
  hint={""}
  caption={"<value>"}
  height={"399"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="ShowcaseVideo" type="component">
  **Props**: `src`, `title`, `subtitle` <br/>
  **Defaults**: None

  <CodeGroup>

import { ShowcaseVideo } from "/snippets/components/display/video.jsx";

<ShowcaseVideo
  src={"<value>"}
  title={"<value>"}
  subtitle={"<value>"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="TitledVideo" type="component">
  **Props**: `src`, `title`, `subtitle`, `arrow`, `borderRadius`, `style` <br/>
  **Defaults**: `arrow=false`, `borderRadius="12px"`, `style={}`

  <CodeGroup>

import { TitledVideo } from "/snippets/components/display/video.jsx";

<TitledVideo
  src={"<value>"}
  title={"<value>"}
  subtitle={"<value>"}
  arrow={false}
  borderRadius={"12px"}
  style={{}}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="Video" type="component">
  **Props**: `src`, `title`, `author`, `caption`, `href`, `controls`, `autoPlay`, `loop`, `muted`, `children` <br/>
  **Defaults**: `title=""`, `author=""`, `href=""`, `controls=true`, `autoPlay=false`, `loop=false`, `muted=false`

  <CodeGroup>

import { Video } from "/snippets/components/display/video.jsx";

<Video
  src={"<value>"}
  title={""}
  author={""}
  caption={"<value>"}
  href={""}
  controls={true}
  autoPlay={false}
  loop={false}
  muted={false}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="YouTubeVideo" type="component">
  **Props**: `embedUrl`, `title`, `author`, `hint`, `caption` <br/>
  **Defaults**: `title=""`, `author=""`, `hint=""`

  <CodeGroup>

import { YouTubeVideo } from "/snippets/components/display/video.jsx";

<YouTubeVideo
  embedUrl={"<value>"}
  title={""}
  author={""}
  hint={""}
  caption={"<value>"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="YouTubeVideoData" type="component">
  **Props**: `items`, `limit`, `cols` <br/>
  **Defaults**: `items=[]`, `cols=2`

  <CodeGroup>

import { YouTubeVideoData } from "/snippets/components/display/video.jsx";

<YouTubeVideoData
  items={[]}
  limit={0}
  cols={2}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="YouTubeVideoDownload" type="component">
  **Props**: `embedUrl`, `title`, `hint`, `caption` <br/>
  **Defaults**: `caption=""`

  <CodeGroup>

import { YouTubeVideoDownload } from "/snippets/components/display/video.jsx";

<YouTubeVideoDownload
  embedUrl={"<value>"}
  title={"<value>"}
  hint={"<value>"}
  caption={""}
/>

  </CodeGroup>
</ResponseField>

**Props**: `children`, `title`, `maxHeight`, `minWidth`, `showControls`
**Defaults**: `title=""`, `maxHeight="500px"`, `minWidth="100%"`, `showControls=false`

  <CodeGroup>

import { ScrollableDiagram } from "/snippets/components/display/zoomable-diagram.jsx";

<ScrollableDiagram
  title={""}
  maxHeight={"500px"}
  minWidth={"100%"}
  showControls={false}
/>

  </CodeGroup>
</ResponseField>

Domain

Domain components package feature-specific UI blocks used by dedicated documentation domains.

**Props**: `density`
**Defaults**: `density=1.1`

  <CodeGroup>

import { Starfield } from "/snippets/components/domain/SHARED/HeroGif.jsx";

<Starfield
  density={1.1}
/>

  </CodeGroup>
</ResponseField>

**Props**: `children`
**Defaults**: None

  <CodeGroup>

import { HeroContentContainer } from "/snippets/components/domain/SHARED/Portals.jsx";

<HeroContentContainer />

  </CodeGroup>
</ResponseField>
<ResponseField name="HeroImageBackgroundComponent" type="component">
  **Props**: `children` <br/>
  **Defaults**: None

  <CodeGroup>

import { HeroImageBackgroundComponent } from "/snippets/components/domain/SHARED/Portals.jsx";

<HeroImageBackgroundComponent />

  </CodeGroup>
</ResponseField>
<ResponseField name="HeroOverviewContent" type="component">
  **Props**: `children` <br/>
  **Defaults**: None

  <CodeGroup>

import { HeroOverviewContent } from "/snippets/components/domain/SHARED/Portals.jsx";

<HeroOverviewContent />

  </CodeGroup>
</ResponseField>
<ResponseField name="HeroSectionContainer" type="component">
  **Props**: `children`, `minHeight` <br/>
  **Defaults**: `minHeight="fit-content"`

  <CodeGroup>

import { HeroSectionContainer } from "/snippets/components/domain/SHARED/Portals.jsx";

<HeroSectionContainer
  minHeight={"fit-content"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="LogoHeroContainer" type="component">
  **Props**: `src`, `alt`, `width`, `margin`, `imgHeight`, `imgWidth`, `objectFit`, `children` <br/>
  **Defaults**: `src="/snippets/assets/logos/Livepeer-Logo-Full-Theme.svg"`, `alt="Livepeer Logo"`, `width="100%"`, `margin="1rem auto 0 auto"`, `imgHeight="20px"`, `imgWidth="auto"`, `objectFit="contain"`

  <CodeGroup>

import { LogoHeroContainer } from "/snippets/components/domain/SHARED/Portals.jsx";

<LogoHeroContainer
  src={"/snippets/assets/logos/Livepeer-Logo-Full-Theme.svg"}
  alt={"Livepeer Logo"}
  width={"100%"}
  margin={"1rem auto 0 auto"}
  imgHeight={"20px"}
  imgWidth={"auto"}
  objectFit={"contain"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="PortalCardsHeader" type="component">
  **Props**: `children`, `title` <br/>
  **Defaults**: None

  <CodeGroup>

import { PortalCardsHeader } from "/snippets/components/domain/SHARED/Portals.jsx";

<PortalCardsHeader
  title={"<value>"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="PortalContentContainer" type="component">
  **Props**: `children` <br/>
  **Defaults**: None

  <CodeGroup>

import { PortalContentContainer } from "/snippets/components/domain/SHARED/Portals.jsx";

<PortalContentContainer />

  </CodeGroup>
</ResponseField>
<ResponseField name="PortalHeroContent" type="component">
  **Props**: `zIndex`, `subtitle`, `subtitleIcon`, `description`, `refCardLink`, `overview`, `divider`, `callout`, `titleColor`, `subtitleColor`, `children` <br/>
  **Defaults**: `zIndex=true`, `subtitle="Build - Explore - Create"`, `subtitleIcon="/snippets/assets/logos/Livepeer-Logo-Symbol-Green-Theme.svg"`, `divider=true`, `callout=null`

  <CodeGroup>

import { PortalHeroContent } from "/snippets/components/domain/SHARED/Portals.jsx";

<PortalHeroContent
  zIndex={true}
  subtitle={"Build - Explore - Create"}
  subtitleIcon={"/snippets/assets/logos/Livepeer-Logo-Symbol-Green-Theme.svg"}
  description={"<value>"}
  refCardLink={"<value>"}
  overview={"<value>"}
  divider={true}
  callout={null}
  titleColor={"<value>"}
  subtitleColor={"<value>"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="PortalSectionHeader" type="component">
  **Props**: `children`, `title`, `icon` <br/>
  **Defaults**: None

  <CodeGroup>

import { PortalSectionHeader } from "/snippets/components/domain/SHARED/Portals.jsx";

<PortalSectionHeader
  title={"<value>"}
  icon={"<value>"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="RefCardContainer" type="component">
  **Props**: `children` <br/>
  **Defaults**: None

  <CodeGroup>

import { RefCardContainer } from "/snippets/components/domain/SHARED/Portals.jsx";

<RefCardContainer />

  </CodeGroup>
</ResponseField>

**Props**: `type`
**Defaults**: `type="page"`

  <CodeGroup>

import { ComingSoonCallout } from "/snippets/components/domain/SHARED/previewCallouts.jsx";

<ComingSoonCallout
  type={"page"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="PreviewCallout" type="component">
  **Props**: No explicit props detected from signature. <br/>
  **Defaults**: No explicit defaults detected.

  <CodeGroup>

import { PreviewCallout } from "/snippets/components/domain/SHARED/previewCallouts.jsx";

<PreviewCallout />

  </CodeGroup>
</ResponseField>
<ResponseField name="ReviewCallout" type="component">
  **Props**: No explicit props detected from signature. <br/>
  **Defaults**: No explicit defaults detected.

  <CodeGroup>

import { ReviewCallout } from "/snippets/components/domain/SHARED/previewCallouts.jsx";

<ReviewCallout />

  </CodeGroup>
</ResponseField>

Integrations

Integration components connect docs pages to external APIs and third-party datasets.

**Props**: `coinId`
**Defaults**: `coinId="arbitrum"`

  <CodeGroup>

import { CoinGeckoExchanges } from "/snippets/components/integrations/coingecko.jsx";

<CoinGeckoExchanges
  coinId={"arbitrum"}
/>

  </CodeGroup>
</ResponseField>

Layout

Layout components provide reusable structure primitives for organizing page content.

**Props**: `urls`
**Defaults**: None

  <CodeGroup>

import { ApiBaseUrlsTable } from "/snippets/components/layout/api-base-urls-table.mdx";

<ApiBaseUrlsTable
  urls={"<value>"}
/>

  </CodeGroup>
</ResponseField>

**Props**: `children`, `maxHeight`, `showHint`, `ariaLabel`, `style`
**Defaults**: `maxHeight=300`, `showHint=true`, `ariaLabel="Scrollable content"`

  <CodeGroup>

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

<ScrollBox
  maxHeight={300}
  showHint={true}
  ariaLabel={"Scrollable content"}
  style={{}}
/>

  </CodeGroup>
</ResponseField>

**Props**: `listItems`, `stepsConfig`
**Defaults**: None

  <CodeGroup>

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

<ListSteps
  listItems={[]}
  stepsConfig={{}}
/>

  </CodeGroup>
</ResponseField>

**Props**: `listItems`
**Defaults**: None

  <CodeGroup>

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

<BasicList
  listItems={[]}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="IconList" type="component">
  **Props**: `listItems` <br/>
  **Defaults**: None

  <CodeGroup>

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

<IconList
  listItems={[]}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="StepLinkList" type="component">
  **Props**: `listItems` <br/>
  **Defaults**: None

  <CodeGroup>

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

<StepLinkList
  listItems={[]}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="StepList" type="component">
  **Props**: `listItems` <br/>
  **Defaults**: None

  <CodeGroup>

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

<StepList
  listItems={[]}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="UpdateLinkList" type="component">
  **Props**: `listItems` <br/>
  **Defaults**: None

  <CodeGroup>

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

<UpdateLinkList
  listItems={[]}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="UpdateList" type="component">
  **Props**: `listItems` <br/>
  **Defaults**: None

  <CodeGroup>

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

<UpdateList
  listItems={[]}
/>

  </CodeGroup>
</ResponseField>

**Props**: `children`, `icon`, `iconSize`, `iconColor`, `spinDuration`
**Defaults**: `icon="arrows-spin"`, `iconSize=50`, `iconColor="var(--accent)"`, `spinDuration="10s"`

  <CodeGroup>

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

<QuadGrid
  icon={"arrows-spin"}
  iconSize={50}
  iconColor={"var(--accent)"}
  spinDuration={"10s"}
/>

  </CodeGroup>
</ResponseField>

**Props**: `TableComponent`, `tableTitle`, `headerList`, `itemsList`, `monospaceColumns`, `margin`, `searchPlaceholder`, `searchColumns`, `categoryColumn`
**Defaults**: `TableComponent=null`, `tableTitle=null`, `headerList=[]`, `itemsList=[]`, `monospaceColumns=[]`, `searchPlaceholder='Search...'`, `searchColumns=[]`, `categoryColumn='Category'`

  <CodeGroup>

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

<SearchTable
  TableComponent={null}
  tableTitle={null}
  headerList={[]}
  itemsList={[]}
  monospaceColumns={[]}
  margin={"<value>"}
  searchPlaceholder={'Search...'}
  searchColumns={[]}
  categoryColumn={'Category'}
/>

  </CodeGroup>
</ResponseField>

**Props**: `title`, `icon`, `titleSize`, `children`
**Defaults**: `titleSize="h3"`

  <CodeGroup>

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

<StyledStep
  title={"<value>"}
  icon={"<value>"}
  titleSize={"h3"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="StyledSteps" type="component">
  **Props**: `children`, `iconColor`, `titleColor`, `lineColor`, `iconSize` <br/>
  **Defaults**: `iconSize="24px"`

  <CodeGroup>

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

<StyledSteps
  iconColor={"<value>"}
  titleColor={"<value>"}
  lineColor={"<value>"}
  iconSize={"24px"}
/>

  </CodeGroup>
</ResponseField>

**Props**: `tableTitle`, `headerList`, `itemsList`, `monospaceColumns`, `margin`
**Defaults**: `tableTitle=null`, `headerList=[]`, `itemsList=[]`, `monospaceColumns=[]`

  <CodeGroup>

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

<DynamicTable
  tableTitle={null}
  headerList={[]}
  itemsList={[]}
  monospaceColumns={[]}
  margin={"<value>"}
/>

  </CodeGroup>
</ResponseField>

**Props**: `children`
**Defaults**: None

  <CodeGroup>

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

<AccordionLayout />

  </CodeGroup>
</ResponseField>

Primitives

Primitive components are foundational UI building blocks reused across the docs system.

**Props**: `selectors`
**Defaults**: None

  <CodeGroup>

import { FocusableScrollRegions } from "/snippets/components/primitives/a11y.jsx";

<FocusableScrollRegions
  selectors={"<value>"}
/>

  </CodeGroup>
</ResponseField>

**Props**: No explicit props detected from signature.
**Defaults**: No explicit defaults detected.

  <CodeGroup>

import { BasicBtn } from "/snippets/components/primitives/buttons.jsx";

<BasicBtn />

  </CodeGroup>
</ResponseField>
<ResponseField name="DownloadButton" type="component">
  **Props**: `label`, `icon`, `downloadLink`, `rightIcon`, `border` <br/>
  **Defaults**: `label='Download'`, `icon='download'`, `rightIcon=''`, `border=false`

  <CodeGroup>

import { DownloadButton } from "/snippets/components/primitives/buttons.jsx";

<DownloadButton
  label={'Download'}
  icon={'download'}
  downloadLink={"<value>"}
  rightIcon={''}
  border={false}
/>

  </CodeGroup>
</ResponseField>

**Props**: `children`, `variant`, `padding`, `borderRadius`, `style`
**Defaults**: `variant="default"`, `padding="1rem"`, `borderRadius="8px"`, `style={}`

  <CodeGroup>

import { BorderedBox } from "/snippets/components/primitives/containers.jsx";

<BorderedBox
  variant={"default"}
  padding={"1rem"}
  borderRadius={"8px"}
  style={{}}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="CenteredContainer" type="component">
  **Props**: `children`, `maxWidth`, `padding`, `style` <br/>
  **Defaults**: `maxWidth="800px"`, `padding="0"`, `style={}`

  <CodeGroup>

import { CenteredContainer } from "/snippets/components/primitives/containers.jsx";

<CenteredContainer
  maxWidth={"800px"}
  padding={"0"}
  style={{}}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="FullWidthContainer" type="component">
  **Props**: `children`, `backgroundColor`, `style` <br/>
  **Defaults**: `style={}`

  <CodeGroup>

import { FullWidthContainer } from "/snippets/components/primitives/containers.jsx";

<FullWidthContainer
  backgroundColor={"<value>"}
  style={{}}
/>

  </CodeGroup>
</ResponseField>

**Props**: `color`, `middleText`, `style`
**Defaults**: `color="var(--border)"`, `middleText=""`, `style={}`

  <CodeGroup>

import { CustomDivider } from "/snippets/components/primitives/divider.jsx";

<CustomDivider
  color={"var(--border)"}
  middleText={""}
  style={{}}
/>

  </CodeGroup>
</ResponseField>

**Props**: `size`, `color`
**Defaults**: `size=16`

  <CodeGroup>

import { LivepeerIcon } from "/snippets/components/primitives/icons.jsx";

<LivepeerIcon
  size={16}
  color={"<value>"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="LivepeerIconFlipped" type="component">
  **Props**: No explicit props detected from signature. <br/>
  **Defaults**: No explicit defaults detected.

  <CodeGroup>

import { LivepeerIconFlipped } from "/snippets/components/primitives/icons.jsx";

<LivepeerIconFlipped />

  </CodeGroup>
</ResponseField>
<ResponseField name="LivepeerIconOld" type="component">
  **Props**: No explicit props detected from signature. <br/>
  **Defaults**: No explicit defaults detected.

  <CodeGroup>

import { LivepeerIconOld } from "/snippets/components/primitives/icons.jsx";

<LivepeerIconOld />

  </CodeGroup>
</ResponseField>
<ResponseField name="LivepeerSVG" type="component">
  **Props**: `size` <br/>
  **Defaults**: `size=24`

  <CodeGroup>

import { LivepeerSVG } from "/snippets/components/primitives/icons.jsx";

<LivepeerSVG
  size={24}
/>

  </CodeGroup>
</ResponseField>

**Props**: `children`, `direction`, `gap`, `align`, `justify`, `wrap`, `style`
**Defaults**: `direction="row"`, `gap="1rem"`, `align="flex-start"`, `justify="flex-start"`, `wrap=false`, `style={}`

  <CodeGroup>

import { FlexContainer } from "/snippets/components/primitives/layout.jsx";

<FlexContainer
  direction={"row"}
  gap={"1rem"}
  align={"flex-start"}
  justify={"flex-start"}
  wrap={false}
  style={{}}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="GridContainer" type="component">
  **Props**: `children`, `columns`, `gap`, `style` <br/>
  **Defaults**: `gap="1rem"`, `style={}`

  <CodeGroup>

import { GridContainer } from "/snippets/components/primitives/layout.jsx";

<GridContainer
  columns={[]}
  gap={"1rem"}
  style={{}}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="Spacer" type="component">
  **Props**: `size`, `direction` <br/>
  **Defaults**: `size="1rem"`, `direction="vertical"`

  <CodeGroup>

import { Spacer } from "/snippets/components/primitives/layout.jsx";

<Spacer
  size={"1rem"}
  direction={"vertical"}
/>

  </CodeGroup>
</ResponseField>

**Props**: `icon`, `size`, `color`
**Defaults**: `icon="terminal"`, `size=16`

  <CodeGroup>

import { BlinkingIcon } from "/snippets/components/primitives/links.jsx";

<BlinkingIcon
  icon={"terminal"}
  size={16}
  color={"<value>"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="BlinkingTerminal" type="component">
  **Props**: No explicit props detected from signature. <br/>
  **Defaults**: No explicit defaults detected.

  <CodeGroup>

import { BlinkingTerminal } from "/snippets/components/primitives/links.jsx";

<BlinkingTerminal />

  </CodeGroup>
</ResponseField>
<ResponseField name="CustomCallout" type="component">
  **Props**: `children`, `icon`, `color`, `iconSize`, `textSize`, `textColor` <br/>
  **Defaults**: `icon="lightbulb"`, `iconSize=16`, `textSize="0.875rem"`

  <CodeGroup>

import { CustomCallout } from "/snippets/components/primitives/links.jsx";

<CustomCallout
  icon={"lightbulb"}
  color={"<value>"}
  iconSize={16}
  textSize={"0.875rem"}
  textColor={"<value>"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="DoubleIconLink" type="component">
  **Props**: `label`, `href`, `text`, `iconLeft`, `iconRight` <br/>
  **Defaults**: `label=""`, `href="#"`, `text=""`, `iconLeft="github"`, `iconRight="arrow-up-right"`

  <CodeGroup>

import { DoubleIconLink } from "/snippets/components/primitives/links.jsx";

<DoubleIconLink
  label={""}
  href={"#"}
  text={""}
  iconLeft={"github"}
  iconRight={"arrow-up-right"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="GotoCard" type="component">
  **Props**: `label`, `relativePath`, `icon`, `text`, `cta` <br/>
  **Defaults**: `cta=""`

  <CodeGroup>

import { GotoCard } from "/snippets/components/primitives/links.jsx";

<GotoCard
  label={"<value>"}
  relativePath={"<value>"}
  icon={"<value>"}
  text={"<value>"}
  cta={""}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="GotoLink" type="component">
  **Props**: `label`, `relativePath`, `text`, `icon` <br/>
  **Defaults**: `text=""`, `icon="arrow-turn-down-right"`

  <CodeGroup>

import { GotoLink } from "/snippets/components/primitives/links.jsx";

<GotoLink
  label={"<value>"}
  relativePath={"<value>"}
  text={""}
  icon={"arrow-turn-down-right"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="LinkArrow" type="component">
  **Props**: `href`, `label`, `description`, `newline`, `borderColor` <br/>
  **Defaults**: `newline=true`

  <CodeGroup>

import { LinkArrow } from "/snippets/components/primitives/links.jsx";

<LinkArrow
  href={"<value>"}
  label={"<value>"}
  description={"<value>"}
  newline={true}
  borderColor={"<value>"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="TipWithArrow" type="component">
  **Props**: `children`, `icon`, `arrowIcon`, `color`, `iconSize`, `arrowSize` <br/>
  **Defaults**: `icon="lightbulb"`, `arrowIcon="arrow-up-right"`, `iconSize=16`, `arrowSize=16`

  <CodeGroup>

import { TipWithArrow } from "/snippets/components/primitives/links.jsx";

<TipWithArrow
  icon={"lightbulb"}
  arrowIcon={"arrow-up-right"}
  color={"<value>"}
  iconSize={16}
  arrowSize={16}
/>

  </CodeGroup>
</ResponseField>

**Props**: `children`, `variant`, `style`
**Defaults**: `variant="default"`, `style={}`

  <CodeGroup>

import { StyledTable } from "/snippets/components/primitives/tables.jsx";

<StyledTable
  variant={"default"}
  style={{}}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="TableCell" type="component">
  **Props**: `children`, `align`, `header`, `style` <br/>
  **Defaults**: `align="left"`, `header=false`, `style={}`

  <CodeGroup>

import { TableCell } from "/snippets/components/primitives/tables.jsx";

<TableCell
  align={"left"}
  header={false}
  style={{}}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="TableRow" type="component">
  **Props**: `children`, `header`, `hover`, `style` <br/>
  **Defaults**: `header=false`, `hover=false`, `style={}`

  <CodeGroup>

import { TableRow } from "/snippets/components/primitives/tables.jsx";

<TableRow
  header={false}
  hover={false}
  style={{}}
/>

  </CodeGroup>
</ResponseField>

**Props**: `text`, `children`, `color`
**Defaults**: `color="var(--text)"`

  <CodeGroup>

import { AccordionTitleWithArrow } from "/snippets/components/primitives/text.jsx";

<AccordionTitleWithArrow
  text={"<value>"}
  color={"var(--text)"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="CardTitleTextWithArrow" type="component">
  **Props**: `children` <br/>
  **Defaults**: None

  <CodeGroup>

import { CardTitleTextWithArrow } from "/snippets/components/primitives/text.jsx";

<CardTitleTextWithArrow />

  </CodeGroup>
</ResponseField>
<ResponseField name="CopyText" type="component">
  **Props**: `text`, `label` <br/>
  **Defaults**: None

  <CodeGroup>

import { CopyText } from "/snippets/components/primitives/text.jsx";

<CopyText
  text={"<value>"}
  label={"<value>"}
/>

  </CodeGroup>
</ResponseField>
<ResponseField name="Subtitle" type="component">
  **Props**: `style`, `text`, `children` <br/>
  **Defaults**: `style={}`

  <CodeGroup>

import { Subtitle } from "/snippets/components/primitives/text.jsx";

<Subtitle
  style={{}}
  text={"<value>"}
/>

  </CodeGroup>
</ResponseField>

Lookup Table

Search by category, page path, or component name.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Content

Display

Domain

Integrations

Layout

Primitives

Lookup Table

FilesExpand file tree

components-index.mdx

Latest commit

History

components-index.mdx

File metadata and controls

Content

Display

Domain

Integrations

Layout

Primitives

Lookup Table