Skip to content

shadcn.io is an independent project built on shadcn/ui

Pro

Travel Product Card Block for Ark UI

A guided walking holiday with a drawn coast path, a day-by-day list of stages summed in kilometres, four departures with price and places, a lowest-price tag, and a travellers toggle with a deposit.

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

Help people pick a departure instead of just a trip with this travel card for React with Ark UI. A hairline frame holds a drawn coast path and the walking days at the start, each stage with its distance and the total worked out from the rows. At the end four departures are native radio rows with a price a person and the places open, and the cheapest one carries a "Lowest price" tag found from the data. A Toggle Group sets 1 to 4 travellers, capped by the places open, and a description list gives the total, the $150 deposit each and the balance. One Shine Button holds the places. For tour operators, retreats, courses and trips with fixed departure dates.

FAQ

How do I change the departures and prices?

Edit the DEPARTURES array: each has an id, an ISO date, a label, a price for one person in cents and the places open. The lowest-price tag follows the data, and the deposit is DEPOSIT_CENTS for each person.

What if a departure has fewer places than travellers?

The travellers choice is clamped to the places open when you pick it, and the options above that number are disabled. The status line says how many places are open.

How is the distance worked out?

It is the sum of the km of each stage in STAGES, so changing a stage updates the total line. The first and last days are travel days with no walking.

What stays local, and how do I wire it for real?

The held places are page state; nothing is booked, charged or sent. Replace DEPARTURES with your availability and the body of hold with a call that takes the deposit.

How does it look on a phone?

The drawing and the stage list come first, then the departures, the travellers and the totals in one column with the same copy at every width.

Is it accessible?

The departures are a fieldset of native radios whose text carries the date, the places and the price. The travellers are a named toggle group, the stages are an ordered list, and a polite status line announces each change.

All 100 product cards blocks