A rating summary with a star distribution beside two columns of review cards that drift slowly in opposite directions and pause on hover.
Juniper Bakehouse · Reviews
Based on 1,386 reviews
The cardamom morning bun is the best thing I have eaten this year. Flaky, sticky, not too sweet. I now walk ten blocks out of my way every Saturday.
Morning bun and flat whiteGets busy after ten, so come early. Sourdough toast with whipped butter is simple and perfect.
Weekend brunchThey catered our office breakfast for forty people. Everything arrived warm, labelled for allergies, and the pastries disappeared in minutes.
Catering orderAs a celiac I rarely get to enjoy a bakery. They have a dedicated gluten-free shelf and the almond cake is incredible.
Gluten-free optionsOrdered a birthday cake two days out and they still made it happen. Lemon and elderflower, perfectly moist, and the piping was gorgeous.
We found this place on our first morning in town and came back every day of the trip. The staff remembered our order by day three.
Their rye is the real deal. Dense, tangy, keeps for days. Worth the early alarm to get one before they sell out.
Great coffee, lovely window seats and very friendly baristas. Wish they stayed open a little later on weekdays.
npx shadcn@latest add https://hyperblur.dev/r/local-reviews-wall.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/local-reviews-wall.tsx.
import { LocalReviewsWall } from "@/components/hyperblur/local-reviews-wall"
<LocalReviewsWall rating={4.8} total={642} speed={0.8} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Juniper Bakehouse · Reviews" | Small line above the heading. |
| title | string | "Loved by the whole neighbourhood." | Heading. |
| rating | number | 4.9 | Average rating shown large. |
| total | number | 1386 | Number of reviews under the score. |
| distribution | [number, number, number, number, number] | [1201, 142, 28, 9, 6] | Review counts from five stars down to one. |
| reviews | { name: string; rating: number; text: string; source: string; date: string; detail?: string }[] | 8 reviews | Cards split across the two drifting columns. |
| sources | { name: string; rating: string; color: string }[] | Google, Yelp, Tripadvisor | Source pills. A review badge takes the color of its matching source. |
| cta | { label: string; href: string } | { label: "Order for pickup", href: "#order" } | Button under the summary. |
| speed | number | 1 | Drift speed multiplier. |
| accent | string | "#e2a03f" | Accent color used for highlights, selected states and buttons. |
| className | string | Extra classes on the section root. | |
| style | React.CSSProperties | Inline styles on the section root. |