Skip to main content
Clever Ops

Itinerary Day Flow

A day-by-day itinerary set like a travel journal, serif day headings, a hairline timeline of moments with mono times, and evocative one-line descriptions that smell of the place.

Preview & code

Loading Itinerary Day Flow preview

Installation

pnpm dlx shadcn@latest add @cleverui/itinerary-day-flow

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { ItineraryDayFlow } from '@/components/blocks/itinerary-day-flow'
Exampletsx
import { ItineraryDayFlow } from '@/components/blocks/itinerary-day-flow'

export default function ItineraryDayFlowDemo() {
  return (
    <ItineraryDayFlow
      eyebrow="The itinerary"
      heading="Your journey"
      intro="Seven days along the coast, none of them hurried, each one opening a little further into the light."
      days={[
        {
          label: 'Day one',
          title: 'Arrival in Kyoto',
          moments: [
            {
              time: '14:40',
              title: 'Train into the basin',
              description:
                'The shinkansen slips past tea fields; the city gathers below the hills.',
            },
            {
              time: '16:15',
              title: 'Check in at the machiya',
              description:
                'Shoji screens, a cedar bath, and the first cup of roasted hojicha.',
            },
            {
              time: '18:30',
              title: 'Dusk walk to the river',
              description:
                'Lanterns come on along the Kamo; dinner is still an hour away.',
            },
          ],
        },
        {
          label: 'Day two',
          title: 'Temple morning',
          moments: [
            {
              time: '07:30',
              title: 'First light at Kiyomizu',
              description:
                'The wooden stage is empty save for the mist and a few early keepers.',
            },
            {
              time: '11:00',
              title: 'Tea in a side street',
              description:
                'Matcha poured slow, sweets shaped like maple leaves in season.',
            },
            {
              time: '15:45',
              title: 'Arashiyama by private car',
              description:
                'Bamboo hush, then the river again, this time from the western hills.',
            },
          ],
        },
        {
          label: 'Day three',
          title: 'Departure north',
          moments: [
            {
              time: '09:20',
              title: 'Bags at the gate',
              description:
                'A quiet transfer toward the coast; the itinerary softens into free hours.',
            },
            {
              time: '13:00',
              title: 'Lunch overlooking the bay',
              description:
                'Grilled fish, cold sake, and a long look at the water before the next leg.',
            },
          ],
        },
      ]}
      note="Every journey is tailored, this one is merely a beginning."
    />
  )
}

API reference

ItineraryDayFlow accepts the following props.

PropTypeDefaultDescription
eyebrowstring'The itinerary'spaced small-caps serif label, never mono in this register
headingstring'Your journey'
introstringone evocative place-first sentence
days*ItineraryDay[]
notestringclosing line

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx
export interface ItineraryDay {
  /** e.g. 'Day one' */
  label: string
  /** e.g. 'Arrival in Kyoto' */
  title: string
  moments: ItineraryMoment[]
}

export interface ItineraryMoment {
  /** PREFORMATTED time string like '07:30', never a Date */
  time?: string
  title: string
  description?: string
}

Frequently asked questions

How do I install the Itinerary Day Flow component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/itinerary-day-flow`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Itinerary Day Flow require?

Itinerary Day Flow uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Itinerary Day Flow to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services