Getting Started
Templates
Components
import {
TestimonialsMap,
type TestimonialData,
} from "@/components/ui/testimonials-map"
const testimonials: TestimonialData[] = [
{
id: 1,
image: "/images/users/user-01.jpg",
name: "Sarah M.",
testimonial: "The components are beautifully crafted.",
country: 1, // USA
},
{
id: 2,
image: "/images/users/user-02.jpg",
name: "James W.",
testimonial: "Exceptional quality and attention to detail.",
country: 20, // UK
},
// ...
]
export default function Page() {
return (
<TestimonialsMap
testimonials={testimonials}
badge="Global Community"
title="Trusted worldwide"
description="Join thousands of developers building with us"
/>
)
}Use numeric country IDs when providing testimonial data. Here are some common examples:
| Region | Country | ID |
|---|---|---|
| North America | USA | 1 |
| North America | Canada | 2 |
| North America | Mexico | 3 |
| Europe | UK | 20 |
| Europe | Germany | 21 |
| Europe | France | 22 |
| Asia | China | 50 |
| Asia | India | 51 |
| Asia | Japan | 52 |
| Oceania | Australia | 70 |
See the full list in types/testimonials-config.ts.
TestimonialsMap| Prop | Type | Default | Description |
|---|---|---|---|
testimonials | TestimonialData[] | [] | Array of testimonial data with country IDs |
emptyBoxImage | string | undefined | Fallback image for empty boxes |
boxSize | number | 22 | Size of each image box in pixels |
gap | number | 2 | Gap between boxes in pixels |
scale | number | 1 | Overall scale multiplier for the map |
opacityRange | [number, number] | [0.5, 0.9] | Opacity range for filled boxes |
emptyBoxOpacity | number | 0.3 | Opacity for empty/gray boxes |
delayRange | [number, number] | [0, 1.2] | Animation delay range in seconds |
badge | string | "Testimonials" | Section badge text |
title | string | "Trusted by thousands" | Section title |
description | string | "Join the community..." | Section description |
showTooltips | boolean | true | Whether to show tooltips on hover |
className | string | "" | Custom class for the section |
grayscale | boolean | true | Grayscale filter for images |
imageOpacity | number | 0.75 | Image opacity for filled boxes |
showEmptyBoxes | boolean | true | Show empty boxes as gray placeholders |
TestimonialData| Prop | Type | Default | Description |
|---|---|---|---|
id | string | number | — | Unique identifier for the testimonial |
image | string | — | Path to the person's image |
name | string | — | Person's name |
testimonial | string | undefined | Optional testimonial text |
country | CountryId | — | Country ID (see list above) |