Componentdata

Quote

Blockquote with dashed left frame, stamp entrance and mono uppercase cite line.

Preview

Live Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Jane Doe
Founder

Installation

Tokens guide →

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

npx bigbullui add quote

Or install the full npm package:

npm install bigbullui

Usage

import { Quote } from "@/components/ui/quote";

<Quote cite="Jane Doe" author="Founder">Best stub we ever printed.</Quote>

Source code

quote.tsx

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

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

export interface QuoteProps {
  className?: string;
  children?: React.ReactNode;
  cite?: string;
  author?: string;
}

export function Quote({
  className,
  children,
  cite,
  author,
}: QuoteProps) {
  const citeClasses = "mt-2 text-sm font-mono text-uppercase text-muted-foreground";

  return (
    <blockquote
      className={cn(
        "border-l-2 border-dashed border-border/60 pl-4 my-2",
        "motion-reduce:transition-none",
        "animate-[stamp_0.4s_ease-out_both]",
        className
      )}
    >
      <p className="text-lg line-clamp-3">
        {children}
      </p>
      <div className="mt-3">
        {cite && (
          <cite className={cn(citeClasses, "block")}>
            {cite}
          </cite>
        )}
        {author && (
          <p className={citeClasses}>
            {author}
          </p>
        )}
      </div>
    </blockquote>
  );
}
/* Decorative quote mark stamp is implied by the stamp animation on mount */
/* The oversized decorative quote mark can be rendered via absolute-positioned pseudo-element if desired */

Props

Prop	Type	Description
children	React.ReactNode	Quote body text.
cite	string	Citation source line.
author	string	Attribution author line.