# World Testimonials Globe – Social Proof Hero Section

> World Testimonials Globe – Social Proof Hero Section for React and Tailwind CSS (shadcn/ui): customer reviews pinned to a spinning 3D globe, with a review card for the city facing the front. It is built to show social proof at a glance: real customer locations, faces and star ratings on one world map. Use it for landing page heroes, pricing trust blocks and customer stories. Reviews are round photo pins that fade as they roll behind the globe. Hover a pin to feature its review, click or press Enter to turn that city to the front and pause, or drag to spin with momentum. Autoplay visits each customer in turn. The header counts reviews, average rating and countries from your items, and the featured review is controllable (active, onActiveChange). Pins use roving tabindex, the card is a polite live region, reduced motion stops spin and autoplay, light and dark follow your tokens, and a 2D fallback runs without WebGL. The included demo shows ten fictional customers in real cities and makes no requests beyond image loads. Requires React and cobe, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Testimonials, Social Proof, Globe, Hero, Hero Section
- npm dependencies: cobe
- Live preview: https://21st.dev/@dhxwhy/components/testimonial-globe

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/testimonial-globe?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/testimonials.md