Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Product Card Hotel
Hotel booking card with amenities, offers, and availability for React travel sites
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Display hotel listings on your Next.js travel booking site with this horizontal product card component. Features hotel image with favorite button, location with distance, star rating with review count, amenities list, special offers, room availability, and pricing with booking buttons. Built with shadcn/ui Card, Button, and Badge components using Tailwind CSS. The booking-focused design drives conversions—perfect for Shopify headless hotel aggregators, travel agencies, or any React app with accommodation listings. Responsive and feature-rich.
Product Card
Top-ratedGrand Azure Hotel & Spa
386 reviews
Contemporary hotel with elegant rooms, rooftop restaurant, and panoramic city views.
Limited availability
Only 3 rooms at this price
AMENITIES
OFFERS
per night
Installation
Related blocks you will also like
React Product Card Travel
Travel package card
React Product Card Horizontal
Side-by-side layout
React Product Card Features
With feature list
React Product Card Sale
With discount pricing
React Product Card Reviews
With quick reviews
React Product Card Grid
Product grid layout