Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Travel Destinations Carousel Block for React

Six drawn trip ideas on a hairline track with a header switch for one, two or three in view, each with the best months, average temperature, flight time and daily budget, and a counter and dots that follow the choice.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let visitors decide how much to compare at once, with this travel destinations carousel for React with Base UI. Wanderfold, a trip-ideas app, lists six places on a ruled track, each cell a line drawing (a harbour, an island, a ridge, a desert road, a coast, a terrace) over the place and country, the best months in words, an average temperature, the flight time and a whole-dollar budget for a day. The header holds one control, a Toggle Group "In view: 1, 2, 3", that sets how many destinations fit the track; choosing two or three re-flows the cells, keeps the first destination you were on in view, and recounts the pages. The foot band, ruled by Guides, holds the counter ("1–3 of 6"), a dot for each page and Previous and Next Buttons. A phone always shows one place with the next peeking and hides the control. It's built from Carousel, Toggle Group, Button and Guides, with CSS transitions only. The places, figures and drawings are made up for the example.

FAQ

How do I add my own destinations?

Edit PLACES. Each has an id, a city, a country, a kind and seed for its drawing, the best months as words, an average temperature in degrees Celsius, the flight time in minutes and a daily budget in whole dollars. The flight time is formatted by one small helper ("5 h 40 min"), and the counter and the pages are derived from the length of the list. For photographs, replace Scene in the cell with an img (the comment above it says how) and keep the 4 by 3 shape.

What does the In view control do?

It sets how many destinations a page holds: one, two or three. The track re-flows, the counter says which ones are whole ("1–3 of 6", "2 of 6"), and the dots recount, so three in view is two pages and one in view is six. The first destination in view stays in view when you change the number, and Previous and Next move by a page. The number sets the cells' basis and Embla's slidesToScroll, and the track re-measures when it changes.

How does it work with a keyboard?

Tab reaches the control, the dots, Previous and Next. With focus on any of them, the arrow keys move the track (mirrored in a right-to-left layout) and Home and End jump to the first and last page. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled. Cells that are out of view are hidden from the tab order and from screen readers, and the counter is the one polite live region.

Why is the control hidden on a phone?

One destination with the next one peeking is already the right amount of content for a narrow screen, so the control would only add a choice that does nothing. From the small breakpoint up it appears and takes effect immediately.

What stays local in the demo?

All of it: the places are made up, the facts are typed, and nothing is searched, booked or saved. To wire it for real, fetch your destinations and put them into PLACES; the cells, the counter and the pages all derive from that list.

Does it work in a right-to-left page?

The track runs right to left, the chevrons mirror, the arrow keys follow the reading direction, and temperatures, flight times and prices keep their digits in order.

All 100 carousel blocks