Testimonials

The Testimonials component provides you with customer testimonials and reviews.

Live Examples

Live Example

☀️

Copy

View Code

import { Testimonials } from '@jarllyng/nostromo' export default function TestimonialsExample() { return ( <Testimonials title="What Our Customers Say" testimonials={[ { id: 't2', content: "Nostromo UI has transformed our development workflow. The components are beautiful and easy to use.",...

Live Example

☀️

Copy

View Code

import { Testimonials } from '@jarllyng/nostromo' export default function TestimonialsCardsExample() { return ( <Testimonials title="Customer Reviews" cardVariant="accent" columns={2} testimonials={[ {...

Live Example

☀️

Copy

View Code

import { Testimonials } from '@jarllyng/nostromo' export default function TestimonialsMinimalExample() { return ( <Testimonials title="What People Say" variant="muted" columns={1} testimonials={[ {...

Import


import { Testimonials } from "@jarllyng/nostromo";
// or
import { Testimonials } from "@jarllyng/nostromo/testimonials";

Usage


import { Testimonials } from "@jarllyng/nostromo";
 
export default function Example() {
  return (
    <Testimonials
      title="What Our Customers Say"
      testimonials={[
        {
          id: "t1",
          content: "Great product!",
          name: "John Doe",
          role: "Developer",
        },
      ]}
    />
  );
}

Code Examples

Props

Prop	Type	Default	Required	Description
`testimonials`	`Testimonial[]`	-	Yes	Array of testimonials (see Testimonial interface below)
`title`	`string`	`undefined`	No	Section title
`subtitle`	`string`	`undefined`	No	Section subtitle
`columns`	`1 \| 2 \| 3 \| 4`	`3`	No	Number of columns in grid
`variant`	`"default" \| "cards" \| "minimal"`	`"default"`	No	Visual variant
`cardVariant`	`"default" \| "outline" \| "filled"`	`"default"`	No	Card variant (when using cards variant)
`showRatings`	`boolean`	`false`	No	Whether to show star ratings
`className`	`string`	`undefined`	No	Additional CSS classes

Testimonial Interface


interface Testimonial {
  content: string;
  author: string;
  role: string;
  company?: string;
  avatar?: string;
  rating?: number;
}