Hotel website factory

MARINET Hotel UI Kit / Design System v2

Reusable shadcn/Tailwind hotel components, grouped by category, themeable by CSS variables, ready for Next.js + WordPress/HotelierCMS data.

Explore Components Governance Rules

00 Foundations

Tokens & theme architecture

Themes change tokens, not markup. Production uses Tailwind config + shadcn variables, not Tailwind CDN.

--primary

Booking CTAs, active states, highlights.

--secondary

Supporting actions, map/contact blocks.

--muted

Section surfaces, disabled states.

--accent

Badges, offers, premium labels.

Ivory Gold

Midnight Azure

Aegean Blue

Olive Stone

Minimal City

Reusable Components

Categories with 3–4 production components each

Every component has variants, normalized props, desktop/mobile behavior, and shadcn primitive mapping.

01 Navigation & Shell

HotelHeaderNavigationMenu

Logo

RoomsDiningGallery

variants: transparent, solid, compact. props: logo, navItems, bookingUrl, languages.

MobileHotelHeaderSheet

M☰

mobile menu open/close, focus trap, overlay states.

LanguageSwitcherDropdown

ENELDEFR

variants: inline, dropdown, flags. props: locales, activeLocale, href map.

BreadcrumbsLink

Home / Rooms / Azure Suite

SEO-friendly hierarchy for internal pages.

02 Hotel Content & Cards

HotelHero

A sanctuary by the sea

variants: fullscreen, split, editorial, video.

RoomCard

Executive Suite

props: title, image, price, amenities, cta.

45m²Sea View

FacilityCard

✦

Wellness Spa

icon/image variants, hover/selected states, grid/list layouts.

SectionIntro

Experience

Quiet luxury, reusable copy block

eyebrow, heading, copy, CTA slots.

03 Booking, Forms & Conversion

BookingWidgetForm + Select

Check-in12 Jul

Check-out19 Jul

Guests2 Adults

states: default, loading, error, disabled. mobile stacks vertically.

BookingCTA

Sticky and inline CTA variants.

ContactForm

FormField States

04 Media, Location & Trust

GalleryGrid

Dialog + Carousel lightbox.

LocationBlock

Map / POIs

address, transfer times, nearby places.

TestimonialCard

“Beautiful, fast, consistent hotel experience.”

Guest Review

StatsBlock + SEOShareCard

42Rooms

5★Rating

24/7Desk

Page compositions

Reusable pages, not one-off layouts

Homepage

HotelHeader → HotelHero → BookingWidget → SectionIntro → RoomCard grid → FacilityCard grid → Footer

Rooms Listing

Breadcrumbs → Filters → RoomCard list/grid → BookingCTA → SEOShareCard

Single Room

GalleryGrid → Room details → Amenities → BookingWidget → Related rooms

Services

SectionIntro → FacilityCard categories → CTA → testimonial

Gallery

Tabs → GalleryGrid → Dialog lightbox → Carousel navigation

Contact

LocationBlock → ContactForm → Contact cards → Footer

Governance

Production rules

packages/ui/src/components/domain/hotel/ HotelHeader.tsx HotelHero.tsx RoomCard.tsx BookingWidget.tsx GalleryGrid.tsx HotelFooter.tsx packages/ui/src/themes/hotel/ ivory-gold.ts midnight-azure.ts aegean-blue.ts apps/web consumes UI kit + theme config + CMS data

✓ No Tailwind CDN in production Next.js.
✓ No hardcoded colors inside reusable components.
✓ Use shadcn primitives + CVA variants.
✓ WordPress/HotelierCMS stores data only.
✓ Next.js owns layout/design and normalized props.
✓ Themes change CSS variables, not markup.
✓ Any one-off layout must be promoted back to the kit.