Listing card

Editorial real-estate listing card. All data comes from props. The ready state shows the localized property type, title, location, price, and the first four features. The loading state is a skeleton without links or invented listing data.

Ready

From a 40rem container width, the photograph and the text sit side by side.

House

Atelier Maris

41 Passage des Glycines, 13260 Cassis

€1,860,000.00 for sale

Bedrooms 4
Bathrooms 3
Living area 186 m²
Plot 920 m²

View this listing

Ready, narrow container

The same listing below a 40rem container width. The card stacks.

House

Atelier Maris

41 Passage des Glycines, 13260 Cassis

€1,860,000.00 for sale

Bedrooms 4
Bathrooms 3
Living area 186 m²
Plot 920 m²

View this listing

Loading

A skeleton without a title, price, photograph, or link.

Properties

Category: Listing card
Access: Free
Design: Modern luxury real estate
Layout: Container-responsive article: stacked below a 40rem container width and horizontal from 40rem. The image area keeps a 4:3 ratio.
React: >=18.2 <20
Tailwind: >=4
Rendering: Server-capable function component. No client directive.

Installation

pnpm dlx shadcn@latest add shadcnestate/registry/listing-card-01

MIT license. This installs listing-card-01 into your own project.

Component reference

Example

The wide preview written as React. The photograph is a local demo asset, and this is not an install command.

import { ListingCard } from "@components/listing-card-01";

export function ListingPreview() {
	return (
		<ListingCard
			title={"Atelier Maris"}
			headingLevel={3}
			image={{
				src: "/images/blocks/atelier-maris.svg",
				alt: "Illustrated garden front of the fictional villa Atelier Maris",
				width: 1600,
				height: 1200,
			}}
			location={{
				formattedLocation: "41 Passage des Glycines, 13260 Cassis",
			}}
			price={{
				amount: "1860000",
				currency: "EUR",
				period: "sale",
				locale: "en-US",
			}}
			propertyType={{
				label: "House",
				code: "house",
			}}
			features={[
				{ id: "bedrooms", label: "Bedrooms", value: "4" },
				{ id: "bathrooms", label: "Bathrooms", value: "3" },
				{ id: "living-area", label: "Living area", value: "186 m²" },
				{ id: "plot", label: "Plot", value: "920 m²" },
			]}
			cta={{
				href: "#atelier-maris",
				label: "View this listing",
			}}
			labels={{
				imageFallback: "Photograph unavailable",
				priceFallback: "Price on request",
				loading: "Loading listing",
				periods: {
					sale: "for sale",
					month: "per month",
					week: "per week",
					night: "per night",
					year: "per year",
				},
			}}
		/>
	);
}