Destination Tabs

Installation

pnpm dlx shadcn@latest add @cleverui/destination-tabs

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

Usage

tsx

import { DestinationTabs } from '@/components/blocks/destination-tabs'

Exampletsx

import { DestinationTabs } from '@/components/blocks/destination-tabs'

export default function DestinationTabsDemo() {
  return (
    <div className="mx-auto w-full max-w-5xl px-4 py-8 sm:px-6 sm:py-12">
      <DestinationTabs
        eyebrow="Where to next"
        heading="Destinations"
        destinations={[
          {
            name: 'Santorini',
            tagline: 'Where the caldera holds the light',
            description:
              'Whitewashed cliffs above a wine-dark sea. Walk the path from Oia to Fira at dusk, then settle into a table that faces the volcano.',
            facts: [
              { label: 'Flight', value: '4 h 20 from Singapore' },
              { label: 'Best months', value: 'May – September' },
              { label: 'Currency', value: 'Euro (EUR)' },
              { label: 'Time zone', value: 'UTC+2 / UTC+3' },
            ],
            href: '#santorini',
            linkLabel: 'Plan Santorini',
          },
          {
            name: 'Kyoto',
            tagline: 'Temple gardens and river mist',
            description:
              'A city that keeps its mornings quiet. Cycle the Philosopher’s Path before the gates open, then tea in a wooden room overlooking moss.',
            facts: [
              { label: 'Flight', value: '6 h 45 from Singapore' },
              { label: 'Best months', value: 'March – May, Oct – Nov' },
              { label: 'Currency', value: 'Yen (JPY)' },
              { label: 'Time zone', value: 'UTC+9' },
            ],
            href: '#kyoto',
            linkLabel: 'Plan Kyoto',
          },
          {
            name: 'Marrakech',
            tagline: 'Courtyards scented with orange blossom',
            description:
              'Medina alleys open onto quiet riads. Spend afternoons in the Majorelle shade, evenings on a roof where the call to prayer softens the heat.',
            facts: [
              { label: 'Flight', value: '11 h via Lisbon' },
              { label: 'Best months', value: 'March – May, Sep – Nov' },
              { label: 'Currency', value: 'Dirham (MAD)' },
              { label: 'Time zone', value: 'UTC+1' },
            ],
            href: '#marrakech',
            linkLabel: 'Plan Marrakech',
          },
          {
            name: 'Lisbon',
            tagline: 'Tile light and Atlantic air',
            description:
              'Trams climb past azulejo façades toward miradouros. Eat grilled sardines in Alfama, then watch the Tagus turn gold from a miradouro bench.',
            facts: [
              { label: 'Flight', value: '13 h via Madrid' },
              { label: 'Best months', value: 'April – October' },
              { label: 'Currency', value: 'Euro (EUR)' },
              { label: 'Time zone', value: 'UTC+0 / UTC+1' },
            ],
            href: '#lisbon',
            linkLabel: 'Plan Lisbon',
          },
        ]}
      />
    </div>
  )
}

API reference

DestinationTabs accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Where to next'`	spaced small-caps serif label, never mono in this register
`heading`	`string`	`'Destinations'`	–
`destinations`*	`DestinationTabsPlace[]`	–	–
`defaultIndex`	`number`	`0`	index of the destination shown first

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

Referenced types

Typestsx

export interface DestinationTabsPlace {
  name: string
  tagline: string
  description: string
  facts?: { label: string; value: string }[]
  href?: string
  linkLabel?: string
}

Related components

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.

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.

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.

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.

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.

Tour Departures List

Upcoming small-group tour departures as a serif ledger, preformatted date ranges, tabular prices and real-text availability. A React booking list themed with Tailwind.

Frequently asked questions

How do I install the Destination Tabs component?

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

Destination Tabs 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 Destination Tabs 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