Componentdata0.73 KB gzipZero dependencies

Wall Of Love

Masonry testimonial grid.

Preview

Live Preview

Fastest gate entry we have ever run.

Mara V · Venue lead

The stubs look unreal on paper.

Jon K · Promoter

Scanning never missed a beat.

Priya S · Box office

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add wall-of-love

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { WallOfLove } from "@/components/ui/wall-of-love";

<WallOfLove />

Usage guidance

Use Wall Of Love when a ticket stub surface needs Masonry testimonial grid. Keep props minimal and prefer composition with sibling stubs.

Avoid Wall Of Love for long form flows or dense data grids where a dedicated layout block fits better.

Source code

wall-of-love.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface LoveNote {
  quote: string;
  name: string;
  role?: string;
}

export interface WallOfLoveProps extends React.HTMLAttributes<HTMLDivElement> {
  notes?: LoveNote[];
}

/** Wall of love: masonry testimonial grid with stamp accents. */
export function WallOfLove({
  notes = [
    { quote: "Fastest gate entry we have ever run.", name: "Mara V", role: "Venue lead" },
    { quote: "The stubs look unreal on paper.", name: "Jon K", role: "Promoter" },
    { quote: "Scanning never missed a beat.", name: "Priya S", role: "Box office" },
  ],
  className,
  ...props
}: WallOfLoveProps) {
  return (
    <div className={cn("grid w-full max-w-2xl grid-cols-1 gap-2 sm:grid-cols-3", className)} {...props}>
      {notes.map((n, i) => (
        <figure
          key={i}
          className={cn("rounded-lg border-2 bg-card p-4", i === 0 ? "border-accent" : "border-foreground")}
        >
          <span aria-hidden="true" className="font-mono text-lg text-accent">★</span>
          <blockquote className="mt-1 text-xs leading-relaxed">{n.quote}</blockquote>
          <figcaption className="mt-3 border-t border-dashed border-border pt-2 font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
            {n.name}{n.role ? ` · ${n.role}` : ""}
          </figcaption>
        </figure>
      ))}
    </div>
  );
}