Gift a Stay List shadcn/tailwind block

About this block

Gift a Stay ListPRO

A gift section for a hotel: a ruled list of four experiences with serif titles and prices, where the chosen one opens its description and swaps the tall photograph beside it with a soft crossfade and slow parallax, while a paper gift tag on the photo swings on its string and rewrites the gift's name and price.

Hotel45: Gift a Stay List

A ruled list of gift experiences opens the chosen one's description and crossfades the tall photograph beside it, while a paper gift tag on the photo swings on a spring and rewrites the gift's name and price.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

bash

npx shadcn add "https://beste.dev/r/hotel45?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

bash

npx shadcn add "https://beste.dev/r-base/hotel45?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hotel45.tsx plus the button22 sliding-marker pill used for the send action and the text1 word stagger used for the heading.

Quick start

The installed file exports hotel45Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

tsx

import { Hotel45, hotel45Demo } from "@/components/beste/block/hotel45";

export default function Page() {
  return <Hotel45 {...hotel45Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsx

import { Hotel45 } from "@/components/beste/block/hotel45";

export default function Page() {
  return (
    <Hotel45
      eyebrow="Gift a stay"
      heading="Something to unwrap slowly, on an island."
      description="We post a printed card in a linen envelope, or send it by email the same day."
      gifts={[
        {
          title: "Two nights by the sea",
          description: "The Sea Suite, breakfast on the terrace and a late checkout.",
          price: "€760",
          image: { src: "https://oud.pics/b/hotel/ostria-sea-suite.webp", alt: "A linen bed facing a tall arched window that opens onto the sea" },
          href: "/gifts/sea-suite",
        },
        {
          title: "An afternoon in the hammam",
          description: "Warm stone, a slow olive soap scrub and an hour of massage.",
          price: "€180",
          image: { src: "https://oud.pics/b/hotel/ostria-hammam.webp", alt: "A domed stone hammam with shafts of light falling through steam" },
          href: "/gifts/hammam",
        },
      ]}
      tag={{ label: "A gift from", from: "Ostria, Paros" }}
      buttonLabel="Send this gift"
      note="Valid for two years and in any season."
    />
  );
}

Props

Prop	Type	Default	Description
`eyebrow`	`string`	–	Small line above the heading
`heading`	`string`	–	Section heading, through `Text1`
`description`	`string`	–	Paragraph under the heading
`gifts`	`Gift[]`	`[]`	The selectable gift rows
`tag`	`Tag`	–	Text printed on the gift tag over the photo
`buttonLabel`	`string`	–	Label of the send button, which links to the selected gift's `href`
`note`	`string`	–	Small line beside the button
`className`	`string`	–	Extra classes for the outer `<section>`

type Gift = {
  title: string;
  description: string;
  price: string;
  image: { src: string; alt: string };
  href: string;
};

type Tag = {
  label: string;
  from: string;
};

Behavior notes

A row is selected on click, hover or keyboard focus; only the selected row shows its description, which opens by animating its height.
The photo crossfades with a slight scale down on each change and drifts vertically by 6% in either direction as the section scrolls through the viewport.
The gift tag remounts on each change and settles from a tilt with a loose spring, so it visibly swings; it also shows the selected gift's title and price.
The send button follows the selected gift: its link target is that gift's href. The button row only renders when buttonLabel is set.
From the large breakpoint the list and the photo sit side by side; below it the photo moves above the list.
Each photo stays blurred until loaded. With reduced motion the parallax, scale and swing are disabled and changes become plain fades.

More Hotel blocks

View all Hotel

PRO

hotel3

Room Collection List

PRO

hotel43

Guest Book Score and Notes

PRO

hotel13

Somethingtounwrapslowly,onanisland.