{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "reviews-1", "title": "Reviews 1: customer reviews", "author": "Ballmac ", "description": "Customer reviews: an average with a bar for each star count that also filters, sorting, a verified-only switch, review cards with Read more, helpful votes that count at once and business replies. All figures are worked out from the reviews.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/cover-art.json", "https://ui.ballmac.com/r/select.json", "https://ui.ballmac.com/r/skeleton.json", "https://ui.ballmac.com/r/state-view.json" ], "files": [ { "path": "registry/ballmac/components/blocks/reviews-1/reviews-1.tsx", "content": "// Ballmac UI: Reviews 1. https://ui.ballmac.com/blocks/reviews-1\n\"use client\"\n\nimport * as React from \"react\"\nimport { BadgeCheck, ChevronDown, MessageSquareText, PenLine, Star, ThumbsUp, X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ballmac/button\"\nimport { CoverArt } from \"@/components/ballmac/cover-art\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ballmac/select\"\nimport { Skeleton } from \"@/components/ballmac/skeleton\"\nimport { frameProps, StateView, type StateProps } from \"@/components/ballmac/state-view\"\nimport { cn } from \"@/lib/utils\"\n\ntype Reviews1Review = {\n id: string\n author: string\n /** 1 to 5. */\n rating: number\n title?: string\n body: string\n /** \"14 October 2026\", already written for people. */\n date: string\n /** ISO date, used to sort by newest. */\n iso: string\n verified?: boolean\n helpful?: number\n /** A short fact about them or their use, such as \"Team of 12\" or \"Runs a bakery\". */\n context?: string\n /** A reply from the business. */\n reply?: { from: string; body: string; date: string }\n}\n\ntype Reviews1Props = Omit, \"title\" | \"onSelect\"> &\n StateProps & {\n reviews?: Reviews1Review[]\n title?: string\n /** Called by Write a review. Leave out to hide the button. */\n onWrite?: () => void\n /** Called when someone marks a review helpful (true) or takes it back (false). */\n onHelpful?: (review: Reviews1Review, helpful: boolean) => void\n }\n\nconst sample: Reviews1Review[] = [\n { id: \"r1\", author: \"Hannah Brooks\", rating: 5, title: \"Replaced three tools with one\", body: \"We moved our whole studio over in a weekend. The part I did not expect is how calm everything feels now: one place to look, and nothing falls through the cracks. Support answered a question I had on a Sunday evening, which sold me.\", date: \"14 October 2026\", iso: \"2026-10-14\", verified: true, helpful: 42, context: \"Design studio, team of 9\", reply: { from: \"Acme team\", body: \"Thank you Hannah. That Sunday answer was Sam, who will be very pleased to read this.\", date: \"15 October 2026\" } },\n { id: \"r2\", author: \"Marcus Webb\", rating: 4, title: \"Great, with one wish\", body: \"Fast, clear and hardly any learning curve. I would love to see recurring tasks with more control over the schedule. Everything else is just what we needed.\", date: \"9 October 2026\", iso: \"2026-10-09\", verified: true, helpful: 18, context: \"Agency, team of 24\" },\n { id: \"r3\", author: \"Elif Demir\", rating: 5, title: \"Our clients noticed\", body: \"Clients now see progress without asking for an update. It has changed how our weekly calls go: shorter and much friendlier.\", date: \"2 October 2026\", iso: \"2026-10-02\", verified: true, helpful: 31, context: \"Consultancy, team of 6\" },\n { id: \"r4\", author: \"Tom Alvarez\", rating: 3, title: \"Good, but slow on big projects\", body: \"The basics are lovely. Once a project passed a few thousand tasks it started to lag, and the mobile app is behind the web one. Hopeful, since the team replies to everything.\", date: \"28 September 2026\", iso: \"2026-09-28\", verified: false, helpful: 12, context: \"Operations, team of 40\", reply: { from: \"Acme team\", body: \"Fair points. Large projects are our focus this quarter, and the mobile update ships next month.\", date: \"29 September 2026\" } },\n { id: \"r5\", author: \"Aisha Rahman\", rating: 5, body: \"Easily the nicest tool our team uses. We stopped dreading Mondays.\", date: \"21 September 2026\", iso: \"2026-09-21\", verified: true, helpful: 9, context: \"Startup, team of 14\" },\n { id: \"r6\", author: \"Jonas Keller\", rating: 2, title: \"Import lost our history\", body: \"Moving from our old tool dropped comments and attachments. Support helped fix most of it, but it cost us two days.\", date: \"15 September 2026\", iso: \"2026-09-15\", verified: true, helpful: 25, context: \"Software, team of 31\", reply: { from: \"Acme team\", body: \"We are sorry, Jonas. Comment import is fixed as of last week, and we have written a checklist so it does not happen again.\", date: \"16 September 2026\" } },\n { id: \"r7\", author: \"Priya Nair\", rating: 4, title: \"Worth it\", body: \"Pays for itself in meetings we no longer need. Wish the free plan allowed a few more projects.\", date: \"8 September 2026\", iso: \"2026-09-08\", verified: false, helpful: 6, context: \"Freelancer\" },\n { id: \"r8\", author: \"Lucas Moreau\", rating: 5, title: \"Simple and sturdy\", body: \"I have used a lot of these. This one is the first that my less technical colleagues picked up without a walkthrough.\", date: \"1 September 2026\", iso: \"2026-09-01\", verified: true, helpful: 14, context: \"Marketing, team of 11\" },\n]\n\nfunction Stars({ value, size = \"size-4\", className }: { value: number; size?: string; className?: string }) {\n return (\n \n \n {[0, 1, 2, 3, 4].map((i) => (\n \n ))}\n \n \n {[0, 1, 2, 3, 4].map((i) => (\n \n ))}\n \n \n )\n}\n\nfunction Skel() {\n return (\n
\n \n
\n {[0, 1, 2].map((i) => (\n
\n \n \n \n
\n ))}\n
\n
\n )\n}\n\n/**\n * Customer reviews: a summary with the average and a bar for each star count that also filters, sorting, a verified-only switch, review cards with\n * Read more, helpful votes that count straight away and a business reply. The average and every bar are worked out from the reviews you pass.\n */\nfunction Reviews1({ reviews = sample, title = \"What customers say\", onWrite, onHelpful, state = \"ready\", onRetry, emptyState, errorState, className, ...props }: Reviews1Props) {\n const id = React.useId()\n const list = state === \"empty\" ? [] : reviews\n const [star, setStar] = React.useState(null)\n const [verified, setVerified] = React.useState(false)\n const [sort, setSort] = React.useState(\"helpful\")\n const [open, setOpen] = React.useState>(new Set())\n const [voted, setVoted] = React.useState>(new Set())\n const [limit, setLimit] = React.useState(4)\n\n const total = list.length\n const avg = total ? list.reduce((n, r) => n + r.rating, 0) / total : 0\n const dist = [5, 4, 3, 2, 1].map((s) => ({ s, n: list.filter((r) => r.rating === s).length }))\n const recommend = total ? Math.round((100 * list.filter((r) => r.rating >= 4).length) / total) : 0\n const shown = list\n .filter((r) => (!star || r.rating === star) && (!verified || r.verified))\n .sort((a, b) => (sort === \"newest\" ? b.iso.localeCompare(a.iso) : sort === \"high\" ? b.rating - a.rating || (b.helpful ?? 0) - (a.helpful ?? 0) : sort === \"low\" ? a.rating - b.rating || (b.helpful ?? 0) - (a.helpful ?? 0) : (b.helpful ?? 0) - (a.helpful ?? 0)))\n const visible = shown.slice(0, limit)\n\n const toggle = (set: Set, k: string) => {\n const n = new Set(set)\n if (n.has(k)) n.delete(k)\n else n.add(k)\n return n\n }\n\n const content = !total ? (\n
\n \n \n \n

{emptyState?.title ?? \"No reviews yet\"}

\n

{emptyState?.description ?? \"Be the first to share what it is like.\"}

\n {emptyState?.action ?? (onWrite ? (\n \n ) : null)}\n
\n ) : (\n
\n \n\n
\n
\n \n {star ? (\n \n ) : null}\n
\n \n
\n
\n

\n Showing {visible.length} of {shown.length} {shown.length === 1 ? \"review\" : \"reviews\"}\n

\n\n {shown.length ? (\n
    \n {visible.map((r) => {\n const long = r.body.length > 220\n const expanded = open.has(r.id)\n const mine = voted.has(r.id)\n return (\n
  • \n
    \n
    \n \n \n {r.author.split(\" \").map((w) => w[0]).join(\"\").slice(0, 2)}\n \n
    \n

    \n \n {r.author}\n \n {r.verified ? (\n \n \n Verified customer\n \n ) : null}\n

    \n {r.context ?

    {r.context}

    : null}\n
    \n

    {r.date}

    \n
    \n

    \n \n {r.rating} out of 5 stars\n {r.title ? {r.title} : null}\n

    \n

    {r.body}

    \n {long ? (\n \n ) : null}\n {r.reply ? (\n
    \n

    \n {r.reply.from} replied · {r.reply.date}\n

    \n

    {r.reply.body}

    \n
    \n ) : null}\n
    \n {\n setVoted(toggle(voted, r.id))\n onHelpful?.(r, !mine)\n }}\n >\n \n Helpful · {(r.helpful ?? 0) + (mine ? 1 : 0)}\n \n
    \n
    \n
    • \n )\n })}\n
\n ) : (\n
\n

No reviews match

\n

Try another star count, or include customers who are not verified.

\n {\n setStar(null)\n setVerified(false)\n }}\n >\n Clear filters\n \n
\n )}\n {shown.length > limit ? (\n
\n \n
\n ) : null}\n
\n
\n )\n\n return (\n
\n

\n {title}\n

\n } error={{ title: errorState?.title ?? \"Reviews could not be loaded\", description: errorState?.description ?? \"Check your connection and try again.\", ...errorState }}>\n {content}\n \n
\n )\n}\n\nexport { Reviews1, type Reviews1Props, type Reviews1Review }\n", "type": "registry:component", "target": "@components/ballmac/blocks/reviews-1/reviews-1.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "reviews", "ratings", "stars", "customer feedback", "testimonials", "social proof", "verified", "product reviews" ], "version": "1.0.0", "updated": "2026-10-18", "tests": true, "ai": { "summary": "Customer reviews. ...} />. The average, the bar for each star count and the percentage of 4 and 5 stars are worked out from the reviews. Clicking a bar filters by that star count.", "whenToUse": [ "A product or service page with customer reviews", "A reviews section under pricing or a store listing" ], "whenNotToUse": [ "A few hand-picked quotes (use testimonials-1 or testimonials-2)", "A customer story with results (use casestudy-1)" ], "composesWith": [ "testimonials-1", "pricing-1", "faq-1", "cta-1" ], "a11y": [ { "keys": "Tab", "action": "Star-count buttons (each says its count and whether it is on), the verified switch, sort menu, then per review Read more and Helpful" }, { "keys": "Stars", "action": "Drawn stars are hidden from assistive technology and replaced by '4 out of 5 stars' in text" }, { "keys": "Count", "action": "'Showing 4 of 8 reviews' is announced politely as filters change" } ], "customization": [ "Sort options: most helpful, newest, highest and lowest rated", "Read more appears for bodies over about 220 characters", "A business reply sits under its review with a rule on the reading edge, so it mirrors in right-to-left" ] }, "states": [ { "id": "loading", "title": "Loading", "example": "reviews-1-loading", "trigger": "state=\"loading\"", "note": "A skeleton summary and review cards under the real heading, announced as loading." }, { "id": "empty", "title": "No reviews yet", "example": "reviews-1-empty", "trigger": "state=\"empty\" (or reviews={[]})", "note": "Invites the first review, with a Write a review button when onWrite is given. Filters with no match say so in place." }, { "id": "error", "title": "Could not load", "example": "reviews-1-error", "trigger": "state=\"error\"", "note": "An alert with Try again (onRetry)." } ], "examples": [ "reviews-1-demo", "reviews-1-loading", "reviews-1-empty", "reviews-1-error" ], "url": "https://ui.ballmac.com/components/reviews-1" }, "categories": [ "blocks", "reviews" ], "type": "registry:block" }