Displays

Generation Script: This file is generated from script(s): operations/scripts/generators/components/documentation/generate-component-docs.js.
Purpose: Generated component-library MDX pages derived from docs-guide/config/component-registry.json.
Run when: Component governance metadata, registry outputs, or published component-library templates change.
Important: Do not manually edit this file; run

node operations/scripts/generators/components/documentation/generate-component-docs.js --fix --template-only --category displays

Back to Component Library

Return to the generated component library landing page.

Renderers for authored content – code, video, diagrams, quotes, response fields. This category currently contains 49 governed export(s).

Decision Tree Excerpt

Fetches, embeds, or binds to external/third-party data? → integrators/
Part of the page’s outer structure, typically used once? → scaffolding/
Takes content and presents it in a formatted way? → displays/
Exists to hold, group, or arrange other things? → wrappers/
Single visual piece – no wrapping, no arranging, no fetching? → elements/

Summary Table

Component	Status	Import path	Description
AccordionGroupList	`stable`	`/snippets/components/displays/accordions/Accordions.jsx`	Generates N numbered accordion sections inside an AccordionGroup.
AccordionLayout	`stable`	`/snippets/components/displays/accordions/Accordions.jsx`	Vertical stack layout with small gap, designed for accordion content sections.
BasicList	`planned`	`/snippets/components/displays/steps/Steps.jsx`	Planned list component – not yet implemented.
CardCarousel	`stable`	`/snippets/components/displays/grids/Grids.jsx`	Paginated horizontal carousel with prev/next navigation and dot indicators.
CardVideo	`stable`	`/snippets/components/displays/video/Video.jsx`	YouTube embed inside a Card wrapper with aspect-ratio iframe.
CodeComponent	`stable`	`/snippets/components/displays/code/Code.jsx`	Simple code block with title and language syntax highlighting.
CodeSection	`stable`	`/snippets/components/displays/code/Code.jsx`	Expandable code section with title header.
ComplexCodeBlock	`stable`	`/snippets/components/displays/code/Code.jsx`	Code block with both pre-note and post-note sections.
CustomCodeBlock	`stable`	`/snippets/components/displays/code/Code.jsx`	Code block with optional pre/post notes and expandable wrapper.
CustomResponseField	`stable`	`/snippets/components/displays/response-fields/ResponseField.jsx`	Custom-styled API response field with configurable margin.
DisplayCard	`stable`	`/snippets/components/displays/cards/Cards.jsx`	Card with icon, custom title row, and body content.
DynamicTable	`stable`	`/snippets/components/displays/tables/Tables.jsx`	Renders structured data as a scrollable table with section separators and accessible region.
DynamicTableV2	`experimental`	`/snippets/components/displays/tables/Tables.jsx`	Renders structured data as a scrollable table with separator rows and intrinsic-width support for fit-to-content columns.
FrameQuote	`stable`	`/snippets/components/displays/quotes/Quote.jsx`	Framed blockquote with optional author, source link, and image.
FunctionField	`stable`	`/snippets/components/displays/response-fields/ResponseField.jsx`	Solidity function signature field with typed parameter pairs and optional return type.
IconList	`planned`	`/snippets/components/displays/steps/Steps.jsx`	Planned icon list component – not yet implemented.
InlineImageCard	`stable`	`/snippets/components/displays/cards/Cards.jsx`	Card with inline image alongside content, using negative margin breakout.
InteractiveCard	`stable`	`/snippets/components/displays/cards/Cards.jsx`	Single interactive card with hover effects.
InteractiveCards	`stable`	`/snippets/components/displays/cards/Cards.jsx`	Multi-column layout of interactive cards.
LinkedInEmbed	`stable`	`/snippets/components/displays/video/Video.jsx`	LinkedIn post embed via responsive iframe with compact layout.
ListSteps	`stable`	`/snippets/components/displays/steps/Steps.jsx`	Renders an array of step items inside Mintlify Steps component.
QuadGrid	`stable`	`/snippets/components/displays/grids/Grids.jsx`	2x2 grid with centred rotating icon overlay. Respects prefers-reduced-motion.
Quote	`stable`	`/snippets/components/displays/quotes/Quote.jsx`	Styled blockquote with accent border and centred italic text.
ResponseFieldAccordion	`deprecated`	`/snippets/components/displays/response-fields/ResponseField.jsx`	Accordion-style response field with collapsible detail section.
ResponseFieldExpandable	`deprecated`	`/snippets/components/displays/response-fields/ResponseField.jsx`	Expandable response field that reveals nested content on click.
ResponseFieldGroup	`stable`	`/snippets/components/displays/response-fields/ResponseField.jsx`	Container for grouping multiple response fields with consistent spacing.
ScrollableDiagram	`stable`	`/snippets/components/displays/diagrams/ScrollableDiagram.jsx`	Pannable diagram container with deterministic preset zoom controls rendered without client-side React state.
SearchTable	`stable`	`/snippets/components/displays/tables/Tables.jsx`	Generic filterable table wrapper with search input, category dropdown(s), and optional separators.
SearchTableV2	`experimental`	`/snippets/components/displays/tables/Tables.jsx`	Generic filterable table wrapper with intrinsic-width sizing for badge, icon, and primary text columns.
ShowcaseCards	`stable`	`/snippets/components/displays/cards/Cards.jsx`	Paginated card layout with search, category, and product filtering.
ShowcaseVideo	`deprecated`	`/snippets/components/displays/video/Video.jsx`	Full-width video with negative-margin breakout and rounded frame.
SolutionCard	`stable`	`/snippets/components/displays/cards/Cards.jsx`	Card body for Solutions Portal product cards. Accepts pre-rendered JSX slots for badges, infra tags, and social links. ScrollBox is passed as a component prop for blurb rendering.
SolutionItem	`stable`	`/snippets/components/displays/cards/Cards.jsx`	Renders a solution entry with link, icon badges, and description. Designed for solution listing pages.
StepLinkList	`stable`	`/snippets/components/displays/steps/Steps.jsx`	Renders listItems as Mintlify Steps with GotoLink navigation.
StepList	`stable`	`/snippets/components/displays/steps/Steps.jsx`	Renders listItems as Mintlify Steps with title, icon, and content.
StyledStep	`stable`	`/snippets/components/displays/steps/Steps.jsx`	Single step with configurable icon, size, and per-step colour overrides. When iconColor or titleColor is set, injects a scoped CSS override that takes precedence over the parent StyledSteps colours for this step only. When neither is set, behaves identically to a plain Step pass-through.
StyledSteps	`stable`	`/snippets/components/displays/steps/Steps.jsx`	Wrapper around Mintlify Steps with custom icon styling via injected CSS.
StyledTable	`stable`	`/snippets/components/displays/tables/Tables.jsx`	Full-width table with header row styling and rounded container.
TableCell	`stable`	`/snippets/components/displays/tables/Tables.jsx`	Table cell that switches between th and td based on header prop.
TableRow	`stable`	`/snippets/components/displays/tables/Tables.jsx`	Table row with optional header styling and hover effect.
TitledVideo	`stable`	`/snippets/components/displays/video/Video.jsx`	Auto-playing video with title/subtitle overlay. Respects prefers-reduced-motion.
UpdateLinkList	`stable`	`/snippets/components/displays/steps/Steps.jsx`	Renders update items as linked entries inside Mintlify Update component.
UpdateList	`planned`	`/snippets/components/displays/steps/Steps.jsx`	Planned update list component – not yet implemented.
ValueResponseField	`stable`	`/snippets/components/displays/response-fields/ResponseField.jsx`	API response field with name, type, and value display.
Video	`stable`	`/snippets/components/displays/video/Video.jsx`	Basic framed video player with caption support.
WidthCard	`stable`	`/snippets/components/displays/cards/Cards.jsx`	Width-constrained card wrapper with configurable percentage width.
YouTubeVideo	`stable`	`/snippets/components/displays/video/Video.jsx`	YouTube embed via responsive iframe with aspect-ratio preservation.
YouTubeVideoData	`deprecated`	`/snippets/components/displays/video/Video.jsx`	Renders a columned grid of YouTubeVideo embeds from an items array.
YouTubeVideoDownload	`broken`	`/snippets/components/displays/video/Video.jsx`	YouTube embed with download hint text below (BROKEN – render content commented out).

