Testimonials

blockmarketing

Testimonial section set covering the full proof spectrum: a featured pull quote, a logo-and-quote row, a verified masonry grid, social-post cards, a counter-scrolling marquee, a case-study carousel with telemetry KPIs, and an ROI workbench with filters and autoplay.

Installation

$pnpm dlx uipkge-ng@latest add testimonial

$npx uipkge-ng@latest add testimonial

$yarn dlx uipkge-ng@latest add testimonial

$bunx uipkge-ng@latest add testimonial

Manifest:https://uipkge.dev/r/angular/testimonial.jsonInstalls to:src/app/components/blocks/testimonial/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

LogoQuote

interface LogoQuote {
  wordmark: string
  quote: string
  author: string
  role: string
  initials: string
}

MarqueeQuote

interface MarqueeQuote {
  quote: string
  author: string
  role: string
  initials: string
}

VerifiedTestimonial

interface VerifiedTestimonial {
  id: string
  name: string
  role: string
  roleCategory: 'frontend' | 'founder' | 'design-eng'
  company: string
  avatar: string
  handle: string
  verifiedSource: 'Twitter' | 'GitHub' | 'LinkedIn'
  quote: string
  metricBadge?: string
  starCount: number
}

CaseStudyKpi

interface CaseStudyKpi {
  label: string
  value: string
  delta: string
}

CaseStudy

interface CaseStudy {
  id: string
  company: string
  industry: string
  quote: string
  authorName: string
  authorRole: string
  avatar: string
  kpis: CaseStudyKpi[]
  architectureSummary: string
}

SocialPost

interface SocialPost {
  name: string
  handle: string
  initials: string
  when: string
  body: string
  replies: number
  reposts: number
  likes: number
}

WorkbenchTestimonial

interface WorkbenchTestimonial {
  id: string
  name: string
  role: string
  company: string
  industry: Exclude<TestimonialsIndustry, 'all'>
  initials: string
  avatarBg: string
  quote: string
  subquote: string
  rating: number
  verifiedBadge: string
  metrics: { label: string; value: string; trend: string }[]
  stack: string[]
}

npm dependencies

lucide-angular

Includes

avatar badge button card separator

Files installed (8)

src/app/components/blocks/testimonial/testimonial-logo-quote-row.component.ts3.1 kB

// Three inline logo-and-quote pairs with compact attribution — the lightweight
// proof row for pages that cannot spare a full testimonial section.
// Port of the React block 1:1.
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { cn } from '@/lib/utils'
import { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'
import { UiSeparatorComponent } from '@/ui/separator/separator.component'

interface LogoQuote {
  wordmark: string
  quote: string
  author: string
  role: string
  initials: string
}

// One sentence each. The row is a proof band, not a testimonial section — if a
// quote needs two sentences it belongs in a card layout instead.
const quotes: LogoQuote[] = [
  {
    wordmark: 'Northwind',
    quote: 'Close starts from a reconciled position now, which it never did before.',
    author: 'Erin Walsh',
    role: 'VP Finance',
    initials: 'EW',
  },
  {
    wordmark: 'Halden',
    quote: 'Clinic leads answer their own questions without filing a ticket.',
    author: 'Daniel Brooks',
    role: 'Head of Analytics',
    initials: 'DB',
  },
  {
    wordmark: 'Verity',
    quote: 'Sales and finance forecast off one definition, so review is about the plan.',
    author: 'Priya Raman',
    role: 'RevOps Director',
    initials: 'PR',
  },
]

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-testimonial-logo-quote-row, [ui-testimonial-logo-quote-row]',
  standalone: true,
  host: { '[attr.class]': '"contents"' },
  imports: [UiAvatarComponent, UiAvatarFallbackComponent, UiSeparatorComponent],
  template: `
    <section data-slot="testimonial-logo-quote-row" [class]="rootClass">
      <div class="mx-auto max-w-6xl px-6 py-16">
        <div class="grid gap-8 md:grid-cols-3 md:gap-10">
          @for (entry of quotes; track entry.wordmark; let i = $index) {
            <figure class="relative">
              <span class="text-sm font-semibold tracking-[0.18em] uppercase">{{ entry.wordmark }}</span>
              <blockquote class="mt-4 text-sm leading-relaxed text-pretty">“{{ entry.quote }}”</blockquote>
              <figcaption class="mt-5 flex items-center gap-3">
                <ui-avatar class="size-8">
                  <ui-avatar-fallback class="text-xs">{{ entry.initials }}</ui-avatar-fallback>
                </ui-avatar>
                <div class="min-w-0">
                  <p class="truncate text-xs font-medium">{{ entry.author }}</p>
                  <p class="text-muted-foreground truncate text-xs">{{ entry.role }}</p>
                </div>
              </figcaption>

              <!-- Vertical rules between columns only, so the row reads as one band. -->
              @if (i < quotes.length - 1) {
                <div ui-separator orientation="vertical" class="absolute top-0 -right-5 hidden h-full md:block"></div>
              }
            </figure>
          }
        </div>
      </div>
    </section>
  `,
})
export class UiTestimonialLogoQuoteRowComponent {
  @Input('class') className?: string

  protected readonly quotes = quotes

  get rootClass(): string {
    return cn('bg-background', this.className)
  }
}

src/app/components/blocks/testimonial/testimonial-marquee-scroll.component.ts5 kB

src/app/components/blocks/testimonial/testimonial-masonry-verified-grid.component.ts9.5 kB

src/app/components/blocks/testimonial/testimonial-quote-carousel-telemetry.component.ts10.6 kB

src/app/components/blocks/testimonial/testimonial-single-featured.component.ts3.1 kB

src/app/components/blocks/testimonial/testimonial-social-cards.component.ts5.9 kB

src/app/components/blocks/testimonial/testimonials-01.component.ts16.7 kB

src/app/components/blocks/testimonial/index.ts0.8 kB

Raw manifest:https://uipkge.dev/r/angular/testimonial.json

Change language