Components · Data display

Carousel

A horizontally paged container for stepping through slides, with circular prev/next controls and a dot indicator. Zetta specifies the chrome — the controls and dots — while the slide track and transition are left to the framework primitive.

Preview

The controls and dot indicator across the three themes (the slide area is illustrative).

Light

Slide 2 of 4

Dark

Slide 2 of 4

Accessibility

Slide 2 of 4

Spec

Values and token references straight from the Zetta spec.

carousel

position: relative
overflow: hidden
width: 100%

carousel-dot

width: 12px
height: 12px
borderRadius: {rounded.full}
backgroundColor: {colors.surface-muted}
padding: 16px
cursor: pointer

carousel-dot-active

backgroundColor: {colors.brand}

carousel-dot-focus

outline: 2px solid {colors.border-focus}
outlineOffset: 2px

carousel-control

width: 32px
height: 32px
borderRadius: {rounded.full}
backgroundColor: {colors.surface-card}
borderColor: {colors.hairline}
borderWidth: 1px
iconColor: {colors.ink}
iconSize: 20px
shadow: {shadows.sm}
cursor: pointer

carousel-control-hover

backgroundColor: {colors.surface-secondary}
borderColor: {colors.border-strong}

carousel-control-focus

outline: 2px solid {colors.border-focus}
outlineOffset: 2px

carousel-control-disabled

backgroundColor: {colors.disabled-bg}
iconColor: {colors.disabled-text}
borderColor: {colors.disabled-border}
cursor: not-allowed

Build with the skill

No package to install — hand this to your AI to generate the carousel in your stack.

Prompt for your AI

Implement the Zetta "Carousel" component in this project's stack using the zetta-design-md skill.

- Apply the `carousel` spec from the skill (variants: control, dot, dot-active).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

Controls are 32px circles on the card surface with a hairline border and shadow-sm, holding a 20px icon. Dots are 12px circles (surface-muted, brand when active) with a 16px hit-area pad.
Always offer both arrows and dots; never autoplay without a visible pause control.

Accessibility

Label each control and dot ("Previous slide", "Go to slide 2"); mark the active dot with aria-current. Support arrow-key navigation and respect prefers-reduced-motion for transitions.

Known gaps

Slide-transition timing/easing, multi-item viewports, and autoplay behaviour are not specified — the spec covers the controls and indicator only.