Component Reference

AccordionGroupList

Use AccordionGroupList when you need generates N numbered accordion sections inside an AccordionGroup.. Source description: Generates N numbered accordion sections inside an AccordionGroup. Import path

import { AccordionGroupList } from '/snippets/components/displays/accordions/Accordions.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | num | number | 1 | No | Number of placeholder accordion sections to render. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

AccordionLayout

Use AccordionLayout when you need vertical stack layout with small gap, designed for accordion content sections.. Source description: Vertical stack layout with small gap, designed for accordion content sections. Import path

import { AccordionLayout } from '/snippets/components/displays/accordions/Accordions.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

BasicList

Use BasicList when you need planned list component – not yet implemented.. Source description: Planned list component – not yet implemented. Import path

import { BasicList } from '/snippets/components/displays/steps/Steps.jsx'

Metadata

Status: planned
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | listItems | any | “ | Yes | list Items prop. |

CardCarousel

Use CardCarousel when you need paginated horizontal carousel with prev/next navigation and dot indicators.. Source description: Paginated horizontal carousel with prev/next navigation and dot indicators. Import path

import { CardCarousel } from '/snippets/components/displays/grids/Grids.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | React.ReactNode | | Yes | Content rendered inside the component. | | `visibleCount` | `number` | `3` | No | Visible count used by the component. | | `gap` | `string` | `"var(--lp-spacing-6)"` | No | Gap used by the component. | | `showDots` | `boolean` | `true` | No | Boolean flag that controls component behaviour. | | `style` | `object` | | Yes | Style used by the component. | | className | string | "" | No | CSS class name. |

