Itinerary
A trip plan split by day, with a route map and timed stops.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/itinerary.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/itinerary.json
Usage & API
Example
import { ItineraryCard } from "@/components/ai/itinerary"
<ItineraryCard
title="…"
dates="…"
days={[]}
day={1}
onDayChange={() => {}}
/>Props ItineraryCard
| Prop | Type & description | Required |
|---|---|---|
title | string | Required |
dates | string | Required |
days | TripDay[] | Required |
day | number | Required |
onDayChange | (day: number) => void | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Day by day is the only variant. The sample title is Three days in Kyoto and the dates read Fri 13 to Sun 15 November · 2 travellers. Day 1 is Higashiyama: Kiyomizu-dera at 8:00, the lanes of Sannenzaka and Ninenzaka, tofu lunch near Nanzen-ji, the Philosopher's Path, and Gion at dusk. Day 2 is Arashiyama and the north: the bamboo grove, Tenryu-ji, soba by the river, and Kinkaku-ji, with the bus noted in the detail. Day 3 is South and centre: Fushimi Inari, Nishiki Market, a booked tea ceremony, and the train to Osaka at 17:10. The tabs read Day 1, Day 2 and Day 3. The route redraws when the day changes, and hovering a stop in the list lights the matching pin. There is no zoom and no turn-by-turn list beyond the details you wrote.
Choosing a layout
Use it when the answer is a plan for a place across more than one day, and the person needs both the sequence and a sense of how the stops sit. A weekend, a layover, or a day of errands fits if you can describe each stop in a time, a name and one line of detail. Put the practical warning in that detail: go early, book ahead, the walk is about two kilometres. The day tabs are the way to keep three days in one card instead of three separate lists.
A weather card is the better fit when the question is the forecast, not where to walk. A calendar event is the better fit when the result is one meeting with attendees and a button to add it. An email draft is the better fit when the result is a message to send. None of those draw a route. A product card is for something to buy. If the trip is a single unordered list of tips with no times, you do not need this card. The map earns its place when the stops have an order.
Is the route a real map?
No. It is an illustration. The grid, the pale paths and the coloured route are drawn in the card, and each stop is a circle at the x and y you supplied. Nothing is geocoded, and there are no tiles to load or an attribution line to show. Put the useful geography in the stop detail, the walk, the bus, the station, rather than expecting the drawing to be to scale.
How does a list row stay tied to a pin?
By index. The same stop array feeds the route, the numbered circles and the list. Hovering either side sets the active index, and focus on a row does too. The number printed on the pin is the position in that array plus one, and the list repeats it. Reordering the array reorders both the drawing and the times, so keep the array in visit order.