Component

TestimonialGrid

Arrange testimonial cards in aligned grid or masonry layouts without JavaScript measurement.

Usage

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

Import

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

Basic usage

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

<TestimonialGrid variant="grid">
  <Testimonial quote="Short and direct." author="Sam Carter" initials="SC" />
  <Testimonial quote="Longer testimonial copy stretches to align with its row." author="Riya Mehta" initials="RM" />
</TestimonialGrid>

<TestimonialGrid variant="masonry">
  <Testimonial quote="Short and direct." author="Sam Carter" initials="SC" />
  <Testimonial quote="Longer testimonial copy keeps natural height and flows into columns." author="Riya Mehta" initials="RM" />
</TestimonialGrid>

Usage guidance

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

Use when

TestimonialGrid arranges several testimonials in a responsive grid or masonry-style flow.

Avoid when

The cards are unrelated, or their visual order must differ from DOM reading order.

Accessibility

TestimonialGrid is a layout-only div. Keep DOM order logical, and give each child the appropriate testimonial semantics.

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.

childrenReactNodeTestimonial cards or compatible card elements

variantgrid | masonryGrid aligns row heights; masonry preserves natural card heights

alignstart | stretchGrid item alignment; defaults to stretch

classNamestring?Optional class override

Design tokens

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

--ml-testimonial-grid-gapCSS varColumn and row rhythm

--bp-tablet-minCSS varTablet breakpoint reference

--container-lgCSS varRecommended content width

Implementation

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

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

export function Testimonials() {
  return (
    <TestimonialGrid variant="masonry">
      {items.map((item) => (
        <Testimonial key={item.author} variant="plain" {...item} />
      ))}
    </TestimonialGrid>
  )
}

Compare related components or review the package and theme setup.

01ComponentTestimonialComponent · ReferenceReference→02ComponentCardComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview