New development showcase

Pro

Interactive building elevation with clickable, status-coded units, a detail panel and availability counters.

app/page.tsx

import { NewDevelopmentShowcase } from "@/components/facade/new-development-showcase";

export default function Demo() {
  return <NewDevelopmentShowcase />;
}

Installation

$npx shadcn@latest add @facade/new-development-showcase

Pro items install from the private @facade registry with your license key. Set it up once.

Usage

import { NewDevelopmentShowcase } from "@/components/facade/new-development-showcase";

export default function Page() {
  return <NewDevelopmentShowcase />;
}

Props

NewDevelopmentShowcaseProps is exported, so you can extend or wrap it. Every prop has a default; <NewDevelopmentShowcase /> renders the example above.

Props of NewDevelopmentShowcase
Prop	Type	Description
eyebrow	string
projectName	string
location	string
description	string
completion	string
units	DevelopmentUnit[]
defaultUnitId	string
brochureLabel	string
brochureHref	string
tourLabel	string
tourHref	string
onSelectUnit	(unit: DevelopmentUnit) => void
className	string

Ask your agent

With the Facade MCP server connected, this prompt is enough:

Add the Facade new development showcase to this page and adapt the copy to our business.