CardVideo

Use CardVideo when you need youTube embed inside a Card wrapper with aspect-ratio iframe.. Source description: YouTube embed inside a Card wrapper with aspect-ratio iframe. Import path

import { CardVideo } from '/snippets/components/displays/video/Video.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | embedUrl | any | | Yes | embed Url prop. | | `title` | `any` | | Yes | title prop. | | style | any | “ | Yes | style prop. | | className | string | '' | No | Optional CSS class override. |

CodeComponent

Use CodeComponent when you need simple code block with title and language syntax highlighting.. Source description: Simple code block with title and language syntax highlighting. Import path

import { CodeComponent } from '/snippets/components/displays/code/Code.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | filename | string | "" | No | filename prop. | | icon | string | "terminal" | No | icon prop. | | language | string | "" | No | language prop. | | highlight | string | "" | No | highlight prop. | | expandable | boolean | false | No | expandable prop. | | wrap | boolean | true | No | wrap prop. | | lines | boolean | true | No | lines prop. | | codeString | string | "" | No | code String prop. | | placeholderValue | string | "" | No | placeholder Value prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

CodeSection

Use CodeSection when you need expandable code section with title header.. Source description: Expandable code section with title header. Import path

import { CodeSection } from '/snippets/components/displays/code/Code.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | fields | object | {} | No | fields prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

ComplexCodeBlock

Use ComplexCodeBlock when you need code block with both pre-note and post-note sections.. Source description: Code block with both pre-note and post-note sections. Import path

import { ComplexCodeBlock } from '/snippets/components/displays/code/Code.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | filename | any | | Yes | filename prop. | | `icon` | `any` | | Yes | icon prop. | | language | any | | Yes | language prop. | | `highlight` | `any` | | Yes | highlight prop. | | codeString | string | "" | No | code String prop. | | placeholderValue | string | "" | No | placeholder Value prop. | | wrap | boolean | true | No | wrap prop. | | lines | boolean | true | No | lines prop. | | preNote | any | null | No | pre Note prop. | | postNote | any | null | No | post Note prop. |

CustomCodeBlock

Use CustomCodeBlock when you need code block with optional pre/post notes and expandable wrapper.. Source description: Code block with optional pre/post notes and expandable wrapper. Import path

import { CustomCodeBlock } from '/snippets/components/displays/code/Code.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | filename | any | | Yes | filename prop. | | `icon` | `any` | | Yes | icon prop. | | language | any | | Yes | language prop. | | `highlight` | `any` | | Yes | highlight prop. | | codeString | string | "" | No | code String prop. | | placeholderValue | string | "" | No | placeholder Value prop. | | wrap | boolean | true | No | wrap prop. | | lines | boolean | true | No | lines prop. | | preNote | string | "" | No | pre Note prop. | | postNote | string | "" | No | post Note prop. | | output | string | "" | No | output prop. |

CustomResponseField

Use CustomResponseField when you need custom-styled API response field with configurable margin.. Source description: Custom-styled API response field with configurable margin. Import path

import { CustomResponseField } from '/snippets/components/displays/response-fields/ResponseField.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | description | React.ReactNode | | Yes | Primary content rendered by the component. | | `props` | `object` | | No | Additional props forwarded to ResponseField. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

DisplayCard

Use DisplayCard when you need card with icon, custom title row, and body content.. Source description: Card with icon, custom title row, and body content. Import path

import { DisplayCard } from '/snippets/components/displays/cards/Cards.jsx'

Metadata

Status: stable
Accepts: none
Data source: none 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(--lp-color-bg-card)'` | No | Background used by the component. | | `children` | `React.ReactNode` | | Yes | Content rendered inside the component. | | className | string | "" | No | CSS class name. |

DynamicTable

Use DynamicTable when you need renders structured data as a scrollable table with section separators and accessible region.. Source description: Renders structured data as a scrollable table with section separators and accessible region. Import path

import { DynamicTable } from '/snippets/components/displays/tables/Tables.jsx'

Metadata

Status: stable
Accepts: none
Data source: none 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. | | contentFitColumns | Array | [ | No | ] - Column names that should size to their contents. | | margin | any | “ | Yes | margin prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

DynamicTableV2

Use DynamicTableV2 when you need renders structured data as a scrollable table with separator rows and intrinsic-width support for fit-to-content columns.. Source description: Renders structured data as a scrollable table with separator rows and intrinsic-width support for fit-to-content columns. Import path

import { DynamicTableV2 } from '/snippets/components/displays/tables/Tables.jsx'

Metadata

Status: experimental
Accepts: none
Data source: none 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. | | columnWidths | object | {} | No | Preferred minimum widths keyed by header. | | columnConfig | object | {} | No | Per-column layout flags keyed by header. | | margin | any | “ | Yes | margin prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

FrameQuote

Use FrameQuote when you need framed blockquote with optional author, source link, and image.. Source description: Framed blockquote with optional author, source link, and image. Import path

