Carousel

Build horizontally scrollable rows of cards, steps, or media with Reactberry's Carousel block.

Carousel

Carousel is a client-side block for rendering horizontally scrollable content with snap behavior and optional arrow controls.

Import

typescript

import { Carousel } from "@reactberry/system/blocks";

When to use it

Use Carousel when you need to present a sequence of items that should be explored horizontally, such as:

feature cards
onboarding steps
media or previews
compact, swipeable collections on smaller screens

Live examples

Example 1: card carousel

A common pattern is a horizontally scrollable row of feature cards with built-in arrows.

Starter kit

A compact slide with headline, copy, and action.

Open starter

Design review

Use Carousel when you need to scan rich cards horizontally.

Review cards

Launch checklist

Slides can contain the same Reactberry primitives used elsewhere.

View checklist

Example 2: tracked progress carousel

You can listen to `onScroll` to keep external UI in sync with the active slide.

Current slide: 1 / 4

Step 1

Collect inputs

Step 2

Draft layout

Step 3

Refine theme

Step 4

Ship UI

Basic usage

The component accepts an items array of React nodes.

typescript

import { Carousel } from "@reactberry/system/blocks";
import { Box, Text } from "@reactberry/system/elements";

const items = ["One", "Two", "Three"].map((label) => (
  <Box key={label} minWidth="240px" p="m" skin="surface" shape="rounded">
    <Text>{label}</Text>
  </Box>
));

export default function Example() {
  return <Carousel items={items} gap="m" />;
}

Useful props

items — array of slides to render
gap — spacing between slides
onScroll — callback with the current slide index
showScrollbar — reveals the horizontal scrollbar
showArrows — toggles the built-in arrow controls
containerProps — forwards layout and style props to the scroll container

Notes

Each item should have a stable width so snap behavior feels predictable.
Carousel works well with Box, Text, Button, and other Reactberry primitives inside each slide.
For richer composed experiences, you can combine it with blocks like Container, Heading, or Divider.

Next step

Return to Blocks for the broader composition model, or continue into Guides for more narrative implementation patterns.