Components
Loading preview...
Hotel Card A visually polished card component to display property information, including an image, name, location, and rating. It is fully responsive and animated on hover.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/cardimport { HotelCard } from "@/components/ui/card"; // Adjust the import path
export default function HotelCardDemo() {
return (
<div className="flex w-full items-center justify-center bg-background p-8">
<div className="w-full max-w-3xl">
<HotelCard
href="#" // Making the card a clickable link
imageUrl="https://images.unsplash.com/photo-1582719508461-905c673771fd?q=80&w=1925&auto=format&fit=crop"
imageAlt="Luxury hotel room with a pool view"
roomType="Deluxe Room"
hotelName="Sao Pulo Hotel"
location="Ubud, Bali, Indonesia"
rating={4.9}
reviewCount={1092}
/>
</div>
</div>
);
}