import { FrameQuote } from '/snippets/components/displays/quotes/Quote.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `author` | `any` | | Yes | author prop. | | source | any | | Yes | source prop. | | `href` | `any` | | Yes | href prop. | | frame | boolean | true | No | frame prop. | | align | string | 'right' | No | align prop. | | borderColor | any | | Yes | border Color prop. | | `img` | `any` | | Yes | img prop. | | spacing | boolean | true | No | spacing prop. | | props | any | “ | Yes | props prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

FunctionField

Use FunctionField when you need solidity function signature field with typed parameter pairs and optional return type.. Source description: Solidity function signature field with typed parameter pairs and optional return type. Import path

import { FunctionField } from '/snippets/components/displays/response-fields/ResponseField.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | name | string | | Yes | Function name. | | `params` | `string[]` | `[` | No | ] - Parameter strings in "type name" format (e.g. "bytes32 _id"). | | `returns` | `string` | | No | Return type (e.g. “address”, “uint256”). | | children | React.ReactNode | “ | Yes | Description of the function. | | line | boolean | true | No | Show bottom border. | | style | object | {} | No | Inline style overrides. | | className | string | "" | No | CSS class name. |

IconList

Use IconList when you need planned icon list component – not yet implemented.. Source description: Planned icon list component – not yet implemented. Import path

import { IconList } from '/snippets/components/displays/steps/Steps.jsx'

Metadata

Status: planned
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | listItems | any | “ | Yes | list Items prop. |

InlineImageCard

Use InlineImageCard when you need card with inline image alongside content, using negative margin breakout.. Source description: Card with inline image alongside content, using negative margin breakout. Import path

import { InlineImageCard } from '/snippets/components/displays/cards/Cards.jsx'

Metadata

Status: stable
Accepts: none
Data source: none 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. | | className | string | "" | No | CSS class name. |

InteractiveCard

Use InteractiveCard when you need single interactive card with hover effects.. Source description: Single interactive card with hover effects. Import path

import { InteractiveCard } from '/snippets/components/displays/cards/Cards.jsx'

Metadata

Status: stable
Accepts: none
Data source: 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. | | `className` | `string` | `""` | No | CSS class name. | | `cardProps` | `any` | | Yes | card Props prop. |

InteractiveCards

Use InteractiveCards when you need multi-column layout of interactive cards.. Source description: Multi-column layout of interactive cards. Import path

import { InteractiveCards } from '/snippets/components/displays/cards/Cards.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | items | Array | [ | No | ] - items prop. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

LinkedInEmbed

Use LinkedInEmbed when you need linkedIn post embed via responsive iframe with compact layout.. Source description: LinkedIn post embed via responsive iframe with compact layout. Import path

import { LinkedInEmbed } from '/snippets/components/displays/video/Video.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | embedUrl | any | | Yes | embed Url prop. | | `title` | `string` | `"Embedded post"` | No | title prop. | | `hint` | `string` | `""` | No | hint prop. | | `caption` | `any` | | Yes | caption prop. | | height | string | "399" | No | height prop. |

ListSteps

Use ListSteps when you need renders an array of step items inside Mintlify Steps component.. Source description: Renders an array of step items inside Mintlify Steps component. Import path

import { ListSteps } from '/snippets/components/displays/steps/Steps.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | listItems | Array | “ | Yes | Collection data rendered by the component. | | stepsConfig | object | {} | No | Steps config used by the component. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

QuadGrid

Use QuadGrid when you need 2x2 grid with centred rotating icon overlay. Respects prefers-reduced-motion.. Source description: 2x2 grid with centred rotating icon overlay. Respects prefers-reduced-motion. Import path

import { QuadGrid } from '/snippets/components/displays/grids/Grids.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | React.ReactNode | “ | Yes | Content rendered inside the component. | | icon | string | "arrows-spin" | No | Icon configuration used by the component. | | iconSize | number | 50 | No | Icon configuration used by the component. | | iconColor | string | "var(--lp-color-accent)" | No | Icon configuration used by the component. | | spinDuration | string | "10s" | No | Spin duration used by the component. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

Quote

Use Quote when you need styled blockquote with accent border and centred italic text.. Source description: Styled blockquote with accent border and centred italic text. Import path

import { Quote } from '/snippets/components/displays/quotes/Quote.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

ResponseFieldAccordion

Use ResponseFieldAccordion when you need accordion-style response field with collapsible detail section.. Source description: Accordion-style response field with collapsible detail section. Import path

import { ResponseFieldAccordion } from '/snippets/components/displays/response-fields/ResponseField.jsx'

Metadata

Status: deprecated
Accepts: none
Data source: none

Deprecation note: Use ResponseFieldGroup with component=“accordion” instead. See ResponseFieldGroup. Props

Prop	Type	Default	Required	Description
`fields`	`object`	`{}`	No	Fields used by the component.
`props`	`object`	“	No	Additional props forwarded to Accordion.
`className`	`string`	`""`	No	CSS class name.
`style`	`object`	`{}`	No	Inline style overrides.

