This Username Testimonial Displays user testimonials with profile images, usernames, feedback text, and a link to their social media.
import { Testimonials } from "@/components/ui/testimonials"
const testimonials = [
{
image: 'https://cdn.21st.dev/assets/mirror/6b/6ba5674f5c5b523d73342d575c82e6767da8e7b9fc6ffddac67c93dd17d171c7.jpg',
text: 'I\'m blown away by the versatility of the components in this library. They make UI development a breeze!',
name: 'Alice Johnson',
username: '@alicejohnson',
social: 'https://cdn.21st.dev/assets/mirror/e2/e20d29a4ec6ad526b0b572d78558029c0a494e0f5bd1b91d8ebaaa9fd01638ab.png'
},
{
image: 'https://cdn.21st.dev/assets/mirror/96/963e50ecc6cf18af6b26d8fea02b46170b4fca3be4034fa2759910801e229af0.jpg',
text: 'Using this component library has significantly speed up our development process. The quality and ease of integration are remarkable!',
name: 'David Smith',
username: '@davidsmith',
social: 'https://cdn.21st.dev/assets/mirror/e2/e20d29a4ec6ad526b0b572d78558029c0a494e0f5bd1b91d8ebaaa9fd01638ab.png'
},
{
image: 'https://cdn.21st.dev/assets/mirror/59/5916c8ec6785e9aadd1fe8d448f898aa79b6f7fc2bede1bfb384fc9799ffc8b6.jpg',
text: 'The components in this library are not just well-designed but also highly customizable. It\'s a developer\'s dream!',
name: 'Emma Brown',
username: '@emmabrown',
social: 'https://cdn.21st.dev/assets/mirror/e2/e20d29a4ec6ad526b0b572d78558029c0a494e0f5bd1b91d8ebaaa9fd01638ab.png'
},
{
image: 'https://cdn.21st.dev/assets/mirror/1f/1f0c25822815519609c90690c62b4749e9276c892ead100aff5bbd18b5d12b65.png',
text: 'I love how intuitive and well-documented this component library is. It has significantly improved our UI consistency across projects.',
name: 'James Wilson',
username: '@jameswilson',
social: 'https://cdn.21st.dev/assets/mirror/e2/e20d29a4ec6ad526b0b572d78558029c0a494e0f5bd1b91d8ebaaa9fd01638ab.png'
},
{
image: 'https://cdn.21st.dev/assets/mirror/3c/3c5ae9980bc2afd1574a4ae0c6c8ed7b1decb8b9ae96f784cebcc62d8016ecf8.png',
text: 'Implementing this component library was a game-changer for our team. It has elevated our product\'s UI to a whole new level!',
name: 'Sophia Lee',
username: '@sophialee',
social: 'https://cdn.21st.dev/assets/mirror/e2/e20d29a4ec6ad526b0b572d78558029c0a494e0f5bd1b91d8ebaaa9fd01638ab.png'
},
{
image: 'https://cdn.21st.dev/assets/mirror/21/21ab629f11104fa4fa99b9d52214b0418ccb6010848ed70a53bd48d89726c05c.png',
text: 'Using this library has been a game-changer for our product development.',
name: 'Michael Davis',
username: '@michaeldavis',
social: 'https://cdn.21st.dev/assets/mirror/e2/e20d29a4ec6ad526b0b572d78558029c0a494e0f5bd1b91d8ebaaa9fd01638ab.png'
},
{
image: 'https://cdn.21st.dev/assets/mirror/be/be1a01cb0cbb13871e4ba2ab80597c1929b2647d62e47096bae474aa963839cb.png',
text: 'The components are highly responsive and work seamlessly across different devices and screen sizes.',
name: 'Emily Chen',
username: '@emilychen',
social: 'https://cdn.21st.dev/assets/mirror/e2/e20d29a4ec6ad526b0b572d78558029c0a494e0f5bd1b91d8ebaaa9fd01638ab.png'
},
{
image: 'https://cdn.21st.dev/assets/mirror/39/3993d03d5b8ec438a515c8c95227f778f1a73dec1feb6dab844f95e3eed4df0b.png',
text: 'I love how easy it is to customize the components to fit our brand\'s style. The design is clean and modern.',
name: 'Robert Lee',
username: '@robertlee',
social: 'https://cdn.21st.dev/assets/mirror/e2/e20d29a4ec6ad526b0b572d78558029c0a494e0f5bd1b91d8ebaaa9fd01638ab.png'
},
{
image: 'https://cdn.21st.dev/assets/mirror/cb/cb56ea48f0d4a1be9ca7c05115ac3c3334ce7cc96d7099c52d516d3b1d90a29a.png',
text: 'This library has saved us a significant amount of time and effort. The components are well-documented and easy to integrate.',
name: 'Sarah Taylor',
username: '@sarahtaylor',
social: 'https://cdn.21st.dev/assets/mirror/e2/e20d29a4ec6ad526b0b572d78558029c0a494e0f5bd1b91d8ebaaa9fd01638ab.png'
},
{
image: 'https://cdn.21st.dev/assets/mirror/88/88711bb97885e5cd42043252e9794fd7c288af5ec22832c937800c3128d22a75.png',
text: 'I appreciate the attention to detail in the design. The components are visually appealing and professional.',
name: 'Kevin White',
username: '@kevinwhite',
social: 'https://cdn.21st.dev/assets/mirror/e2/e20d29a4ec6ad526b0b572d78558029c0a494e0f5bd1b91d8ebaaa9fd01638ab.png'
},
{
image: 'https://cdn.21st.dev/assets/mirror/fc/fce7007b43984ced06fa041741d110b3455d5783236c4820c5341bbec0b43808.png',
text: 'The components are highly customizable and can be easily integrated with our existing UI framework.',
name: 'Rachel Patel',
username: '@rachelpatel',
social: 'https://cdn.21st.dev/assets/mirror/e2/e20d29a4ec6ad526b0b572d78558029c0a494e0f5bd1b91d8ebaaa9fd01638ab.png'
},
{
image: 'https://cdn.21st.dev/assets/mirror/95/95e6f3588dfe6fb9aca6a9d39f1d0ce8654966c672f1871ad0951d92aa643054.png',
text: 'I love how the components are designed to be highly responsive and work well across different screen sizes.',
name: 'Brian Kim',
username: '@briankim',
social: 'https://cdn.21st.dev/assets/mirror/e2/e20d29a4ec6ad526b0b572d78558029c0a494e0f5bd1b91d8ebaaa9fd01638ab.png'
}
];
export function TestimonialsDemo() {
return (
<div className="container py-10">
<Testimonials testimonials={testimonials} />
</div>
)
}Part of Serenity UI — browse the full library on 21st.dev.