Components

Carousel

A set of slides shown one step at a time: offers, onboarding and highlights. Arrows move one slide, dots show the position.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/carousel

Dependencies it brings: @phosphor-icons/react

Usage

import { Carousel, CarouselSlide } from "@/components/ui/carousel";

<Carousel title="Offers for you">
  <CarouselSlide icon={CoinsIcon} title="Cashback on groceries" description="Get 5% back at partner stores this month." />
  <CarouselSlide icon={AirplaneIcon} title="Travel insurance" description="Covered on every trip you pay with Kanz." />
</Carousel>

Examples

Single

type="single" for onboarding: one full-width slide, the arrows around the dots.

Slides with links

Tab moves through the links in order, and the track scrolls to keep the focused one in view.

API reference

Carousel

Prop	Type	Default	Description
`type`	`"cards" \| "single"`	`"cards"`	Figma's Type.
`title`	`ReactNode`		The Cards heading beside the arrows, and the carousel's name.
`label`	`string`		The carousel's name for screen readers when there's no text title.
`children`	`CarouselSlide[]`		The slides: five or fewer, the most important first.

CarouselSlide

Prop	Type	Description
`icon`	`IconComponent`	Cards: an icon in a `brand/faint` circle.
`artwork`	`ReactNode`	Single: the 180px artwork panel's content.
`title / description`	`ReactNode`	Figma's Heading and Body.
`children`	`ReactNode`	Anything after the text: a link or button.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	To the arrows, the track, then the dots and the links inside slides.
`EnterSpace`	On an arrow: one slide. On a dot: that slide.
`ArrowLeftArrowRight`	On the track: native scrolling.

ARIA

The carousel is a named region (aria-roledescription "carousel"); each slide is a group named "2 of 4".
The arrows are "Previous slide" and "Next slide" and turn off at the ends. The dots are "Go to slide 2" buttons.
Moving with the buttons is announced politely ("Slide 2 of 4"). No auto play.

Arabic and RTL notes

Mirrors

Slides start on the right, and so does the active dot.
The right-pointing arrow goes to the previous slide, and swiping follows the reading direction.
Directional artwork icons (the paper plane) mirror.

Does not mirror

Non-directional icons (coins, piggy bank) don't mirror.

Numerals: Slide names and figures in the text follow the numerals setting.
Arabic typography: Heading label-16 Semibold, body label-14.
Mixed-direction text: Kanz uses native scrolling, so the browser handles the scroll direction in Arabic with no hand-made maths.