View Kit

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.

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.

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.