Gatherings
Four spaces for teams and families who want to think, eat and swim in the same place. Everything is arranged by one person, from the table plan to the boat on the last afternoon.
An oak table for twelve between shelves of old books, with two tall windows onto the olives.
A meetings and events section for a hotel: a ruled capacity table of venues with size, boardroom, dinner and standing figures, where hovering or choosing a row crossfades the pinned photograph and its description, with a plan-a-gathering pill and a fact sheet link. Rows become labelled stacks on phones.
A meetings and events section with a ruled capacity table of venues on the right and a sticky photograph on the left: hovering, focusing or clicking a row crossfades the photograph and the line of description under it, and the table folds into labeled stacks on phones.
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.
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
npx shadcn add "https://beste.dev/r/hotel14?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://beste.dev/r-base/hotel14?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hotel14.tsx plus the button22 sliding-marker pill for the main action and the text1 word stagger for the heading.
The installed file exports hotel14Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { Hotel14, hotel14Demo } from "@/components/beste/block/hotel14";
export default function Page() {
return <Hotel14 {...hotel14Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hotel14 } from "@/components/beste/block/hotel14";
export default function Page() {
return (
<Hotel14
eyebrow="Gatherings"
heading="Small meetings, long dinners, the odd retreat."
description="Spaces for teams and families who want to think, eat and swim in the same place."
columns={{ size: "Size", capacities: ["Boardroom", "Dinner", "Standing"] }}
venues={[
{
name: "The library",
description: "An oak table for twelve between shelves of old books.",
size: "48 m²",
capacities: ["12", "16", "30"],
image: { src: "https://oud.pics/b/hotel/ostria-meeting-library.webp", alt: "A long oak table in a library with tall windows" },
},
{
name: "The courtyard",
description: "Pale stone around a single ancient olive tree.",
size: "120 m²",
capacities: [null, "40", "70"],
image: { src: "https://oud.pics/b/hotel/ostria-courtyard.webp", alt: "A stone courtyard with an ancient olive tree" },
},
]}
button={{ label: "Plan a gathering", href: "/gatherings", tone: "dark" }}
link={{ label: "Download the fact sheet", href: "/fact-sheet.pdf" }}
labels={{ none: "None" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Uppercase line above the heading |
heading | string | – | Serif heading, through Text1 |
description | string | – | Paragraph in the right column of the header |
columns | Columns | – | Table header labels for size and each capacity |
venues | Venue[] | [] | One table row per venue |
button | ActionButton | – | Button22 pill under the table |
link | TextLink | – | Text link with an arrow beside the button |
labels | Labels | {} | Text shown where a capacity is null |
className | string | – | Extra classes for the outer <section> |
type Columns = {
size: string;
capacities: string[];
};
type Venue = {
name: string;
description: string;
size: string;
capacities: (string | null)[];
image: { src: string; alt: string };
};
type ActionButton = {
label: string;
href: string;
tone?: "primary" | "light" | "dark" | "outline";
};
type TextLink = {
label: string;
href: string;
};
type Labels = {
none?: string;
};<button> with aria-pressed; mouse enter, focus and click all make it the active venue. The first venue is active on load and a dot appears beside the active name while the others dim.aria-live="polite" paragraph.sm breakpoint each row is a grid with a flexible name column and four fixed figure columns, so names stay on one line (truncated if needed). Below sm the column header is hidden and each figure is prefixed with its column label.null when a layout is not offered; the cell shows labels.none in a muted color.dark.