Component

Testimonial

Render quotes with author metadata, avatar fallback, size, and surface variants.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Testimonial } from "@chitrank2050/monoline-ui/testimonial"

Basic usage

<Testimonial
  size="md"
  variant="default"
  quote="The system feels considered without getting in the way."
  author="Sam Carter"
  role="Staff Engineer"
  initials="SC"
/>

<Testimonial.Grid>
  <Testimonial quote="Short and direct." author="Sam Carter" initials="SC" />
  <Testimonial quote="Longer quote copy can breathe without forcing every other card into the same height." author="Riya Mehta" initials="RM" />
</Testimonial.Grid>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Testimonial presents an attributed customer or collaborator quote with an optional portrait and role.

Avoid when

The quote has no attribution or belongs directly in the surrounding article prose.

Accessibility

Testimonial uses figure, blockquote, and figcaption semantics. Its quotation mark is decorative, and an identifying portrait needs avatarAlt.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

sizesm | md | lgTestimonial scale

variantdefault | plainQuote mark or compact card treatment

quoteReactNodeQuoted body copy

authorReactNodePerson name

roleReactNode?Supporting role or context

initialsstring?Avatar fallback initials

avatarSrcstring?Optional avatar image

Testimonial.Gridcompound layoutMasonry grid: 1 column mobile, 2 tablet, 3 desktop

Design tokens

Theme variables this component reads for color, spacing, and motion.

--surfaceCSS varCard background

--borderCSS varCard outline

--accentCSS varQuote mark colour

Implementation

The source used by the example above, including any state it needs.

import { Testimonial } from "@chitrank2050/monoline-ui/testimonial"

export function Quote() {
  return (
    <Testimonial.Grid>
      <Testimonial
        variant="default"
        quote="Dense, editorial, and still easy to ship."
        author="Riya Mehta"
        role="Founder"
        initials="RM"
      />
      <Testimonial
        variant="default"
        quote="The layout handles longer quotes without stretching every card in the row."
        author="Sam Carter"
        role="Staff Engineer"
        initials="SC"
      />
    </Testimonial.Grid>
  )
}

Compare related components or review the package and theme setup.

01ComponentAvatarComponent · ReferenceReference→02ComponentPull QuoteComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview