CarouselMediaItem

Gen UI 2.0 standard

A Carousel slide: an image with its children (a Caption, a Text) under it. size "sm" 160px, "md" 240px (default), "lg" 320px wide. A click opens all slides full-screen, unless href or onClick is set.

One of the 69 components in CopilotKit's standardUI. The playground's catalog extends it, so every agent here can use CarouselMediaItem. Standard catalog docs

Props

Read from standardUI.manifestComponents in the installed @copilotkit/react-core. In A2UI 1.0 any value may also be a { "@path" } binding into the surface data model or a { "@call" } function call.

Prop	Type	Required	Description
url	`string`	Yes	Image URL
children	`string[] \| { componentId, path }`	No	Ids of child components, or a template { componentId, path } over a data list.
onClick	`Action (event or functionCall)`	No	Sent when the user clicks the image. It replaces the full-screen view.
description	`string`	No	What the image shows, for screen readers
href	`string`	No	Opens this URL in a new tab
lightbox	`boolean`	No	Default true: a click opens all slides full-screen
onVisible	`Action (event or functionCall)`	No	Sent once, the first time the container scrolls into view. Use it to load more content lazily.
align	`"start" \| "center" \| "end" \| "baseline" \| "stretch"`	No	-
justify	`"start" \| "center" \| "end" \| "spaceBetween" \| "spaceAround" \| "spaceEvenly" \| ...`	No	-
wrap	`"nowrap" \| "wrap" \| "wrap-reverse"`	No	-
gap	`number \| string`	No	4px steps when a number
rowGap	`number \| string`	No	-
columnGap	`number \| string`	No	-
padding	`number \| string`	No	4px steps when a number
background	`string`	No	Leave it unset. A surface token such as surface, surface-secondary, info, success, warning, danger, discovery, or one with -solid, or a CSS color. Only one summary panel in a Card uses "surface-secondary"
border	`boolean`	No	-
borderColor	`"default" \| "subtle" \| "strong" \| "info" \| "warning" \| "caution" \| ...`	No	-
radius	`"2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| ... \| number \| string \| { topLeft?, topRight?, bottomLeft?, bottomRight? }`	No	-
width	`number \| string`	No	-
height	`number \| string`	No	-
minWidth	`number \| string`	No	-
maxWidth	`number \| string`	No	-
minHeight	`number \| string`	No	-
maxHeight	`number \| string`	No	-
flex	`number`	No	-
weight	`number`	No	flex-grow in a Row or Column
aspectRatio	`string`	No	Default "4 / 3"
scrollable	`boolean`	No	-
clip	`boolean`	No	-
shadow	`boolean`	No	-
inline	`boolean`	No	-
role	`string`	No	ARIA role
flush	`boolean`	No	No padding
minSize	`number \| string`	No	Minimum width and height
maxSize	`number \| string`	No	Maximum width and height
disableAutoSpacing	`boolean`	No	No default gap between children
size	`"sm" \| "md" \| "lg"`	No	The width: "sm" 160px, "md" 240px, "lg" 320px. Default "md"