
The house
Doors from the 1960s still open onto the balconies. We sanded them back, kept the old blue and let the sea do the rest.
About Ostria
Ostria began as a family house on the cove and became twelve rooms without losing its manners: thick island walls, shutters that creak a little, and the quiet comforts you only notice when they are missing.

Doors from the 1960s still open onto the balconies. We sanded them back, kept the old blue and let the sea do the rest.

Beds dressed in washed linen, reading lamps set into the plaster and a niche beside every pillow for the things you carry.

Plates from a potter on the next island, cement tiles saved from the old kitchen and chairs woven in the village.
An about section for a small hotel: one small eyebrow over a long statement set in light serif, followed by three tall photographs that drift in their frames, each with a small label and a short serif paragraph about the house, the rooms and the details.
An uppercase eyebrow and a long light serif statement blur up into view, followed by three tall photographs that slide gently inside their frames as you scroll, each captioned with a small label and a short serif paragraph.
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/hotel32?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://beste.dev/r-base/hotel32?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hotel32.tsx. It has no other registry components or shadcn/ui primitives; motion comes from framer-motion.
The installed file exports hotel32Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { Hotel32, hotel32Demo } from "@/components/beste/block/hotel32";
export default function Page() {
return <Hotel32 {...hotel32Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hotel32 } from "@/components/beste/block/hotel32";
export default function Page() {
return (
<Hotel32
eyebrow="About Ostria"
statement="Ostria began as a family house on a Paros cove and became twelve rooms without losing its manners."
pillars={[
{
label: "The house",
text: "Doors from the 1960s still open onto the balconies, sanded back to the old blue.",
image: { src: "https://oud.pics/b/hotel/ostria-balcony-doors.webp", alt: "Weathered blue doors open onto a balcony and the sea" },
},
{
label: "The rooms",
text: "Washed linen, reading lamps set into the plaster and a niche beside every pillow.",
image: { src: "https://oud.pics/b/hotel/ostria-bedside-niche.webp", alt: "A plaster bedside niche with a brass lamp" },
},
{
label: "The details",
text: "Plates from a potter on the next island and chairs woven in the village.",
image: { src: "https://oud.pics/b/hotel/ostria-reading-alcove.webp", alt: "An arched alcove of ceramic plates beside a rush armchair" },
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small uppercase line above the statement |
statement | string | – | The long serif paragraph that leads the section |
pillars | Pillar[] | [] | Photo cards under the statement, each with a label and a paragraph |
className | string | – | Extra classes for the outer <section> |
type Pillar = {
label: string;
text: string;
image: { src: string; alt: string };
};sm and three across from lg; a third card on sm wraps onto its own row.eyebrow, statement and the pillar grid is left out when its prop is missing or empty.