Skip to main content
Clever Ops

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.

Preview & code

Loading Guest Book Spread preview

Installation

pnpm dlx shadcn@latest add @cleverui/guest-book-spread

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

Usage

tsx
import { GuestBookSpread } from '@/components/blocks/guest-book-spread'
Exampletsx
import { GuestBookSpread } from '@/components/blocks/guest-book-spread'

export default function GuestBookSpreadDemo() {
  return (
    <div className="mx-auto w-full max-w-5xl px-4 py-8 sm:px-6 sm:py-12">
      <GuestBookSpread
        eyebrow="From the guest book"
        heading="In their words"
        entries={[
          {
            quote:
              'We woke to the harbour still as glass and breakfast on the terrace with nowhere else to be. Three nights felt like a week of quiet we had forgotten we needed.',
            guest: 'Eleanor Hart',
            stay: 'The Garden Wing, April 2026',
            origin: 'Melbourne',
            lead: true,
          },
          {
            quote:
              'The staff remembered our names by the second morning. Small things, the right pillows, coffee at seven, made the villa feel like ours.',
            guest: 'James & Priya Okonkwo',
            stay: 'Cliff Suite, March 2026',
            origin: 'Lagos',
          },
          {
            quote:
              'Rainy afternoon, books by the fire, and the spa path lit with lanterns. We cancelled our day trip and stayed. Best decision of the trip.',
            guest: 'Sofia Reyes',
            stay: 'Olive Court, February 2026',
            origin: 'Madrid',
          },
          {
            quote:
              'Our daughter still talks about the pool that looks out to the olive hills. We will be back for her birthday next year.',
            guest: 'Tom & Hannah Keller',
            stay: 'Family Annex, January 2026',
            origin: 'Zurich',
          },
        ]}
      />
    </div>
  )
}

API reference

GuestBookSpread accepts the following props.

PropTypeDefaultDescription
eyebrowstring'From the guest book'spaced small-caps serif label, never mono in this register
headingstring'In their words'
entries*GuestBookEntry[]

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

Referenced types

Typestsx
export interface GuestBookEntry {
  quote: string
  guest: string
  /** PREFORMATTED stay context, e.g. 'The Garden Wing, April 2026' */
  stay?: string
  origin?: string
  /** at most one lead; defaults to the first entry */
  lead?: boolean
}

Frequently asked questions

How do I install the Guest Book Spread component?

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

Guest Book Spread 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 Guest Book Spread 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