Componentdata

Quote Wall

Masonry quote wall built on Quote cards.

Preview

Live Preview

An outstanding experience.
Ada

Installation

Tokens guide →

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

npx bigbullui add quote-wall

Or install the full npm package:

npm install bigbullui

Usage

import { QuoteWall } from "@/components/ui/quote-wall";

<QuoteWall />

Source code

quote-wall.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";
import { Quote } from "./quote";

export interface QuoteWallEntry {
  id: string;
  quote: string;
  author: string;
}

export interface QuoteWallProps extends React.HTMLAttributes<HTMLDivElement> {
  quotes: QuoteWallEntry[];
  columns?: 2 | 3;
}

/** Alıntı duvarı: masonry alıntı kartları. */
export function QuoteWall({ quotes, columns = 2, className, ...props }: QuoteWallProps) {
  const colClass = { 2: "sm:columns-2", 3: "sm:columns-3" }[columns];
  return (
    <div className={cn("columns-1 gap-4 space-y-4", colClass, className)} {...props}>
      {quotes.map((q, idx) => (
        <div key={q.id} className="break-inside-avoid" style={{ animationDelay: `${(idx % 8) * 70}ms` }}>
          <div className="animate-[fade-in-up_0.35s_ease-out_both] motion-reduce:animate-none">
            <Quote author={q.author} className="w-full">
              {q.quote}
            </Quote>
          </div>
        </div>
      ))}
    </div>
  );
}

Props

Prop	Type	Description
quotes	QuoteWallEntry[]
columns	2 \| 3