ResponseFieldExpandable

Use ResponseFieldExpandable when you need expandable response field that reveals nested content on click.. Source description: Expandable response field that reveals nested content on click. Import path

import { ResponseFieldExpandable } from '/snippets/components/displays/response-fields/ResponseField.jsx'

Metadata

Status: deprecated
Accepts: none
Data source: none

Deprecation note: Use ResponseFieldGroup with component=“expandable” instead. See ResponseFieldGroup. Props

Prop	Type	Default	Required	Description
`fields`	`object`	`{}`	No	Fields used by the component.
`props`	`object`	“	No	Additional props forwarded to Expandable.
`className`	`string`	`""`	No	CSS class name.
`style`	`object`	`{}`	No	Inline style overrides.

ResponseFieldGroup

Use ResponseFieldGroup when you need container for grouping multiple response fields with consistent spacing.. Source description: Container for grouping multiple response fields with consistent spacing. Import path

import { ResponseFieldGroup } from '/snippets/components/displays/response-fields/ResponseField.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | component | string | "accordion" | No | Component used by the component. | | fields | object | {} | No | Fields used by the component. | | props | object | “ | No | Additional props forwarded to the selected wrapper component. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

ScrollableDiagram

Use ScrollableDiagram when you need pannable diagram container with deterministic preset zoom controls rendered without client-side React state.. Source description: Pannable diagram container with deterministic preset zoom controls rendered without client-side React state. Import path

import { ScrollableDiagram } from '/snippets/components/displays/diagrams/ScrollableDiagram.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | React.ReactNode | “ | Yes | Content rendered inside the component. | | title | string | "" | No | Title text rendered by the component. | | maxHeight | string | "500px" | No | Max height used by the component. | | minWidth | string | "100%" | No | Min width used by the component. | | showControls | boolean | false | No | When true, renders preset zoom controls. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

SearchTable

Use SearchTable when you need generic filterable table wrapper with search input, category dropdown(s), and optional separators.. Source description: Generic filterable table wrapper with search input, category dropdown(s), and optional separators. Import path

import { SearchTable } from '/snippets/components/displays/tables/Tables.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | TableComponent | Function | null | No | Table renderer component (e.g. DynamicTable). | | tableTitle | React.ReactNode | null | No | Table title. | | headerList | Array | [ | No | ] - Column header names. | | itemsList | Array | [ | No | ] - Row data objects. Cell values can be strings or JSX. | | monospaceColumns | Array | [ | No | ] - Column indices to render in monospace. | | margin | string | “ | Yes | Margin passed to TableComponent. | | searchPlaceholder | string | 'Search...' | No | Placeholder text for the search input. | | searchColumns | Array | [ | No | ] - Column names to search against. Defaults to all headers. | | categoryColumn | string | 'Category' | No | Field name the first dropdown filters on. | | filterColumns | Array | [ | No | ] - Additional column names that get dropdown filters. Each scoped by selections above it. | | columnWidths | object | {} | No | Column width overrides keyed by header name. Passed to TableComponent. | | contentFitColumns | Array | [ | No | ] - Column names that should size to their contents when supported by TableComponent. | | columnVariant | object | {} | No | Column display variants keyed by header name. Supported: “bold”, “badge”, “textIcon”, “addressWrapper”. | | categoryBadges | Array | [ | No | ] - Array of for “badge” variant rendering. Matched by label (case-insensitive). | | textIcons | Array | [ | No | ] - Array of for “textIcon” variant rendering. Icon is JSX rendered inline before the label text. | | showSeparators | boolean | false | No | When true, inserts category separator rows. Labels are uppercased. | | separatorColumn | string | null | No | Override which column drives separators. Default: categoryColumn. | | boldFirstColumn | boolean | true | No | Auto-wraps first column in <strong> if value is a plain string. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

SearchTableV2

Use SearchTableV2 when you need generic filterable table wrapper with intrinsic-width sizing for badge, icon, and primary text columns.. Source description: Generic filterable table wrapper with intrinsic-width sizing for badge, icon, and primary text columns. Import path

import { SearchTableV2 } from '/snippets/components/displays/tables/Tables.jsx'

Metadata

