ListingCard

Pricing

About

Unwind in luxury at this exclusive beachfront retreat with panoramic ocean views, private infinity pool, and direct beach access.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds ListingCard to your project and fits it to your theme.

Code

How ListingCard is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { PropertyCard } from "@/components/ui/listing-card";

export default function DemoOne() {
  const handleExploreClick = () => {
    alert("Explore Now button clicked!");
  };

  return  <div className="flex min-h-screen items-center justify-center bg-background p-4 dark:bg-slate-950">
      <PropertyCard
        imageUrl="https://cdn.21st.dev/assets/mirror/76/76282dae77addf1a48ebb35621c2e806016b6e2f30f1d26e145a8785168f4dae.jpg"
        imageAlt="Beachfront paradise with palm trees and crystal clear water"
        title="Tropical Beach House"
        price={299}
        pricePeriod="per day"
        description="Discover your perfect getaway in this stunning beachfront property featuring private beach access, infinity pool, and spectacular sunset views."
        stats={[
          { label: "Availability", value: "7+" },
          { label: "Reviews", value: "4.8" },
        ]}
        actionLabel="Explore Now"
        onActionClick={handleExploreClick}
      />
    </div>
}