Carousel
Gen UI 2.0 standardA horizontally scrolling row that snaps to its CarouselItem or CarouselMediaItem children, with arrows. Bind activeIndex to read or set the slide in view.
One of the 69 components in CopilotKit's standardUI. The playground's catalog extends it, so every agent here can use Carousel. 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 |
|---|---|---|---|
| children | string[] | { componentId, path } | No | Ids of child components, or a template { componentId, path } over a data list. |
| activeIndex | number | No | The index of the slide in view. Bind it with { "@path": "/x" } to read or set it |
| label | string | No | A short name of the carousel for screen readers |
| visibleItems | number | No | - |
| showArrows | boolean | No | Default true |
| previousLabel | string | No | Default "Previous" |
| nextLabel | string | No | Default "Next" |
| snap | "none" | "proximity" | "mandatory" | No | - |
| snapAlign | "start" | "center" | "end" | No | - |
| 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 | - |
| 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 |