Browse the library
Components / Feedback
Review marquee
ProTwo rows of customer review cards scrolling in opposite directions with soft faded edges.
View as Markdownlucide-react
Source included with Facade Pro
You get the full TypeScript source (177 lines), installed straight into your project, yours to edit.
Unlock for $149app/page.tsx
"use client";
import { Star } from "lucide-react";
import { ReviewMarquee, type Review } from "@/components/facade/review-marquee";
const reviews: Review[] = [
{
name: "Jessica Morales",
city: "Round Rock, TX",
rating: 5,
source: "Google",
date: "2 weeks ago",
text: "Our AC died in the middle of July and they had a tech at our door in under two hours. Honest quote, no upsell, and he cleaned up after himself. These are our HVAC people for life.",
},
{
name: "Derek Chen",
city: "Cedar Park, TX",
rating: 5,
source: "Yelp",
date: "1 month ago",
text: "Got three quotes for a new heat pump and theirs was the most transparent by far. Install crew was on time, finished in a day, and walked me through the thermostat app.",
},
{
name: "Brittany Walker",
city: "Austin, TX",
rating: 5,
source: "Google",
date: "3 days ago",
text: "Booked online Sunday night, got a text confirmation instantly, and Marcus showed up Monday at 8 sharp. Found a cracked flex duct the last company missed for two years.",
},
{
name: "Tom Hargrove",
city: "Pflugerville, TX",
rating: 4,
source: "Google",
date: "1 month ago",
text: "Solid work on our furnace tune-up. Scheduling took a couple of days during the cold snap, but the service itself was thorough and fairly priced.",
},
{
name: "Aisha Robinson",
city: "Georgetown, TX",
rating: 5,
source: "Yelp",
date: "2 months ago",
text: "They explained everything like I was a neighbor, not a sales lead. The maintenance plan has already paid for itself with the priority scheduling alone.",
},
{
name: "Ryan O'Connell",
city: "Lakeway, TX",
rating: 5,
source: "Google",
date: "5 days ago",
text: "Second time using them. Fast, clean, and they actually answer the phone. Our electric bill dropped about $60 a month after the new system went in.",
},
{
name: "Maria Gutierrez",
city: "Austin, TX",
rating: 5,
source: "Facebook",
date: "3 weeks ago",
text: "Called at 9 PM about a gas smell near the furnace. They walked me through shutting it off over the phone and were here first thing in the morning. Real professionals.",
},
{
name: "Kevin Brooks",
city: "Leander, TX",
rating: 5,
source: "Google",
date: "1 week ago",
text: "Financing was simple, install was spotless, and the whole house is finally the same temperature upstairs and down. Wish we had called them years ago.",
},
];
export default function Demo() {
return (
<section className="w-full py-8">
<div className="mx-auto mb-8 flex max-w-2xl flex-col items-center px-4 text-center">
<span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1 text-xs text-muted-foreground">
<Star className="size-3.5 fill-warning text-warning" aria-hidden />
<span className="font-mono font-semibold text-foreground">4.9</span> from 1,284 reviews
</span>
<h2 className="mt-4 font-display text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
Central Texas trusts Lone Star Air
</h2>
<p className="mt-2 text-sm text-muted-foreground">
Real reviews from homeowners across Austin, Round Rock and the Hill Country.
</p>
</div>
<ReviewMarquee reviews={reviews} />
</section>
);
}Installation
$
npx shadcn@latest add @facade/review-marqueePro items install from the private @facade registry with your license key. Set it up once.
Usage
import { ReviewCard } from "@/components/facade/review-marquee";
export default function Page() {
return <ReviewCard />;
}Props
ReviewCardProps is exported, so you can extend or wrap it. Every prop has a default; <ReviewCard /> renders the example above.
| Prop | Type | Description |
|---|---|---|
| reviews* | Review[] | |
| duration | number | Seconds for one full loop of a row. |
| pauseOnHover | boolean | Pause scrolling while hovered. |
| rows | 1 | 2 | Number of rows (1 or 2). Row two scrolls in reverse. |
| className | string |
* required
Ask your agent
With the Facade MCP server connected, this prompt is enough:
Add the Facade review marquee to this page and adapt the copy to our business.