Package Exports

testimo-react
testimo-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (testimo-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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: "john@example.com
",
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: "sarah@example.com
",
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: "alex@example.com
",
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	`-`