Status: experimental
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | TableComponent | Function | null | No | Table renderer component (e.g. DynamicTableV2). | | tableTitle | React.ReactNode | null | No | Table title. | | headerList | Array | [ | No | ] - Column header names. | | itemsList | Array | [ | No | ] - Row data objects. Cell values can be strings or JSX. | | monospaceColumns | Array | [ | No | ] - Column indices to render in monospace. | | margin | string | “ | Yes | Margin passed to TableComponent. | | searchPlaceholder | string | 'Search...' | No | Placeholder text for the search input. | | searchColumns | Array | [ | No | ] - Column names to search against. Defaults to all headers. | | categoryColumn | string | 'Category' | No | Field name the first dropdown filters on. | | filterColumns | Array | [ | No | ] - Additional column names that get dropdown filters. Each scoped by selections above it. | | columnWidths | object | {} | No | Column width overrides keyed by header name. Passed to TableComponent. | | columnConfig | object | {} | No | Optional column sizing overrides merged with V2 defaults. | | columnVariant | object | {} | No | Column display variants keyed by header name. Supported: “bold”, “badge”, “textIcon”, “addressWrapper”. | | categoryBadges | Array | [ | No | ] - Array of for “badge” variant rendering. Matched by label (case-insensitive). | | textIcons | Array | [ | No | ] - Array of for “textIcon” variant rendering. | | showSeparators | boolean | false | No | When true, inserts category separator rows. Labels are uppercased. | | separatorColumn | string | null | No | Override which column drives separators. Default: categoryColumn. | | boldFirstColumn | boolean | true | No | Auto-wraps first column in <strong> if value is a plain string. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

ShowcaseCards

Use ShowcaseCards when you need paginated card layout with search, category, and product filtering.. Source description: Paginated card layout with search, category, and product filtering. Import path

import { ShowcaseCards } from '/snippets/components/displays/cards/Cards.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | items | Array | [ | No | ] - items prop. | | limit | any | null | No | limit prop. | | pageSize | number | 10 | No | page Size prop. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

ShowcaseVideo

Use ShowcaseVideo when you need full-width video with negative-margin breakout and rounded frame.. Source description: Full-width video with negative-margin breakout and rounded frame. Import path

import { ShowcaseVideo } from '/snippets/components/displays/video/Video.jsx'

Metadata

Status: deprecated
Accepts: none
Data source: none

Deprecation note: Use TitledVideo with variant=“showcase” instead. See TitledVideo. Props

Prop	Type	Default	Required	Description
`src`	`any`	“	Yes	src prop.
`title`	`any`	“	Yes	title prop.
`subtitle`	`any`	“	Yes	subtitle prop.
`className`	`string`	`''`	No	Optional CSS class override.
`style`	`object`	`{}`	No	Optional inline style override.

SolutionCard

Use SolutionCard when you need card body for Solutions Portal product cards. Accepts pre-rendered JSX slots for badges, infra tags, and social links. ScrollBox is passed as a component prop for blurb rendering.. Source description: Card body for Solutions Portal product cards. Accepts pre-rendered JSX slots for badges, infra tags, and social links. ScrollBox is passed as a component prop for blurb rendering. Import path

import { SolutionCard } from '/snippets/components/displays/cards/Cards.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | badges | ReactNode | | No | `Pre-rendered <BadgeWrapper badges={...} />` | | `logoSrc` | `string` | | No | Path to the product logo image. | | logoAlt | string | | No | Alt text for the logo image. | | `subtitle` | `string` | | No | Bold italic one-line product subtitle. | | infraTags | ReactNode | | No | `Pre-rendered <IconBadgeWrapper items={...} iconColor="var(--lp-color-accent)" size={12} />` | | `blurb` | `string` | | No | Product description text. Rendered inside ScrollBox. | | ScrollBox | Component | | No | ScrollBox component reference, passed from parent MDX. | | `logoHeight` | `string` | | No | Override logo container height (default ‘60px’). | | socialLinks | ReactNode | “ | No | Pre-rendered <SocialLinks links={...} /> |

Code example

import { BadgeWrapper, IconBadgeWrapper } from '/snippets/components/wrappers/badges/Badges.jsx'
import { ScrollBox } from '/snippets/components/wrappers/containers/Layout.jsx'
import { SocialLinks } from '/snippets/components/elements/links/Links.jsx'

<SolutionCard
  badges={<BadgeWrapper badges={daydreamBadges} />}
  logoSrc="/snippets/assets/logos/products/daydream-logo-dark.svg"
  logoAlt="Daydream Logo"
  subtitle="Open-Source Toolkit For World Models and Real-time AI Video"
  infraTags={<IconBadgeWrapper items={daydreamInfra} iconColor="var(--lp-color-accent)" size={12} />}
  blurb="Description here."
  ScrollBox={ScrollBox}
  socialLinks={<SocialLinks links={daydreamSocials} justify="center" style={{ marginTop: "var(--lp-spacing-4)", marginBottom: '-1rem' }} />}
/>

SolutionItem

Use SolutionItem when you need renders a solution entry with link, icon badges, and description. Designed for solution listing pages.. Source description: Renders a solution entry with link, icon badges, and description. Designed for solution listing pages. Import path

import { SolutionItem } from '/snippets/components/displays/cards/Cards.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | link | React.ReactNode | “ | Yes | Link element (e.g. <LinkArrow />), rendered as the heading | | iconWrapper | React.ReactNode | null | No | Icon badges element (e.g. <IconBadgeWrapper />) | | description | React.ReactNode | null | No | Description text or element | | divider | boolean | true | No | Show bottom border divider | | className | string | "" | No | CSS class name | | style | object | {} | No | Inline style overrides |

