The Testimonial component is designed to highlight customer feedback or reviews in a visually appealing format. It’s ideal for landing pages, product showcases, and case studies to build trust and credibility.

• Variants: Can be contained, outlined, or other custom styles.
• Content: Includes customer name, role, avatar, rating, and comment.
• AutoScroll: Supports automatic scrolling for multiple testimonials.
• Flexible layout: Works horizontally or vertically with fading transitions.

Usage Example

Preview

Chloe K.
Marketing Lead

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate deserunt ullam, architecto libero quo accusamus? Facere deserunt natus quibusdam libero expedita magni a! Necessitatibus dicta odio quo qui esse porro?

Chloe K.
Marketing Lead

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate deserunt ullam, architecto libero quo accusamus? Facere deserunt natus quibusdam libero expedita magni a! Necessitatibus dicta odio quo qui esse porro?

Liam R.
Product Manager

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Ethan W.
Software Engineer

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A

Ava T.
Data Analyst

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Code

<script lang="ts">
  import { AutoScroll, Testimonial } from "@fefade-ui/svelte"

  const reviews = [
    {
      name: "Chloe K.",
      role: "Marketing Lead",
      avatarUrl: "https://randomuser.me/api/portraits/women/65.jpg",
      rating: 3.5,
      comment:
        "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate deserunt ullam, architecto libero quo accusamus? Facere deserunt natus quibusdam libero expedita magni a! Necessitatibus dicta odio quo qui esse porro?"
    },
    {
      name: "Liam R.",
      role: "Product Manager",
      avatarUrl: "https://randomuser.me/api/portraits/men/32.jpg",
      rating: 4.0,
      comment:
        "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?"
    },
    {
      name: "Sophia M.",
      role: "UX Designer",
      rating: 5.0,
      comment:
        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    },
    {
      name: "Ethan W.",
      role: "Software Engineer",
      avatarUrl: "https://randomuser.me/api/portraits/men/44.jpg",
      rating: 2.5,
      comment:
        "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    },
    {
      name: "Ava T.",
      role: "Data Analyst",
      rating: 4.5,
      comment:
        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam."
    }
  ]
</script>

<Testimonial variant="contained" {...reviews[0]} />

<div style="display: flex; gap: 1rem;">
  <AutoScroll fade direction="top" maxHeight={500}>
    {#each reviews.slice(0, 2) as review, i (i)}
      <Testimonial variant="contained" {...review} />
    {/each}
  </AutoScroll>

  <AutoScroll fade direction="bottom" maxHeight={500}>
    {#each reviews.slice(3, reviews.length) as review, i (i)}
      <Testimonial {...review} />
    {/each}
  </AutoScroll>
</div>

Props

Prop	Type	Default	Description
name	string	—	Customer or reviewer name.
role	string	—	Optional role or position of the reviewer.
avatarUrl	string	—	Optional URL for the reviewer’s avatar image.
rating	number	—	Rating score, e.g., 4.5.
comment	string	—	Feedback or testimonial text.
variant	"contained" | "outlined"	"contained"	Visual style of the testimonial card.

AutoScroll Props

Prop	Type	Default	Description
fade	boolean	false	Apply fade animation when scrolling.
direction	"top" | "bottom"	"top"	Scroll direction of content.
maxHeight	number	300	Maximum height for the scrollable container.

Notes

• Multiple testimonials can be auto-scrolled using AutoScroll.
• Supports avatars, ratings, and custom content inside each testimonial card.
• Can be combined with transitions to create smooth, interactive displays.