Components
Loading preview...
Property Card A visually polished card component designed to showcase properties, rentals, or listings. It features a responsive layout, theme support for light and dark modes, and subtle animations on hover and load.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/card-3// demo.tsx
import { PropertyCard } from "@/components/ui/card-3"; // Adjust path as needed
const PropertyCardDemo = () => {
return (
<div className="flex h-full w-full items-center justify-center bg-background p-4">
<PropertyCard
imageUrl="https://images.unsplash.com/photo-1596394516093-501ba68a0ba6?q=80&w=2070&auto=format&fit=crop"
name="La Brisa Vales"
location="Ubud, Bali, Indonesia"
price={980}
rating={4.9}
reviews={1982}
imageAlt="Luxury villa with a pool surrounded by palm trees"
aria-label="View details for La Brisa Vales in Ubud, Bali"
/>
</div>
);
};
export default PropertyCardDemo;