Skip to main content
Clever Ops

Testimonial Interview

Editorial Q&A testimonial, mono interviewer questions over one customer's long-form answers, closed by a monogram byline. An interview-excerpt block for React and Tailwind.

Preview & code

Loading Testimonial Interview preview

Installation

pnpm dlx shadcn@latest add @cleverui/testimonial-interview

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { TestimonialInterview } from '@/components/blocks/testimonial-interview'
Exampletsx
import { TestimonialInterview } from '@/components/blocks/testimonial-interview'

export default function TestimonialInterviewDemo() {
  return (
    <div className="mx-auto max-w-6xl">
      <TestimonialInterview
        eyebrow="In conversation"
        heading="Four questions with the team that switched mid-quarter"
        exchanges={[
          {
            question: 'What broke first?',
            answer:
              'Our on-call rotation lived in three Slack channels and a shared spreadsheet. When a sev-1 hit at 2 a.m., we spent the first twenty minutes just finding who owned the service graph.',
          },
          {
            question: 'Why Fieldline, and why then?',
            answer:
              'We evaluated two larger platforms and Fieldline. Fieldline won because runbooks wired to the same graph as our services, every page lands with context already open. We cut over in week three of Q2, mid-sprint, with zero freeze window.',
          },
          {
            question: 'What changed on the floor?',
            answer:
              'Median escalation time dropped from forty-two minutes to under nine. In the first quarter we closed seventy-one of seventy-four severity-one tickets inside the SLO window. The heroics stopped; the quiet fixes shipped.',
          },
          {
            question: 'Would you do it again?',
            answer:
              'Yes, and sooner. The team stopped living in ad-hoc threads and started treating incident response like a product surface. Nights got boring, which is exactly what we wanted.',
          },
        ]}
        author="Elena Vasquez"
        jobTitle="Head of Platform"
        company="Fieldline"
      />
    </div>
  )
}

API reference

TestimonialInterview accepts the following props.

PropTypeDefaultDescription
eyebrowstring'In conversation'
heading*stringsection heading, e.g. 'Four questions with the team that switched mid-quarter'
exchanges*TestimonialInterviewExchange[]3-5 question/answer pairs in interview order
author*string
jobTitlestring
companystring

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx
export interface TestimonialInterviewExchange {
  question: string
  answer: string
}

Frequently asked questions

How do I install the Testimonial Interview component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/testimonial-interview`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Testimonial Interview require?

Testimonial Interview uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Testimonial Interview to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services