Tour Departures List

Installation

pnpm dlx shadcn@latest add @cleverui/tour-departures-list

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

Usage

tsx

import { TourDeparturesList } from '@/components/blocks/tour-departures-list'

Exampletsx

import { TourDeparturesList } from '@/components/blocks/tour-departures-list'

export default function TourDeparturesListDemo() {
  return (
    <div className="mx-auto w-full max-w-3xl px-4 py-8 sm:px-6 sm:py-12">
      <TourDeparturesList
        eyebrow="Departures"
        heading="Upcoming departures"
        intro="Twelve guests, one guide, never hurried, walking the Amalfi paths between lemon groves and sea."
        departures={[
          {
            dates: '12 – 19 Sep 2026',
            duration: '8 days',
            price: '$6,450',
            status: 'available',
            href: '#reserve-sep',
          },
          {
            dates: '3 – 10 Oct 2026',
            duration: '8 days',
            price: '$6,450',
            status: 'nearly-full',
            href: '#reserve-oct',
          },
          {
            dates: '24 – 31 Oct 2026',
            duration: '8 days',
            price: '$6,650',
            status: 'waitlist',
            href: '#waitlist-oct',
          },
          {
            dates: '14 – 21 Nov 2026',
            duration: '8 days',
            price: '$5,980',
            status: 'available',
            href: '#reserve-nov',
          },
          {
            dates: '5 – 12 Dec 2026',
            duration: '8 days',
            price: '$5,980',
            status: 'sold-out',
          },
        ]}
        note="Private departures arranged on request for groups of six or more."
      />
    </div>
  )
}

API reference

TourDeparturesList accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Departures'`	spaced small-caps serif label, never mono in this register
`heading`	`string`	`'Upcoming departures'`	–
`intro`	`string`	–	one measured place-first sentence
`departures`*	`TourDeparture[]`	–	–
`statusLabels`	`TourDeparturesStatusLabels`	–	–
`reserveLabel`	`string`	`'Reserve'`	per-row anchor label when href is set; suppressed on sold-out rows
`note`	`string`	–	closing line

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

Referenced types

Typestsx

export interface TourDeparture {
  /** PREFORMATTED date range, e.g. '12 – 19 Sep 2026', never a Date */
  dates: string
  duration?: string
  /** PREFORMATTED price, e.g. '$6,450' */
  price?: string
  status: TourDepartureStatus
  href?: string
}

export interface TourDeparturesStatusLabels {
  available?: string
  nearlyFull?: string
  waitlist?: string
  soldOut?: string
}

export type TourDepartureStatus =
  | 'available'
  | 'nearly-full'
  | 'waitlist'
  | 'sold-out'

Related components

Booking Window Bar

A check-in, check-out and guests summary bar with hairline seams and a serif reserve action, display-only fields from preformatted props, onSearch delegated, zero date-picker weight.

Room & Suite Card

A hotel room card in serif calm, framed view placeholder, quiet amenity icons, the from-rate in tabular figures with per-night whispered, and a single reserved booking accent.

Amenity Constellation

Hotel amenities as an airy constellation, icon and serif label pairs grouped by pool, spa and dining, one signature amenity carrying the accent. The whitespace does the luxury.

Destination Tabs

Destination tabs for travel sites, serif place names on a hairline rail, evocative intros and quiet fact pairs per place. Accessible React tabs themed with Tailwind tokens.

Guest Book Spread

Hotel guest reviews set like a guest book, one lead quote in large serif italic with stay details, smaller notes alongside. A React testimonial spread styled with Tailwind.

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.

Frequently asked questions

How do I install the Tour Departures List component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/tour-departures-list`. 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 Tour Departures List require?

Tour Departures List 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 Tour Departures List 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.

Preview & code