Project Title

A brief description of what this project does and who it's for

Testimo React

A modern, customizable testimonial collection and display component library for SaaS apps, built with React, Tailwind CSS, and ShadCN UI.
Easily integrate video testimonials, customer feedback, and social proof into your product.

🔗 Website: testimo-love.vercel.app

🚀 Features

• 🎥 Video + text testimonials support
• 🎨 Styled with Tailwind CSS and ShadCN UI
• ⚡ Multiple layouts: Masonry, Scroll, Carousel, List
• 🧩 Theming support: Light, Dark, Gradient, Minimal
• 🔗 Fetch testimonials dynamically using a collection ID
• 📱 Responsive and mobile-friendly

⚠️ Important Notes

• This package is designed only for React and Next.js applications.
• To use this library:
  1. Go to testimo-love.vercel.app
  2. Create an account
  3. Go to your Dashboard
  4. Create a Collection
  5. Share that collection with your users and copy its Collection ID
  6. Use this collectionId in your project to fetch and display testimonials

Installation

npm install testimo-react@latest
# or
yarn add testimo-react@latest
# or
pnpm add testimo-react@latest

Usage // with testimo-love collection id

import {testimonials} from "testimo-react"

<testimonials
  collectionId="collectionId"
  theme="light"
  variant="masonry"
/>

Usage // with manual data

import {testimonials, DATA_TYPE} from "testimo-react"

const testimonialsData: DATA_TYPE[] = [
{
content: "This library made embedding testimonials super easy 🚀",
giverName: "John Doe",
giverImage: "https://example.com/john.jpg
",
type: "TEXT",
stars: 5,
email: "[email protected]
",
role: "Product Manager",
company: "TechCorp",
socialLink: "https://linkedin.com/in/johndoe
",
videoUrl: undefined
},
{
content: "The carousel layout looks amazing on our landing page ✨",
giverName: "Sarah Lee",
giverImage: "https://example.com/sarah.jpg
",
type: "VIDEO",
stars: 4,
email: "[email protected]
",
role: "Marketing Lead",
company: "CreativeHub",
socialLink: "https://twitter.com/sarahlee
",
videoUrl: "https://youtube.com/watch?v=abcd1234
"
},
{
content: "Clean, minimal, and customizable — exactly what I needed ❤️",
giverName: "Alex Smith",
giverImage: "https://example.com/alex.jpg
",
type: "TEXT",
stars: 5,
email: "[email protected]
",
role: "Software Engineer",
company: "DevSolutions",
socialLink: "https://github.com/alexsmith
",
videoUrl: undefined
}
];

<testimonials
  data={testimonialsData}
  theme="light"
  variant="masonry"
/>

⚠️ Note: you wil get collectionIdfrom https://testimo-love.vercel.app/dashboard

⚠️ Passing collectionId or data will control which testimonials are shown (if both are passed, data takes priority.).

Props

| Prop | Type | Description | Default | |---------------|----------------------------------------------------------------------|--------------------------------------------------|------------ | collectionId| string | Fetch testimonials dynamically from Testimo Cloud | -| |data | DataType[] | Pass an array of testimonials manually|- | theme | "light" \| "dark" \| "gradient \| "minimal" |UI theme style | "light" | | variant | "masonry" \| "scroll" \| "carousel" \| "list" | Layout style for testimonials | "masonry" | | className | string | Custom CSS classes for wrapper | -|