> ## Documentation Index > Fetch the complete documentation index at: https://na-36-handover-docs-v2-into-docs-v2-dev-20260518.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Displays > Renderers for authored content – code, video, diagrams, quotes, response fields. **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`.
Return to the generated component library landing page. ## Displays Renderers for authored content – code, video, diagrams, quotes, response fields. This category currently contains **49** governed export(s). ### Decision Tree Excerpt 1. Fetches, embeds, or binds to external/third-party data? → `integrators/` 2. Part of the page's outer structure, typically used once? → `scaffolding/` 3. Takes content and presents it in a formatted way? → `displays/` 4. Exists to hold, group, or arrange other things? → `wrappers/` 5. 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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 {color, label} for "badge" variant rendering. Matched by label (case-insensitive). | \| `textIcons` | `Array` | `[` | No | ] - Array of {label, icon} 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 `` 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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 {color, label} for "badge" variant rendering. Matched by label (case-insensitive). | \| `textIcons` | `Array` | `[` | No | ] - Array of {label, icon} 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 `` 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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 ` | | `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 ` | | `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 ` | **Code example** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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' } 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={} blurb="Description here." ScrollBox={ScrollBox} socialLinks={} /> ``` ### 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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. ``), rendered as the heading | \| `iconWrapper` | `React.ReactNode` | `null` | No | Icon badges element (e.g. ``) | \| `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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} } iconWrapper={} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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** ```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}} 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. |