Code example

<SolutionItem
  link={<LinkArrow href="https://daydream.live" label="Daydream" />}
  iconWrapper={<IconBadgeWrapper items={daydreamInfra} iconColor="var(--lp-color-accent)" size={12} />}
  description="Real-time AI video, world models"
  divider={true}
/>

StepLinkList

Use StepLinkList when you need renders listItems as Mintlify Steps with GotoLink navigation.. Source description: Renders listItems as Mintlify Steps with GotoLink navigation. Import path

import { StepLinkList } from '/snippets/components/displays/steps/Steps.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | listItems | any | “ | Yes | list Items prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

StepList

Use StepList when you need renders listItems as Mintlify Steps with title, icon, and content.. Source description: Renders listItems as Mintlify Steps with title, icon, and content. Import path

import { StepList } from '/snippets/components/displays/steps/Steps.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | listItems | any | “ | Yes | list Items prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

StyledStep

Use StyledStep when you need single step with configurable icon, size, and per-step colour overrides. When iconColor or titleColor is set, injects a scoped CSS override that takes precedence over the parent StyledSteps colours for this step only. When neither is set, behaves identically to a plain Step pass-through.. Source description: Single step with configurable icon, size, and per-step colour overrides. When iconColor or titleColor is set, injects a scoped CSS override that takes precedence over the parent StyledSteps colours for this step only. When neither is set, behaves identically to a plain Step pass-through. Import path

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

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | title | any | | Yes | title prop. | | `icon` | `any` | | Yes | icon prop. | | titleSize | string | "h3" | No | title Size prop. | | iconColor | string\|null | null | No | Per-step icon background colour override. | | titleColor | string\|null | null | No | Per-step title text colour override. | | divider | boolean | false | No | Show a divider line after the step content. | | dividerMargin | string | "0.5rem 0" | No | Margin for the trailing divider. | | children | any | “ | Yes | children prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

StyledSteps

Use StyledSteps when you need wrapper around Mintlify Steps with custom icon styling via injected CSS.. Source description: Wrapper around Mintlify Steps with custom icon styling via injected CSS. Import path

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

Metadata

Status: stable
Accepts: none
Data source: none 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. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

StyledTable

Use StyledTable when you need full-width table with header row styling and rounded container.. Source description: Full-width table with header row styling and rounded container. Import path

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

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | variant | string | "default" | No | variant prop. | | style | object | {} | No | style prop. | | className | string | '' | No | Optional CSS class override. |

TableCell

Use TableCell when you need table cell that switches between th and td based on header prop.. Source description: Table cell that switches between th and td based on header prop. Import path

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

Metadata

Status: stable
Accepts: none
Data source: none 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. | | className | string | '' | No | Optional CSS class override. |

TableRow

Use TableRow when you need table row with optional header styling and hover effect.. Source description: Table row with optional header styling and hover effect. Import path

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

Metadata

Status: stable
Accepts: none
Data source: none 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. | | className | string | '' | No | Optional CSS class override. |

TitledVideo

Use TitledVideo when you need auto-playing video with title/subtitle overlay. Respects prefers-reduced-motion.. Source description: Auto-playing video with title/subtitle overlay. Respects prefers-reduced-motion. Import path

import { TitledVideo } from '/snippets/components/displays/video/Video.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | src | any | | Yes | src prop. | | `title` | `any` | | Yes | title prop. | | subtitle | any | “ | Yes | subtitle prop. | | arrow | boolean | false | No | arrow prop. | | borderRadius | string | "12px" | No | border Radius prop. | | style | object | {} | No | style prop. | | className | string | '' | No | Optional CSS class override. |

UpdateLinkList

Use UpdateLinkList when you need renders update items as linked entries inside Mintlify Update component.. Source description: Renders update items as linked entries inside Mintlify Update component. Import path

import { UpdateLinkList } from '/snippets/components/displays/steps/Steps.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | listItems | any | “ | Yes | list Items prop. |

UpdateList

Use UpdateList when you need planned update list component – not yet implemented.. Source description: Planned update list component – not yet implemented. Import path

import { UpdateList } from '/snippets/components/displays/steps/Steps.jsx'

Metadata

Status: planned
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | listItems | any | “ | Yes | list Items prop. |

ValueResponseField

Use ValueResponseField when you need aPI response field with name, type, and value display.. Source description: API response field with name, type, and value display. Import path

import { ValueResponseField } from '/snippets/components/displays/response-fields/ResponseField.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | description | React.ReactNode | | Yes | Primary content rendered by the component. | | `post` | `string` | `null` | No | Post used by the component. | | `label` | `string` | `"value"` | No | Label text rendered by the component. | | `line` | `boolean` | `true` | No | Boolean flag that controls component behaviour. | | `children` | `React.ReactNode` | | Yes | Content rendered inside the component. | | props | object | “ | No | Additional props forwarded to ResponseField. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

Video

