Carousel

<Carousel dots gap={12} aria-label="Featured cards">
  {items.map((it) => (
    <Carousel.Item key={it.id} style={{ width: 280 }}>
      <Card>…</Card>
    </Carousel.Item>
  ))}
</Carousel>

Install: @helixui/core

import { Carousel } from '@helixui/core'

status: stable · since: 0.5.0

Tags: slides, swipe, horizontal, gallery

Anatomy

[<]  [ slide ][ slide ][ slide ][ slide ]  [>]
              ● ○ ○ ○   ← pagination dots

Layout

display — flex
width — fill
height — content
intrinsicSize — one slide per snap point, height of tallest slide
stackable — false
fullBleed — false

Visual

A horizontally scrolling row that scroll-snaps each slide into view. Hidden arrow buttons appear on hover (desktop) at the edges; mobile uses native swipe. Optional dots at the bottom indicate position.

Props

Name	Type	Default	Description
`arrows`	`boolean`	`true`	Show prev/next arrows on hover (hidden on touch).
`dots`	`boolean`	`false`	Show pagination dots below the track.
`snap`	`'start' \| 'center'`	`start`	Scroll-snap alignment of items.
`gap`	`number \| string`	—	Gap between items (px when number).
`label`	`string`	`Carousel`	`aria-label` on the wrapping region.

Slots

Carousel.Item — wraps each slide. Width is up to you (e.g. flex: 0 0 80%).

Tokens used

color.bg.surface.default, color.bg.action.neutral.active, color.bg.action.brand.default, color.border.default, color.border.focus, color.text.primary, radius.full, space.1, space.2, space.3, font.family.sans, shadow.md

Accessibility

Notes

Wrapper is role="region" with aria-roledescription="carousel".
Dots are role="tablist" / role="tab" with aria-selected.
On touch devices, scrollbars are hidden; swipe is the only nav. Arrows are mouse-only.

Composes with

Component	Relation	Note
`Card`	`child`	Each slide is often a Card.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

image gallery

“a swipeable photo carousel with dots”

<Carousel showDots>
  {photos.map(p => <img key={p.id} src={p.url} alt="" />)}
</Carousel>