Getting Started
Templates
Components
| - |
| Array of property slides to display |
priceLabel | string | "Night" | Label shown after the price (e.g., "Night", "Month") |
className | string | - | Additional CSS classes for the card container |
| Property | Type | Description |
|---|---|---|
id | string | Optional unique identifier for the slide |
image | string | URL of the property image |
title | string | Property title/name |
address | string | Property address |
rating | number | Property rating (e.g., 4.8) |
reviews | number | Number of reviews |
bedrooms | number | Number of bedrooms |
bathrooms | number | Number of bathrooms |
sqft | number | Square footage of the property |
prefers-reduced-motion preferenceimport { DisplayCard } from "@/components/ui/display-card"
const slides = [
{
id: "property-1",
image: "https://example.com/image.jpg",
title: "Lakeshore Villa",
address: "123 Lake St, California",
rating: 4.8,
reviews: 20,
bedrooms: 3,
bathrooms: 2,
sqft: 2500,
},
]
export default function Example() {
return <DisplayCard pricePerNight={199} slides={slides} />
}