Use Video when you need basic framed video player with caption support.. Source description: Basic framed video player with caption support. Import path

import { Video } from '/snippets/components/displays/video/Video.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | src | any | | Yes | src prop. | | `title` | `string` | `""` | No | title prop. | | `author` | `string` | `""` | No | author prop. | | `caption` | `any` | | Yes | caption prop. | | href | string | "" | No | href prop. | | controls | boolean | true | No | controls prop. | | autoPlay | boolean | false | No | auto Play prop. | | loop | boolean | false | No | loop prop. | | muted | boolean | false | No | muted prop. | | children | any | “ | Yes | children prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

WidthCard

Use WidthCard when you need width-constrained card wrapper with configurable percentage width.. Source description: Width-constrained card wrapper with configurable percentage width. Import path

import { WidthCard } from '/snippets/components/displays/cards/Cards.jsx'

Metadata

Status: stable
Accepts: none
Data source: none 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. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

YouTubeVideo

Use YouTubeVideo when you need youTube embed via responsive iframe with aspect-ratio preservation.. Source description: YouTube embed via responsive iframe with aspect-ratio preservation. Import path

import { YouTubeVideo } from '/snippets/components/displays/video/Video.jsx'

Metadata

Status: stable
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | embedUrl | any | | Yes | embed Url prop. | | `title` | `string` | `""` | No | title prop. | | `author` | `string` | `""` | No | author prop. | | `hint` | `string` | `""` | No | hint prop. | | `caption` | `any` | | Yes | caption prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

YouTubeVideoData

Use YouTubeVideoData when you need renders a columned grid of YouTubeVideo embeds from an items array.. Source description: Renders a columned grid of YouTubeVideo embeds from an items array. Import path

import { YouTubeVideoData } from '/snippets/components/displays/video/Video.jsx'

Metadata

Status: deprecated
Accepts: none
Data source: none

Deprecation note: Duplicate – canonical version is in integrators/video-data/VideoData.jsx. See VideoData.jsx. Props

Prop	Type	Default	Required	Description
`items`	`Array`	`[`	No	] - items prop.
`limit`	`any`	“	Yes	limit prop.
`cols`	`number`	`2`	No	cols prop.

YouTubeVideoDownload

Use YouTubeVideoDownload when you need youTube embed with download hint text below (BROKEN – render content commented out).. Source description: YouTube embed with download hint text below (BROKEN – render content commented out). Import path

import { YouTubeVideoDownload } from '/snippets/components/displays/video/Video.jsx'

Metadata

Status: broken
Accepts: none
Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | embedUrl | any | | Yes | embed Url prop. | | `title` | `any` | | Yes | title prop. | | hint | any | “ | Yes | hint prop. | | caption | string | "" | No | caption prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

Compendium

Knowledge Hub

Documentation Guide

Documentation Index

Back to Component Library

​Displays

​Decision Tree Excerpt

​Summary Table

​Component Reference

​AccordionGroupList

​AccordionLayout

​BasicList

​CardCarousel

​CardVideo

​CodeComponent

​CodeSection

​ComplexCodeBlock

​CustomCodeBlock

​CustomResponseField

​DisplayCard

​DynamicTable

​DynamicTableV2

​FrameQuote

​FunctionField

​IconList

​InlineImageCard

​InteractiveCard

​InteractiveCards

​LinkedInEmbed

​ListSteps

​QuadGrid

​Quote

​ResponseFieldAccordion

​ResponseFieldExpandable

​ResponseFieldGroup

​ScrollableDiagram

​SearchTable

​SearchTableV2

​ShowcaseCards

​ShowcaseVideo

​SolutionCard

​SolutionItem

​StepLinkList

​StepList

​StyledStep

​StyledSteps

​StyledTable

​TableCell

​TableRow

​TitledVideo

​UpdateLinkList

​UpdateList

​ValueResponseField

​Video

​WidthCard

​YouTubeVideo

​YouTubeVideoData

​YouTubeVideoDownload

Displays

Decision Tree Excerpt

Summary Table

Component Reference

AccordionGroupList

AccordionLayout

BasicList

CardCarousel

CardVideo

CodeComponent

CodeSection

ComplexCodeBlock

CustomCodeBlock

CustomResponseField

DisplayCard

DynamicTable

DynamicTableV2

FrameQuote

FunctionField

IconList

InlineImageCard

InteractiveCard

InteractiveCards

LinkedInEmbed

ListSteps

QuadGrid

Quote

ResponseFieldAccordion

ResponseFieldExpandable

ResponseFieldGroup

ScrollableDiagram

SearchTable

SearchTableV2

ShowcaseCards

ShowcaseVideo

SolutionCard

SolutionItem

StepLinkList

StepList

StyledStep

StyledSteps

StyledTable

TableCell

TableRow

TitledVideo

UpdateLinkList

UpdateList

ValueResponseField

Video

WidthCard

YouTubeVideo

YouTubeVideoData

YouTubeVideoDownload