Componentdata0.54 KB gzipZero dependencies

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

Open in StackBlitz

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

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

Usage guidance

Use Quote when a ticket stub surface needs Blockquote with dashed left frame, stamp entrance and mono uppercase cite line. Keep props minimal and prefer composition with sibling stubs.

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

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 ps-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
className?	string
children?	React.ReactNode
cite?	string
author?	string