When to Go Strip

Installation

pnpm dlx shadcn@latest add @cleverui/when-to-go-strip

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

Usage

tsx

import { WhenToGoStrip } from '@/components/blocks/when-to-go-strip'

Exampletsx

import { WhenToGoStrip } from '@/components/blocks/when-to-go-strip'

export default function WhenToGoStripDemo() {
  return (
    <div className="mx-auto w-full max-w-4xl px-4 py-8 sm:px-6 sm:py-12">
      <WhenToGoStrip
        eyebrow="When to go"
        heading="The seasons"
        intro="The island keeps two summers, one for the crowds, one for you. Shoulder months reward early swims and empty paths."
        months={[
          { label: 'Jan', temp: '18°', note: 'Cool nights' },
          { label: 'Feb', temp: '18°', note: 'Quiet trails' },
          { label: 'Mar', temp: '20°', note: 'Wildflowers' },
          { label: 'Apr', temp: '22°', note: 'Warming seas', best: true },
          { label: 'May', temp: '24°', note: 'Dry and clear', best: true },
          { label: 'Jun', temp: '27°', note: 'Long light', best: true },
          { label: 'Jul', temp: '30°', note: 'Peak heat' },
          { label: 'Aug', temp: '30°', note: 'Busy harbours' },
          { label: 'Sep', temp: '27°', note: 'Warm seas', best: true },
          { label: 'Oct', temp: '24°', note: 'Soft evenings', best: true },
          { label: 'Nov', temp: '21°', note: 'Quiet again' },
          { label: 'Dec', temp: '19°', note: 'Mild winter' },
        ]}
        bestLabel="Best time to visit"
        note="Daytime averages on the coast; the hills run five degrees cooler."
      />
    </div>
  )
}

API reference

WhenToGoStrip accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'When to go'`	spaced small-caps serif label, never mono in this register
`heading`	`string`	`'The seasons'`	–
`intro`	`string`	–	one evocative place-first sentence
`months`*	`WhenToGoMonth[]`	–	–
`bestLabel`	`string`	`'Best time to visit'`	legend text paired with the marker dot
`note`	`string`	–	quiet footnote

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

Referenced types

Typestsx

export interface WhenToGoMonth {
  /** e.g. 'Jan' */
  label: string
  /** PREFORMATTED temperature, e.g. '24°', never computed */
  temp?: string
  /** two-or-three-word season note, e.g. 'Dry and clear' */
  note?: string
  /** flags the recommended window */
  best?: boolean
}

Related components

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.

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.

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.

Frequently asked questions

How do I install the When to Go Strip component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/when-to-go-strip`. 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 When to Go Strip require?

When to Go Strip 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 When to Go Strip 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