# Highlighted Quote

> A large pull quote with author name and star rating that features a happy customer. Drop it near pricing to back your claims with real social proof.

A shadcn/ui block from the [@shadcn-ui-blocks](https://www.shadcn-ui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-ui-blocks/ecommerce-ecommerce-trust-guarantee-highlighted-quote).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-ui-blocks/ecommerce-ecommerce-trust-guarantee-highlighted-quote
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-ui-blocks/ecommerce-ecommerce-trust-guarantee-highlighted-quote-light-4bce3413602f9153.png
- Registry item: https://www.shadcn-ui-blocks.com/r/ecommerce-ecommerce-trust-guarantee-highlighted-quote.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.shadcn-ui-blocks.com/r/ecommerce-ecommerce-trust-guarantee-highlighted-quote.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`

## Files

### `components/blocks/ecommerce/ecommerce-trust-guarantee/highlighted-quote.tsx`

```tsx
import { Quote } from "lucide-react";

interface TrustGuaranteeHighlightedQuoteProps {
  quote: string;
  author?: string;
  role?: string;
}

export default function TrustGuaranteeHighlightedQuote({
  quote = "We stand behind every order — or your money back.",
  author,
  role,
}: TrustGuaranteeHighlightedQuoteProps) {
  return (
    <section className="px-4 py-8 md:py-12">
      <div className="mx-auto max-w-4xl text-center">
        <div className="relative">
          {/* Quote Icon */}
          <Quote className="text-muted-foreground/40 mx-auto mb-6 h-8 w-8" />

          {/* Main Quote */}
          <blockquote className="text-foreground text-2xl leading-relaxed font-medium sm:text-3xl lg:text-4xl">
            &quot;{quote}&quot;
          </blockquote>

          {/* Author Attribution */}
          {(author || role) && (
            <footer className="mt-8">
              <div className="text-muted-foreground flex items-center justify-center gap-2 text-sm">
                {author && (
                  <cite className="text-foreground font-medium not-italic">
                    {author}
                  </cite>
                )}
                {author && role && (
                  <span className="text-muted-foreground">•</span>
                )}
                {role && <span>{role}</span>}
              </div>
            </footer>
          )}
        </div>
      </div>
    </section>
  );
}
```